Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-03-11 17:45:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

animation fix

Browse source
This commit is contained in:
tapframe 2025-09-14 16:01:33 +05:30
parent 74858bff23
commit 2bf7dcd635
2 changed files with 72 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -151,6 +151,8 @@ const AndroidVideoPlayer: React.FC = () => {
const openingFadeAnim = useRef(new Animated.Value(0)).current;
const openingScaleAnim = useRef(new Animated.Value(0.8)).current;
const backgroundFadeAnim = useRef(new Animated.Value(1)).current;
const [isBackdropLoaded, setIsBackdropLoaded] = useState(false);
const backdropImageOpacityAnim = useRef(new Animated.Value(0)).current;
const [isBuffering, setIsBuffering] = useState(false);
const [rnVideoAudioTracks, setRnVideoAudioTracks] = useState<Array<{id: number, name: string, language?: string}>>([]);
const [rnVideoTextTracks, setRnVideoTextTracks] = useState<Array<{id: number, name: string, language?: string}>>([]);
@ -271,7 +273,31 @@ const AndroidVideoPlayer: React.FC = () => {
// Prefetch backdrop and title logo for faster loading screen appearance
useEffect(() => {
if (backdrop && typeof backdrop === 'string') {
Image.prefetch(backdrop).catch(() => {});
// Reset loading state
setIsBackdropLoaded(false);
backdropImageOpacityAnim.setValue(0);
// Prefetch the image
Image.prefetch(backdrop)
.then(() => {
// Image loaded successfully, fade it in smoothly
setIsBackdropLoaded(true);
Animated.timing(backdropImageOpacityAnim, {
toValue: 1,
duration: 400,
useNativeDriver: true,
}).start();
})
.catch((error) => {
// If prefetch fails, still show the image but without animation
if (__DEV__) logger.warn('[AndroidVideoPlayer] Backdrop prefetch failed, showing anyway:', error);
setIsBackdropLoaded(true);
backdropImageOpacityAnim.setValue(1);
});
} else {
// No backdrop provided, consider it "loaded"
setIsBackdropLoaded(true);
backdropImageOpacityAnim.setValue(0);
}
}, [backdrop]);
@ -2171,9 +2197,16 @@ const AndroidVideoPlayer: React.FC = () => {
pointerEvents={isOpeningAnimationComplete ? 'none' : 'auto'}
>
{backdrop && (
<Image
<Animated.Image
source={{ uri: backdrop }}
style={[StyleSheet.absoluteFill, { width: screenDimensions.width, height: screenDimensions.height }]}
style={[
StyleSheet.absoluteFill,
{
width: screenDimensions.width,
height: screenDimensions.height,
opacity: backdropImageOpacityAnim
}
]}
resizeMode="cover"
blurRadius={0}
/>

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

@ -157,6 +157,8 @@ const VideoPlayer: React.FC = () => {
const openingFadeAnim = useRef(new Animated.Value(0)).current;
const openingScaleAnim = useRef(new Animated.Value(0.8)).current;
const backgroundFadeAnim = useRef(new Animated.Value(1)).current;
const [isBackdropLoaded, setIsBackdropLoaded] = useState(false);
const backdropImageOpacityAnim = useRef(new Animated.Value(0)).current;
const [isBuffering, setIsBuffering] = useState(false);
const [vlcAudioTracks, setVlcAudioTracks] = useState<Array<{ id: number, name: string, language?: string }>>([]);
const [vlcTextTracks, setVlcTextTracks] = useState<Array<{ id: number, name: string, language?: string }>>([]);
@ -286,7 +288,31 @@ const VideoPlayer: React.FC = () => {
// Prefetch backdrop and title logo for faster loading screen appearance
useEffect(() => {
if (backdrop && typeof backdrop === 'string') {
Image.prefetch(backdrop).catch(() => {});
// Reset loading state
setIsBackdropLoaded(false);
backdropImageOpacityAnim.setValue(0);
// Prefetch the image
Image.prefetch(backdrop)
.then(() => {
// Image loaded successfully, fade it in smoothly
setIsBackdropLoaded(true);
Animated.timing(backdropImageOpacityAnim, {
toValue: 1,
duration: 400,
useNativeDriver: true,
}).start();
})
.catch((error) => {
// If prefetch fails, still show the image but without animation
if (__DEV__) logger.warn('[VideoPlayer] Backdrop prefetch failed, showing anyway:', error);
setIsBackdropLoaded(true);
backdropImageOpacityAnim.setValue(1);
});
} else {
// No backdrop provided, consider it "loaded"
setIsBackdropLoaded(true);
backdropImageOpacityAnim.setValue(0);
}
}, [backdrop]);
@ -1961,9 +1987,16 @@ const VideoPlayer: React.FC = () => {
pointerEvents={isOpeningAnimationComplete ? 'none' : 'auto'}
>
{backdrop && (
<Image
<Animated.Image
source={{ uri: backdrop }}
style={[StyleSheet.absoluteFill, { width: screenDimensions.width, height: screenDimensions.height }]}
style={[
StyleSheet.absoluteFill,
{
width: screenDimensions.width,
height: screenDimensions.height,
opacity: backdropImageOpacityAnim
}
]}
resizeMode="cover"
blurRadius={0}
/>