diff --git a/public/popup.css b/public/popup.css index dcad93b0..2aa096a6 100644 --- a/public/popup.css +++ b/public/popup.css @@ -10,6 +10,18 @@ display: none !important; } +@media only screen and (max-width: 600px) { + #sponsorBlockPopupBody { + width: 100%; + } +} + +#sponsorBlockPopupBody { + margin: auto; + width: 374px; + background: var(--sb-main-bg-color); +} + #sponsorblockPopup { color: var(--sb-main-fg-color); font-family: 'Source Sans Pro', sans-serif; diff --git a/public/popup.html b/public/popup.html index 33119900..1b472959 100644 --- a/public/popup.html +++ b/public/popup.html @@ -2,9 +2,11 @@ __MSG_openPopup__ + + - +
diff --git a/src/content.ts b/src/content.ts index 1e3ba42c..91295952 100644 --- a/src/content.ts +++ b/src/content.ts @@ -293,12 +293,18 @@ async function videoIDChange(id) { if (onMobileYouTube) { // Mobile YouTube workaround const observer = new MutationObserver(handleMobileControlsMutations); + let controlsContainer = null; - observer.observe(document.getElementById("player-control-container"), { - attributes: true, - childList: true, - subtree: true - }); + utils.wait(() => { + controlsContainer = document.getElementById("player-control-container") + return controlsContainer !== null + }).then(() => { + observer.observe(document.getElementById("player-control-container"), { + attributes: true, + childList: true, + subtree: true + }); + }).catch(); } else { utils.wait(getControls).then(createPreviewBar); } @@ -354,18 +360,6 @@ async function videoIDChange(id) { function handleMobileControlsMutations(): void { const mobileYouTubeSelector = ".progress-bar-background"; - updateVisibilityOfPlayerControlsButton().then((createdButtons) => { - if (createdButtons) { - if (sponsorTimesSubmitting != null && sponsorTimesSubmitting.length > 0 && sponsorTimesSubmitting[sponsorTimesSubmitting.length - 1].segment.length >= 2) { - changeStartSponsorButton(true, true); - } else if (sponsorTimesSubmitting != null && sponsorTimesSubmitting.length > 0 && sponsorTimesSubmitting[sponsorTimesSubmitting.length - 1].segment.length < 2) { - changeStartSponsorButton(false, true); - } else { - changeStartSponsorButton(true, false); - } - } - }); - if (previewBar !== null) { if (document.body.contains(previewBar.container)) { updatePreviewBarPositionMobile(document.getElementsByClassName(mobileYouTubeSelector)[0] as HTMLElement); @@ -1133,6 +1127,7 @@ async function updateVisibilityOfPlayerControlsButton(): Promise { if (!sponsorVideoID) return false; const createdButtons = await createButtons(); + if (!createdButtons) return; if (Config.config.hideVideoPlayerControls || onInvidious) { document.getElementById("startSponsorButton").style.display = "none"; @@ -1226,7 +1221,7 @@ function updateSponsorTimesSubmitting(getFromConfig = true) { } async function changeStartSponsorButton(showStartSponsor: boolean, uploadButtonVisible: boolean): Promise { - if(!sponsorVideoID) return false; + if(!sponsorVideoID || onMobileYouTube) return false; //if it isn't visible, there is no data const shouldHide = (uploadButtonVisible && !(Config.config.hideDeleteButtonPlayerControls || onInvidious)) ? "unset" : "none"