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
commit bd12ccb6f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 19 deletions

View file

@ -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;

View file

@ -2,9 +2,11 @@
<title>__MSG_openPopup__</title>
<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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin: auto; width: 374px; background: var(--sb-main-bg-color);">
<body id="sponsorBlockPopupBody">
<div id="sponsorblockPopup" class="sponsorBlockPageBody preload">
<div class="logoText bottomSpace">
<img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">

View file

@ -293,12 +293,18 @@ async function videoIDChange(id) {
if (onMobileYouTube) {
// Mobile YouTube workaround
const observer = new MutationObserver(handleMobileControlsMutations);
let controlsContainer = null;
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<boolean> {
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<boolean> {
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"