From d3041f99ccbeba12cce06814d1c84299159dc8ba Mon Sep 17 00:00:00 2001 From: AdityasahuX07 Date: Wed, 31 Dec 2025 18:48:10 +0530 Subject: [PATCH 1/4] Refactor SpeedActivatedOverlay component props and styles --- .../components/SpeedActivatedOverlay.tsx | 52 +++++++++++++------ 1 file changed, 37 insertions(+), 15 deletions(-) diff --git a/src/components/player/components/SpeedActivatedOverlay.tsx b/src/components/player/components/SpeedActivatedOverlay.tsx index 53a51310..30cea669 100644 --- a/src/components/player/components/SpeedActivatedOverlay.tsx +++ b/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 = ({ visible, opacity, - speed + speed, + screenDimensions }) => { - if (!visible) return null; + // Safety check to prevent the 'height' of undefined error + if (!visible || !screenDimensions) return null; return ( - - - {speed}x Speed + + + + {speed}x + ); From 4174fd2add686aa34ca5aca72601ed227ff902f0 Mon Sep 17 00:00:00 2001 From: AdityasahuX07 Date: Wed, 31 Dec 2025 18:55:44 +0530 Subject: [PATCH 2/4] Adjust padding and gap in playerStyles --- src/components/player/utils/playerStyles.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/player/utils/playerStyles.ts b/src/components/player/utils/playerStyles.ts index a470e67b..a4418e84 100644 --- a/src/components/player/utils/playerStyles.ts +++ b/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, }, -}); \ No newline at end of file +}); From 8daca53be344030ecd652967d1c3eef8a89593f9 Mon Sep 17 00:00:00 2001 From: AdityasahuX07 Date: Wed, 31 Dec 2025 18:56:32 +0530 Subject: [PATCH 3/4] Implement auto-hide for video player controls Added auto-hide functionality for video player controls after 3 seconds of inactivity, with cleanup on unmount. --- src/components/player/AndroidVideoPlayer.tsx | 33 +++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/src/components/player/AndroidVideoPlayer.tsx b/src/components/player/AndroidVideoPlayer.tsx index b64379cd..a73386a9 100644 --- a/src/components/player/AndroidVideoPlayer.tsx +++ b/src/components/player/AndroidVideoPlayer.tsx @@ -233,6 +233,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); + } + }, 3000); // 3 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(); }, []); @@ -458,7 +485,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(() => { @@ -880,6 +910,7 @@ const AndroidVideoPlayer: React.FC = () => { visible={speedControl.showSpeedActivatedOverlay} opacity={speedControl.speedActivatedOverlayOpacity} speed={speedControl.holdToSpeedValue} + screenDimensions={playerState.screenDimensions} /> Date: Wed, 31 Dec 2025 18:59:16 +0530 Subject: [PATCH 4/4] Change controls hide delay from 3s to 2s Reduce the delay for hiding controls from 3 seconds to 2 seconds. --- src/components/player/AndroidVideoPlayer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/player/AndroidVideoPlayer.tsx b/src/components/player/AndroidVideoPlayer.tsx index a73386a9..b3d2995e 100644 --- a/src/components/player/AndroidVideoPlayer.tsx +++ b/src/components/player/AndroidVideoPlayer.tsx @@ -248,7 +248,7 @@ const AndroidVideoPlayer: React.FC = () => { if (!playerState.isDragging.current) { playerState.setShowControls(false); } - }, 3000); // 3 seconds delay + }, 2000); // 2 seconds delay } // Cleanup on unmount or when dependencies change