mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-20 16:22:04 +00:00
Implement auto-hide for video player controls
Added auto-hide functionality for video player controls after 3 seconds of inactivity, with cleanup on unmount.
This commit is contained in:
parent
4174fd2add
commit
8daca53be3
1 changed files with 32 additions and 1 deletions
|
|
@ -233,6 +233,33 @@ const AndroidVideoPlayer: React.FC = () => {
|
||||||
}).start();
|
}).start();
|
||||||
}, [playerState.showControls]);
|
}, [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(() => {
|
useEffect(() => {
|
||||||
openingAnimation.startOpeningAnimation();
|
openingAnimation.startOpeningAnimation();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
@ -458,7 +485,10 @@ const AndroidVideoPlayer: React.FC = () => {
|
||||||
}, [playerState.currentTime, useCustomSubtitles, customSubtitles]);
|
}, [playerState.currentTime, useCustomSubtitles, customSubtitles]);
|
||||||
|
|
||||||
const toggleControls = useCallback(() => {
|
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(() => {
|
const hideControls = useCallback(() => {
|
||||||
|
|
@ -880,6 +910,7 @@ const AndroidVideoPlayer: React.FC = () => {
|
||||||
visible={speedControl.showSpeedActivatedOverlay}
|
visible={speedControl.showSpeedActivatedOverlay}
|
||||||
opacity={speedControl.speedActivatedOverlayOpacity}
|
opacity={speedControl.speedActivatedOverlayOpacity}
|
||||||
speed={speedControl.holdToSpeedValue}
|
speed={speedControl.holdToSpeedValue}
|
||||||
|
screenDimensions={playerState.screenDimensions}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<PauseOverlay
|
<PauseOverlay
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue