From ebcb600e99db87b557e7c74d75bc1abe670f7570 Mon Sep 17 00:00:00 2001
From: Ajay Ramachandran <dev@ajay.app>
Date: Thu, 30 Sep 2021 00:43:10 -0400
Subject: [PATCH] Auto hide skip to highlight

---
 public/content.css                        | 12 ++++++--
 src/content.ts                            | 11 ++-----
 src/js-components/skipButtonControlBar.ts | 10 +++++++
 src/utils.ts                              | 35 +++++++++++++++++++++++
 4 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/public/content.css b/public/content.css
index 13cab8e4..b82b469d 100644
--- a/public/content.css
+++ b/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;
 }
diff --git a/src/content.ts b/src/content.ts
index 7eba02e4..b4393c74 100644
--- a/src/content.ts
+++ b/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", () => {
-            playerButtons["info"].button.classList.remove("hidden");
-        });
-
-        controlsContainer.addEventListener("mouseleave", () => {
-            playerButtons["info"].button.classList.add("hidden");
-        });
+        
+        utils.setupAutoHideAnimation(playerButtons["info"].button, controlsContainer);
     }
 }
 
diff --git a/src/js-components/skipButtonControlBar.ts b/src/js-components/skipButtonControlBar.ts
index 76ae3ac5..8e42c55d 100644
--- a/src/js-components/skipButtonControlBar.ts
+++ b/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 {
diff --git a/src/utils.ts b/src/utils.ts
index 983c1c1b..0bcd15b4 100644
--- a/src/utils.ts
+++ b/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.
      */