diff --git a/src/content.ts b/src/content.ts index 0ea9da11ad..e4ba486942 100644 --- a/src/content.ts +++ b/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)) { - const progressBarBackground = document.querySelector(".progress-bar-background"); - - if (progressBarBackground !== null) { - updatePreviewBarPositionMobile(progressBarBackground); - } + if (!previewBar.parent.contains(previewBar.container) && isMobileControlsOpen()) { + previewBar.createElement(); + updatePreviewBar(); return; - } else { - // The container does not exist anymore, remove that old preview bar + } else if (!previewBar.parent.isConnected) { + // 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(); diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts index 1406f6919f..a2522f0858 100644 --- a/src/js-components/previewBar.ts +++ b/src/js-components/previewBar.ts @@ -224,16 +224,12 @@ class PreviewBar { } } - createElement(parent: HTMLElement): void { - this.parent = parent; + createElement(parent?: HTMLElement): void { + 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"); } diff --git a/src/js-components/skipButtonControlBar.ts b/src/js-components/skipButtonControlBar.ts index b14eed1863..321e4cf65c 100644 --- a/src/js-components/skipButtonControlBar.ts +++ b/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 (overlay && this.enabled) { - if (overlay?.classList?.contains("fadein")) { + if (this.enabled) { + if (isMobileControlsOpen()) { this.showButton(); } else { this.hideButton(); diff --git a/src/utils/mobileUtils.ts b/src/utils/mobileUtils.ts new file mode 100644 index 0000000000..3cff18f74a --- /dev/null +++ b/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; +} \ No newline at end of file