Merge pull request #283 from ajayyy/experimental

New skipping mechanism fixes

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
         run: npm run build:chrome
       - uses: actions/upload-artifact@v1
         with:
-          name: Chrome Extension
+          name: ChromeExtension
           path: dist
 
       # Create Firefox artifacts
@@ -29,6 +29,6 @@ jobs:
         run: npm run build:firefox
       - uses: actions/upload-artifact@v1
         with:
-          name: Firefox Extension
+          name: FirefoxExtension
           path: dist
 

README.md

@@ -68,9 +68,9 @@ The result is in `dist`.
 
 # Credit
 
-The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) used to be used.
+The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) previously was used.
 
-Original code from [YTSponsorSkip](https://github.com/OfficialNoob/YTSponsorSkip), but not much of the code is left.
+Originally forked from [YTSponsorSkip](https://github.com/OfficialNoob/YTSponsorSkip), but zero code remains.
 
 Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
 

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "__MSG_Name__",
-    "version": "1.2.13",
+    "version": "1.2.15",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "content_scripts": [{

package.json

@@ -24,16 +24,19 @@
   },
   "scripts": {
     "web-run": "npm run web-run:chrome",
-    "web-run:firefox": "cd dist && web-ext run --start-url https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm",
+    "web-run:firefox": "cd dist && web-ext run --start-url https://addons.mozilla.org/firefox/addon/ublock-origin/",
     "web-run:chrome": "cd dist && web-ext run --start-url https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm -t chromium",
     "build": "npm run build:chrome",
     "build:chrome": "webpack --env.browser=chrome --config webpack/webpack.prod.js",
     "build:firefox": "webpack --env.browser=firefox --config webpack/webpack.prod.js",
+    "build:dev": "npm run build:dev:chrome",
+    "build:dev:chrome": "webpack --env.browser=chrome --config webpack/webpack.dev.js",
+    "build:dev:firefox": "webpack --env.browser=firefox --config webpack/webpack.dev.js",
     "build:watch": "npm run build:watch:chrome",
     "build:watch:chrome": "webpack --env.browser=chrome --config webpack/webpack.dev.js --watch",
     "build:watch:firefox": "webpack --env.browser=firefox --config webpack/webpack.dev.js --watch",
-    "dev": "npm run build && concurrently \"npm run web-run\" \"npm run build:watch\"",
-    "dev:firefox": "npm run build:firefox && concurrently \"npm run web-run:firefox\" \"npm run build:watch:firefox\"",
+    "dev": "npm run build:dev && concurrently \"npm run web-run\" \"npm run build:watch\"",
+    "dev:firefox": "npm run build:dev:firefox && concurrently \"npm run web-run:firefox\" \"npm run build:watch:firefox\"",
     "clean": "rimraf dist",
     "test": "npx jest"
   },

src/content.ts

@@ -15,11 +15,17 @@ utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
 var sponsorDataFound = false;
 var previousVideoID = null;
 //the actual sponsorTimes if loaded and UUIDs associated with them
-var sponsorTimes = null;
+var sponsorTimes: number[][] = null;
 var UUIDs = [];
 //what video id are these sponsors for
 var sponsorVideoID = null;
 
+// Skips are scheduled to ensure precision.
+// Skips are rescheduled every seeked event.
+// Skips are canceled every seeking event
+var currentSkipSchedule: NodeJS.Timeout = null;
+var seekListenerSetUp = false
+
 //these are sponsors that have been downvoted
 var hiddenSponsorTimes = [];
 
@@ -30,6 +36,7 @@ var sponsorSkipped = [];
 var video: HTMLVideoElement;
 
 var onInvidious;
+var onMobileYouTube;
 
 //the video id of the last preview bar update
 var lastPreviewBarUpdate;
@@ -47,7 +54,7 @@ var title;
 var channelWhitelisted = false;
 
 // create preview bar
-var previewBar = null;
+var previewBar: PreviewBar = null;
 
 // When not null, a sponsor is currently being previewed and auto skip should be enabled.
 // This is set to a timeout function when that happens that will reset it after 3 seconds.
@@ -57,10 +64,7 @@ var previewResetter: NodeJS.Timeout = null;
 var controls = null;
 
 // Direct Links after the config is loaded
-utils.wait(() => Config.config !== null).then(() => videoIDChange(getYouTubeVideoID(document.URL)));
-
-//the last time looked at (used to see if this time is in the interval)
-var lastTime = -1;
+utils.wait(() => Config.config !== null, 1000, 1).then(() => videoIDChange(getYouTubeVideoID(document.URL)));
 
 //the amount of times the sponsor lookup has retried
 //this only happens if there is an error
@@ -92,7 +96,8 @@ var skipNoticeContentContainer = () => ({
     v: video,
     reskipSponsorTime,
     hiddenSponsorTimes,
-    updatePreviewBar
+    updatePreviewBar,
+    onMobileYouTube
 });
 
 //get messages from the background script and the popup
@@ -230,9 +235,6 @@ document.onkeydown = function(e: KeyboardEvent){
 }
 
 function resetValues() {
-    //reset last sponsor times
-    lastTime = -1;
-
     //reset sponsor times
     sponsorTimes = null;
     UUIDs = [];
@@ -255,7 +257,7 @@ async function videoIDChange(id) {
     sponsorVideoID = id;
 
     resetValues();
-    
+
 	//id is not valid
     if (!id) return;
 
@@ -278,26 +280,19 @@ async function videoIDChange(id) {
     channelIDPromise.then(() => channelIDPromise.isFulfilled = true).catch(() => channelIDPromise.isRejected  = true);
 
     //setup the preview bar
-    if (previewBar == null) {
-        //create it
-        utils.wait(getControls).then(result => {
-            const progressElementSelectors = [
-                // For YouTube
-                "ytp-progress-bar-container",
-                "no-model cue-range-markers",
-                // For Invidious/VideoJS
-                "vjs-progress-holder"
-            ];
+    if (previewBar === null) {
+        if (onMobileYouTube) {
+            // Mobile YouTube workaround
+            const observer = new MutationObserver(handleMobileControlsMutations);
 
-            for (const selector of progressElementSelectors) {
-                const el = document.getElementsByClassName(selector);
-
-                if (el && el.length && el[0]) {
-                    previewBar = new PreviewBar(el[0]);
-                    break;
-                }
-            }
-        });
+            observer.observe(document.getElementById("player-control-container"), { 
+                attributes: true, 
+                childList: true, 
+                subtree: true 
+            });
+        } else {
+            utils.wait(getControls).then(createPreviewBar);
+        }
     }
 
     //warn them if they had unsubmitted times
@@ -354,15 +349,126 @@ async function videoIDChange(id) {
 				}
 			}
 		});
-	});
+    });
+    
     //see if video controls buttons should be added
     if (!onInvidious) {
         updateVisibilityOfPlayerControlsButton();
     }
 }
 
