Merge pull request #589 from ajayyy/fix-mobile

Fix mobile support
This commit is contained in:
Ajay Ramachandran
2020-12-24 12:32:34 -05:00
committed by GitHub
3 changed files with 28 additions and 19 deletions

View File

@@ -10,6 +10,18 @@
display: none !important; 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 { #sponsorblockPopup {
color: var(--sb-main-fg-color); color: var(--sb-main-fg-color);
font-family: 'Source Sans Pro', sans-serif; font-family: 'Source Sans Pro', sans-serif;

View File

@@ -2,9 +2,11 @@
<title>__MSG_openPopup__</title> <title>__MSG_openPopup__</title>
<link id="sponsorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"> <link id="sponsorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css">
<link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"> <link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body style="margin: auto; width: 374px; background: var(--sb-main-bg-color);"> <body id="sponsorBlockPopupBody">
<div id="sponsorblockPopup" class="sponsorBlockPageBody preload"> <div id="sponsorblockPopup" class="sponsorBlockPageBody preload">
<div class="logoText bottomSpace"> <div class="logoText bottomSpace">
<img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo"> <img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">

View File

@@ -293,12 +293,18 @@ async function videoIDChange(id) {
if (onMobileYouTube) { if (onMobileYouTube) {
// Mobile YouTube workaround // Mobile YouTube workaround
const observer = new MutationObserver(handleMobileControlsMutations); const observer = new MutationObserver(handleMobileControlsMutations);
let controlsContainer = null;
observer.observe(document.getElementById("player-control-container"), { utils.wait(() => {
attributes: true, controlsContainer = document.getElementById("player-control-container")
childList: true, return controlsContainer !== null
subtree: true }).then(() => {
}); observer.observe(document.getElementById("player-control-container"), {
attributes: true,
childList: true,
subtree: true
});
}).catch();
} else { } else {
utils.wait(getControls).then(createPreviewBar); utils.wait(getControls).then(createPreviewBar);
} }
@@ -354,18 +360,6 @@ async function videoIDChange(id) {
function handleMobileControlsMutations(): void { function handleMobileControlsMutations(): void {
const mobileYouTubeSelector = ".progress-bar-background"; 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 (previewBar !== null) {
if (document.body.contains(previewBar.container)) { if (document.body.contains(previewBar.container)) {
updatePreviewBarPositionMobile(document.getElementsByClassName(mobileYouTubeSelector)[0] as HTMLElement); updatePreviewBarPositionMobile(document.getElementsByClassName(mobileYouTubeSelector)[0] as HTMLElement);
@@ -1133,6 +1127,7 @@ async function updateVisibilityOfPlayerControlsButton(): Promise<boolean> {
if (!sponsorVideoID) return false; if (!sponsorVideoID) return false;
const createdButtons = await createButtons(); const createdButtons = await createButtons();
if (!createdButtons) return;
if (Config.config.hideVideoPlayerControls || onInvidious) { if (Config.config.hideVideoPlayerControls || onInvidious) {
document.getElementById("startSponsorButton").style.display = "none"; document.getElementById("startSponsorButton").style.display = "none";
@@ -1226,7 +1221,7 @@ function updateSponsorTimesSubmitting(getFromConfig = true) {
} }
async function changeStartSponsorButton(showStartSponsor: boolean, uploadButtonVisible: boolean): Promise<boolean> { async function changeStartSponsorButton(showStartSponsor: boolean, uploadButtonVisible: boolean): Promise<boolean> {
if(!sponsorVideoID) return false; if(!sponsorVideoID || onMobileYouTube) return false;
//if it isn't visible, there is no data //if it isn't visible, there is no data
const shouldHide = (uploadButtonVisible && !(Config.config.hideDeleteButtonPlayerControls || onInvidious)) ? "unset" : "none" const shouldHide = (uploadButtonVisible && !(Config.config.hideDeleteButtonPlayerControls || onInvidious)) ? "unset" : "none"