Merge pull request #328 from AdityasahuX07/patch-15

Minor UI changes and Bug fix.

src/components/player/AndroidVideoPlayer.tsx

@@ -234,6 +234,33 @@ const AndroidVideoPlayer: React.FC = () => {
     }).start();
   }, [playerState.showControls]);
 
+  // Auto-hide controls after 3 seconds of inactivity
+  useEffect(() => {
+    // Clear any existing timeout
+    if (controlsTimeout.current) {
+      clearTimeout(controlsTimeout.current);
+      controlsTimeout.current = null;
+    }
+
+    // Only set timeout if controls are visible and video is playing
+    if (playerState.showControls && !playerState.paused) {
+      controlsTimeout.current = setTimeout(() => {
+        // Don't hide if user is dragging the seek bar
+        if (!playerState.isDragging.current) {
+          playerState.setShowControls(false);
+        }
+      }, 2000); // 2 seconds delay
+    }
+
+    // Cleanup on unmount or when dependencies change
+    return () => {
+      if (controlsTimeout.current) {
+        clearTimeout(controlsTimeout.current);
+        controlsTimeout.current = null;
+      }
+    };
+  }, [playerState.showControls, playerState.paused, playerState.isDragging]);
+
   useEffect(() => {
     openingAnimation.startOpeningAnimation();
   }, []);
@@ -459,7 +486,10 @@ const AndroidVideoPlayer: React.FC = () => {
   }, [playerState.currentTime, useCustomSubtitles, customSubtitles]);
 
   const toggleControls = useCallback(() => {
-    playerState.setShowControls(prev => !prev);
+    playerState.setShowControls(prev => {
+      // If we're showing controls, the useEffect will handle the auto-hide timer
+      return !prev;
+    });
   }, []);
 
   const hideControls = useCallback(() => {
@@ -881,6 +911,7 @@ const AndroidVideoPlayer: React.FC = () => {
           visible={speedControl.showSpeedActivatedOverlay}
           opacity={speedControl.speedActivatedOverlayOpacity}
           speed={speedControl.holdToSpeedValue}
+          screenDimensions={playerState.screenDimensions}
         />
 
         <PauseOverlay

src/components/player/components/SpeedActivatedOverlay.tsx

@@ -1,35 +1,57 @@
-/**
- * Shared Speed Activated Overlay Component
- * Used by both Android (VLC) and iOS (KSPlayer) players
- */
 import React from 'react';
 import { View, Text, Animated } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
-import { styles } from '../utils/playerStyles';
 
 interface SpeedActivatedOverlayProps {
     visible: boolean;
-    opacity: Animated.Value;
+    opacity: Animated.Value | number;
     speed: number;
+    screenDimensions: { width: number; height: number };
 }
 
 export const SpeedActivatedOverlay: React.FC<SpeedActivatedOverlayProps> = ({
     visible,
     opacity,
-    speed
+    speed,
+    screenDimensions
 }) => {
-    if (!visible) return null;
+    // Safety check to prevent the 'height' of undefined error
+    if (!visible || !screenDimensions) return null;
 
     return (
         <Animated.View
-            style={[
-                styles.speedActivatedOverlay,
-                { opacity: opacity }
-            ]}
+            style={{
+                position: 'absolute',
+                top: screenDimensions.height * 0.06,
+                left: 0,
+                right: 0,
+                alignItems: 'center',
+                opacity: opacity,
+                zIndex: 1000,
+            }}
         >
-            <View style={styles.speedActivatedContainer}>
-                <MaterialIcons name="fast-forward" size={32} color="#FFFFFF" />
-                <Text style={styles.speedActivatedText}>{speed}x Speed</Text>
+            <View style={{
+                flexDirection: 'row',
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                borderRadius: 35,
+                paddingHorizontal: 16,
+                paddingVertical: 10,
+                alignItems: 'center',
+                elevation: 5,
+            }}>
+                <MaterialIcons
+                    name="fast-forward"
+                    size={20}
+                    color="white"
+                    style={{ marginRight: 6 }}
+                />
+                <Text style={{
+                    color: 'white',
+                    fontSize: 15,
+                    fontWeight: '600',
+                }}>
+                    {speed}x
+                </Text>
             </View>
         </Animated.View>
     );

src/components/player/utils/playerStyles.ts

@@ -274,8 +274,8 @@ export const styles = StyleSheet.create({
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 24,
     paddingVertical: 8,
-    paddingHorizontal: 14,
-    gap: 8,
+    paddingHorizontal: 8,
+    gap: 4,
   },
   iconWrapper: {
     width: 28,
@@ -289,7 +289,7 @@ export const styles = StyleSheet.create({
     color: '#FFFFFF',
     fontSize: 16,
     fontWeight: '600',
-    minWidth: 48,
+    minWidth: 38,
     textAlign: 'center',
   },
 
@@ -1218,4 +1218,4 @@ export const styles = StyleSheet.create({
     fontSize: skipTextFont,
     marginTop: 2,
   },
-});
+});