Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-04-21 00:32:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

loading overlay re renderfix

Browse source
This commit is contained in:
tapframe 2025-10-28 00:12:40 +05:30
parent e437a23029
commit 1287d7f6a0
2 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -217,6 +217,7 @@ const AndroidVideoPlayer: React.FC = () => {
const isSourceSeekableRef = useRef<boolean | null>(null); const isSourceSeekableRef = useRef<boolean | null>(null);
const fadeAnim = useRef(new Animated.Value(1)).current; const fadeAnim = useRef(new Animated.Value(1)).current;
const [isOpeningAnimationComplete, setIsOpeningAnimationComplete] = useState(false); const [isOpeningAnimationComplete, setIsOpeningAnimationComplete] = useState(false);
const [shouldHideOpeningOverlay, setShouldHideOpeningOverlay] = useState(false);
const openingFadeAnim = useRef(new Animated.Value(0)).current; const openingFadeAnim = useRef(new Animated.Value(0)).current;
const openingScaleAnim = useRef(new Animated.Value(0.8)).current; const openingScaleAnim = useRef(new Animated.Value(0.8)).current;
const backgroundFadeAnim = useRef(new Animated.Value(1)).current; const backgroundFadeAnim = useRef(new Animated.Value(1)).current;
@ -977,6 +978,9 @@ const AndroidVideoPlayer: React.FC = () => {
}; };
const completeOpeningAnimation = () => { const completeOpeningAnimation = () => {
// Stop the pulse animation immediately
pulseAnim.stopAnimation();
Animated.parallel([ Animated.parallel([
Animated.timing(openingFadeAnim, { Animated.timing(openingFadeAnim, {
toValue: 1, toValue: 1,
@ -994,11 +998,12 @@ const AndroidVideoPlayer: React.FC = () => {
useNativeDriver: true, useNativeDriver: true,
}), }),
]).start(() => { ]).start(() => {
openingScaleAnim.setValue(1);
openingFadeAnim.setValue(1);
setIsOpeningAnimationComplete(true); setIsOpeningAnimationComplete(true);
// Removed the 100ms delay
backgroundFadeAnim.setValue(0); // Delay hiding the overlay to allow background fade animation to complete
setTimeout(() => {
setShouldHideOpeningOverlay(true);
}, 450); // Slightly longer than the background fade duration
}); });
// Fallback: ensure animation completes even if something goes wrong // Fallback: ensure animation completes even if something goes wrong
@ -1006,9 +1011,6 @@ const AndroidVideoPlayer: React.FC = () => {
if (!isOpeningAnimationComplete) { if (!isOpeningAnimationComplete) {
if (__DEV__) logger.warn('[AndroidVideoPlayer] Opening animation fallback triggered'); if (__DEV__) logger.warn('[AndroidVideoPlayer] Opening animation fallback triggered');
setIsOpeningAnimationComplete(true); setIsOpeningAnimationComplete(true);
openingScaleAnim.setValue(1);
openingFadeAnim.setValue(1);
backgroundFadeAnim.setValue(0);
} }
}, 1000); // 1 second fallback }, 1000); // 1 second fallback
}; };
@ -3113,17 +3115,17 @@ const AndroidVideoPlayer: React.FC = () => {
top: 0, top: 0,
left: 0, left: 0,
}]}> }]}>
{!shouldHideOpeningOverlay && (
<Animated.View <Animated.View
style={[ style={[
styles.openingOverlay, styles.openingOverlay,
{ {
opacity: backgroundFadeAnim, opacity: backgroundFadeAnim,
zIndex: isOpeningAnimationComplete ? -1 : 3000, zIndex: 3000,
width: screenDimensions.width, width: screenDimensions.width,
height: screenDimensions.height, height: screenDimensions.height,
} }
]} ]}
pointerEvents={isOpeningAnimationComplete ? 'none' : 'auto'}
> >
{backdrop && ( {backdrop && (
<Animated.View style={[ <Animated.View style={[
@ -3187,13 +3189,14 @@ const AndroidVideoPlayer: React.FC = () => {
)} )}
</View> </View>
</Animated.View> </Animated.View>
)}
<Animated.View <Animated.View
style={[ style={[
styles.videoPlayerContainer, styles.videoPlayerContainer,
{ {
opacity: openingFadeAnim, opacity: openingFadeAnim,
transform: isOpeningAnimationComplete ? [] : [{ scale: openingScaleAnim }], transform: [{ scale: openingScaleAnim }],
width: screenDimensions.width, width: screenDimensions.width,
height: screenDimensions.height, height: screenDimensions.height,
} }

10
src/components/player/KSPlayerCore.tsx
View file

@ -676,6 +676,9 @@ const KSPlayerCore: React.FC = () => {
}; };
const completeOpeningAnimation = () => { const completeOpeningAnimation = () => {
// Stop the pulse animation immediately
pulseAnim.stopAnimation();
Animated.parallel([ Animated.parallel([
Animated.timing(openingFadeAnim, { Animated.timing(openingFadeAnim, {
toValue: 1, toValue: 1,
@ -2498,18 +2501,17 @@ const KSPlayerCore: React.FC = () => {
top: 0, top: 0,
left: 0, left: 0,
}]}> }]}>
{!DISABLE_OPENING_OVERLAY && ( {!DISABLE_OPENING_OVERLAY && !shouldHideOpeningOverlay && (
<Animated.View <Animated.View
style={[ style={[
styles.openingOverlay, styles.openingOverlay,
{ {
opacity: backgroundFadeAnim, opacity: backgroundFadeAnim,
zIndex: shouldHideOpeningOverlay ? -1 : 3000, zIndex: 3000,
width: shouldUseFullscreen ? '100%' : screenDimensions.width, width: shouldUseFullscreen ? '100%' : screenDimensions.width,
height: shouldUseFullscreen ? '100%' : screenDimensions.height, height: shouldUseFullscreen ? '100%' : screenDimensions.height,
} }
]} ]}
pointerEvents={shouldHideOpeningOverlay ? 'none' : 'auto'}
> >
{backdrop && ( {backdrop && (
<Animated.View style={[ <Animated.View style={[
@ -2580,7 +2582,7 @@ const KSPlayerCore: React.FC = () => {
styles.videoPlayerContainer, styles.videoPlayerContainer,
{ {
opacity: DISABLE_OPENING_OVERLAY ? 1 : openingFadeAnim, opacity: DISABLE_OPENING_OVERLAY ? 1 : openingFadeAnim,
transform: DISABLE_OPENING_OVERLAY ? [] : [{ scale: openingScaleAnim }], transform: DISABLE_OPENING_OVERLAY ? [{ scale: 1 }] : [{ scale: openingScaleAnim }],
width: shouldUseFullscreen ? '100%' : screenDimensions.width, width: shouldUseFullscreen ? '100%' : screenDimensions.width,
height: shouldUseFullscreen ? '100%' : screenDimensions.height, height: shouldUseFullscreen ? '100%' : screenDimensions.height,
} }