Add animation for skip to highlight on mobile

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 {

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 {
+    disableText(): void {
-        if (!forceNotDisable && (Config.config.hideVideoPlayerControls || Config.config.hideSkipButtonPlayerControls || this.onMobileYouTube)) {
+        if (Config.config.hideVideoPlayerControls || Config.config.hideSkipButtonPlayerControls) {
-            this.disable(this.onMobileYouTube);
+            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.showButton();
-                this.skipIcon.classList.remove("hidden");
             }
         }
     }

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", () => {
+        return {
-            mouseEntered = true;
+            hide: () => {
-            element.classList.remove("animationDone");
+                mouseEntered = false;
-
+                if (element.classList.contains("autoHiding")) {
-            // Wait for next event loop
+                    element.classList.add("hidden");
-            setTimeout(() => {
+                }
-                if (mouseEntered) element.classList.remove("hidden")
+            },
-            }, 10);
+            show: () => {
-        });
+                mouseEntered = true;
-
+                element.classList.remove("animationDone");
-        container.addEventListener("mouseleave", () => {
+    
-            mouseEntered = false;
+                // Wait for next event loop
-            if (element.classList.contains("autoHiding")) {
+                setTimeout(() => {
-                element.classList.add("hidden");
+                    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", () => hide());
+        container.addEventListener("mouseenter", () => show());
     }
 
     enableAutoHideAnimation(element: Element): void {