Auto hide skip to highlight

public/content.css

@@ -75,18 +75,26 @@
 	vertical-align: top;
 }
 
-#infoButton.playerButton:not(.hidden) {
+.autoHiding:not(.hidden) {
 	transform: translateX(0%) scale(1);
 	/* opacity is from YouTube page */
 	transition: transform 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
 }
 
-#infoButton.playerButton.hidden {
+.autoHiding.hidden {
 	transform: translateX(100%) scale(0);
 	/* opacity is from YouTube page */
 	transition: transform 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
 }
 
+.autoHiding.hidden.autoHideLeft {
+	transform: translateX(-100%) scale(0);
+}
+
+.autoHiding.hidden.animationDone {
+	display: none !important;
+}
+
 .playerButton.hidden {
 	display: none;
 }

src/content.ts

@@ -1306,15 +1306,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", () => {
+        utils.setupAutoHideAnimation(playerButtons["info"].button, controlsContainer);
-            playerButtons["info"].button.classList.remove("hidden");
-        });
-
-        controlsContainer.addEventListener("mouseleave", () => {
-            playerButtons["info"].button.classList.add("hidden");
-        });
     }
 }
 

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,19 @@ 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();
+        utils.disableAutoHideAnimation(this.skipIcon);
 
         this.startTimer();
     }
@@ -111,6 +119,8 @@ export class SkipButtonControlBar {
         this.chapterText?.classList?.remove("hidden");
 
         this.getChapterPrefix()?.classList?.add("hidden");
+
+        utils.enableAutoHideAnimation(this.skipIcon);
     }
 
     private getChapterPrefix(): HTMLElement {

src/utils.ts

@@ -183,6 +183,41 @@ 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");
+
+                const animationEndListener = () => {
+                    if (element.classList.contains("hidden")) element.classList.add("animationDone");
+                    element.removeEventListener("transitionend", animationEndListener);
+                };
+
+                element.addEventListener("transitionend", animationEndListener);
+            }
+        });
+    }
+
+    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.
      */