-function sponsorsLookup(id: string, channelIDPromise?) {
+function handleMobileControlsMutations(): void {
+    let mobileYouTubeSelector = ".progress-bar-background";
+    
+    updateVisibilityOfPlayerControlsButton().then((createdButtons) => {
+        if (createdButtons) {
+            if (sponsorTimesSubmitting != null && sponsorTimesSubmitting.length > 0 && sponsorTimesSubmitting[sponsorTimesSubmitting.length - 1].length >= 2) {
+                changeStartSponsorButton(true, true);
+            } else if (sponsorTimesSubmitting != null && sponsorTimesSubmitting.length > 0 && sponsorTimesSubmitting[sponsorTimesSubmitting.length - 1].length < 2) {
+                changeStartSponsorButton(false, true);
+            } else {
+                changeStartSponsorButton(true, false);
+            }
+        }
+    });
+    
+    if (previewBar !== null) {
+        if (document.body.contains(previewBar.container)) {
+            updatePreviewBarPositionMobile(document.getElementsByClassName(mobileYouTubeSelector)[0]);
 
+            return;
+        } else {
+            // The container does not exist anymore, remove that old preview bar
+            previewBar.remove();
+            previewBar = null;
+        }
+    }
+
+    // Create the preview bar if needed (the function hasn't returned yet)
+    createPreviewBar();
+}
+
+/**
+ * Creates a preview bar on the video
+ */
+function createPreviewBar(): void {
+    if (previewBar !== null) return;
+
+    const progressElementSelectors = [
+        // For mobile YouTube
+        ".progress-bar-background",
+        // For YouTube
+        ".ytp-progress-bar-container",
+        ".no-model.cue-range-markers",
+        // For Invidious/VideoJS
+        ".vjs-progress-holder"
+    ];
+
+    for (const selector of progressElementSelectors) {
+        const el = document.querySelectorAll(selector);
+
+        if (el && el.length && el[0]) {
+            previewBar = new PreviewBar(el[0], onMobileYouTube);
+            
+            updatePreviewBar();
+
+            break;
+        }
+    }
+}
+
+/**
+ * Triggered every time the video duration changes.
+ * This happens when the resolution changes or at random time to clear memory.
+ */
+function durationChangeListener() {
+    updatePreviewBar();
+}
+
+function cancelSponsorSchedule(): void {
+    if (currentSkipSchedule !== null) {
+        clearTimeout(currentSkipSchedule);
+
+        currentSkipSchedule = null;
+    }
+}
+
+/**
+ * 
+ * @param currentTime Optional if you don't want to use the actual current time
+ */
+function startSponsorSchedule(currentTime?: number): void {
+    cancelSponsorSchedule();
+
+    if (Config.config.disableSkipping || channelWhitelisted){
+        return;
+    }
+
+    if (currentTime === undefined) currentTime = video.currentTime;
+
+    let skipInfo = getNextSkipIndex(currentTime);
+
+    if (skipInfo.index === -1) return;
+
+    let skipTime = skipInfo.array[skipInfo.index];
+    let timeUntilSponsor = skipTime[0] - currentTime;
+
+    let skippingFunction = () => {
+        if (video.currentTime >= skipTime[0] && video.currentTime < skipTime[1]) {
+            skipToTime(video, skipInfo.index, skipInfo.array, skipInfo.openNotice);
+        }
+
+        startSponsorSchedule();
+    };
+
+    if (timeUntilSponsor <= 0) {
+        skippingFunction();
+    } else {
+        currentSkipSchedule = setTimeout(skippingFunction, timeUntilSponsor * 1000 * (1 / video.playbackRate));
+    }
+}
+
+function sponsorsLookup(id: string, channelIDPromise?) {
     video = document.querySelector('video') // Youtube video player
     //there is no video here
     if (video == null) {
@@ -374,7 +480,19 @@ function sponsorsLookup(id: string, channelIDPromise?) {
         durationListenerSetUp = true;
 
         //wait until it is loaded
-        video.addEventListener('durationchange', updatePreviewBar);
+        video.addEventListener('durationchange', durationChangeListener);
+    }
+
+    if (!seekListenerSetUp && !Config.config.disableSkipping) {
+        seekListenerSetUp = true;
+
+        video.addEventListener('seeked', () => startSponsorSchedule());
+        video.addEventListener('play', () => startSponsorSchedule());
+        video.addEventListener('ratechange', () => startSponsorSchedule());
+        video.addEventListener('seeking', cancelSponsorSchedule);
+        video.addEventListener('pause', cancelSponsorSchedule);
+
+        startSponsorSchedule();
     }
 
     if (channelIDPromise !== undefined) {
@@ -427,6 +545,29 @@ function sponsorsLookup(id: string, channelIDPromise?) {
                 UUIDs = smallUUIDs;
             }
 
+            // See if there are any zero second sponsors
+            let zeroSecondSponsor = false;
+            for (const time of sponsorTimes) {
+                if (time[0] <= 0) {
+                    zeroSecondSponsor = true;
+                    break;
+                }
+            }
+            if (!zeroSecondSponsor) {
+                for (const time of sponsorTimesSubmitting) {
+                    if (time[0] <= 0) {
+                        zeroSecondSponsor = true;
+                        break;
+                    }
+                }
+            }
+
+            if (zeroSecondSponsor) {
+                startSponsorSchedule(0);
+            } else {
+                startSponsorSchedule();
+            }
+
             // Reset skip save
             sponsorSkipped = [];
 
@@ -474,13 +615,6 @@ function sponsorsLookup(id: string, channelIDPromise?) {
             sponsorLookupRetries++;
         }
     });
-
-    //add the event to run on the videos "ontimeupdate"
-    if (!Config.config.disableSkipping) {
-        video.ontimeupdate = function () { 
-            sponsorCheck();
-        };
-    }
 }
 
 function getYouTubeVideoID(url: string) {
@@ -499,7 +633,9 @@ function getYouTubeVideoID(url: string) {
     // Check if valid hostname
     if (Config.config && Config.config.invidiousInstances.includes(urlObject.host)) {
         onInvidious = true;
-    } else if (!["www.youtube.com", "www.youtube-nocookie.com"].includes(urlObject.host)) {
+    } else if (urlObject.host === "m.youtube.com") {
+        onMobileYouTube = true;
+    } else if (!["m.youtube.com", "www.youtube.com", "www.youtube-nocookie.com"].includes(urlObject.host)) {
         if (!Config.config) {
             // Call this later, in case this is an Invidious tab
             utils.wait(() => Config.config !== null).then(() => videoIDChange(getYouTubeVideoID(url)));
@@ -572,6 +708,15 @@ function getChannelID() {
     channelWhitelisted = false;
 }
 
+/**
+ * This function is required on mobile YouTube and will keep getting called whenever the preview bar disapears
+ */
+function updatePreviewBarPositionMobile(parent: Element) {
+    if (document.getElementById("previewbar") === null) {
+        previewBar.updatePosition(parent);
+    }
+}
+
 function updatePreviewBar() {
     let localSponsorTimes = sponsorTimes;
     if (localSponsorTimes == null) localSponsorTimes = [];
@@ -608,73 +753,59 @@ function whitelistCheck() {
     }
 }
 
-//video skipping
-function sponsorCheck() {
-    if (Config.config.disableSkipping) {
-        // Make sure this isn't called again
-        video.ontimeupdate = null;
-        return;
-    } else if (channelWhitelisted) {
-        return;
-    }
+/**
+ * Returns info about the next upcoming sponsor skip
+ */
+function getNextSkipIndex(currentTime: number): {array: number[][], index: number, openNotice: boolean} {
+    let sponsorStartTimes = getStartTimes(sponsorTimes);
+    let sponsorStartTimesAfterCurrentTime = getStartTimes(sponsorTimes, currentTime, true);
 
-    let skipHappened = false;
+    let minSponsorTimeIndex = sponsorStartTimes.indexOf(Math.min(...sponsorStartTimesAfterCurrentTime));
 
-    if (sponsorTimes != null) {
-        //see if any sponsor start time was just passed
-        for (let i = 0; i < sponsorTimes.length; i++) {
-            //if something was skipped
-            if (checkSponsorTime(sponsorTimes, i, true)) {
-                skipHappened = true;
-                break;
-            }
-        }
-    }
+    let previewSponsorStartTimes = getStartTimes(sponsorTimesSubmitting);
+    let previewSponsorStartTimesAfterCurrentTime = getStartTimes(sponsorTimesSubmitting, currentTime, false);
 
-    if (!skipHappened) {
-        //check for the "preview" sponsors (currently edited by this user)
-        for (let i = 0; i < sponsorTimesSubmitting.length; i++) {
-            //must be a finished sponsor and be valid
-            if (sponsorTimesSubmitting[i].length > 1 && sponsorTimesSubmitting[i][1] > sponsorTimesSubmitting[i][0]) {
-                checkSponsorTime(sponsorTimesSubmitting, i, false);
-            }
-        }
-    }
+    let minPreviewSponsorTimeIndex = previewSponsorStartTimes.indexOf(Math.min(...previewSponsorStartTimesAfterCurrentTime));
 
-    //don't keep track until they are loaded in
-    if (sponsorTimes !== null || sponsorTimesSubmitting.length > 0) {
-        lastTime = video.currentTime;
+    if ((minPreviewSponsorTimeIndex === -1 && minSponsorTimeIndex !== -1) || 
+            sponsorStartTimes[minSponsorTimeIndex] < previewSponsorStartTimes[minPreviewSponsorTimeIndex]) {
+        return {
+            array: sponsorTimes,
+            index: minSponsorTimeIndex,
+            openNotice: true
+        };
+    } else {
+        return {
+            array: sponsorTimesSubmitting,
+            index: minPreviewSponsorTimeIndex,
+            openNotice: false
+        };
     }
 }
 
-function checkSponsorTime(sponsorTimes, index, openNotice): boolean {
-    //this means part of the video was just skipped
-    if (Math.abs(video.currentTime - lastTime) > 1 && lastTime != -1) {
-        //make lastTime as if the video was playing normally
-        lastTime = video.currentTime - 0.0001;
+/**
+ * Gets just the start times from a sponsor times array.
+ * Optionally specify a minimum
+ * 
+ * @param sponsorTimes 
+ * @param minimum
+ * @param hideHiddenSponsors
+ */
+function getStartTimes(sponsorTimes: number[][], minimum?: number, hideHiddenSponsors: boolean = false): number[] {
+    if (sponsorTimes === null) return [];
+
+    let startTimes: number[] = [];
+
+    for (let i = 0; i < sponsorTimes.length; i++) {
+        if ((minimum === undefined || sponsorTimes[i][0] >= minimum) && (!hideHiddenSponsors || !hiddenSponsorTimes.includes(i))) {
+            startTimes.push(sponsorTimes[i][0]);
+        } 
     }
 
-    if (checkIfTimeToSkip(video.currentTime, sponsorTimes[index][0], sponsorTimes[index][1]) && !hiddenSponsorTimes.includes(index)) {
-        //skip it
-        skipToTime(video, index, sponsorTimes, openNotice);
-
-        //something was skipped
-        return true;
-    }
-
-    return false;
+    return startTimes;
 }
 
-function checkIfTimeToSkip(currentVideoTime, startTime, endTime) {
-    //If the sponsor time is in between these times, skip it
-    //Checks if the last time skipped to is not too close to now, to make sure not to get too many
-    //  sponsor times in a row (from one troll)
-    //the last term makes 0 second start times possible only if the video is not setup to start at a different time from zero
-    return (Math.abs(currentVideoTime - startTime) < 3 && startTime >= lastTime && startTime <= currentVideoTime) || 
-                (lastTime == -1 && startTime == 0 && currentVideoTime < endTime)
-}
-
-//skip fromt he start time to the end time for a certain index sponsor time
+//skip from the start time to the end time for a certain index sponsor time
 function skipToTime(v, index, sponsorTimes, openNotice) {
     if (!Config.config.disableAutoSkip || previewResetter !== null) {
         v.currentTime = sponsorTimes[index][1];
@@ -725,16 +856,27 @@ function reskipSponsorTime(UUID) {
     }
 }
 
-function createButton(baseID, title, callback, imageName, isDraggable=false) {
-    if (document.getElementById(baseID + "Button") != null) return;
+function createButton(baseID, title, callback, imageName, isDraggable=false): boolean {
+    if (document.getElementById(baseID + "Button") != null) return false;
 
     // Button HTML
     let newButton = document.createElement("button");
     newButton.draggable = isDraggable;
     newButton.id = baseID + "Button";
-    newButton.className = "ytp-button playerButton";
+    newButton.classList.add("playerButton");
+    if (!onMobileYouTube) {
+        newButton.classList.add("ytp-button");
+    } else {
+        newButton.classList.add("icon-button");
+        newButton.style.padding = "0";
+    }
     newButton.setAttribute("title", chrome.i18n.getMessage(title));
-    newButton.addEventListener("click", callback);
+    newButton.addEventListener("click", (event: Event) => {
+        callback();
+
+        // Prevents the contols from closing when clicked
+        if (onMobileYouTube) event.stopPropagation();
+    });
 
     // Image HTML
     let newButtonImage = document.createElement("img");
@@ -748,40 +890,56 @@ function createButton(baseID, title, callback, imageName, isDraggable=false) {
 
     // Add the button to player
     controls.prepend(newButton);
+
+    return true;
 }
 
-function getControls() {
-    let controls = document.getElementsByClassName("ytp-right-controls");
+function getControls(): HTMLElement | boolean {
+    let controlsSelectors = [
+        // YouTube
+        ".ytp-right-controls",
+        // Mobile YouTube
+        ".player-controls-top",
+        // Invidious/videojs video element's controls element
+        ".vjs-control-bar"
+    ]
 
-    if (!controls || controls.length === 0) {
-        // The invidious video element's controls element
-        controls = document.getElementsByClassName("vjs-control-bar");
-        return (!controls || controls.length === 0) ? false : controls[controls.length - 1];
-    } else {
-        return controls[controls.length - 1];
+    for (const controlsSelector of controlsSelectors) {
+        let controls = document.querySelectorAll(controlsSelector);
+
+        if (controls && controls.length > 0) {
+            return <HTMLElement> controls[controls.length - 1];
+        }
     }
+
+    return false;
 };
 
 //adds all the player controls buttons
-async function createButtons() {
+async function createButtons(): Promise<boolean> {
     let result = await utils.wait(getControls).catch();
 
     //set global controls variable
     controls = result;
 
-    // Add button if does not already exist in html
-    createButton("startSponsor", "sponsorStart", startSponsorClicked, "PlayerStartIconSponsorBlocker256px.png");	  
-    createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker256px.png")
-    createButton("delete", "clearTimes", clearSponsorTimes, "PlayerDeleteIconSponsorBlocker256px.png");
-    createButton("submit", "SubmitTimes", submitSponsorTimes, "PlayerUploadIconSponsorBlocker256px.png");
-}
-//adds or removes the player controls button to what it should be
-async function updateVisibilityOfPlayerControlsButton() {
-    //not on a proper video yet
-    if (!sponsorVideoID) return;
+    let createdButton = false;
+
+    // Add button if does not already exist in html
+    createdButton = createButton("startSponsor", "sponsorStart", startSponsorClicked, "PlayerStartIconSponsorBlocker256px.png") || createdButton;	  
+    createdButton = createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker256px.png") || createdButton;
+    createdButton = createButton("delete", "clearTimes", clearSponsorTimes, "PlayerDeleteIconSponsorBlocker256px.png") || createdButton;
+    createdButton = createButton("submit", "SubmitTimes", submitSponsorTimes, "PlayerUploadIconSponsorBlocker256px.png") || createdButton;
+
+    return createdButton;
+}
+
+//adds or removes the player controls button to what it should be
+async function updateVisibilityOfPlayerControlsButton(): Promise<boolean> {
+    //not on a proper video yet
+    if (!sponsorVideoID) return false;
+
+    let createdButtons = await createButtons();
 
-    await createButtons();
-	
     if (Config.config.hideVideoPlayerControls || onInvidious) {
         document.getElementById("startSponsorButton").style.display = "none";
         document.getElementById("submitButton").style.display = "none";
@@ -799,6 +957,8 @@ async function updateVisibilityOfPlayerControlsButton() {
     if (Config.config.hideDeleteButtonPlayerControls || onInvidious) {
         document.getElementById("deleteButton").style.display = "none";
     }
+
+    return createdButtons;
 }
 
 function startSponsorClicked() {
@@ -831,22 +991,17 @@ function updateSponsorTimesSubmitting() {
                 sponsorTimesSubmitting = sponsorTimes;
 
                 updatePreviewBar();
+
+                // Restart skipping schedule
+                startSponsorSchedule();
             }
         }
     });
 }
 
-//is the submit button on the player loaded yet
-function isSubmitButtonLoaded() {
-    return document.getElementById("submitButton") !== null;
-}
-
 async function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
     if(!sponsorVideoID) return false;
     
-    //make sure submit button is loaded
-    await utils.wait(isSubmitButtonLoaded);
-    
     //if it isn't visible, there is no data
     let shouldHide = (uploadButtonVisible && !(Config.config.hideDeleteButtonPlayerControls || onInvidious)) ? "unset" : "none"
     document.getElementById("deleteButton").style.display = shouldHide;

src/js-components/previewBar.ts

@@ -23,18 +23,30 @@ let barTypes = {
 class PreviewBar {
 	container: HTMLUListElement;
 	parent: any;
+	onMobileYouTube: boolean;
 
-	constructor(parent) {
+	constructor(parent, onMobileYouTube) {
 		this.container = document.createElement('ul');
 		this.container.id = 'previewbar';
 		this.parent = parent;
 
-		this.updatePosition();
+		this.onMobileYouTube = onMobileYouTube;
+
+		this.updatePosition(parent);
 	}
 
-	updatePosition() {
+	updatePosition(parent) {
 		//below the seek bar
 		// this.parent.insertAdjacentElement("afterEnd", this.container);
+
+		this.parent = parent;
+
+		if (this.onMobileYouTube) {
+			parent.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+			parent.style.opacity = "1";
+			
+			this.container.style.transform = "none";
+		}
 		
 		//on the seek bar
 		this.parent.insertAdjacentElement("afterBegin", this.container);
@@ -70,7 +82,7 @@ class PreviewBar {
 			bar.setAttribute('data-vs-segment-type', types[i]);
 
 			bar.style.backgroundColor = barTypes[types[i]].color;
-			bar.style.opacity = barTypes[types[i]].opacity;
+			if (!this.onMobileYouTube) bar.style.opacity = barTypes[types[i]].opacity;
 			bar.style.width = width + '%';
 			bar.style.left = (timestamps[i][0] / duration * 100) + "%";
 			bar.style.position = "absolute"

src/js-components/skipNotice.ts

@@ -56,6 +56,10 @@ class SkipNotice {
         noticeElement.classList.add("sponsorSkipObject");
         noticeElement.classList.add("sponsorSkipNotice");
         noticeElement.style.zIndex = String(50 + amountOfPreviousNotices);
+        if (contentContainer().onMobileYouTube) {
+            noticeElement.style.bottom = "4em";
+            noticeElement.style.zoom = "0.8";
+        }
 
         //add mouse enter and leave listeners
         noticeElement.addEventListener("mouseenter", this.pauseCountdown.bind(this));
@@ -173,7 +177,8 @@ class SkipNotice {
         noticeElement.appendChild(secondRow);
 
         //get reference node
-        let referenceNode = document.getElementById("movie_player") || document.querySelector("#player-container .video-js");
+        let referenceNode = document.getElementById("player-container-id") 
+                                || document.getElementById("movie_player") || document.querySelector("#player-container .video-js");
         if (referenceNode == null) {
             //for embeds
             let player = document.getElementById("player");

src/popup.ts

@@ -719,17 +719,8 @@ async function runThePopup(messageListener?: MessageListener) {
         sponsorTimes.splice(index, 1);
   
         //save this
-		Config.config.sponsorTimes.set(currentVideoID, sponsorTimes);
-            messageHandler.query({
-                active: true,
-                currentWindow: true
-            }, tabs => {
-                messageHandler.sendMessage(
-                    tabs[0].id,
-                    {message: "sponsorDataChanged"}
-                );
-            });
-  
+        Config.config.sponsorTimes.set(currentVideoID, sponsorTimes);
+        
         //update display
         displaySponsorTimes();
   
@@ -750,6 +741,16 @@ async function runThePopup(messageListener?: MessageListener) {
             //hide submission section
             document.getElementById("submissionSection").style.display = "none";
         }
+
+        messageHandler.query({
+            active: true,
+            currentWindow: true
+        }, tabs => {
+            messageHandler.sendMessage(
+                tabs[0].id,
+                {message: "sponsorDataChanged"}
+            );
+        });
     }
   
     function clearTimes() {