mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-03-11 17:45:38 +00:00
Merge pull request #292 from AdityasahuX07/patch-14
Video player Ui changes
This commit is contained in:
Nayif
GitHub
commit
d2987ce0cc
6 changed files with 734 additions and 1374 deletions
|
|
@ -1,18 +1,19 @@
|
|||
import React from 'react';
|
||||
import { View, Text, TouchableOpacity, ScrollView, StyleSheet, Platform, useWindowDimensions } from 'react-native';
|
||||
import { View, Text, TouchableOpacity, ScrollView, useWindowDimensions, StyleSheet, Platform } from 'react-native';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import Animated, {
|
||||
FadeIn,
|
||||
FadeOut,
|
||||
SlideInRight,
|
||||
SlideOutRight,
|
||||
SlideInDown,
|
||||
SlideOutDown,
|
||||
} from 'react-native-reanimated';
|
||||
import { getTrackDisplayName } from '../utils/playerUtils';
|
||||
import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils';
|
||||
import { logger } from '../../../utils/logger';
|
||||
|
||||
interface AudioTrackModalProps {
|
||||
showAudioModal: boolean;
|
||||
setShowAudioModal: (show: boolean) => void;
|
||||
ksAudioTracks: Array<{ id: number, name: string, language?: string }>;
|
||||
ksAudioTracks: Array<{id: number, name: string, language?: string}>;
|
||||
selectedAudioTrack: number | null;
|
||||
selectAudioTrack: (trackId: number) => void;
|
||||
}
|
||||
|
|
@ -24,89 +25,99 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
|
|||
selectedAudioTrack,
|
||||
selectAudioTrack,
|
||||
}) => {
|
||||
const { width } = useWindowDimensions();
|
||||
const MENU_WIDTH = Math.min(width * 0.85, 400);
|
||||
const { width, height } = useWindowDimensions();
|
||||
|
||||
// Size constants matching SubtitleModal aesthetics
|
||||
const menuWidth = Math.min(width * 0.9, 420);
|
||||
const menuMaxHeight = height * 0.9;
|
||||
|
||||
const handleClose = () => setShowAudioModal(false);
|
||||
|
||||
if (!showAudioModal) return null;
|
||||
|
||||
return (
|
||||
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
|
||||
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
|
||||
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
|
||||
<View style={StyleSheet.absoluteFill} zIndex={9999}>
|
||||
{/* Backdrop matching SubtitleModal */}
|
||||
<TouchableOpacity
|
||||
style={StyleSheet.absoluteFill}
|
||||
activeOpacity={1}
|
||||
onPress={handleClose}
|
||||
>
|
||||
<Animated.View
|
||||
entering={FadeIn.duration(200)}
|
||||
exiting={FadeOut.duration(150)}
|
||||
style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)' }}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Animated.View
|
||||
entering={SlideInRight.duration(300)}
|
||||
exiting={SlideOutRight.duration(250)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: MENU_WIDTH,
|
||||
backgroundColor: '#0f0f0f',
|
||||
borderLeftWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
}}
|
||||
>
|
||||
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
||||
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Audio Tracks</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
|
||||
{/* Center Alignment Container */}
|
||||
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none">
|
||||
<Animated.View
|
||||
entering={SlideInDown.duration(300)}
|
||||
exiting={SlideOutDown.duration(250)}
|
||||
style={{
|
||||
width: menuWidth,
|
||||
maxHeight: menuMaxHeight,
|
||||
backgroundColor: 'rgba(15, 15, 15, 0.98)', // Matches SubtitleModal
|
||||
borderRadius: 24,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<View style={{ gap: 8 }}>
|
||||
{ksAudioTracks.map((track) => {
|
||||
const isSelected = selectedAudioTrack === track.id;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={track.id}
|
||||
onPress={() => {
|
||||
selectAudioTrack(track.id);
|
||||
setTimeout(handleClose, 200);
|
||||
}}
|
||||
style={{
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
|
||||
borderWidth: 1,
|
||||
borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{
|
||||
color: isSelected ? 'black' : 'white',
|
||||
fontWeight: isSelected ? '700' : '500',
|
||||
fontSize: 15
|
||||
}}>
|
||||
{getTrackDisplayName(track)}
|
||||
</Text>
|
||||
</View>
|
||||
{isSelected && <MaterialIcons name="check" size={18} color="black" />}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
|
||||
{ksAudioTracks.length === 0 && (
|
||||
<View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
|
||||
<MaterialIcons name="volume-off" size={32} color="white" />
|
||||
<Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text>
|
||||
</View>
|
||||
)}
|
||||
{/* Header with shared aesthetics */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
|
||||
<Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Audio Tracks</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Animated.View>
|
||||
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }}
|
||||
>
|
||||
<View style={{ gap: 8 }}>
|
||||
{ksAudioTracks.map((track) => {
|
||||
const isSelected = selectedAudioTrack === track.id;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={track.id}
|
||||
onPress={() => {
|
||||
selectAudioTrack(track.id);
|
||||
setTimeout(handleClose, 200);
|
||||
}}
|
||||
style={{
|
||||
padding: 10,
|
||||
borderRadius: 12,
|
||||
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)', // Matches SubtitleModal item colors
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{
|
||||
color: isSelected ? 'black' : 'white',
|
||||
fontWeight: isSelected ? '700' : '400',
|
||||
fontSize: 15
|
||||
}}>
|
||||
{getTrackDisplayName(track)}
|
||||
</Text>
|
||||
</View>
|
||||
{isSelected && <MaterialIcons name="check" size={18} color="black" />}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
|
||||
{ksAudioTracks.length === 0 && (
|
||||
<View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
|
||||
<MaterialIcons name="volume-off" size={32} color="white" />
|
||||
<Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -31,34 +31,22 @@ const QualityBadge = ({ quality }: { quality: string | null }) => {
|
|||
color = '#F59E0B';
|
||||
label = '4K';
|
||||
} else if (qualityNum >= 1080) {
|
||||
color = '#EF4444';
|
||||
label = 'FHD';
|
||||
color = '#3B82F6';
|
||||
label = '1080p';
|
||||
} else if (qualityNum >= 720) {
|
||||
color = '#10B981';
|
||||
label = 'HD';
|
||||
label = '720p';
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: `${color}20`,
|
||||
borderColor: `${color}60`,
|
||||
borderWidth: 1,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 8,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Text style={{
|
||||
color: color,
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 0.5,
|
||||
}}>
|
||||
{label}
|
||||
</Text>
|
||||
<View style={{
|
||||
backgroundColor: color,
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 4,
|
||||
marginLeft: 8,
|
||||
}}>
|
||||
<Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>{label}</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
|
@ -114,7 +102,6 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
|
|||
respondedProviders.add(addonId);
|
||||
|
||||
if (error) {
|
||||
logger.warn(`[EpisodeStreamsModal] Error from ${addonName || addonId}:`, error);
|
||||
setHasErrors(prev => [...prev, `${addonName || addonId}: ${error.message || 'Unknown error'}`]);
|
||||
} else if (streams && streams.length > 0) {
|
||||
setAvailableStreams(prev => ({
|
||||
|
|
@ -124,29 +111,20 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
|
|||
addonName: addonName || addonId
|
||||
}
|
||||
}));
|
||||
logger.log(`[EpisodeStreamsModal] Added ${streams.length} streams from ${addonName || addonId}`);
|
||||
} else {
|
||||
logger.log(`[EpisodeStreamsModal] No streams from ${addonName || addonId}`);
|
||||
}
|
||||
|
||||
if (completedProviders >= expectedProviders.size) {
|
||||
logger.log(`[EpisodeStreamsModal] All providers completed. Total providers responded: ${respondedProviders.size}`);
|
||||
setIsLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
// Fallback timeout
|
||||
setTimeout(() => {
|
||||
if (respondedProviders.size === 0) {
|
||||
logger.warn(`[EpisodeStreamsModal] Timeout: No providers responded`);
|
||||
setHasErrors(prev => [...prev, 'Timeout: No providers responded']);
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, 8000);
|
||||
|
||||
} catch (error) {
|
||||
logger.error('[EpisodeStreamsModal] Error fetching streams:', error);
|
||||
setHasErrors(prev => [...prev, `Failed to fetch streams: ${error}`]);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
|
@ -162,9 +140,18 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
|
|||
const sortedProviders = Object.entries(availableStreams);
|
||||
|
||||
return (
|
||||
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
|
||||
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={onClose}>
|
||||
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
|
||||
<View style={StyleSheet.absoluteFill} zIndex={10000}>
|
||||
{/* Backdrop */}
|
||||
<TouchableOpacity
|
||||
style={StyleSheet.absoluteFill}
|
||||
activeOpacity={1}
|
||||
onPress={onClose}
|
||||
>
|
||||
<Animated.View
|
||||
entering={FadeIn.duration(200)}
|
||||
exiting={FadeOut.duration(150)}
|
||||
style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Animated.View
|
||||
|
|
@ -181,15 +168,20 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
|
|||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
}}
|
||||
>
|
||||
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }} numberOfLines={1}>
|
||||
{episode?.name || 'Select Stream'}
|
||||
{/* Header */}
|
||||
<View style={{
|
||||
paddingTop: Platform.OS === 'ios' ? 60 : 20,
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 20,
|
||||
}}>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<View style={{ flex: 1, marginRight: 10 }}>
|
||||
<Text style={{ color: 'white', fontSize: 20, fontWeight: '700' }} numberOfLines={1}>
|
||||
{episode?.name || 'Sources'}
|
||||
</Text>
|
||||
{episode && (
|
||||
<Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13, marginTop: 4 }}>
|
||||
S{episode.season_number}E{episode.episode_number}
|
||||
<Text style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, marginTop: 4 }}>
|
||||
S{episode.season_number} • E{episode.episode_number}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
|
@ -198,176 +190,82 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
|
|||
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
|
||||
contentContainerStyle={{ paddingHorizontal: 15, paddingBottom: 40 }}
|
||||
>
|
||||
{isLoading && (
|
||||
<View style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<ActivityIndicator size="large" color="#3B82F6" />
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
fontSize: 14,
|
||||
marginTop: 12,
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
Finding available streams...
|
||||
</Text>
|
||||
{isLoading && sortedProviders.length === 0 && (
|
||||
<View style={{ padding: 40, alignItems: 'center' }}>
|
||||
<ActivityIndicator color="white" />
|
||||
<Text style={{ color: 'white', marginTop: 15, opacity: 0.6 }}>Finding sources...</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{!isLoading && sortedProviders.length > 0 && (
|
||||
sortedProviders.map(([providerId, providerData]) => (
|
||||
<View key={providerId} style={{ marginBottom: 30 }}>
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
marginBottom: 15,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
}}>
|
||||
{providerData.addonName} ({providerData.streams.length})
|
||||
</Text>
|
||||
|
||||
<View style={{ gap: 8 }}>
|
||||
{providerData.streams.map((stream, index) => {
|
||||
const quality = getQualityFromTitle(stream.title) || stream.quality;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={`${providerId}-${index}`}
|
||||
style={{
|
||||
backgroundColor: 'rgba(255,255,255,0.06)',
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
}}
|
||||
onPress={() => onSelectStream(stream)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<View style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 8,
|
||||
gap: 8,
|
||||
}}>
|
||||
<Text style={{
|
||||
color: 'white',
|
||||
fontSize: 15,
|
||||
fontWeight: '500',
|
||||
flex: 1,
|
||||
}}>
|
||||
{stream.title || stream.name || `Stream ${index + 1}`}
|
||||
</Text>
|
||||
{quality && <QualityBadge quality={quality} />}
|
||||
</View>
|
||||
|
||||
{(stream.size || stream.lang) && (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
|
||||
{stream.size && (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<MaterialIcons name="storage" size={14} color="rgba(255,255,255,0.5)" />
|
||||
<Text style={{
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginLeft: 4,
|
||||
}}>
|
||||
{(stream.size / (1024 * 1024 * 1024)).toFixed(1)} GB
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{stream.lang && (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<MaterialIcons name="language" size={14} color="rgba(59,130,246,0.8)" />
|
||||
<Text style={{
|
||||
color: 'rgba(59,130,246,0.8)',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginLeft: 4,
|
||||
}}>
|
||||
{stream.lang.toUpperCase()}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={{ marginLeft: 12, alignItems: 'center' }}>
|
||||
<MaterialIcons name="play-arrow" size={20} color="rgba(255,255,255,0.4)" />
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
|
||||
{!isLoading && sortedProviders.length === 0 && hasErrors.length === 0 && (
|
||||
<View style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<MaterialIcons name="error-outline" size={48} color="rgba(255,255,255,0.3)" />
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
fontSize: 16,
|
||||
marginTop: 16,
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
No sources available
|
||||
</Text>
|
||||
{sortedProviders.map(([providerId, providerData]) => (
|
||||
<View key={providerId} style={{ marginBottom: 20 }}>
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.4)',
|
||||
fontSize: 14,
|
||||
marginTop: 8,
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
marginBottom: 10,
|
||||
marginLeft: 5,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1,
|
||||
}}>
|
||||
Try searching for different content
|
||||
{providerData.addonName}
|
||||
</Text>
|
||||
|
||||
<View style={{ gap: 8 }}>
|
||||
{providerData.streams.map((stream, index) => {
|
||||
const quality = getQualityFromTitle(stream.title) || stream.quality;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={`${providerId}-${index}`}
|
||||
style={{
|
||||
padding: 8,
|
||||
borderRadius: 12,
|
||||
backgroundColor: 'rgba(255,255,255,0.05)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.05)'
|
||||
}}
|
||||
onPress={() => {
|
||||
onSelectStream(stream);
|
||||
onClose();
|
||||
}}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}>
|
||||
<Text style={{ color: 'white', fontWeight: '700', fontSize: 14, flex: 1 }} numberOfLines={1}>
|
||||
{stream.name || 'Unknown Source'}
|
||||
</Text>
|
||||
<QualityBadge quality={quality} />
|
||||
</View>
|
||||
{stream.title && (
|
||||
<Text style={{ color: 'rgba(255,255,255,0.5)', fontSize: 11 }} numberOfLines={2}>
|
||||
{stream.title}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
{!isLoading && sortedProviders.length === 0 && (
|
||||
<View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
|
||||
<MaterialIcons name="cloud-off" size={48} color="white" />
|
||||
<Text style={{ color: 'white', marginTop: 16, textAlign: 'center', fontWeight: '600' }}>No sources found</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{!isLoading && hasErrors.length > 0 && (
|
||||
<View style={{
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
marginBottom: 20,
|
||||
}}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 8 }}>
|
||||
<MaterialIcons name="error" size={20} color="#EF4444" />
|
||||
<Text style={{
|
||||
color: '#EF4444',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
marginLeft: 8,
|
||||
}}>
|
||||
Errors occurred
|
||||
</Text>
|
||||
</View>
|
||||
{hasErrors.map((error, index) => (
|
||||
<Text key={index} style={{
|
||||
color: '#EF4444',
|
||||
fontSize: 12,
|
||||
marginTop: 4,
|
||||
}}>
|
||||
{error}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
{hasErrors.length > 0 && (
|
||||
<View style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', borderRadius: 12, padding: 12, marginTop: 10 }}>
|
||||
<Text style={{ color: '#EF4444', fontSize: 11 }}>Sources might be limited due to provider errors.</Text>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</Animated.View>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
|
|||
text: '#FFFFFF',
|
||||
textMuted: 'rgba(255,255,255,0.6)',
|
||||
mediumEmphasis: 'rgba(255,255,255,0.7)',
|
||||
primary: '#3B82F6',
|
||||
primary: 'rgba(255,255,255,0.9)',
|
||||
white: '#FFFFFF',
|
||||
elevation2: 'rgba(255,255,255,0.05)'
|
||||
}
|
||||
|
|
@ -55,22 +55,12 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
|
|||
if (showEpisodesModal && metadata?.id) {
|
||||
setIsLoadingProgress(true);
|
||||
try {
|
||||
const allProgress = await storageService.getAllWatchProgress();
|
||||
const progress: { [key: string]: any } = {};
|
||||
|
||||
// Filter progress for current show's episodes
|
||||
Object.entries(allProgress).forEach(([key, value]) => {
|
||||
if (key.includes(metadata.id!)) {
|
||||
progress[key] = value;
|
||||
}
|
||||
});
|
||||
|
||||
setEpisodeProgress(progress);
|
||||
const progress = await storageService.getShowProgress(metadata.id);
|
||||
setEpisodeProgress(progress || {});
|
||||
|
||||
// Trakt sync logic preserved
|
||||
const traktService = TraktService.getInstance();
|
||||
if (await traktService.isAuthenticated()) {
|
||||
// Optional: background sync logic
|
||||
if (await TraktService.isAuthenticated()) {
|
||||
// Optional: background sync logic
|
||||
}
|
||||
} catch (err) {
|
||||
logger.error('Failed to fetch episode progress', err);
|
||||
|
|
@ -94,7 +84,7 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
|
|||
const currentSeasonEpisodes = groupedEpisodes[selectedSeason] || [];
|
||||
|
||||
return (
|
||||
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
|
||||
<View style={StyleSheet.absoluteFill} zIndex={9999}>
|
||||
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={() => setShowEpisodesModal(false)}>
|
||||
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
|
||||
</TouchableOpacity>
|
||||
|
|
@ -113,13 +103,18 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
|
|||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
}}
|
||||
>
|
||||
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
||||
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 20, paddingHorizontal: 20 }}>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
|
||||
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Episodes</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 15, gap: 8 }}>
|
||||
{seasons.map((season) => (
|
||||
{[...seasons]
|
||||
.sort((a, b) => {
|
||||
if (a === 0) return 1;
|
||||
if (b === 0) return -1;
|
||||
return a - b;
|
||||
}).map((season) => (
|
||||
<TouchableOpacity
|
||||
key={season}
|
||||
onPress={() => setSelectedSeason(season)}
|
||||
|
|
@ -136,14 +131,14 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
|
|||
color: selectedSeason === season ? 'black' : 'white',
|
||||
fontWeight: selectedSeason === season ? '700' : '500'
|
||||
}}>
|
||||
Season {season}
|
||||
{season === 0 ? 'Specials' : `Season ${season}`}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ padding: 15, paddingBottom: 40 }}>
|
||||
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ padding: 18, paddingBottom: 40 }}>
|
||||
{isLoadingProgress ? (
|
||||
<ActivityIndicator color="white" style={{ marginTop: 20 }} />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -22,41 +22,29 @@ const QualityBadge = ({ quality }: { quality: string | null }) => {
|
|||
if (!quality) return null;
|
||||
|
||||
const qualityNum = parseInt(quality);
|
||||
let color = '#8B5CF6'; // Default purple
|
||||
let color = '#8B5CF6';
|
||||
let label = `${quality}p`;
|
||||
|
||||
if (qualityNum >= 2160) {
|
||||
color = '#F59E0B'; // Gold for 4K
|
||||
color = '#F59E0B';
|
||||
label = '4K';
|
||||
} else if (qualityNum >= 1080) {
|
||||
color = '#EF4444'; // Red for 1080p
|
||||
label = 'FHD';
|
||||
color = '#3B82F6';
|
||||
label = '1080p';
|
||||
} else if (qualityNum >= 720) {
|
||||
color = '#10B981'; // Green for 720p
|
||||
label = 'HD';
|
||||
color = '#10B981';
|
||||
label = '720p';
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: `${color}20`,
|
||||
borderColor: `${color}60`,
|
||||
borderWidth: 1,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 8,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Text style={{
|
||||
color: color,
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 0.5,
|
||||
}}>
|
||||
{label}
|
||||
</Text>
|
||||
<View style={{
|
||||
backgroundColor: color,
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 4,
|
||||
marginLeft: 8,
|
||||
}}>
|
||||
<Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>{label}</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
|
@ -97,9 +85,18 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
|
||||
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
|
||||
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
|
||||
<View style={StyleSheet.absoluteFill} zIndex={10000}>
|
||||
{/* Backdrop */}
|
||||
<TouchableOpacity
|
||||
style={StyleSheet.absoluteFill}
|
||||
activeOpacity={1}
|
||||
onPress={handleClose}
|
||||
>
|
||||
<Animated.View
|
||||
entering={FadeIn.duration(200)}
|
||||
exiting={FadeOut.duration(150)}
|
||||
style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Animated.View
|
||||
|
|
@ -116,32 +113,35 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
|
|||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
}}
|
||||
>
|
||||
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
||||
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Change Source</Text>
|
||||
</View>
|
||||
{/* Header */}
|
||||
<View style={{
|
||||
paddingTop: Platform.OS === 'ios' ? 60 : 20,
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 20,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<Text style={{ color: 'white', fontSize: 20, fontWeight: '700' }}>
|
||||
Change Source
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
|
||||
contentContainerStyle={{ paddingHorizontal: 15, paddingBottom: 40 }}
|
||||
>
|
||||
{isChangingSource && (
|
||||
<View style={{
|
||||
backgroundColor: 'rgba(34, 197, 94, 0.1)',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
marginBottom: 20,
|
||||
borderRadius: 12,
|
||||
padding: 10,
|
||||
marginBottom: 15,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<ActivityIndicator size="small" color="#22C55E" />
|
||||
<Text style={{
|
||||
color: '#22C55E',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
marginLeft: 12,
|
||||
}}>
|
||||
<Text style={{ color: '#22C55E', fontSize: 14, fontWeight: '600', marginLeft: 10 }}>
|
||||
Switching source...
|
||||
</Text>
|
||||
</View>
|
||||
|
|
@ -149,14 +149,15 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
|
|||
|
||||
{sortedProviders.length > 0 ? (
|
||||
sortedProviders.map(([providerId, providerData]) => (
|
||||
<View key={providerId} style={{ marginBottom: 30 }}>
|
||||
<View key={providerId} style={{ marginBottom: 20 }}>
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
marginBottom: 15,
|
||||
color: 'rgba(255, 255, 255, 0.4)',
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
marginBottom: 10,
|
||||
marginLeft: 5,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
letterSpacing: 1,
|
||||
}}>
|
||||
{providerData.addonName} ({providerData.streams.length})
|
||||
</Text>
|
||||
|
|
@ -170,12 +171,12 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
|
|||
<TouchableOpacity
|
||||
key={`${providerId}-${index}`}
|
||||
style={{
|
||||
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
|
||||
padding: 8,
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)',
|
||||
borderWidth: 1,
|
||||
borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
|
||||
opacity: (isChangingSource && !isSelected) ? 0.6 : 1,
|
||||
borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)',
|
||||
opacity: (isChangingSource && !isSelected) ? 0.5 : 1,
|
||||
}}
|
||||
onPress={() => handleStreamSelect(stream)}
|
||||
activeOpacity={0.7}
|
||||
|
|
@ -183,60 +184,46 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
|
|||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<View style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 8,
|
||||
gap: 8,
|
||||
}}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<Text style={{
|
||||
color: isSelected ? 'black' : 'white',
|
||||
fontSize: 15,
|
||||
fontWeight: isSelected ? '700' : '500',
|
||||
fontSize: 14,
|
||||
flex: 1,
|
||||
}}>
|
||||
}} numberOfLines={1}>
|
||||
{stream.title || stream.name || `Stream ${index + 1}`}
|
||||
</Text>
|
||||
{quality && <QualityBadge quality={quality} />}
|
||||
<QualityBadge quality={quality} />
|
||||
</View>
|
||||
|
||||
{(stream.size || stream.lang) && (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
|
||||
{stream.size && (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<MaterialIcons name="storage" size={14} color={isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.5)'} />
|
||||
<Text style={{
|
||||
color: isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.5)',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginLeft: 4,
|
||||
}}>
|
||||
{(stream.size / (1024 * 1024 * 1024)).toFixed(1)} GB
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={{
|
||||
color: isSelected ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)',
|
||||
fontSize: 11,
|
||||
}}>
|
||||
{(stream.size / (1024 * 1024 * 1024)).toFixed(1)} GB
|
||||
</Text>
|
||||
)}
|
||||
{stream.lang && (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<MaterialIcons name="language" size={14} color={isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(59,130,246,0.8)'} />
|
||||
<Text style={{
|
||||
color: isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(59,130,246,0.8)',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginLeft: 4,
|
||||
}}>
|
||||
{stream.lang.toUpperCase()}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={{
|
||||
color: isSelected ? 'rgba(59, 130, 246, 1)' : 'rgba(59, 130, 246, 0.8)',
|
||||
fontSize: 11,
|
||||
fontWeight: '600',
|
||||
}}>
|
||||
{stream.lang.toUpperCase()}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={{ marginLeft: 12, alignItems: 'center' }}>
|
||||
<View style={{ marginLeft: 12 }}>
|
||||
{isSelected ? (
|
||||
<MaterialIcons name="check" size={18} color="black" />
|
||||
<MaterialIcons name="check" size={20} color="black" />
|
||||
) : (
|
||||
<MaterialIcons name="play-arrow" size={20} color="rgba(255,255,255,0.4)" />
|
||||
<MaterialIcons name="play-arrow" size={20} color="rgba(255,255,255,0.3)" />
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
|
@ -247,28 +234,10 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
|
|||
</View>
|
||||
))
|
||||
) : (
|
||||
<View style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<MaterialIcons name="error-outline" size={48} color="rgba(255,255,255,0.3)" />
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
fontSize: 16,
|
||||
marginTop: 16,
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
No sources available
|
||||
</Text>
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.4)',
|
||||
fontSize: 14,
|
||||
marginTop: 8,
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
Try searching for different content
|
||||
<View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
|
||||
<MaterialIcons name="cloud-off" size={48} color="white" />
|
||||
<Text style={{ color: 'white', marginTop: 16, textAlign: 'center', fontWeight: '600' }}>
|
||||
No sources found
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
|
@ -278,4 +247,4 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
|
|||
);
|
||||
};
|
||||
|
||||
export default SourcesModal;
|
||||
export default SourcesModal;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import React from 'react';
|
||||
import { View, Text, TouchableOpacity, Platform, useWindowDimensions, ScrollView, StyleSheet } from 'react-native';
|
||||
import { View, Text, TouchableOpacity, useWindowDimensions, StyleSheet } from 'react-native';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import Animated, {
|
||||
FadeIn,
|
||||
FadeOut,
|
||||
SlideInRight,
|
||||
SlideOutRight,
|
||||
SlideInDown,
|
||||
SlideOutDown,
|
||||
useAnimatedStyle,
|
||||
withTiming,
|
||||
} from 'react-native-reanimated';
|
||||
|
||||
interface SpeedModalProps {
|
||||
|
|
@ -19,7 +21,31 @@ interface SpeedModalProps {
|
|||
setHoldToSpeedValue: (speed: number) => void;
|
||||
}
|
||||
|
||||
export const SpeedModal: React.FC<SpeedModalProps> = ({
|
||||
const MorphingButton = ({ label, isSelected, onPress, isSmall = false }: any) => {
|
||||
const animatedStyle = useAnimatedStyle(() => {
|
||||
return {
|
||||
// Linear transition from 40 (Pill) to 10 (Rectangle)
|
||||
borderRadius: withTiming(isSelected ? 10 : 40, { duration: 250 }),
|
||||
backgroundColor: withTiming(isSelected ? (isSmall ? 'rgba(255,255,255,0.2)' : 'white') : 'rgba(255,255,255,0.06)', { duration: 50 }),
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<TouchableOpacity onPress={onPress} activeOpacity={0.8} style={{ flex: isSmall ? 0 : 1 }}>
|
||||
<Animated.View style={[{ paddingVertical: isSmall ? 6 : 8, paddingHorizontal: isSmall ? 14 : 0, alignItems: 'center', justifyContent: 'center' }, animatedStyle]}>
|
||||
<Text style={{
|
||||
color: isSelected && !isSmall ? 'black' : 'white',
|
||||
fontWeight: isSelected ? '700' : '400',
|
||||
fontSize: isSmall ? 11 : 13
|
||||
}}>
|
||||
{label}
|
||||
</Text>
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const SpeedModal: React.FC<SpeedModalProps> = ({
|
||||
showSpeedModal,
|
||||
setShowSpeedModal,
|
||||
currentSpeed,
|
||||
|
|
@ -30,219 +56,84 @@ export const SpeedModal: React.FC<SpeedModalProps> = ({
|
|||
setHoldToSpeedValue,
|
||||
}) => {
|
||||
const { width } = useWindowDimensions();
|
||||
const MENU_WIDTH = Math.min(width * 0.85, 400);
|
||||
|
||||
const speedPresets = [0.5, 1.0, 1.5, 2.0, 2.5];
|
||||
const holdSpeedOptions = [1.5, 2.0];
|
||||
|
||||
const handleClose = () => {
|
||||
setShowSpeedModal(false);
|
||||
};
|
||||
|
||||
const handleSpeedSelect = (speed: number) => {
|
||||
setPlaybackSpeed(speed);
|
||||
};
|
||||
|
||||
const handleHoldSpeedSelect = (speed: number) => {
|
||||
setHoldToSpeedValue(speed);
|
||||
};
|
||||
const speedPresets = [0.5, 1.0, 1.25, 1.5, 2.0, 2.5];
|
||||
const holdSpeedOptions = [1.0, 2.0, 3.0];
|
||||
|
||||
if (!showSpeedModal) return null;
|
||||
|
||||
return (
|
||||
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
|
||||
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
|
||||
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
|
||||
<View style={StyleSheet.absoluteFill} zIndex={9999}>
|
||||
<TouchableOpacity
|
||||
style={StyleSheet.absoluteFill}
|
||||
activeOpacity={1}
|
||||
onPress={() => setShowSpeedModal(false)}
|
||||
>
|
||||
<Animated.View entering={FadeIn} exiting={FadeOut} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.2)' }} />
|
||||
</TouchableOpacity>
|
||||
|
||||
<Animated.View
|
||||
entering={SlideInRight.duration(300)}
|
||||
exiting={SlideOutRight.duration(250)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: MENU_WIDTH,
|
||||
backgroundColor: '#0f0f0f',
|
||||
borderLeftWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
}}
|
||||
>
|
||||
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
||||
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Playback Speed</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
|
||||
>
|
||||
{/* Current Speed Display */}
|
||||
<View style={{
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.15)',
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
marginBottom: 20,
|
||||
<View pointerEvents="box-none" style={{ ...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center', paddingBottom: 20 }}>
|
||||
<Animated.View
|
||||
entering={SlideInDown.duration(300)}
|
||||
exiting={SlideOutDown.duration(250)}
|
||||
style={{
|
||||
width: Math.min(width * 0.9, 420),
|
||||
backgroundColor: 'rgba(15, 15, 15, 0.95)',
|
||||
borderRadius: 24,
|
||||
padding: 20,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(59, 130, 246, 0.3)',
|
||||
}}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<MaterialIcons name="play-arrow" size={20} color="#3B82F6" />
|
||||
<Text style={{
|
||||
color: '#3B82F6',
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
marginLeft: 6
|
||||
borderColor: 'rgba(255,255,255,0.1)'
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20, alignItems: 'center' }}>
|
||||
<Text style={{ color: 'white', fontSize: 16, fontWeight: '600'}}>Playback Speed</Text>
|
||||
</View>
|
||||
|
||||
{/* Speed Selection Row */}
|
||||
<View style={{ flexDirection: 'row', gap: 6, marginBottom: 20 }}>
|
||||
{speedPresets.map((speed) => (
|
||||
<MorphingButton
|
||||
key={speed}
|
||||
label={`${speed}x`}
|
||||
isSelected={currentSpeed === speed}
|
||||
onPress={() => setPlaybackSpeed(speed)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View style={{ height: 1, backgroundColor: 'rgba(255,255,255,0.1)', marginBottom: 14 }} />
|
||||
|
||||
{/* On Hold Section */}
|
||||
<View>
|
||||
<TouchableOpacity
|
||||
onPress={() => setHoldToSpeedEnabled(!holdToSpeedEnabled)}
|
||||
style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: holdToSpeedEnabled ? 15 : 0 }}
|
||||
>
|
||||
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14 }}>On Hold</Text>
|
||||
<View style={{
|
||||
width: 34, height: 18, borderRadius: 10,
|
||||
backgroundColor: holdToSpeedEnabled ? 'white' : 'rgba(255,255,255,0.2)',
|
||||
padding: 2, alignItems: holdToSpeedEnabled ? 'flex-end' : 'flex-start'
|
||||
}}>
|
||||
Current: {currentSpeed}x
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ width: 14, height: 14, borderRadius: 7, backgroundColor: holdToSpeedEnabled ? 'black' : 'white' }} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Speed Presets */}
|
||||
<View style={{ marginBottom: 20 }}>
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
marginBottom: 12,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
}}>
|
||||
Speed Presets
|
||||
</Text>
|
||||
|
||||
<View style={{ gap: 8 }}>
|
||||
{speedPresets.map((speed) => {
|
||||
const isSelected = currentSpeed === speed;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={speed}
|
||||
onPress={() => handleSpeedSelect(speed)}
|
||||
style={{
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
|
||||
borderWidth: 1,
|
||||
borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={{
|
||||
color: isSelected ? 'black' : 'white',
|
||||
fontWeight: isSelected ? '700' : '500',
|
||||
fontSize: 15
|
||||
}}>
|
||||
{speed}x
|
||||
</Text>
|
||||
{isSelected && <MaterialIcons name="check" size={18} color="black" />}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Hold-to-Speed Settings */}
|
||||
<View style={{ backgroundColor: 'rgba(255,255,255,0.06)', borderRadius: 12, padding: 16, borderWidth: 1, borderColor: 'rgba(255,255,255,0.1)' }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
|
||||
<MaterialIcons name="touch-app" size={18} color="rgba(255,255,255,0.7)" />
|
||||
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14, marginLeft: 6, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 0.5 }}>
|
||||
Hold-to-Speed
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Enable Toggle */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
|
||||
<Text style={{ color: 'white', fontWeight: '600', fontSize: 15 }}>Enable Hold Speed</Text>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
width: 54,
|
||||
height: 30,
|
||||
backgroundColor: holdToSpeedEnabled ? '#22C55E' : 'rgba(255,255,255,0.25)',
|
||||
borderRadius: 15,
|
||||
justifyContent: 'center',
|
||||
alignItems: holdToSpeedEnabled ? 'flex-end' : 'flex-start',
|
||||
paddingHorizontal: 3
|
||||
}}
|
||||
onPress={() => setHoldToSpeedEnabled(!holdToSpeedEnabled)}
|
||||
>
|
||||
<View style={{ width: 24, height: 24, backgroundColor: 'white', borderRadius: 12 }} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Hold Speed Selector */}
|
||||
{holdToSpeedEnabled && (
|
||||
<View style={{ marginBottom: 16 }}>
|
||||
<Text style={{ color: 'white', fontWeight: '600', marginBottom: 10, fontSize: 15 }}>Hold Speed</Text>
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
|
||||
{holdSpeedOptions.map((speed) => {
|
||||
const isSelected = holdToSpeedValue === speed;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={speed}
|
||||
onPress={() => handleHoldSpeedSelect(speed)}
|
||||
style={{
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
|
||||
borderWidth: 1,
|
||||
borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
|
||||
}}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={{
|
||||
color: isSelected ? 'black' : 'white',
|
||||
fontWeight: isSelected ? '700' : '500',
|
||||
fontSize: 14
|
||||
}}>
|
||||
{speed}x
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<Animated.View entering={FadeIn} style={{ flexDirection: 'row', gap: 8 }}>
|
||||
{holdSpeedOptions.map((speed) => (
|
||||
<MorphingButton
|
||||
key={speed}
|
||||
isSmall
|
||||
label={`${speed}x`}
|
||||
isSelected={holdToSpeedValue === speed}
|
||||
onPress={() => setHoldToSpeedValue(speed)}
|
||||
/>
|
||||
))}
|
||||
</Animated.View>
|
||||
)}
|
||||
|
||||
{/* Info Text */}
|
||||
<View style={{
|
||||
backgroundColor: 'rgba(34, 197, 94, 0.1)',
|
||||
borderRadius: 10,
|
||||
padding: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(34, 197, 94, 0.3)',
|
||||
}}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}>
|
||||
<MaterialIcons name="info" size={16} color="#22C55E" />
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{
|
||||
color: '#22C55E',
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
marginBottom: 4,
|
||||
}}>
|
||||
Hold left/right sides
|
||||
</Text>
|
||||
<Text style={{
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
}}>
|
||||
Hold and press the left or right side of the video player to temporarily boost playback speed.
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Animated.View>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue