fix skip to highlight button

hanydd · Dec 5, 2024 · e9d8296 · e9d8296
1 parent d010555
commit e9d8296
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 33 deletions.
diff --git a/public/content.css b/public/content.css
@@ -33,7 +33,7 @@
 	width: 100%;
 	height: 100%;
 	z-index: 1;
-	
+
 	transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
 }
 
@@ -655,14 +655,6 @@ input::-webkit-inner-spin-button {
 	display: none !important;
 }
 
-#sbSkipIconControlBarImage {
-	height: 60%;
-	top: 0px;
-	bottom: 0px;
-	display: block;
-	margin: auto;
-}
-
 .sponsorBlockTooltip {
 	position: absolute;
 	background-color: rgba(28, 28, 28, 0.7);

diff --git a/src/content.ts b/src/content.ts
@@ -1566,9 +1566,11 @@ function videoElementChange(newVideo: boolean): void {
     waitFor(() => Config.isReady() && !document.hidden, 24 * 60 * 60, 500).then(() => {
         if (newVideo) {
             setupVideoListeners();
-            setupSkipButtonControlBar();
-            setupCategoryPill();
-            setupDescriptionPill();
+            waitFor(getPageLoaded, 20000, 10).then(() => {
+                setupSkipButtonControlBar();
+                setupCategoryPill();
+                setupDescriptionPill();
+            });
         }
 
         updatePreviewBar();

diff --git a/src/js-components/skipButtonControlBar.ts b/src/js-components/skipButtonControlBar.ts
@@ -1,8 +1,10 @@
 import Config from "../config";
+import { keybindToString } from "../config/config";
+import { getPageLoaded } from "../content";
 import { SegmentUUID, SponsorTime } from "../types";
-import { getSkippingText } from "../utils/categoryUtils";
 import { AnimationUtils } from "../utils/animationUtils";
-import { keybindToString } from "../config/config";
+import { getSkippingText } from "../utils/categoryUtils";
+import { waitFor } from "../utils/index";
 
 export interface SkipButtonControlBarProps {
     skip: (segment: SponsorTime) => void;
@@ -12,8 +14,8 @@ export interface SkipButtonControlBarProps {
 export class SkipButtonControlBar {
     container: HTMLElement;
     skipIcon: HTMLImageElement;
-    textContainer: HTMLElement;
-    chapterText: HTMLElement;
+    // textContainer: HTMLElement;
+    // chapterText: HTMLElement;
     segment: SponsorTime;
 
     showKeybindHint = true;
@@ -30,17 +32,22 @@ export class SkipButtonControlBar {
 
         this.container = document.createElement("div");
         this.container.classList.add("skipButtonControlBarContainer");
-        this.container.classList.add("sbhidden");
+        // this.container.classList.add("sbhidden");
+
+        const button = document.createElement("button");
+        button.classList.add("bpx-player-ctrl-btn", "playerButton");
+        button.id = "sbSkipIconControlBarButton";
 
         this.skipIcon = document.createElement("img");
         this.skipIcon.src = chrome.runtime.getURL("icons/skipIcon.svg");
-        this.skipIcon.classList.add("ytp-button");
+        this.skipIcon.classList.add("bpx-player-ctrl-btn-icon", "playerButtonImage");
         this.skipIcon.id = "sbSkipIconControlBarImage";
 
-        this.textContainer = document.createElement("div");
+        // this.textContainer = document.createElement("div");
 
-        this.container.appendChild(this.skipIcon);
-        this.container.appendChild(this.textContainer);
+        button.appendChild(this.skipIcon);
+        this.container.appendChild(button);
+        // this.container.appendChild(this.textContainer);
         this.container.addEventListener("click", () => this.toggleSkip());
         this.container.addEventListener("mouseenter", () => {
             this.stopTimer();
@@ -60,18 +67,19 @@ export class SkipButtonControlBar {
         return this.container;
     }
 
-    attachToPage(): void {
+    async attachToPage(): Promise<void> {
+        await waitFor(getPageLoaded, 10000, 10);
         const mountingContainer = this.getMountingContainer();
-        this.chapterText = document.querySelector(".ytp-chapter-container");
+        // this.chapterText = document.querySelector(".ytp-chapter-container");
 
         if (mountingContainer && !mountingContainer.contains(this.container)) {
-            mountingContainer.insertBefore(this.container, this.chapterText);
-            AnimationUtils.setupAutoHideAnimation(this.skipIcon, mountingContainer, false, false);
+            mountingContainer.append(this.container);
+            AnimationUtils.setupAutoHideAnimation(this.skipIcon, mountingContainer, true, false);
         }
     }
 
     private getMountingContainer(): HTMLElement {
-        return document.querySelector(".ytp-left-controls");
+        return document.querySelector(".bpx-player-control-bottom-left");
     }
 
     enable(segment: SponsorTime, duration?: number): void {
@@ -81,17 +89,17 @@ export class SkipButtonControlBar {
 
         this.refreshText();
         this.container?.classList?.remove("textDisabled");
-        this.textContainer?.classList?.remove("sbhidden");
+        // this.textContainer?.classList?.remove("sbhidden");
         AnimationUtils.disableAutoHideAnimation(this.skipIcon);
 
         this.startTimer();
     }
 
     refreshText(): void {
         if (this.segment) {
-            this.chapterText?.classList?.add("sbhidden");
+            // this.chapterText?.classList?.add("sbhidden");
             this.container.classList.remove("sbhidden");
-            this.textContainer.innerText = this.getTitle();
+            // this.textContainer.innerText = this.getTitle();
             this.skipIcon.setAttribute("title", this.getTitle());
         }
     }
@@ -117,8 +125,8 @@ export class SkipButtonControlBar {
     disable(): void {
         this.container.classList.add("sbhidden");
 
-        this.chapterText?.classList?.remove("sbhidden");
-        this.getChapterPrefix()?.classList?.remove("sbhidden");
+        // this.chapterText?.classList?.remove("sbhidden");
+        // this.getChapterPrefix()?.classList?.remove("sbhidden");
 
         this.enabled = false;
     }
@@ -141,8 +149,8 @@ export class SkipButtonControlBar {
         }
 
         this.container.classList.add("textDisabled");
-        this.textContainer?.classList?.add("sbhidden");
-        this.chapterText?.classList?.remove("sbhidden");
+        // this.textContainer?.classList?.add("sbhidden");
+        // this.chapterText?.classList?.remove("sbhidden");
 
         this.getChapterPrefix()?.classList?.add("sbhidden");