From fd420cfebcc4be782e716768dc15d1abda318252 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Wed, 12 Feb 2025 17:55:20 -0700
Subject: [PATCH] auto hide skip intro button completly

---
 src/components/player/atoms/SkipIntroButton.tsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/player/atoms/SkipIntroButton.tsx b/src/components/player/atoms/SkipIntroButton.tsx
index 388cd0c9..c9e8942c 100644
--- a/src/components/player/atoms/SkipIntroButton.tsx
+++ b/src/components/player/atoms/SkipIntroButton.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
 
 import { Icon, Icons } from "@/components/Icon";
 import { Transition } from "@/components/utils/Transition";
@@ -11,9 +11,10 @@ function shouldShowSkipButton(
 ): "always" | "hover" | "none" {
   if (typeof skipTime !== "number") return "none";
 
-  // Show button from beginning until the skip point
+  // Only show during the first 10 seconds of the intro section
   if (currentTime >= 0 && currentTime < skipTime) {
-    return "always";
+    if (currentTime <= 10) return "always";
+    return "hover";
   }
 
   return "none";
@@ -45,12 +46,6 @@ export function SkipIntroButton(props: {
   const time = usePlayerStore((s) => s.progress.time);
   const status = usePlayerStore((s) => s.status);
   const display = usePlayerStore((s) => s.display);
-  const [isReduced, setIsReduced] = useState(false);
-
-  // Update opacity based on video time
-  useEffect(() => {
-    setIsReduced(time >= 10);
-  }, [time]);
 
   const showingState = shouldShowSkipButton(time, props.skipTime);
 
@@ -81,9 +76,8 @@ export function SkipIntroButton(props: {
     >
       <div
         className={classNames([
-          "absolute bottom-0 right-0 transition-all duration-500 flex items-center space-x-3",
+          "absolute bottom-0 right-0 transition-[bottom] duration-200 flex items-center space-x-3",
           bottom,
-          isReduced ? "opacity-30 hover:opacity-100" : "opacity-100",
         ])}
       >
         <Button