Creepso/NuvioStreaming_backup_24-10-25
1
0
Fork 0
Code Issues 53 Pull requests Projects Releases 32 Packages Wiki Activity Actions

some UI changes to metadat overlay on videoplayers

Browse source
This commit is contained in:
tapframe 2025-08-17 18:57:06 +05:30
parent 9ae1a32989
commit 3886f615c9
4 changed files with 189 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/AndroidVideoPlayer.tsx
View file

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

2
local-scrapers-repo

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

64
src/components/player/AndroidVideoPlayer.tsx
View file

@ -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) {
Animated.parallel([
Animated.timing(pauseOverlayOpacity, {
toValue: 0,
duration: 220,
useNativeDriver: true,
}),
Animated.timing(pauseOverlayTranslateY, {
toValue: 8,
duration: 220,
useNativeDriver: true,
})
]).start(() => setShowPauseOverlay(false));
}
hidePauseOverlay();
}
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 */}

64
src/components/player/VideoPlayer.tsx
View file

@ -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) {
Animated.parallel([
Animated.timing(pauseOverlayOpacity, {
toValue: 0,
duration: 220,
useNativeDriver: true,
}),
Animated.timing(pauseOverlayTranslateY, {
toValue: 8,
duration: 220,
useNativeDriver: true,
})
]).start(() => setShowPauseOverlay(false));
}
hidePauseOverlay();
}
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 */}