Merge pull request #958 from FlorianZahn/PersistantHighlight

Highlight Button now persists; Implements issue #953

src/config.ts

@@ -26,6 +26,7 @@ interface SBConfig {
     hideInfoButtonPlayerControls: boolean,
     hideDeleteButtonPlayerControls: boolean,
     hideUploadButtonPlayerControls: boolean,
+    hideSkipButtonPlayerControls: boolean,
     hideDiscordLaunches: number,
     hideDiscordLink: boolean,
     invidiousInstances: string[],
@@ -172,6 +173,7 @@ const Config: SBObject = {
         hideInfoButtonPlayerControls: false,
         hideDeleteButtonPlayerControls: false,
         hideUploadButtonPlayerControls: false,
+        hideSkipButtonPlayerControls: false,
         hideDiscordLaunches: 0,
         hideDiscordLink: false,
         invidiousInstances: ["invidious.snopyta.org"],

src/content.ts

@@ -1307,15 +1307,8 @@ async function createButtons(): Promise<void> {
     if (Config.config.autoHideInfoButton && !onInvidious && controlsContainer 
             && playerButtons["info"]?.button && !controlsWithEventListeners.includes(controlsContainer)) {
         controlsWithEventListeners.push(controlsContainer);
-        playerButtons["info"].button.classList.add("hidden");
-
-        controlsContainer.addEventListener("mouseenter", () => {
-            playerButtons["info"].button.classList.remove("hidden");
-        });
-
-        controlsContainer.addEventListener("mouseleave", () => {
-            playerButtons["info"].button.classList.add("hidden");
-        });
+        
+        utils.setupAutoHideAnimation(playerButtons["info"].button, controlsContainer);
     }
 }
 

src/js-components/skipButtonControlBar.ts

@@ -2,6 +2,8 @@ import Config from "../config";
 import { SponsorTime } from "../types";
 import { getSkippingText } from "../utils/categoryUtils";
 
+import Utils from "../utils";
+const utils = new Utils();
 
 export interface SkipButtonControlBarProps {
     skip: (segment: SponsorTime) => void;
@@ -53,13 +55,20 @@ export class SkipButtonControlBar {
     
         if (leftControlsContainer && !leftControlsContainer.contains(this.container)) {
             leftControlsContainer.insertBefore(this.container, this.chapterText);
+
+            if (Config.config.autoHideInfoButton) {
+                utils.setupAutoHideAnimation(this.skipIcon, leftControlsContainer, false, false);
+            }
         }
     }
 
     enable(segment: SponsorTime, duration?: number): void {
         if (duration) this.duration = duration;
         this.segment = segment;
+
         this.refreshText();
+        this.textContainer?.classList?.remove("hidden");
+        utils.disableAutoHideAnimation(this.skipIcon);
 
         this.startTimer();
     }
@@ -68,7 +77,8 @@ export class SkipButtonControlBar {
         if (this.segment) {
             this.chapterText?.classList?.add("hidden");
             this.container.classList.remove("hidden");
-            this.textContainer.innerText = getSkippingText([this.segment], false) + (this.showKeybindHint ? " (" + Config.config.skipKeybind + ")" : "");
+            this.textContainer.innerText = this.getTitle();
+            this.skipIcon.setAttribute("title", this.getTitle());
         }
     }
 
@@ -84,17 +94,42 @@ export class SkipButtonControlBar {
 
     startTimer(): void {
         this.stopTimer();
-        this.timeout = setTimeout(() => this.disable(), Math.max(Config.config.skipNoticeDuration, this.duration) * 1000);
+        this.timeout = setTimeout(() => this.disableText(), Math.max(Config.config.skipNoticeDuration, this.duration) * 1000);
     }
 
     disable(): void {
         this.container.classList.add("hidden");
+        this.textContainer?.classList?.remove("hidden");
+
         this.chapterText?.classList?.remove("hidden");
+        this.getChapterPrefix()?.classList?.remove("hidden");
     }
 
     toggleSkip(): void {
         this.skip(this.segment);
-        this.disable();
+        this.disableText();
+    }
+
+    disableText(): void {
+        if (Config.config.hideVideoPlayerControls || Config.config.hideSkipButtonPlayerControls) {
+            this.disable();
+            return;
+        }
+
+        this.textContainer?.classList?.add("hidden");
+        this.chapterText?.classList?.remove("hidden");
+
+        this.getChapterPrefix()?.classList?.add("hidden");
+
+        utils.enableAutoHideAnimation(this.skipIcon);
+    }
+
+    private getTitle(): string {
+        return getSkippingText([this.segment], false) + (this.showKeybindHint ? " (" + Config.config.skipKeybind + ")" : "");
+    }
+
+    private getChapterPrefix(): HTMLElement {
+        return document.querySelector(".ytp-chapter-title-prefix");
     }
 }
 

src/utils.ts

@@ -183,6 +183,34 @@ export default class Utils {
         }
     }
 
+    setupAutoHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): void {
+        if (enabled) element.classList.add("autoHiding");
+        element.classList.add("hidden");
+        element.classList.add("animationDone");
+        if (!rightSlide) element.classList.add("autoHideLeft");
+
+        container.addEventListener("mouseenter", () => {
+            element.classList.remove("animationDone");
+
+            // Wait for next event loop
+            setTimeout(() => element.classList.remove("hidden"), 10);
+        });
+
+        container.addEventListener("mouseleave", () => {
+            if (element.classList.contains("autoHiding")) {
+                element.classList.add("hidden");
+            }
+        });
+    }
+
+    enableAutoHideAnimation(element: Element): void {
+        element.classList.add("autoHiding");
+    }
+
+    disableAutoHideAnimation(element: Element): void {
+        element.classList.remove("autoHiding");
+    }
+
     /**
      * Merges any overlapping timestamp ranges into single segments and returns them as a new array.
      */