Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-01-11 20:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui fix

Browse source
This commit is contained in:
tapframe 2025-10-28 00:26:40 +05:30
parent 1287d7f6a0
commit f13266b1fc
3 changed files with 152 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -39,6 +39,7 @@ import { safeDebugLog, parseSRT, DEBUG_MODE, formatTime } from './utils/playerUt
import { styles } from './utils/playerStyles';
import { SubtitleModals } from './modals/SubtitleModals';
import { AudioTrackModal } from './modals/AudioTrackModal';
import LoadingOverlay from './modals/LoadingOverlay';
import SpeedModal from './modals/SpeedModal';
// Removed ResumeOverlay usage when alwaysResume is enabled
import PlayerControls from './controls/PlayerControls';
@ -3115,81 +3116,21 @@ const AndroidVideoPlayer: React.FC = () => {
top: 0,
left: 0,
}]}>
{!shouldHideOpeningOverlay && (
<Animated.View
style={[
styles.openingOverlay,
{
opacity: backgroundFadeAnim,
zIndex: 3000,
width: screenDimensions.width,
height: screenDimensions.height,
}
]}
>
{backdrop && (
<Animated.View style={[
StyleSheet.absoluteFill,
{
width: screenDimensions.width,
height: screenDimensions.height,
opacity: backdropImageOpacityAnim
}
]}>
<Image
source={{ uri: backdrop }}
style={StyleSheet.absoluteFillObject}
resizeMode="cover"
/>
</Animated.View>
)}
<LinearGradient
colors={[
'rgba(0,0,0,0.3)',
'rgba(0,0,0,0.6)',
'rgba(0,0,0,0.8)',
'rgba(0,0,0,0.9)'
]}
locations={[0, 0.3, 0.7, 1]}
style={StyleSheet.absoluteFill}
/>
<TouchableOpacity
style={styles.loadingCloseButton}
onPress={handleClose}
activeOpacity={0.7}
>
<MaterialIcons name="close" size={24} color="#ffffff" />
</TouchableOpacity>
<View style={styles.openingContent}>
{hasLogo ? (
<>
<Animated.View style={{
transform: [
{ scale: Animated.multiply(logoScaleAnim, pulseAnim) }
],
opacity: logoOpacityAnim,
alignItems: 'center',
}}>
<FastImage
source={{ uri: metadata.logo }}
style={{
width: 300,
height: 180,
}}
resizeMode={FastImage.resizeMode.contain}
/>
</Animated.View>
</>
) : (
<>
<ActivityIndicator size="large" color="#E50914" />
</>
)}
</View>
</Animated.View>
)}
<LoadingOverlay
visible={!shouldHideOpeningOverlay}
backdrop={backdrop || null}
hasLogo={hasLogo}
logo={metadata?.logo}
backgroundFadeAnim={backgroundFadeAnim}
backdropImageOpacityAnim={backdropImageOpacityAnim}
logoScaleAnim={logoScaleAnim}
logoOpacityAnim={logoOpacityAnim}
pulseAnim={pulseAnim}
onClose={handleClose}
width={screenDimensions.width}
height={screenDimensions.height}
useFastImage={false}
/>
<Animated.View
style={[

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

@ -46,6 +46,7 @@ import PlayerControls from './controls/PlayerControls';
import CustomSubtitles from './subtitles/CustomSubtitles';
import { SourcesModal } from './modals/SourcesModal';
import { EpisodesModal } from './modals/EpisodesModal';
import LoadingOverlay from './modals/LoadingOverlay';
import { EpisodeStreamsModal } from './modals/EpisodeStreamsModal';
import { Episode } from '../../types/metadata';
import axios from 'axios';
@ -2501,80 +2502,22 @@ const KSPlayerCore: React.FC = () => {
top: 0,
left: 0,
}]}>
{!DISABLE_OPENING_OVERLAY && !shouldHideOpeningOverlay && (
<Animated.View
style={[
styles.openingOverlay,
{
opacity: backgroundFadeAnim,
zIndex: 3000,
width: shouldUseFullscreen ? '100%' : screenDimensions.width,
height: shouldUseFullscreen ? '100%' : screenDimensions.height,
}
]}
>
{backdrop && (
<Animated.View style={[
StyleSheet.absoluteFill,
{
width: shouldUseFullscreen ? '100%' : screenDimensions.width,
height: shouldUseFullscreen ? '100%' : screenDimensions.height,
opacity: backdropImageOpacityAnim
}
]}>
<FastImage
source={{ uri: backdrop }}
style={StyleSheet.absoluteFillObject}
resizeMode={FastImage.resizeMode.cover}
/>
</Animated.View>
)}
<LinearGradient
colors={[
'rgba(0,0,0,0.3)',
'rgba(0,0,0,0.6)',
'rgba(0,0,0,0.8)',
'rgba(0,0,0,0.9)'
]}
locations={[0, 0.3, 0.7, 1]}
style={StyleSheet.absoluteFill}
{!DISABLE_OPENING_OVERLAY && (
<LoadingOverlay
visible={!shouldHideOpeningOverlay}
backdrop={backdrop || null}
hasLogo={hasLogo}
logo={metadata?.logo}
backgroundFadeAnim={backgroundFadeAnim}
backdropImageOpacityAnim={backdropImageOpacityAnim}
logoScaleAnim={logoScaleAnim}
logoOpacityAnim={logoOpacityAnim}
pulseAnim={pulseAnim}
onClose={handleClose}
width={shouldUseFullscreen ? effectiveDimensions.width : screenDimensions.width}
height={shouldUseFullscreen ? effectiveDimensions.height : screenDimensions.height}
useFastImage={true}
/>
<TouchableOpacity
style={styles.loadingCloseButton}
onPress={handleClose}
activeOpacity={0.7}
>
<MaterialIcons name="close" size={24} color="#ffffff" />
</TouchableOpacity>
<View style={styles.openingContent}>
{hasLogo ? (
<>
<Animated.View style={{
transform: [
{ scale: Animated.multiply(logoScaleAnim, pulseAnim) }
],
opacity: logoOpacityAnim,
alignItems: 'center',
}}>
<FastImage
source={{ uri: metadata.logo }}
style={{
width: 300,
height: 180,
}}
resizeMode={FastImage.resizeMode.contain}
/>
</Animated.View>
</>
) : (
<>
<ActivityIndicator size="large" color="#E50914" />
</>
)}
</View>
</Animated.View>
)}
<Animated.View

120
src/components/player/modals/LoadingOverlay.tsx Normal file
View file

@ -0,0 +1,120 @@
import React from 'react';
import { View, TouchableOpacity, Animated, ActivityIndicator, StyleSheet, Image } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import FastImage from '@d11/react-native-fast-image';
import { styles } from '../utils/playerStyles';
interface LoadingOverlayProps {
visible: boolean;
backdrop: string | null | undefined;
hasLogo: boolean;
logo: string | null | undefined;
backgroundFadeAnim: Animated.Value;
backdropImageOpacityAnim: Animated.Value;
logoScaleAnim: Animated.Value;
logoOpacityAnim: Animated.Value;
pulseAnim: Animated.Value;
onClose: () => void;
width: number | string;
height: number | string;
useFastImage?: boolean; // Platform-specific: iOS uses FastImage, Android uses Image
}
const LoadingOverlay: React.FC<LoadingOverlayProps> = ({
visible,
backdrop,
hasLogo,
logo,
backgroundFadeAnim,
backdropImageOpacityAnim,
logoScaleAnim,
logoOpacityAnim,
pulseAnim,
onClose,
width,
height,
useFastImage = false,
}) => {
if (!visible) return null;
return (
<Animated.View
style={[
styles.openingOverlay,
{
opacity: backgroundFadeAnim,
zIndex: 3000,
},
// Cast to any to support both number and string dimensions
{ width, height } as any,
]}
>
{backdrop && (
<Animated.View style={[
StyleSheet.absoluteFill,
{
opacity: backdropImageOpacityAnim
}
]}>
{useFastImage ? (
<FastImage
source={{ uri: backdrop }}
style={StyleSheet.absoluteFillObject}
resizeMode={FastImage.resizeMode.cover}
/>
) : (
<Image
source={{ uri: backdrop }}
style={StyleSheet.absoluteFillObject}
resizeMode="cover"
/>
)}
</Animated.View>
)}
<LinearGradient
colors={[
'rgba(0,0,0,0.3)',
'rgba(0,0,0,0.6)',
'rgba(0,0,0,0.8)',
'rgba(0,0,0,0.9)'
]}
locations={[0, 0.3, 0.7, 1]}
style={StyleSheet.absoluteFill}
/>
<TouchableOpacity
style={styles.loadingCloseButton}
onPress={onClose}
activeOpacity={0.7}
>
<MaterialIcons name="close" size={24} color="#ffffff" />
</TouchableOpacity>
<View style={styles.openingContent}>
{hasLogo && logo ? (
<Animated.View style={{
transform: [
{ scale: Animated.multiply(logoScaleAnim, pulseAnim) }
],
opacity: logoOpacityAnim,
alignItems: 'center',
}}>
<FastImage
source={{ uri: logo }}
style={{
width: 300,
height: 180,
}}
resizeMode={FastImage.resizeMode.contain}
/>
</Animated.View>
) : (
<ActivityIndicator size="large" color="#E50914" />
)}
</View>
</Animated.View>
);
};
export default LoadingOverlay;