aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAjay <[email protected]>2024-01-14 14:03:05 -0500
committerAjay <[email protected]>2024-01-14 14:03:05 -0500
commit3222afd8b419288fcfa2e7dd034fea7cfebc01e9 (patch)
tree25f97e7e769ed06518782338b56f8b130debb404
parenteede32aa7efddbf826ba09bc45d95412733b649f (diff)
downloadSponsorBlock-3222afd8b419288fcfa2e7dd034fea7cfebc01e9.tar.gz
SponsorBlock-3222afd8b419288fcfa2e7dd034fea7cfebc01e9.zip
Fix preview bar on mobile
Fixes #1947 and #1943
-rw-r--r--src/content.ts31
-rw-r--r--src/js-components/previewBar.ts10
-rw-r--r--src/js-components/skipButtonControlBar.ts7
-rw-r--r--src/utils/mobileUtils.ts9
4 files changed, 25 insertions, 32 deletions
diff --git a/src/content.ts b/src/content.ts
index 0ea9da11..e4ba4869 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<HTMLElement>(".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,14 +481,14 @@ 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",
isVisibleCheck: true
@@ -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 1406f691..a2522f08 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 b14eed18..321e4cf6 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 00000000..3cff18f7
--- /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