Auto hide control after 5 seconds

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"