mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-21 00:32:04 +00:00
ui fix
This commit is contained in:
tapframe
parent
1287d7f6a0
commit
f13266b1fc
3 changed files with 152 additions and 148 deletions
|
|
@ -39,6 +39,7 @@ import { safeDebugLog, parseSRT, DEBUG_MODE, formatTime } from './utils/playerUt
|
||||||
import { styles } from './utils/playerStyles';
|
import { styles } from './utils/playerStyles';
|
||||||
import { SubtitleModals } from './modals/SubtitleModals';
|
import { SubtitleModals } from './modals/SubtitleModals';
|
||||||
import { AudioTrackModal } from './modals/AudioTrackModal';
|
import { AudioTrackModal } from './modals/AudioTrackModal';
|
||||||
|
import LoadingOverlay from './modals/LoadingOverlay';
|
||||||
import SpeedModal from './modals/SpeedModal';
|
import SpeedModal from './modals/SpeedModal';
|
||||||
// Removed ResumeOverlay usage when alwaysResume is enabled
|
// Removed ResumeOverlay usage when alwaysResume is enabled
|
||||||
import PlayerControls from './controls/PlayerControls';
|
import PlayerControls from './controls/PlayerControls';
|
||||||
|
|
@ -3115,81 +3116,21 @@ const AndroidVideoPlayer: React.FC = () => {
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
}]}>
|
}]}>
|
||||||
{!shouldHideOpeningOverlay && (
|
<LoadingOverlay
|
||||||
<Animated.View
|
visible={!shouldHideOpeningOverlay}
|
||||||
style={[
|
backdrop={backdrop || null}
|
||||||
styles.openingOverlay,
|
hasLogo={hasLogo}
|
||||||
{
|
logo={metadata?.logo}
|
||||||
opacity: backgroundFadeAnim,
|
backgroundFadeAnim={backgroundFadeAnim}
|
||||||
zIndex: 3000,
|
backdropImageOpacityAnim={backdropImageOpacityAnim}
|
||||||
width: screenDimensions.width,
|
logoScaleAnim={logoScaleAnim}
|
||||||
height: screenDimensions.height,
|
logoOpacityAnim={logoOpacityAnim}
|
||||||
}
|
pulseAnim={pulseAnim}
|
||||||
]}
|
onClose={handleClose}
|
||||||
>
|
width={screenDimensions.width}
|
||||||
{backdrop && (
|
height={screenDimensions.height}
|
||||||
<Animated.View style={[
|
useFastImage={false}
|
||||||
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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Animated.View
|
<Animated.View
|
||||||
style={[
|
style={[
|
||||||
|
|
|
||||||
|
|
@ -46,6 +46,7 @@ import PlayerControls from './controls/PlayerControls';
|
||||||
import CustomSubtitles from './subtitles/CustomSubtitles';
|
import CustomSubtitles from './subtitles/CustomSubtitles';
|
||||||
import { SourcesModal } from './modals/SourcesModal';
|
import { SourcesModal } from './modals/SourcesModal';
|
||||||
import { EpisodesModal } from './modals/EpisodesModal';
|
import { EpisodesModal } from './modals/EpisodesModal';
|
||||||
|
import LoadingOverlay from './modals/LoadingOverlay';
|
||||||
import { EpisodeStreamsModal } from './modals/EpisodeStreamsModal';
|
import { EpisodeStreamsModal } from './modals/EpisodeStreamsModal';
|
||||||
import { Episode } from '../../types/metadata';
|
import { Episode } from '../../types/metadata';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
@ -2501,80 +2502,22 @@ const KSPlayerCore: React.FC = () => {
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
}]}>
|
}]}>
|
||||||
{!DISABLE_OPENING_OVERLAY && !shouldHideOpeningOverlay && (
|
{!DISABLE_OPENING_OVERLAY && (
|
||||||
<Animated.View
|
<LoadingOverlay
|
||||||
style={[
|
visible={!shouldHideOpeningOverlay}
|
||||||
styles.openingOverlay,
|
backdrop={backdrop || null}
|
||||||
{
|
hasLogo={hasLogo}
|
||||||
opacity: backgroundFadeAnim,
|
logo={metadata?.logo}
|
||||||
zIndex: 3000,
|
backgroundFadeAnim={backgroundFadeAnim}
|
||||||
width: shouldUseFullscreen ? '100%' : screenDimensions.width,
|
backdropImageOpacityAnim={backdropImageOpacityAnim}
|
||||||
height: shouldUseFullscreen ? '100%' : screenDimensions.height,
|
logoScaleAnim={logoScaleAnim}
|
||||||
}
|
logoOpacityAnim={logoOpacityAnim}
|
||||||
]}
|
pulseAnim={pulseAnim}
|
||||||
>
|
onClose={handleClose}
|
||||||
{backdrop && (
|
width={shouldUseFullscreen ? effectiveDimensions.width : screenDimensions.width}
|
||||||
<Animated.View style={[
|
height={shouldUseFullscreen ? effectiveDimensions.height : screenDimensions.height}
|
||||||
StyleSheet.absoluteFill,
|
useFastImage={true}
|
||||||
{
|
|
||||||
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}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<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
|
<Animated.View
|
||||||
|
|
|
||||||
120
src/components/player/modals/LoadingOverlay.tsx
Normal file
120
src/components/player/modals/LoadingOverlay.tsx
Normal 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;
|
||||||
Loading…
Reference in a new issue