some UI changes to metadat overlay on videoplayers

components/AndroidVideoPlayer.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { Platform } from 'react-native';
+import { Platform, Animated, TouchableWithoutFeedback, View } from 'react-native';
 import Video, { VideoRef, SelectedTrack, BufferingStrategyType, ResizeMode } from 'react-native-video';
 
 interface VideoPlayerProps {

local-scrapers-repo

@@ -1 +1 @@
-Subproject commit c176aabb4edd73a709ebdc097688e780b65b651a
+Subproject commit 6591e3bc12a64a191367829d3fa5eb3783085c95

src/components/player/AndroidVideoPlayer.tsx

@@ -1372,6 +1372,40 @@ const AndroidVideoPlayer: React.FC = () => {
     }
   }, [nextEpisode, id, isLoadingNextEpisode, navigation, metadata, imdbId, backdrop]);
 
+  // Function to hide pause overlay and show controls
+  const hidePauseOverlay = useCallback(() => {
+    if (showPauseOverlay) {
+      Animated.parallel([
+        Animated.timing(pauseOverlayOpacity, {
+          toValue: 0,
+          duration: 220,
+          useNativeDriver: true,
+        }),
+        Animated.timing(pauseOverlayTranslateY, {
+          toValue: 8,
+          duration: 220,
+          useNativeDriver: true,
+        })
+      ]).start(() => setShowPauseOverlay(false));
+      
+      // Show controls when overlay is touched
+      if (!showControls) {
+        setShowControls(true);
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }).start();
+        
+        // Auto-hide controls after 5 seconds
+        if (controlsTimeout.current) {
+          clearTimeout(controlsTimeout.current);
+        }
+        controlsTimeout.current = setTimeout(hideControls, 5000);
+      }
+    }
+  }, [showPauseOverlay, pauseOverlayOpacity, pauseOverlayTranslateY, showControls, fadeAnim, controlsTimeout, hideControls]);
+
   // Handle paused overlay after 5 seconds of being paused
   useEffect(() => {
     if (paused) {
@@ -1400,20 +1434,7 @@ const AndroidVideoPlayer: React.FC = () => {
         clearTimeout(pauseOverlayTimerRef.current);
         pauseOverlayTimerRef.current = null;
       }
-      if (showPauseOverlay) {
+      hidePauseOverlay();
-        Animated.parallel([
-          Animated.timing(pauseOverlayOpacity, {
-            toValue: 0,
-            duration: 220,
-            useNativeDriver: true,
-          }),
-          Animated.timing(pauseOverlayTranslateY, {
-            toValue: 8,
-            duration: 220,
-            useNativeDriver: true,
-          })
-        ]).start(() => setShowPauseOverlay(false));
-      }
     }
     return () => {
       if (pauseOverlayTimerRef.current) {
@@ -1421,7 +1442,7 @@ const AndroidVideoPlayer: React.FC = () => {
         pauseOverlayTimerRef.current = null;
       }
     };
-  }, [paused]);
+  }, [paused, hidePauseOverlay]);
 
   // Handle next episode button visibility based on current time and next episode availability
   useEffect(() => {
@@ -1924,8 +1945,18 @@ const AndroidVideoPlayer: React.FC = () => {
           />
 
           {showPauseOverlay && (
+            <TouchableOpacity
+              activeOpacity={1}
+              onPress={hidePauseOverlay}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+              }}
+            >
               <Animated.View 
-              pointerEvents="none"
                 style={{
                   position: 'absolute',
                   top: 0,
@@ -1983,6 +2014,7 @@ const AndroidVideoPlayer: React.FC = () => {
                   )}
                 </Animated.View>
               </Animated.View>
+            </TouchableOpacity>
           )}
 
           {/* Next Episode Button */}

src/components/player/VideoPlayer.tsx

@@ -1272,6 +1272,40 @@ const VideoPlayer: React.FC = () => {
     }
   }, [nextEpisode, id, isLoadingNextEpisode, navigation, metadata, imdbId, backdrop]);
 
+  // Function to hide pause overlay and show controls
+  const hidePauseOverlay = useCallback(() => {
+    if (showPauseOverlay) {
+      Animated.parallel([
+        Animated.timing(pauseOverlayOpacity, {
+          toValue: 0,
+          duration: 220,
+          useNativeDriver: true,
+        }),
+        Animated.timing(pauseOverlayTranslateY, {
+          toValue: 8,
+          duration: 220,
+          useNativeDriver: true,
+        })
+      ]).start(() => setShowPauseOverlay(false));
+      
+      // Show controls when overlay is touched
+      if (!showControls) {
+        setShowControls(true);
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }).start();
+        
+        // Auto-hide controls after 5 seconds
+        if (controlsTimeout.current) {
+          clearTimeout(controlsTimeout.current);
+        }
+        controlsTimeout.current = setTimeout(hideControls, 5000);
+      }
+    }
+  }, [showPauseOverlay, pauseOverlayOpacity, pauseOverlayTranslateY, showControls, fadeAnim, controlsTimeout, hideControls]);
+
   // Handle paused overlay after 5 seconds of being paused
   useEffect(() => {
     if (paused) {
@@ -1300,20 +1334,7 @@ const VideoPlayer: React.FC = () => {
         clearTimeout(pauseOverlayTimerRef.current);
         pauseOverlayTimerRef.current = null;
       }
-      if (showPauseOverlay) {
+      hidePauseOverlay();
-        Animated.parallel([
-          Animated.timing(pauseOverlayOpacity, {
-            toValue: 0,
-            duration: 220,
-            useNativeDriver: true,
-          }),
-          Animated.timing(pauseOverlayTranslateY, {
-            toValue: 8,
-            duration: 220,
-            useNativeDriver: true,
-          })
-        ]).start(() => setShowPauseOverlay(false));
-      }
     }
     return () => {
       if (pauseOverlayTimerRef.current) {
@@ -1321,7 +1342,7 @@ const VideoPlayer: React.FC = () => {
         pauseOverlayTimerRef.current = null;
       }
     };
-  }, [paused]);
+  }, [paused, hidePauseOverlay]);
 
   // Handle next episode button visibility based on current time and next episode availability
   useEffect(() => {
@@ -1827,8 +1848,18 @@ const VideoPlayer: React.FC = () => {
           />
 
           {showPauseOverlay && (
+            <TouchableOpacity
+              activeOpacity={1}
+              onPress={hidePauseOverlay}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+              }}
+            >
               <Animated.View
-              pointerEvents="none"
                 style={{
                   position: 'absolute',
                   top: 0,
@@ -1886,6 +1917,7 @@ const VideoPlayer: React.FC = () => {
                   )}
                 </Animated.View>
               </Animated.View>
+            </TouchableOpacity>
           )}
 
           {/* Next Episode Button */}