Fix preview bar on mobile

Fixes #1947 and #1943

src/content.ts

@@ -47,6 +47,7 @@ import { cleanPage } from "./utils/pageCleaner";
 import { addCleanupListener } from "../maze-utils/src/cleanup";
 import { hideDeArrowPromotion, tryShowingDeArrowPromotion } from "./dearrowPromotion";
 import { asyncRequestToServer } from "./utils/requests";
+import { isMobileControlsOpen } from "./utils/mobileUtils";
 
 cleanPage();
 
@@ -457,16 +458,13 @@ function handleMobileControlsMutations(): void {
     skipButtonControlBar?.updateMobileControls();
 
     if (previewBar !== null) {
-        if (document.body.contains(previewBar.container)) {
+        if (!previewBar.parent.contains(previewBar.container) && isMobileControlsOpen()) {
-            const progressBarBackground = document.querySelector<HTMLElement>(".progress-bar-background");
+            previewBar.createElement();
-
+            updatePreviewBar();
-            if (progressBarBackground !== null) {
-                updatePreviewBarPositionMobile(progressBarBackground);
-            }
 
             return;
-        } else {
+        } else if (!previewBar.parent.isConnected) {
-            // The container does not exist anymore, remove that old preview bar
+            // The parent does not exist anymore, remove that old preview bar
             previewBar.remove();
             previewBar = null;
         }
@@ -483,13 +481,13 @@ function createPreviewBar(): void {
     if (previewBar !== null) return;
 
     const progressElementOptions = [{
-            // For mobile YouTube
-            selector: ".progress-bar-background",
-            isVisibleCheck: true
-        }, {
             // For new mobile YouTube (#1287)
             selector: ".progress-bar-line",
             isVisibleCheck: true
+        }, {
+            // For newer mobile YouTube (Jan 2024)
+            selector: ".YtProgressBarProgressBarLine",
+            isVisibleCheck: true
         }, {
             // For Desktop YouTube
             selector: ".ytp-progress-bar",
@@ -1314,15 +1312,6 @@ function startSkipScheduleCheckingForStartSponsors() {
     }
 }
 
-/**
- * This function is required on mobile YouTube and will keep getting called whenever the preview bar disapears
- */
-function updatePreviewBarPositionMobile(parent: HTMLElement) {
-    if (document.getElementById("previewbar") === null) {
-        previewBar.createElement(parent);
-    }
-}
-
 function selectSegment(UUID: SegmentUUID): void {
     selectedSegment = UUID;
     updatePreviewBar();

src/js-components/previewBar.ts

@@ -224,16 +224,12 @@ class PreviewBar {
         }
     }
 
-    createElement(parent: HTMLElement): void {
+    createElement(parent?: HTMLElement): void {
-        this.parent = parent;
+        if (parent) this.parent = parent;
 
         if (this.onMobileYouTube) {
-            if (parent.classList.contains("progress-bar-background")) {
-                parent.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
-                parent.style.opacity = "1";
-            }
-
             this.container.style.transform = "none";
+            this.container.style.height = "var(--yt-progress-bar-height)";
         } else if (!this.onInvidious) {
             this.container.classList.add("sbNotInvidious");
         }

src/js-components/skipButtonControlBar.ts

@@ -3,6 +3,7 @@ import { SegmentUUID, SponsorTime } from "../types";
 import { getSkippingText } from "../utils/categoryUtils";
 import { AnimationUtils } from "../utils/animationUtils";
 import { keybindToString } from "../../maze-utils/src/config";
+import { isMobileControlsOpen } from "../utils/mobileUtils";
 
 export interface SkipButtonControlBarProps {
     skip: (segment: SponsorTime) => void;
@@ -183,10 +184,8 @@ export class SkipButtonControlBar {
     }
 
     updateMobileControls(): void {
-        const overlay = document.getElementById("player-control-overlay");
+        if (this.enabled) {
-
+            if (isMobileControlsOpen()) {
-        if (overlay && this.enabled) {
-            if (overlay?.classList?.contains("fadein")) {
                 this.showButton();
             } else {
                 this.hideButton();

src/utils/mobileUtils.ts

@@ -0,0 +1,9 @@
+export function isMobileControlsOpen(): boolean {
+    const overlay = document.getElementById("player-control-overlay");
+
+    if (overlay) {
+        return !!overlay?.classList?.contains("fadein");
+    }
+
+    return false;
+}