From 154d568aa39e91669e5624cc65c6d2f8a314149f Mon Sep 17 00:00:00 2001 From: tapframe <85391825+tapframe@users.noreply.github.com> Date: Wed, 21 Jan 2026 17:48:11 +0530 Subject: [PATCH] added aspect ratio indicator --- src/components/player/AndroidVideoPlayer.tsx | 20 +++- .../android/components/GestureControls.tsx | 105 ++++++++++++------ .../player/components/GestureControls.tsx | 29 ++++- src/hooks/usePlayerGestureControls.ts | 32 ++++++ 4 files changed, 147 insertions(+), 39 deletions(-) diff --git a/src/components/player/AndroidVideoPlayer.tsx b/src/components/player/AndroidVideoPlayer.tsx index 1e9483d5..63c81025 100644 --- a/src/components/player/AndroidVideoPlayer.tsx +++ b/src/components/player/AndroidVideoPlayer.tsx @@ -704,9 +704,21 @@ const AndroidVideoPlayer: React.FC = () => { }, []); const cycleResizeMode = useCallback(() => { - if (playerState.resizeMode === 'contain') playerState.setResizeMode('cover'); - else playerState.setResizeMode('contain'); - }, [playerState.resizeMode]); + gestureControls.showResizeModeOverlayFn(() => { + switch (playerState.resizeMode) { + case 'contain': + playerState.setResizeMode('cover'); + break; + case 'cover': + playerState.setResizeMode('stretch'); + break; + case 'stretch': + default: + playerState.setResizeMode('contain'); + break; + } + }); + }, [playerState.resizeMode, gestureControls.showResizeModeOverlayFn]); // Memoize selectedTextTrack to prevent unnecessary re-renders const memoizedSelectedTextTrack = useMemo(() => { @@ -861,6 +873,8 @@ const AndroidVideoPlayer: React.FC = () => { volume={volume} brightness={brightness} controlsTimeout={controlsTimeout} + resizeMode={playerState.resizeMode} + resizeMode={playerState.resizeMode} /> ; + resizeMode?: string; } export const GestureControls: React.FC = ({ @@ -34,7 +35,8 @@ export const GestureControls: React.FC = ({ hideControls, volume, brightness, - controlsTimeout + controlsTimeout, + resizeMode = 'contain' }) => { const getVolumeIcon = (value: number) => { @@ -151,42 +153,77 @@ export const GestureControls: React.FC = ({ {/* Volume/Brightness Pill Overlay */} {(gestureControls.showVolumeOverlay || gestureControls.showBrightnessOverlay) && ( - - - + + + + - + {gestureControls.showVolumeOverlay && volume === 0 + ? "Muted" + : `${Math.round((gestureControls.showVolumeOverlay ? volume : brightness) * 100)}%` + } + + + + )} + + {/* Aspect Ratio Overlay */} + {gestureControls.showResizeModeOverlay && ( + + - {gestureControls.showVolumeOverlay && volume === 0 - ? "Muted" - : `${Math.round((gestureControls.showVolumeOverlay ? volume : brightness) * 100)}%` - } - + + + + + + {resizeMode.charAt(0).toUpperCase() + resizeMode.slice(1)} + + )} diff --git a/src/components/player/components/GestureControls.tsx b/src/components/player/components/GestureControls.tsx index a9b46ec2..403316ff 100644 --- a/src/components/player/components/GestureControls.tsx +++ b/src/components/player/components/GestureControls.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { View, Text, StyleSheet } from 'react-native'; +import { View, Text, StyleSheet, Animated } from 'react-native'; import { TapGestureHandler, PanGestureHandler, @@ -21,6 +21,7 @@ interface GestureControlsProps { volume: number; brightness: number; controlsTimeout: React.MutableRefObject; + resizeMode?: string; } export const GestureControls: React.FC = ({ @@ -34,7 +35,8 @@ export const GestureControls: React.FC = ({ hideControls, volume, brightness, - controlsTimeout + controlsTimeout, + resizeMode = 'contain' }) => { const getVolumeIcon = (value: number) => { @@ -194,6 +196,29 @@ export const GestureControls: React.FC = ({ )} + + {gestureControls.showResizeModeOverlay && ( + + + + + + + + {resizeMode.charAt(0).toUpperCase() + resizeMode.slice(1)} + + + + )} ); }; diff --git a/src/hooks/usePlayerGestureControls.ts b/src/hooks/usePlayerGestureControls.ts index 2030ea2e..f15bd3dc 100644 --- a/src/hooks/usePlayerGestureControls.ts +++ b/src/hooks/usePlayerGestureControls.ts @@ -19,18 +19,21 @@ export const usePlayerGestureControls = (config: GestureControlConfig) => { // State for overlays const [showVolumeOverlay, setShowVolumeOverlay] = useState(false); const [showBrightnessOverlay, setShowBrightnessOverlay] = useState(false); + const [showResizeModeOverlay, setShowResizeModeOverlay] = useState(false); // Animated values const volumeGestureTranslateY = useRef(new Animated.Value(0)).current; const brightnessGestureTranslateY = useRef(new Animated.Value(0)).current; const volumeOverlayOpacity = useRef(new Animated.Value(0)).current; const brightnessOverlayOpacity = useRef(new Animated.Value(0)).current; + const resizeModeOverlayOpacity = useRef(new Animated.Value(0)).current; // Tracking refs const lastVolumeGestureY = useRef(0); const lastBrightnessGestureY = useRef(0); const volumeOverlayTimeout = useRef(null); const brightnessOverlayTimeout = useRef(null); + const resizeModeOverlayTimeout = useRef(null); // Extract config with defaults and platform adjustments const volumeRange = config.volumeRange || { min: 0, max: 1 }; @@ -152,6 +155,30 @@ export const usePlayerGestureControls = (config: GestureControlConfig) => { if (brightnessOverlayTimeout.current) { clearTimeout(brightnessOverlayTimeout.current); } + if (resizeModeOverlayTimeout.current) { + clearTimeout(resizeModeOverlayTimeout.current); + } + }; + + const showResizeModeOverlayFn = (callback?: () => void) => { + if (resizeModeOverlayTimeout.current) { + clearTimeout(resizeModeOverlayTimeout.current); + } + setShowResizeModeOverlay(true); + Animated.timing(resizeModeOverlayOpacity, { + toValue: 1, + duration: 100, + useNativeDriver: true, + }).start(() => { + if (callback) callback(); + resizeModeOverlayTimeout.current = setTimeout(() => { + Animated.timing(resizeModeOverlayOpacity, { + toValue: 0, + duration: 200, + useNativeDriver: true, + }).start(() => setShowResizeModeOverlay(false)); + }, overlayTimeout); + }); }; return { @@ -162,8 +189,13 @@ export const usePlayerGestureControls = (config: GestureControlConfig) => { // Overlay state showVolumeOverlay, showBrightnessOverlay, + showResizeModeOverlay, volumeOverlayOpacity, brightnessOverlayOpacity, + resizeModeOverlayOpacity, + + // Overlay functions + showResizeModeOverlayFn, // Cleanup cleanup,