Add animation for skip to highlight on mobile

3 files changed, 52 insertions, 28 deletions

diff --git a/public/content.css b/public/content.css
index b5c01e01..6e98a1c5 100644
--- a/public/content.css
+++ b/public/content.css
@@ -1,3 +1,7 @@
+.hidden {
+	display: none;
+}
+
 #previewbar {
     overflow: visible;
     padding: 0;
@@ -541,15 +545,16 @@ input::-webkit-inner-spin-button {
 	padding: 4px;
 }
 
+.skipButtonControlBarContainer.mobile.textDisabled {
+	padding: 0;
+	background-color: transparent;
+}
+
 .skipButtonControlBarContainer.mobile > div {
 	margin: auto;
 	margin-left: 5px;
 }
 
-.skipButtonControlBarContainer.hidden, .skipButtonControlBarContainer.mobile .hidden {
-	display: none !important;
-}
-
 #sbSkipIconControlBarImage {
 	height: 60%;
     top: 0px;
@@ -560,6 +565,7 @@ input::-webkit-inner-spin-button {
 
 .mobile #sbSkipIconControlBarImage {
 	height: 100%;
+	width: 20px;
 }
 
 .sponsorBlockTooltip {
diff --git a/src/js-components/skipButtonControlBar.ts b/src/js-components/skipButtonControlBar.ts
index 4f5f3877..36ecb0c0 100644
--- a/src/js-components/skipButtonControlBar.ts
+++ b/src/js-components/skipButtonControlBar.ts
@@ -28,6 +28,10 @@ export class SkipButtonControlBar {
 
     skip: (segment: SponsorTime) => void;
 
+    // Used if on mobile page
+    hideButton: () => void;
+    showButton: () => void;
+
     constructor(props: SkipButtonControlBarProps) {
         this.skip = props.skip;
         this.onMobileYouTube = props.onMobileYouTube;
@@ -68,6 +72,10 @@ export class SkipButtonControlBar {
 
             if (Config.config.autoHideInfoButton && !this.onMobileYouTube) {
                 utils.setupAutoHideAnimation(this.skipIcon, mountingContainer, false, false);
+            } else {
+                const { hide, show } = utils.setupCustomHideAnimation(this.skipIcon, mountingContainer, false, false);
+                this.hideButton = hide;
+                this.showButton = show;
             }
         }
     }
@@ -116,14 +124,14 @@ export class SkipButtonControlBar {
         this.timeout = setTimeout(() => this.disableText(), Math.max(Config.config.skipNoticeDuration, this.duration) * 1000);
     }
 
-    disable(keepActive = false): void {
+    disable(): void {
         this.container.classList.add("hidden");
         this.textContainer?.classList?.remove("hidden");
 
         this.chapterText?.classList?.remove("hidden");
         this.getChapterPrefix()?.classList?.remove("hidden");
 
-        if (!keepActive) this.enabled = false;
+        this.enabled = false;
     }
 
     toggleSkip(): void {
@@ -131,19 +139,22 @@ export class SkipButtonControlBar {
         this.disableText();
     }
 
-    disableText(forceNotDisable = false): void {
-        if (!forceNotDisable && (Config.config.hideVideoPlayerControls || Config.config.hideSkipButtonPlayerControls || this.onMobileYouTube)) {
-            this.disable(this.onMobileYouTube);
+    disableText(): void {
+        if (Config.config.hideVideoPlayerControls || Config.config.hideSkipButtonPlayerControls) {
+            this.disable();
             return;
         }
 
-        this.container.classList.remove("hidden");
+        this.container.classList.add("textDisabled");
         this.textContainer?.classList?.add("hidden");
         this.chapterText?.classList?.remove("hidden");
 
         this.getChapterPrefix()?.classList?.add("hidden");
 
         utils.enableAutoHideAnimation(this.skipIcon);
+        if (this.onMobileYouTube) {
+            this.hideButton();
+        }
     }
 
     updateMobileControls(): void {
@@ -151,10 +162,9 @@ export class SkipButtonControlBar {
 
         if (overlay && this.enabled) {
             if (overlay?.classList?.contains("pointer-events-off")) {
-                this.disable(true);
+                this.hideButton();
             } else {
-                this.disableText(true);
-                this.skipIcon.classList.remove("hidden");
+                this.showButton();
             }
         }
     }
diff --git a/src/utils.ts b/src/utils.ts
index 99d61137..bdb441e7 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -183,7 +183,7 @@ export default class Utils {
         }
     }
 
-    setupAutoHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): void {
+    setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void, show: () => void } {
         if (enabled) element.classList.add("autoHiding");
         element.classList.add("hidden");
         element.classList.add("animationDone");
@@ -191,22 +191,30 @@ export default class Utils {
 
         let mouseEntered = false;
 
-        container.addEventListener("mouseenter", () => {
-            mouseEntered = true;
-            element.classList.remove("animationDone");
+        return {
+            hide: () => {
+                mouseEntered = false;
+                if (element.classList.contains("autoHiding")) {
+                    element.classList.add("hidden");
+                }
+            },
+            show: () => {
+                mouseEntered = true;
+                element.classList.remove("animationDone");
+    
+                // Wait for next event loop
+                setTimeout(() => {
+                    if (mouseEntered) element.classList.remove("hidden")
+                }, 10);
+            }
+        };
+    }
 
-            // Wait for next event loop
-            setTimeout(() => {
-                if (mouseEntered) element.classList.remove("hidden")
-            }, 10);
-        });
+    setupAutoHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): void {
+        const { hide, show } = this.setupCustomHideAnimation(element, container, enabled, rightSlide);
 
-        container.addEventListener("mouseleave", () => {
-            mouseEntered = false;
-            if (element.classList.contains("autoHiding")) {
-                element.classList.add("hidden");
-            }
-        });
+        container.addEventListener("mouseleave", () => hide());
+        container.addEventListener("mouseenter", () => show());
     }
 
     enableAutoHideAnimation(element: Element): void {