From 0ebacd4bd35cac560fb1d848ee42f9f9cacf97ed Mon Sep 17 00:00:00 2001
From: ryan0204 <chanpakhank@gmail.com>
Date: Wed, 8 Jan 2025 11:29:49 +0800
Subject: [PATCH] Auto hide control after 5 seconds

---
 components/video-player/controls/Controls.tsx | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/components/video-player/controls/Controls.tsx b/components/video-player/controls/Controls.tsx
index 1f436f7f..3927587a 100644
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -280,8 +280,38 @@ export const Controls: React.FC<Props> = ({
   useEffect(() => {
     prefetchAllTrickplayImages();
   }, []);
+
+  const CONTROLS_TIMEOUT = 5000;
+  const controlsTimeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    const resetControlsTimeout = () => {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+
+      if (showControls && !isSliding && !EpisodeView) {
+        controlsTimeoutRef.current = setTimeout(() => {
+          setShowControls(false);
+          setShowAudioSlider(false);
+        }, CONTROLS_TIMEOUT);
+      }
+    };
+
+    resetControlsTimeout();
+
+    return () => {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+    };
+  }, [showControls, isSliding, EpisodeView]);
+
   const toggleControls = () => {
     if (showControls) {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
       setShowAudioSlider(false);
       setShowControls(false);
     } else {
@@ -289,6 +319,18 @@ export const Controls: React.FC<Props> = ({
     }
   };
 
+  const handleControlsInteraction = () => {
+    if (showControls) {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+      controlsTimeoutRef.current = setTimeout(() => {
+        setShowControls(false);
+        setShowAudioSlider(false);
+      }, CONTROLS_TIMEOUT);
+    }
+  };
+
   const handleSliderStart = useCallback(() => {
     if (showControls === false) return;
 
@@ -731,6 +773,7 @@ export const Controls: React.FC<Props> = ({
               },
             ]}
             className={`flex flex-col p-4`}
+            onTouchStart={handleControlsInteraction}
           >
             <View
               className="shrink flex flex-col justify-center h-full mb-2"