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

Merge pull request #292 from AdityasahuX07/patch-14

Browse source 
Video player Ui changes
This commit is contained in:
Nayif 2025-12-25 12:46:25 +05:30 committed by GitHub
commit d2987ce0cc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 734 additions and 1374 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/components/player/modals/AudioTrackModal.tsx
View file

@ -1,18 +1,19 @@
import React from 'react'; 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 { MaterialIcons } from '@expo/vector-icons';
import Animated, { import Animated, {
FadeIn, FadeIn,
FadeOut, FadeOut,
SlideInRight, SlideInDown,
SlideOutRight, SlideOutDown,
} from 'react-native-reanimated'; } from 'react-native-reanimated';
import { getTrackDisplayName } from '../utils/playerUtils'; import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils';
import { logger } from '../../../utils/logger';
interface AudioTrackModalProps { interface AudioTrackModalProps {
showAudioModal: boolean; showAudioModal: boolean;
setShowAudioModal: (show: boolean) => void; setShowAudioModal: (show: boolean) => void;
ksAudioTracks: Array<{ id: number, name: string, language?: string }>; ksAudioTracks: Array<{id: number, name: string, language?: string}>;
selectedAudioTrack: number | null; selectedAudioTrack: number | null;
selectAudioTrack: (trackId: number) => void; selectAudioTrack: (trackId: number) => void;
} }
@ -24,42 +25,54 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
selectedAudioTrack, selectedAudioTrack,
selectAudioTrack, selectAudioTrack,
}) => { }) => {
const { width } = useWindowDimensions(); const { width, height } = useWindowDimensions();
const MENU_WIDTH = Math.min(width * 0.85, 400);
// Size constants matching SubtitleModal aesthetics
const menuWidth = Math.min(width * 0.9, 420);
const menuMaxHeight = height * 0.9;
const handleClose = () => setShowAudioModal(false); const handleClose = () => setShowAudioModal(false);
if (!showAudioModal) return null; if (!showAudioModal) return null;
return ( return (
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}> <View style={StyleSheet.absoluteFill} zIndex={9999}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}> {/* Backdrop matching SubtitleModal */}
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} /> <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> </TouchableOpacity>
{/* Center Alignment Container */}
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none">
<Animated.View <Animated.View
entering={SlideInRight.duration(300)} entering={SlideInDown.duration(300)}
exiting={SlideOutRight.duration(250)} exiting={SlideOutDown.duration(250)}
style={{ style={{
position: 'absolute', width: menuWidth,
top: 0, maxHeight: menuMaxHeight,
right: 0, backgroundColor: 'rgba(15, 15, 15, 0.98)', // Matches SubtitleModal
bottom: 0, borderRadius: 24,
width: MENU_WIDTH, borderWidth: 1,
backgroundColor: '#0f0f0f',
borderLeftWidth: 1,
borderColor: 'rgba(255,255,255,0.1)', borderColor: 'rgba(255,255,255,0.1)',
overflow: 'hidden'
}} }}
> >
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}> {/* Header with shared aesthetics */}
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}> <View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Audio Tracks</Text> <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Audio Tracks</Text>
</View>
</View> </View>
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={{ padding: 15, paddingBottom: 40 }} contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }}
> >
<View style={{ gap: 8 }}> <View style={{ gap: 8 }}>
{ksAudioTracks.map((track) => { {ksAudioTracks.map((track) => {
@ -73,12 +86,9 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
setTimeout(handleClose, 200); setTimeout(handleClose, 200);
}} }}
style={{ style={{
paddingHorizontal: 16, padding: 10,
paddingVertical: 12,
borderRadius: 12, borderRadius: 12,
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)', backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)', // Matches SubtitleModal item colors
borderWidth: 1,
borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center' alignItems: 'center'
@ -87,7 +97,7 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={{ <Text style={{
color: isSelected ? 'black' : 'white', color: isSelected ? 'black' : 'white',
fontWeight: isSelected ? '700' : '500', fontWeight: isSelected ? '700' : '400',
fontSize: 15 fontSize: 15
}}> }}>
{getTrackDisplayName(track)} {getTrackDisplayName(track)}
@ -108,6 +118,7 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
</View> </View>
</View>
); );
}; };

250
src/components/player/modals/EpisodeStreamsModal.tsx
View file

@ -31,34 +31,22 @@ const QualityBadge = ({ quality }: { quality: string | null }) => {
color = '#F59E0B'; color = '#F59E0B';
label = '4K'; label = '4K';
} else if (qualityNum >= 1080) { } else if (qualityNum >= 1080) {
color = '#EF4444'; color = '#3B82F6';
label = 'FHD'; label = '1080p';
} else if (qualityNum >= 720) { } else if (qualityNum >= 720) {
color = '#10B981'; color = '#10B981';
label = 'HD'; label = '720p';
} }
return ( return (
<View <View style={{
style={{ backgroundColor: color,
backgroundColor: `${color}20`, paddingHorizontal: 6,
borderColor: `${color}60`, paddingVertical: 2,
borderWidth: 1, borderRadius: 4,
paddingHorizontal: 8, marginLeft: 8,
paddingVertical: 4,
borderRadius: 8,
flexDirection: 'row',
alignItems: 'center',
}}
>
<Text style={{
color: color,
fontSize: 12,
fontWeight: '700',
letterSpacing: 0.5,
}}> }}>
{label} <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>{label}</Text>
</Text>
</View> </View>
); );
}; };
@ -114,7 +102,6 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
respondedProviders.add(addonId); respondedProviders.add(addonId);
if (error) { if (error) {
logger.warn(`[EpisodeStreamsModal] Error from ${addonName || addonId}:`, error);
setHasErrors(prev => [...prev, `${addonName || addonId}: ${error.message || 'Unknown error'}`]); setHasErrors(prev => [...prev, `${addonName || addonId}: ${error.message || 'Unknown error'}`]);
} else if (streams && streams.length > 0) { } else if (streams && streams.length > 0) {
setAvailableStreams(prev => ({ setAvailableStreams(prev => ({
@ -124,29 +111,20 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
addonName: addonName || addonId 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) { if (completedProviders >= expectedProviders.size) {
logger.log(`[EpisodeStreamsModal] All providers completed. Total providers responded: ${respondedProviders.size}`);
setIsLoading(false); setIsLoading(false);
} }
}); });
// Fallback timeout
setTimeout(() => { setTimeout(() => {
if (respondedProviders.size === 0) { if (respondedProviders.size === 0) {
logger.warn(`[EpisodeStreamsModal] Timeout: No providers responded`);
setHasErrors(prev => [...prev, 'Timeout: No providers responded']);
setIsLoading(false); setIsLoading(false);
} }
}, 8000); }, 8000);
} catch (error) { } catch (error) {
logger.error('[EpisodeStreamsModal] Error fetching streams:', error);
setHasErrors(prev => [...prev, `Failed to fetch streams: ${error}`]);
setIsLoading(false); setIsLoading(false);
} }
}; };
@ -162,9 +140,18 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
const sortedProviders = Object.entries(availableStreams); const sortedProviders = Object.entries(availableStreams);
return ( return (
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}> <View style={StyleSheet.absoluteFill} zIndex={10000}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={onClose}> {/* Backdrop */}
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} /> <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> </TouchableOpacity>
<Animated.View <Animated.View
@ -181,15 +168,20 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
borderColor: 'rgba(255,255,255,0.1)', borderColor: 'rgba(255,255,255,0.1)',
}} }}
> >
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}> {/* Header */}
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}> <View style={{
<View style={{ flex: 1 }}> paddingTop: Platform.OS === 'ios' ? 60 : 20,
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }} numberOfLines={1}> paddingHorizontal: 20,
{episode?.name || 'Select Stream'} 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> </Text>
{episode && ( {episode && (
<Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13, marginTop: 4 }}> <Text style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, marginTop: 4 }}>
S{episode.season_number}E{episode.episode_number} S{episode.season_number} • E{episode.episode_number}
</Text> </Text>
)} )}
</View> </View>
@ -198,39 +190,27 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={{ padding: 15, paddingBottom: 40 }} contentContainerStyle={{ paddingHorizontal: 15, paddingBottom: 40 }}
> >
{isLoading && ( {isLoading && sortedProviders.length === 0 && (
<View style={{ <View style={{ padding: 40, alignItems: 'center' }}>
backgroundColor: 'rgba(255, 255, 255, 0.05)', <ActivityIndicator color="white" />
borderRadius: 16, <Text style={{ color: 'white', marginTop: 15, opacity: 0.6 }}>Finding sources...</Text>
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>
</View> </View>
)} )}
{!isLoading && sortedProviders.length > 0 && ( {sortedProviders.map(([providerId, providerData]) => (
sortedProviders.map(([providerId, providerData]) => ( <View key={providerId} style={{ marginBottom: 20 }}>
<View key={providerId} style={{ marginBottom: 30 }}>
<Text style={{ <Text style={{
color: 'rgba(255, 255, 255, 0.7)', color: 'rgba(255, 255, 255, 0.4)',
fontSize: 14, fontSize: 12,
fontWeight: '600', fontWeight: '700',
marginBottom: 15, marginBottom: 10,
marginLeft: 5,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: 0.5, letterSpacing: 1,
}}> }}>
{providerData.addonName} ({providerData.streams.length}) {providerData.addonName}
</Text> </Text>
<View style={{ gap: 8 }}> <View style={{ gap: 8 }}>
@ -241,68 +221,31 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
<TouchableOpacity <TouchableOpacity
key={`${providerId}-${index}`} key={`${providerId}-${index}`}
style={{ style={{
backgroundColor: 'rgba(255,255,255,0.06)', padding: 8,
borderRadius: 12, borderRadius: 12,
padding: 12, backgroundColor: 'rgba(255,255,255,0.05)',
borderWidth: 1, borderWidth: 1,
borderColor: 'rgba(255,255,255,0.1)', borderColor: 'rgba(255,255,255,0.05)'
}}
onPress={() => {
onSelectStream(stream);
onClose();
}} }}
onPress={() => onSelectStream(stream)}
activeOpacity={0.7} activeOpacity={0.7}
> >
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<View style={{ <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}>
flexDirection: 'row', <Text style={{ color: 'white', fontWeight: '700', fontSize: 14, flex: 1 }} numberOfLines={1}>
alignItems: 'center', {stream.name || 'Unknown Source'}
marginBottom: 8,
gap: 8,
}}>
<Text style={{
color: 'white',
fontSize: 15,
fontWeight: '500',
flex: 1,
}}>
{stream.title || stream.name || `Stream ${index + 1}`}
</Text> </Text>
{quality && <QualityBadge quality={quality} />} <QualityBadge quality={quality} />
</View> </View>
{stream.title && (
{(stream.size || stream.lang) && ( <Text style={{ color: 'rgba(255,255,255,0.5)', fontSize: 11 }} numberOfLines={2}>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}> {stream.title}
{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> </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>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
@ -310,63 +253,18 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
})} })}
</View> </View>
</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>
<Text style={{
color: 'rgba(255, 255, 255, 0.4)',
fontSize: 14,
marginTop: 8,
textAlign: 'center',
}}>
Try searching for different content
</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>
))} ))}
{!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>
)}
{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> </View>
)} )}
</ScrollView> </ScrollView>

35
src/components/player/modals/EpisodesModal.tsx
View file

@ -43,7 +43,7 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
text: '#FFFFFF', text: '#FFFFFF',
textMuted: 'rgba(255,255,255,0.6)', textMuted: 'rgba(255,255,255,0.6)',
mediumEmphasis: 'rgba(255,255,255,0.7)', mediumEmphasis: 'rgba(255,255,255,0.7)',
primary: '#3B82F6', primary: 'rgba(255,255,255,0.9)',
white: '#FFFFFF', white: '#FFFFFF',
elevation2: 'rgba(255,255,255,0.05)' elevation2: 'rgba(255,255,255,0.05)'
} }
@ -55,21 +55,11 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
if (showEpisodesModal && metadata?.id) { if (showEpisodesModal && metadata?.id) {
setIsLoadingProgress(true); setIsLoadingProgress(true);
try { try {
const allProgress = await storageService.getAllWatchProgress(); const progress = await storageService.getShowProgress(metadata.id);
const progress: { [key: string]: any } = {}; setEpisodeProgress(progress || {});
// Filter progress for current show's episodes
Object.entries(allProgress).forEach(([key, value]) => {
if (key.includes(metadata.id!)) {
progress[key] = value;
}
});
setEpisodeProgress(progress);
// Trakt sync logic preserved // Trakt sync logic preserved
const traktService = TraktService.getInstance(); if (await TraktService.isAuthenticated()) {
if (await traktService.isAuthenticated()) {
// Optional: background sync logic // Optional: background sync logic
} }
} catch (err) { } catch (err) {
@ -94,7 +84,7 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
const currentSeasonEpisodes = groupedEpisodes[selectedSeason] || []; const currentSeasonEpisodes = groupedEpisodes[selectedSeason] || [];
return ( return (
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}> <View style={StyleSheet.absoluteFill} zIndex={9999}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={() => setShowEpisodesModal(false)}> <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)' }} /> <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
</TouchableOpacity> </TouchableOpacity>
@ -113,13 +103,18 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
borderColor: 'rgba(255,255,255,0.1)', borderColor: 'rgba(255,255,255,0.1)',
}} }}
> >
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}> <View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 20, paddingHorizontal: 20 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Episodes</Text> <Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Episodes</Text>
</View> </View>
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 15, gap: 8 }}> <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 <TouchableOpacity
key={season} key={season}
onPress={() => setSelectedSeason(season)} onPress={() => setSelectedSeason(season)}
@ -136,14 +131,14 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
color: selectedSeason === season ? 'black' : 'white', color: selectedSeason === season ? 'black' : 'white',
fontWeight: selectedSeason === season ? '700' : '500' fontWeight: selectedSeason === season ? '700' : '500'
}}> }}>
Season {season} {season === 0 ? 'Specials' : `Season ${season}`}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
))} ))}
</ScrollView> </ScrollView>
</View> </View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ padding: 15, paddingBottom: 40 }}> <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ padding: 18, paddingBottom: 40 }}>
{isLoadingProgress ? ( {isLoadingProgress ? (
<ActivityIndicator color="white" style={{ marginTop: 20 }} /> <ActivityIndicator color="white" style={{ marginTop: 20 }} />
) : ( ) : (

169
src/components/player/modals/SourcesModal.tsx
View file

@ -22,41 +22,29 @@ const QualityBadge = ({ quality }: { quality: string | null }) => {
if (!quality) return null; if (!quality) return null;
const qualityNum = parseInt(quality); const qualityNum = parseInt(quality);
let color = '#8B5CF6'; // Default purple let color = '#8B5CF6';
let label = `${quality}p`; let label = `${quality}p`;
if (qualityNum >= 2160) { if (qualityNum >= 2160) {
color = '#F59E0B'; // Gold for 4K color = '#F59E0B';
label = '4K'; label = '4K';
} else if (qualityNum >= 1080) { } else if (qualityNum >= 1080) {
color = '#EF4444'; // Red for 1080p color = '#3B82F6';
label = 'FHD'; label = '1080p';
} else if (qualityNum >= 720) { } else if (qualityNum >= 720) {
color = '#10B981'; // Green for 720p color = '#10B981';
label = 'HD'; label = '720p';
} }
return ( return (
<View <View style={{
style={{ backgroundColor: color,
backgroundColor: `${color}20`, paddingHorizontal: 6,
borderColor: `${color}60`, paddingVertical: 2,
borderWidth: 1, borderRadius: 4,
paddingHorizontal: 8, marginLeft: 8,
paddingVertical: 4,
borderRadius: 8,
flexDirection: 'row',
alignItems: 'center',
}}
>
<Text style={{
color: color,
fontSize: 12,
fontWeight: '700',
letterSpacing: 0.5,
}}> }}>
{label} <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>{label}</Text>
</Text>
</View> </View>
); );
}; };
@ -97,9 +85,18 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
}; };
return ( return (
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}> <View style={StyleSheet.absoluteFill} zIndex={10000}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}> {/* Backdrop */}
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} /> <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> </TouchableOpacity>
<Animated.View <Animated.View
@ -116,32 +113,35 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
borderColor: 'rgba(255,255,255,0.1)', borderColor: 'rgba(255,255,255,0.1)',
}} }}
> >
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}> {/* Header */}
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}> <View style={{
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Change Source</Text> paddingTop: Platform.OS === 'ios' ? 60 : 20,
</View> paddingHorizontal: 20,
paddingBottom: 20,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}>
<Text style={{ color: 'white', fontSize: 20, fontWeight: '700' }}>
Change Source
</Text>
</View> </View>
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={{ padding: 15, paddingBottom: 40 }} contentContainerStyle={{ paddingHorizontal: 15, paddingBottom: 40 }}
> >
{isChangingSource && ( {isChangingSource && (
<View style={{ <View style={{
backgroundColor: 'rgba(34, 197, 94, 0.1)', backgroundColor: 'rgba(34, 197, 94, 0.1)',
borderRadius: 16, borderRadius: 12,
padding: 16, padding: 10,
marginBottom: 20, marginBottom: 15,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
}}> }}>
<ActivityIndicator size="small" color="#22C55E" /> <ActivityIndicator size="small" color="#22C55E" />
<Text style={{ <Text style={{ color: '#22C55E', fontSize: 14, fontWeight: '600', marginLeft: 10 }}>
color: '#22C55E',
fontSize: 14,
fontWeight: '600',
marginLeft: 12,
}}>
Switching source... Switching source...
</Text> </Text>
</View> </View>
@ -149,14 +149,15 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
{sortedProviders.length > 0 ? ( {sortedProviders.length > 0 ? (
sortedProviders.map(([providerId, providerData]) => ( sortedProviders.map(([providerId, providerData]) => (
<View key={providerId} style={{ marginBottom: 30 }}> <View key={providerId} style={{ marginBottom: 20 }}>
<Text style={{ <Text style={{
color: 'rgba(255, 255, 255, 0.7)', color: 'rgba(255, 255, 255, 0.4)',
fontSize: 14, fontSize: 12,
fontWeight: '600', fontWeight: '700',
marginBottom: 15, marginBottom: 10,
marginLeft: 5,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: 0.5, letterSpacing: 1,
}}> }}>
{providerData.addonName} ({providerData.streams.length}) {providerData.addonName} ({providerData.streams.length})
</Text> </Text>
@ -170,12 +171,12 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
<TouchableOpacity <TouchableOpacity
key={`${providerId}-${index}`} key={`${providerId}-${index}`}
style={{ style={{
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)', padding: 8,
borderRadius: 12, borderRadius: 12,
padding: 12, backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)',
borderWidth: 1, borderWidth: 1,
borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)', borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)',
opacity: (isChangingSource && !isSelected) ? 0.6 : 1, opacity: (isChangingSource && !isSelected) ? 0.5 : 1,
}} }}
onPress={() => handleStreamSelect(stream)} onPress={() => handleStreamSelect(stream)}
activeOpacity={0.7} activeOpacity={0.7}
@ -183,60 +184,46 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
> >
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<View style={{ <View style={{ flexDirection: 'row', alignItems: 'center' }}>
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8,
gap: 8,
}}>
<Text style={{ <Text style={{
color: isSelected ? 'black' : 'white', color: isSelected ? 'black' : 'white',
fontSize: 15,
fontWeight: isSelected ? '700' : '500', fontWeight: isSelected ? '700' : '500',
fontSize: 14,
flex: 1, flex: 1,
}}> }} numberOfLines={1}>
{stream.title || stream.name || `Stream ${index + 1}`} {stream.title || stream.name || `Stream ${index + 1}`}
</Text> </Text>
{quality && <QualityBadge quality={quality} />} <QualityBadge quality={quality} />
</View> </View>
{(stream.size || stream.lang) && ( {(stream.size || stream.lang) && (
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}> <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
{stream.size && ( {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={{ <Text style={{
color: isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.5)', color: isSelected ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)',
fontSize: 12, fontSize: 11,
fontWeight: '600',
marginLeft: 4,
}}> }}>
{(stream.size / (1024 * 1024 * 1024)).toFixed(1)} GB {(stream.size / (1024 * 1024 * 1024)).toFixed(1)} GB
</Text> </Text>
</View>
)} )}
{stream.lang && ( {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={{ <Text style={{
color: isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(59,130,246,0.8)', color: isSelected ? 'rgba(59, 130, 246, 1)' : 'rgba(59, 130, 246, 0.8)',
fontSize: 12, fontSize: 11,
fontWeight: '600', fontWeight: '600',
marginLeft: 4,
}}> }}>
{stream.lang.toUpperCase()} {stream.lang.toUpperCase()}
</Text> </Text>
</View>
)} )}
</View> </View>
)} )}
</View> </View>
<View style={{ marginLeft: 12, alignItems: 'center' }}> <View style={{ marginLeft: 12 }}>
{isSelected ? ( {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>
</View> </View>
@ -247,28 +234,10 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
</View> </View>
)) ))
) : ( ) : (
<View style={{ <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
backgroundColor: 'rgba(255, 255, 255, 0.05)', <MaterialIcons name="cloud-off" size={48} color="white" />
borderRadius: 16, <Text style={{ color: 'white', marginTop: 16, textAlign: 'center', fontWeight: '600' }}>
padding: 20, No sources found
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
</Text> </Text>
</View> </View>
)} )}

279
src/components/player/modals/SpeedModal.tsx
View file

@ -1,11 +1,13 @@
import React from 'react'; 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 { MaterialIcons } from '@expo/vector-icons';
import Animated, { import Animated, {
FadeIn, FadeIn,
FadeOut, FadeOut,
SlideInRight, SlideInDown,
SlideOutRight, SlideOutDown,
useAnimatedStyle,
withTiming,
} from 'react-native-reanimated'; } from 'react-native-reanimated';
interface SpeedModalProps { interface SpeedModalProps {
@ -19,7 +21,31 @@ interface SpeedModalProps {
setHoldToSpeedValue: (speed: number) => void; 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, showSpeedModal,
setShowSpeedModal, setShowSpeedModal,
currentSpeed, currentSpeed,
@ -30,219 +56,84 @@ export const SpeedModal: React.FC<SpeedModalProps> = ({
setHoldToSpeedValue, setHoldToSpeedValue,
}) => { }) => {
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const MENU_WIDTH = Math.min(width * 0.85, 400); const speedPresets = [0.5, 1.0, 1.25, 1.5, 2.0, 2.5];
const holdSpeedOptions = [1.0, 2.0, 3.0];
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);
};
if (!showSpeedModal) return null; if (!showSpeedModal) return null;
return ( return (
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}> <View style={StyleSheet.absoluteFill} zIndex={9999}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}> <TouchableOpacity
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} /> 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> </TouchableOpacity>
<View pointerEvents="box-none" style={{ ...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center', paddingBottom: 20 }}>
<Animated.View <Animated.View
entering={SlideInRight.duration(300)} entering={SlideInDown.duration(300)}
exiting={SlideOutRight.duration(250)} exiting={SlideOutDown.duration(250)}
style={{ style={{
position: 'absolute', width: Math.min(width * 0.9, 420),
top: 0, backgroundColor: 'rgba(15, 15, 15, 0.95)',
right: 0, borderRadius: 24,
bottom: 0, padding: 20,
width: MENU_WIDTH, borderWidth: 1,
backgroundColor: '#0f0f0f', borderColor: 'rgba(255,255,255,0.1)'
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', marginBottom: 20, alignItems: 'center' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}> <Text style={{ color: 'white', fontSize: 16, fontWeight: '600'}}>Playback Speed</Text>
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Playback Speed</Text>
</View>
</View> </View>
<ScrollView {/* Speed Selection Row */}
showsVerticalScrollIndicator={false} <View style={{ flexDirection: 'row', gap: 6, marginBottom: 20 }}>
contentContainerStyle={{ padding: 15, paddingBottom: 40 }} {speedPresets.map((speed) => (
> <MorphingButton
{/* Current Speed Display */}
<View style={{
backgroundColor: 'rgba(59, 130, 246, 0.15)',
borderRadius: 12,
padding: 12,
marginBottom: 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
}}>
Current: {currentSpeed}x
</Text>
</View>
</View>
{/* 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} key={speed}
onPress={() => handleSpeedSelect(speed)} label={`${speed}x`}
style={{ isSelected={currentSpeed === speed}
paddingHorizontal: 16, onPress={() => setPlaybackSpeed(speed)}
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> </View>
{/* Hold-to-Speed Settings */} <View style={{ height: 1, backgroundColor: 'rgba(255,255,255,0.1)', marginBottom: 14 }} />
<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 */} {/* On Hold Section */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}> <View>
<Text style={{ color: 'white', fontWeight: '600', fontSize: 15 }}>Enable Hold Speed</Text>
<TouchableOpacity <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)} onPress={() => setHoldToSpeedEnabled(!holdToSpeedEnabled)}
style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: holdToSpeedEnabled ? 15 : 0 }}
> >
<View style={{ width: 24, height: 24, backgroundColor: 'white', borderRadius: 12 }} /> <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14 }}>On Hold</Text>
</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>
)}
{/* Info Text */}
<View style={{ <View style={{
backgroundColor: 'rgba(34, 197, 94, 0.1)', width: 34, height: 18, borderRadius: 10,
borderRadius: 10, backgroundColor: holdToSpeedEnabled ? 'white' : 'rgba(255,255,255,0.2)',
padding: 12, padding: 2, alignItems: holdToSpeedEnabled ? 'flex-end' : 'flex-start'
borderWidth: 1,
borderColor: 'rgba(34, 197, 94, 0.3)',
}}> }}>
<View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}> <View style={{ width: 14, height: 14, borderRadius: 7, backgroundColor: holdToSpeedEnabled ? 'black' : 'white' }} />
<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> </TouchableOpacity>
</View>
</View> {holdToSpeedEnabled && (
</ScrollView> <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> </Animated.View>
)}
</View>
</Animated.View>
</View>
</View> </View>
); );
}; };

610
src/components/player/modals/SubtitleModals.tsx
View file

@ -1,16 +1,16 @@
import React from 'react'; import React from 'react';
import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Platform, useWindowDimensions } from 'react-native'; import { View, Text, TouchableOpacity, ScrollView, Platform, useWindowDimensions, StyleSheet } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; import { MaterialIcons } from '@expo/vector-icons';
import Animated, { import Animated, {
FadeIn, FadeIn,
FadeOut, FadeOut,
SlideInRight, SlideInDown,
SlideOutRight, SlideOutDown,
useAnimatedStyle,
withTiming,
} from 'react-native-reanimated'; } from 'react-native-reanimated';
import { StyleSheet } from 'react-native';
import { WyzieSubtitle, SubtitleCue } from '../utils/playerTypes'; import { WyzieSubtitle, SubtitleCue } from '../utils/playerTypes';
import { getTrackDisplayName, formatLanguage } from '../utils/playerUtils'; import { getTrackDisplayName, formatLanguage } from '../utils/playerUtils';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
interface SubtitleModalsProps { interface SubtitleModalsProps {
showSubtitleModal: boolean; showSubtitleModal: boolean;
@ -21,10 +21,9 @@ interface SubtitleModalsProps {
isLoadingSubtitles: boolean; isLoadingSubtitles: boolean;
customSubtitles: SubtitleCue[]; customSubtitles: SubtitleCue[];
availableSubtitles: WyzieSubtitle[]; availableSubtitles: WyzieSubtitle[];
ksTextTracks: Array<{ id: number, name: string, language?: string }>; ksTextTracks: Array<{id: number, name: string, language?: string}>;
selectedTextTrack: number; selectedTextTrack: number;
useCustomSubtitles: boolean; useCustomSubtitles: boolean;
// When true, KSPlayer is active (iOS MKV path). Use to gate iOS-only limitations.
isKsPlayerActive?: boolean; isKsPlayerActive?: boolean;
subtitleSize: number; subtitleSize: number;
subtitleBackground: boolean; subtitleBackground: boolean;
@ -35,7 +34,6 @@ interface SubtitleModalsProps {
increaseSubtitleSize: () => void; increaseSubtitleSize: () => void;
decreaseSubtitleSize: () => void; decreaseSubtitleSize: () => void;
toggleSubtitleBackground: () => void; toggleSubtitleBackground: () => void;
// Customization props
subtitleTextColor: string; subtitleTextColor: string;
setSubtitleTextColor: (c: string) => void; setSubtitleTextColor: (c: string) => void;
subtitleBgOpacity: number; subtitleBgOpacity: number;
@ -60,475 +58,137 @@ interface SubtitleModalsProps {
setSubtitleOffsetSec: (n: number) => void; setSubtitleOffsetSec: (n: number) => void;
} }
// Dynamic sizing handled inside component with useWindowDimensions const MorphingTab = ({ label, isSelected, onPress }: any) => {
const animatedStyle = useAnimatedStyle(() => ({
borderRadius: withTiming(isSelected ? 10 : 40, { duration: 250 }),
backgroundColor: withTiming(isSelected ? 'white' : 'rgba(255,255,255,0.06)', { duration: 250 }),
}));
return (
<TouchableOpacity onPress={onPress} activeOpacity={0.8} style={{ flex: 1 }}>
<Animated.View style={[{ paddingVertical: 8, alignItems: 'center', justifyContent: 'center' }, animatedStyle]}>
<Text style={{ color: isSelected ? 'black' : 'white', fontWeight: isSelected ? '700' : '400', fontSize: 13 }}>
{label}
</Text>
</Animated.View>
</TouchableOpacity>
);
};
export const SubtitleModals: React.FC<SubtitleModalsProps> = ({ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
showSubtitleModal, showSubtitleModal, setShowSubtitleModal, isLoadingSubtitleList, isLoadingSubtitles,
setShowSubtitleModal, availableSubtitles, ksTextTracks, selectedTextTrack, useCustomSubtitles,
showSubtitleLanguageModal, subtitleSize, subtitleBackground, fetchAvailableSubtitles,
setShowSubtitleLanguageModal, loadWyzieSubtitle, selectTextTrack, increaseSubtitleSize,
isLoadingSubtitleList, decreaseSubtitleSize, toggleSubtitleBackground, subtitleTextColor, setSubtitleTextColor,
isLoadingSubtitles, subtitleBgOpacity, setSubtitleBgOpacity, subtitleTextShadow, setSubtitleTextShadow,
customSubtitles, subtitleOutline, setSubtitleOutline, subtitleOutlineColor, setSubtitleOutlineColor,
availableSubtitles, subtitleOutlineWidth, setSubtitleOutlineWidth, subtitleAlign, setSubtitleAlign,
ksTextTracks, subtitleBottomOffset, setSubtitleBottomOffset, subtitleLetterSpacing, setSubtitleLetterSpacing,
selectedTextTrack, subtitleLineHeightMultiplier, setSubtitleLineHeightMultiplier, subtitleOffsetSec, setSubtitleOffsetSec,
useCustomSubtitles,
isKsPlayerActive,
subtitleSize,
subtitleBackground,
fetchAvailableSubtitles,
loadWyzieSubtitle,
selectTextTrack,
disableCustomSubtitles,
increaseSubtitleSize,
decreaseSubtitleSize,
toggleSubtitleBackground,
subtitleTextColor,
setSubtitleTextColor,
subtitleBgOpacity,
setSubtitleBgOpacity,
subtitleTextShadow,
setSubtitleTextShadow,
subtitleOutline,
setSubtitleOutline,
subtitleOutlineColor,
setSubtitleOutlineColor,
subtitleOutlineWidth,
setSubtitleOutlineWidth,
subtitleAlign,
setSubtitleAlign,
subtitleBottomOffset,
setSubtitleBottomOffset,
subtitleLetterSpacing,
setSubtitleLetterSpacing,
subtitleLineHeightMultiplier,
setSubtitleLineHeightMultiplier,
subtitleOffsetSec,
setSubtitleOffsetSec,
}) => { }) => {
const insets = useSafeAreaInsets();
const { width, height } = useWindowDimensions(); const { width, height } = useWindowDimensions();
const isIos = Platform.OS === 'ios'; const isIos = Platform.OS === 'ios';
const isLandscape = width > height; const isLandscape = width > height;
// Track which specific addon subtitle is currently loaded
const [selectedOnlineSubtitleId, setSelectedOnlineSubtitleId] = React.useState<string | null>(null); const [selectedOnlineSubtitleId, setSelectedOnlineSubtitleId] = React.useState<string | null>(null);
// Track which addon subtitle is currently loading to show spinner per-item const [activeTab, setActiveTab] = React.useState<'built-in' | 'addon' | 'appearance'>('built-in');
const [loadingSubtitleId, setLoadingSubtitleId] = React.useState<string | null>(null);
// Active tab for better organization
const [activeTab, setActiveTab] = React.useState<'built-in' | 'addon' | 'appearance'>(useCustomSubtitles ? 'addon' : 'built-in');
// Responsive tuning
const isCompact = width < 360 || height < 640; const isCompact = width < 360 || height < 640;
const sectionPad = isCompact ? 12 : 16; const sectionPad = isCompact ? 12 : 16;
const chipPadH = isCompact ? 8 : 12; const chipPadH = isCompact ? 8 : 12;
const chipPadV = isCompact ? 6 : 8; const chipPadV = isCompact ? 6 : 8;
const controlBtn = { size: isCompact ? 28 : 32, radius: isCompact ? 14 : 16 }; const controlBtn = { size: isCompact ? 28 : 32, radius: isCompact ? 14 : 16 };
const previewHeight = isCompact ? 90 : (isIos && isLandscape ? 100 : 120); const previewHeight = isCompact ? 90 : (isIos && isLandscape ? 100 : 120);
const menuWidth = Math.min(
width * (isIos ? (isLandscape ? 0.6 : 0.8) : 0.85), const menuWidth = Math.min(width * 0.9, 420);
isIos ? 420 : 400 const menuMaxHeight = height * 0.95;
);
React.useEffect(() => { React.useEffect(() => {
if (showSubtitleModal && !isLoadingSubtitleList && availableSubtitles.length === 0) { if (showSubtitleModal && !isLoadingSubtitleList && availableSubtitles.length === 0) fetchAvailableSubtitles();
fetchAvailableSubtitles();
}
}, [showSubtitleModal]); }, [showSubtitleModal]);
// Reset selected addon subtitle when switching to built-in tracks const handleClose = () => setShowSubtitleModal(false);
React.useEffect(() => {
if (!useCustomSubtitles) {
setSelectedOnlineSubtitleId(null);
}
}, [useCustomSubtitles]);
// Clear loading state when subtitles have finished loading
React.useEffect(() => {
if (!isLoadingSubtitles) {
setLoadingSubtitleId(null);
}
}, [isLoadingSubtitles]);
// Keep tab in sync with current usage
React.useEffect(() => {
setActiveTab(useCustomSubtitles ? 'addon' : 'built-in');
}, [useCustomSubtitles]);
const handleClose = () => {
setShowSubtitleModal(false);
};
const handleLoadWyzieSubtitle = (subtitle: WyzieSubtitle) => {
setSelectedOnlineSubtitleId(subtitle.id);
setLoadingSubtitleId(subtitle.id);
loadWyzieSubtitle(subtitle);
};
const getFileNameFromUrl = (url?: string): string | null => {
if (!url || typeof url !== 'string') return null;
try {
// Prefer URL parsing to safely strip query/hash
const u = new URL(url);
const raw = u.pathname.split('/').pop() || '';
const decoded = decodeURIComponent(raw);
return decoded || null;
} catch {
// Fallback for non-standard URLs
const path = url.split('?')[0].split('#')[0];
const raw = path.split('/').pop() || '';
try { return decodeURIComponent(raw) || null; } catch { return raw || null; }
}
};
// Main subtitle menu
const renderSubtitleMenu = () => {
if (!showSubtitleModal) return null; if (!showSubtitleModal) return null;
return ( return (
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}> <View style={StyleSheet.absoluteFill} zIndex={9999}>
{/* Backdrop */}
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}> <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)' }} /> <Animated.View entering={FadeIn} exiting={FadeOut} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
</TouchableOpacity> </TouchableOpacity>
{/* Centered Modal Container */}
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none">
<Animated.View <Animated.View
entering={SlideInRight.duration(300)} entering={SlideInDown.duration(300)}
exiting={SlideOutRight.duration(250)} exiting={SlideOutDown.duration(250)}
style={{ style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
width: menuWidth, width: menuWidth,
maxHeight: menuMaxHeight,
backgroundColor: '#0f0f0f', backgroundColor: '#0f0f0f',
borderLeftWidth: 1, borderRadius: 24,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.1)', borderColor: 'rgba(255,255,255,0.1)',
overflow: 'hidden'
}} }}
> >
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}> {/* Header */}
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 }}> <View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}> <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Subtitles</Text>
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Subtitles</Text>
<View style={{ paddingHorizontal: 10, paddingVertical: 4, borderRadius: 12, backgroundColor: useCustomSubtitles ? 'rgba(34,197,94,0.2)' : 'rgba(59,130,246,0.2)' }}>
<Text style={{ color: useCustomSubtitles ? '#22C55E' : '#3B82F6', fontSize: 11, fontWeight: '700' }}>
{useCustomSubtitles ? 'Addon in use' : 'Built‑in in use'}
</Text>
</View>
</View>
</View>
</View> </View>
{/* Segmented Tabs */} {/* Tab Bar */}
<View style={{ flexDirection: 'row', gap: 8, paddingHorizontal: 20, paddingTop: 10, paddingBottom: 6 }}> <View style={{ flexDirection: 'row', gap: 15, paddingHorizontal: 70, marginBottom: 20 }}>
{([ <MorphingTab label="Built-in" isSelected={activeTab === 'built-in'} onPress={() => setActiveTab('built-in')} />
{ key: 'built-in', label: 'Built‑in' }, <MorphingTab label="Addons" isSelected={activeTab === 'addon'} onPress={() => setActiveTab('addon')} />
{ key: 'addon', label: 'Addons' }, <MorphingTab label="Style" isSelected={activeTab === 'appearance'} onPress={() => setActiveTab('appearance')} />
{ key: 'appearance', label: 'Appearance' },
] as const).map(tab => (
<TouchableOpacity
key={tab.key}
onPress={() => setActiveTab(tab.key)}
style={{
paddingHorizontal: chipPadH,
paddingVertical: chipPadV,
borderRadius: 16,
backgroundColor: activeTab === tab.key ? 'rgba(255,255,255,0.15)' : 'rgba(255,255,255,0.06)',
borderWidth: 1,
borderColor: activeTab === tab.key ? 'rgba(255,255,255,0.3)' : 'rgba(255,255,255,0.1)'
}}
>
<Text style={{ color: '#fff', fontWeight: '600', fontSize: isCompact ? 12 : 13 }}>{tab.label}</Text>
</TouchableOpacity>
))}
</View> </View>
<ScrollView <ScrollView showsVerticalScrollIndicator={false}>
style={{ flex: 1 }} <View style={{ paddingHorizontal: 20, paddingBottom: 20 }}>
contentContainerStyle={{ padding: 20, paddingBottom: (isCompact ? 24 : 40) + (isIos ? insets.bottom : 0) }}
showsVerticalScrollIndicator={false}
>
{activeTab === 'built-in' && ( {activeTab === 'built-in' && (
<View style={{ marginBottom: 30 }}>
<Text style={{
color: 'rgba(255, 255, 255, 0.7)',
fontSize: 14,
fontWeight: '600',
marginBottom: 15,
textTransform: 'uppercase',
letterSpacing: 0.5,
}}>
Built-in Subtitles
</Text>
{/* Built-in subtitles now enabled for KSPlayer */}
{isKsPlayerActive && (
<View style={{
backgroundColor: 'rgba(34, 197, 94, 0.1)',
borderRadius: 12,
padding: sectionPad,
marginBottom: 15,
borderWidth: 1,
borderColor: 'rgba(34, 197, 94, 0.3)',
}}>
<View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}>
<MaterialIcons name="check-circle" size={18} color="#22C55E" />
<View style={{ flex: 1 }}>
<Text style={{
color: '#22C55E',
fontSize: isCompact ? 12 : 13,
fontWeight: '600',
marginBottom: 4,
}}>
Built-in subtitles enabled for KSPlayer
</Text>
<Text style={{
color: 'rgba(255, 255, 255, 0.8)',
fontSize: isCompact ? 11 : 12,
lineHeight: isCompact ? 16 : 18,
}}>
KSPlayer built-in subtitle rendering is now available. You can select from embedded subtitle tracks below.
</Text>
</View>
</View>
</View>
)}
{/* Disable Subtitles Button */}
<TouchableOpacity
style={{
backgroundColor: selectedTextTrack === -1 ? 'rgba(239, 68, 68, 0.15)' : 'rgba(255, 255, 255, 0.05)',
borderRadius: 16,
padding: sectionPad,
borderWidth: 1,
borderColor: selectedTextTrack === -1 ? 'rgba(239, 68, 68, 0.3)' : 'rgba(255, 255, 255, 0.1)',
marginBottom: 8,
}}
onPress={() => {
selectTextTrack(-1);
setSelectedOnlineSubtitleId(null);
}}
activeOpacity={0.7}
>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<Text style={{
color: selectedTextTrack === -1 ? '#EF4444' : '#FFFFFF',
fontSize: isCompact ? 14 : 15,
fontWeight: '500',
flex: 1,
}}>
Disable All Subtitles
</Text>
{selectedTextTrack === -1 && (
<MaterialIcons name="check" size={20} color="#EF4444" />
)}
</View>
</TouchableOpacity>
{/* Always show built-in subtitles */}
{ksTextTracks.length > 0 && (
<View style={{ gap: 8 }}> <View style={{ gap: 8 }}>
{ksTextTracks.map((track) => { <TouchableOpacity
const isSelected = selectedTextTrack === track.id && !useCustomSubtitles; onPress={() => { selectTextTrack(-1); setSelectedOnlineSubtitleId(null); }}
return ( style={{ padding: 10, borderRadius: 12, backgroundColor: selectedTextTrack === -1 ? 'white' : 'rgba(242, 184, 181)' }}
>
<Text style={{ color: selectedTextTrack === -1 ? 'black' : 'rgba(96, 20, 16)', fontWeight: '600' }}>None</Text>
</TouchableOpacity>
{ksTextTracks.map((track) => (
<TouchableOpacity <TouchableOpacity
key={track.id} key={track.id}
style={{ onPress={() => { selectTextTrack(track.id); setSelectedOnlineSubtitleId(null); }}
backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)', style={{ padding: 10, borderRadius: 12, backgroundColor: selectedTextTrack === track.id ? 'white' : 'rgba(255,255,255,0.05)', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
borderRadius: 16,
padding: sectionPad,
borderWidth: 1,
borderColor: isSelected ? 'rgba(59, 130, 246, 0.3)' : 'rgba(255, 255, 255, 0.1)',
}}
onPress={() => {
selectTextTrack(track.id);
setSelectedOnlineSubtitleId(null);
}}
activeOpacity={0.7}
> >
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <Text style={{ color: selectedTextTrack === track.id ? 'black' : 'white' }}>{getTrackDisplayName(track)}</Text>
<Text style={{ {selectedTextTrack === track.id && <MaterialIcons name="check" size={18} color="black" />}
color: '#FFFFFF',
fontSize: isCompact ? 14 : 15,
fontWeight: '500',
flex: 1,
}}>
{getTrackDisplayName(track)}
</Text>
{isSelected && (
<MaterialIcons name="check" size={20} color="#3B82F6" />
)}
</View>
</TouchableOpacity> </TouchableOpacity>
); ))}
})}
</View>
)}
</View> </View>
)} )}
{activeTab === 'addon' && ( {activeTab === 'addon' && (
<View style={{ marginBottom: 30 }}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 15,
}}>
<Text style={{
color: 'rgba(255, 255, 255, 0.7)',
fontSize: isCompact ? 13 : 14,
fontWeight: '600',
textTransform: 'uppercase',
letterSpacing: 0.5,
}}>
Addon Subtitles
</Text>
<View style={{ flexDirection: 'row', gap: 8 }}>
{useCustomSubtitles && (
<TouchableOpacity
style={{
backgroundColor: 'rgba(239, 68, 68, 0.15)',
borderRadius: 12,
paddingHorizontal: chipPadH,
paddingVertical: chipPadV - 2,
flexDirection: 'row',
alignItems: 'center',
}}
onPress={() => {
disableCustomSubtitles();
setSelectedOnlineSubtitleId(null);
}}
activeOpacity={0.7}
>
<MaterialIcons name="close" size={16} color="#EF4444" />
<Text style={{
color: '#EF4444',
fontSize: isCompact ? 11 : 12,
fontWeight: '600',
marginLeft: 6,
}}>
Disable
</Text>
</TouchableOpacity>
)}
<TouchableOpacity
style={{
backgroundColor: 'rgba(34, 197, 94, 0.15)',
borderRadius: 12,
paddingHorizontal: chipPadH,
paddingVertical: chipPadV - 2,
flexDirection: 'row',
alignItems: 'center',
}}
onPress={() => fetchAvailableSubtitles()}
disabled={isLoadingSubtitleList}
>
{isLoadingSubtitleList ? (
<ActivityIndicator size="small" color="#22C55E" />
) : (
<MaterialIcons name="refresh" size={16} color="#22C55E" />
)}
<Text style={{
color: '#22C55E',
fontSize: isCompact ? 11 : 12,
fontWeight: '600',
marginLeft: 6,
}}>
{isLoadingSubtitleList ? 'Searching' : 'Refresh'}
</Text>
</TouchableOpacity>
</View>
</View>
{(availableSubtitles.length === 0) && !isLoadingSubtitleList ? (
<TouchableOpacity
style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)',
borderRadius: 16,
padding: isCompact ? 14 : 20,
alignItems: 'center',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
borderStyle: 'dashed',
}}
onPress={() => fetchAvailableSubtitles()}
activeOpacity={0.7}
>
<MaterialIcons name="cloud-download" size={24} color="rgba(255,255,255,0.4)" />
<Text style={{
color: 'rgba(255, 255, 255, 0.6)',
fontSize: isCompact ? 13 : 14,
marginTop: 8,
textAlign: 'center',
}}>
Tap to fetch from addons
</Text>
</TouchableOpacity>
) : isLoadingSubtitleList ? (
<View style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)',
borderRadius: 16,
padding: isCompact ? 14 : 20,
alignItems: 'center',
}}>
<ActivityIndicator size="large" color="#22C55E" />
<Text style={{
color: 'rgba(255, 255, 255, 0.6)',
fontSize: isCompact ? 13 : 14,
marginTop: 12,
}}>
Searching...
</Text>
</View>
) : (
<View style={{ gap: 8 }}> <View style={{ gap: 8 }}>
{availableSubtitles.map((sub) => { {availableSubtitles.length === 0 ? (
const isSelected = useCustomSubtitles && selectedOnlineSubtitleId === sub.id; <TouchableOpacity onPress={fetchAvailableSubtitles} style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
return ( <MaterialIcons name="cloud-download" size={32} color="white" />
<Text style={{ color: 'white', marginTop: 10 }}>Search Online Subtitles</Text>
</TouchableOpacity>
) : (
availableSubtitles.map((sub) => (
<TouchableOpacity <TouchableOpacity
key={sub.id} key={sub.id}
style={{ onPress={() => { setSelectedOnlineSubtitleId(sub.id); loadWyzieSubtitle(sub); }}
backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)', style={{ padding: 5,paddingLeft: 8, paddingRight: 10, borderRadius: 12, backgroundColor: selectedOnlineSubtitleId === sub.id ? 'white' : 'rgba(255,255,255,0.05)', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', textAlignVertical: 'center' }}
borderRadius: 16,
padding: sectionPad,
borderWidth: 1,
borderColor: isSelected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(255, 255, 255, 0.1)',
}}
onPress={() => {
handleLoadWyzieSubtitle(sub);
}}
activeOpacity={0.7}
disabled={isLoadingSubtitles}
> >
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View>
<View style={{ flex: 1 }}> <Text style={{ marginLeft: 5, color: selectedOnlineSubtitleId === sub.id ? 'black' : 'white', fontWeight: '600' }}>{sub.display}</Text>
<Text style={{ color: '#FFFFFF', fontSize: 15, fontWeight: '500' }}> <Text style={{ marginLeft: 5, color: selectedOnlineSubtitleId === sub.id ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)', fontSize: 11, paddingBottom: 3 }}>{formatLanguage(sub.language)}</Text>
{sub.display}
</Text>
{(() => {
const filename = getFileNameFromUrl(sub.url);
if (!filename) return null;
return (
<Text style={{ color: 'rgba(255,255,255,0.75)', fontSize: 12, marginTop: 2 }} numberOfLines={1}>
{filename}
</Text>
);
})()}
<Text style={{ color: 'rgba(255, 255, 255, 0.6)', fontSize: 13, marginTop: 2 }}>
{formatLanguage(sub.language)}{sub.source ? ` · ${sub.source}` : ''}
</Text>
</View>
{(isLoadingSubtitles && loadingSubtitleId === sub.id) ? (
<ActivityIndicator size="small" color="#22C55E" />
) : isSelected ? (
<MaterialIcons name="check" size={20} color="#22C55E" />
) : (
<MaterialIcons name="download" size={20} color="rgba(255,255,255,0.4)" />
)}
</View> </View>
{selectedOnlineSubtitleId === sub.id && <MaterialIcons name="check" size={18} color="black" />}
</TouchableOpacity> </TouchableOpacity>
); ))
})}
</View>
)} )}
</View> </View>
)} )}
@ -555,9 +215,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
letterSpacing: subtitleLetterSpacing, letterSpacing: subtitleLetterSpacing,
lineHeight: subtitleSize * subtitleLineHeightMultiplier, lineHeight: subtitleSize * subtitleLineHeightMultiplier,
textAlign: subtitleAlign, textAlign: subtitleAlign,
textShadowColor: subtitleOutline textShadowColor: subtitleOutline ? subtitleOutlineColor : (subtitleTextShadow ? 'rgba(0,0,0,0.9)' : undefined),
? subtitleOutlineColor
: (subtitleTextShadow ? 'rgba(0,0,0,0.9)' : undefined),
textShadowOffset: (subtitleOutline || subtitleTextShadow) ? { width: 2, height: 2 } : undefined, textShadowOffset: (subtitleOutline || subtitleTextShadow) ? { width: 2, height: 2 } : undefined,
textShadowRadius: subtitleOutline ? Math.max(1, subtitleOutlineWidth) : (subtitleTextShadow ? 4 : undefined), textShadowRadius: subtitleOutline ? Math.max(1, subtitleOutlineWidth) : (subtitleTextShadow ? 4 : undefined),
}}> }}>
@ -577,15 +235,9 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}> <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
setSubtitleTextColor('#FFFFFF'); setSubtitleTextColor('#FFFFFF'); setSubtitleBgOpacity(0.7); setSubtitleTextShadow(true);
setSubtitleBgOpacity(0.7); setSubtitleOutline(true); setSubtitleOutlineColor('#000000'); setSubtitleOutlineWidth(4);
setSubtitleTextShadow(true); setSubtitleAlign('center'); setSubtitleBottomOffset(10); setSubtitleLetterSpacing(0);
setSubtitleOutline(true);
setSubtitleOutlineColor('#000000');
setSubtitleOutlineWidth(4);
setSubtitleAlign('center');
setSubtitleBottomOffset(10);
setSubtitleLetterSpacing(0);
setSubtitleLineHeightMultiplier(1.2); setSubtitleLineHeightMultiplier(1.2);
}} }}
style={{ paddingHorizontal: chipPadH, paddingVertical: chipPadV, borderRadius: 20, backgroundColor: 'rgba(255,255,255,0.08)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)' }} style={{ paddingHorizontal: chipPadH, paddingVertical: chipPadV, borderRadius: 20, backgroundColor: 'rgba(255,255,255,0.08)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)' }}
@ -594,12 +246,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
setSubtitleTextColor('#FFD700'); setSubtitleTextColor('#FFD700'); setSubtitleOutline(true); setSubtitleOutlineColor('#000000'); setSubtitleOutlineWidth(4); setSubtitleBgOpacity(0.3); setSubtitleTextShadow(false);
setSubtitleOutline(true);
setSubtitleOutlineColor('#000000');
setSubtitleOutlineWidth(4);
setSubtitleBgOpacity(0.3);
setSubtitleTextShadow(false);
}} }}
style={{ paddingHorizontal: chipPadH, paddingVertical: chipPadV, borderRadius: 20, backgroundColor: 'rgba(255,215,0,0.12)', borderWidth: 1, borderColor: 'rgba(255,215,0,0.35)' }} style={{ paddingHorizontal: chipPadH, paddingVertical: chipPadV, borderRadius: 20, backgroundColor: 'rgba(255,215,0,0.12)', borderWidth: 1, borderColor: 'rgba(255,215,0,0.35)' }}
> >
@ -607,13 +254,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
setSubtitleTextColor('#FFFFFF'); setSubtitleTextColor('#FFFFFF'); setSubtitleOutline(true); setSubtitleOutlineColor('#000000'); setSubtitleOutlineWidth(3); setSubtitleBgOpacity(0.0); setSubtitleTextShadow(false); setSubtitleLetterSpacing(0.5);
setSubtitleOutline(true);
setSubtitleOutlineColor('#000000');
setSubtitleOutlineWidth(3);
setSubtitleBgOpacity(0.0);
setSubtitleTextShadow(false);
setSubtitleLetterSpacing(0.5);
}} }}
style={{ paddingHorizontal: chipPadH, paddingVertical: chipPadV, borderRadius: 20, backgroundColor: 'rgba(34,197,94,0.12)', borderWidth: 1, borderColor: 'rgba(34,197,94,0.35)' }} style={{ paddingHorizontal: chipPadH, paddingVertical: chipPadV, borderRadius: 20, backgroundColor: 'rgba(34,197,94,0.12)', borderWidth: 1, borderColor: 'rgba(34,197,94,0.35)' }}
> >
@ -621,12 +262,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
setSubtitleTextColor('#FFFFFF'); setSubtitleTextColor('#FFFFFF'); setSubtitleBgOpacity(0.6); setSubtitleTextShadow(true); setSubtitleOutline(true); setSubtitleAlign('center'); setSubtitleLineHeightMultiplier(1.3);
setSubtitleBgOpacity(0.6);
setSubtitleTextShadow(true);
setSubtitleOutline(true);
setSubtitleAlign('center');
setSubtitleLineHeightMultiplier(1.3);
}} }}
style={{ paddingHorizontal: chipPadH, paddingVertical: chipPadV, borderRadius: 20, backgroundColor: 'rgba(59,130,246,0.12)', borderWidth: 1, borderColor: 'rgba(59,130,246,0.35)' }} style={{ paddingHorizontal: chipPadH, paddingVertical: chipPadV, borderRadius: 20, backgroundColor: 'rgba(59,130,246,0.12)', borderWidth: 1, borderColor: 'rgba(59,130,246,0.35)' }}
> >
@ -641,7 +277,6 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
<MaterialIcons name="tune" size={16} color="rgba(255,255,255,0.7)" /> <MaterialIcons name="tune" size={16} color="rgba(255,255,255,0.7)" />
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>Core</Text> <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>Core</Text>
</View> </View>
{/* Font Size */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}> <View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="format-size" size={16} color="rgba(255,255,255,0.7)" /> <MaterialIcons name="format-size" size={16} color="rgba(255,255,255,0.7)" />
@ -659,17 +294,16 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
{/* Background toggle */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}> <View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="layers" size={16} color="rgba(255,255,255,0.7)" /> <MaterialIcons name="layers" size={16} color="rgba(255,255,255,0.7)" />
<Text style={{ color: '#fff', fontWeight: '600', marginLeft: 8 }}>Show Background</Text> <Text style={{ color: '#fff', fontWeight: '600', marginLeft: 8 }}>Show Background</Text>
</View> </View>
<TouchableOpacity <TouchableOpacity
style={{ width: isCompact ? 48 : 54, height: isCompact ? 28 : 30, backgroundColor: subtitleBackground ? '#22C55E' : 'rgba(255,255,255,0.25)', borderRadius: 15, justifyContent: 'center', alignItems: subtitleBackground ? 'flex-end' : 'flex-start', paddingHorizontal: 3 }} style={{ width: isCompact ? 48 : 54, height: isCompact ? 28 : 30, backgroundColor: subtitleBackground ? 'white' : 'rgba(255,255,255,0.25)', borderRadius: 15, justifyContent: 'center', alignItems: subtitleBackground ? 'flex-end' : 'flex-start', paddingHorizontal: 3 }}
onPress={toggleSubtitleBackground} onPress={toggleSubtitleBackground}
> >
<View style={{ width: 24, height: 24, backgroundColor: 'white', borderRadius: 12 }} /> <View style={{ width: 24, height: 24, backgroundColor: subtitleBackground ? 'black' : 'white', borderRadius: 12 }} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
@ -680,8 +314,6 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
<MaterialIcons name="build" size={16} color="rgba(255,255,255,0.7)" /> <MaterialIcons name="build" size={16} color="rgba(255,255,255,0.7)" />
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>Advanced</Text> <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>Advanced</Text>
</View> </View>
{/* Text Color */}
<View style={{ marginTop: 8, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ marginTop: 8, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}> <View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="palette" size={16} color="rgba(255,255,255,0.7)" /> <MaterialIcons name="palette" size={16} color="rgba(255,255,255,0.7)" />
@ -693,28 +325,16 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
))} ))}
</View> </View>
</View> </View>
{/* Align */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<Text style={{ color: 'white', fontWeight: '600' }}>Align</Text> <Text style={{ color: 'white', fontWeight: '600' }}>Align</Text>
<View style={{ flexDirection: 'row', gap: 8 }}> <View style={{ flexDirection: 'row', gap: 8 }}>
{([ {([ { key: 'left', icon: 'format-align-left' }, { key: 'center', icon: 'format-align-center' }, { key: 'right', icon: 'format-align-right' } ] as const).map(a => (
{ key: 'left', icon: 'format-align-left' }, <TouchableOpacity key={a.key} onPress={() => setSubtitleAlign(a.key)} style={{ paddingHorizontal: isCompact ? 8 : 10, paddingVertical: isCompact ? 4 : 6, borderRadius: 8, backgroundColor: subtitleAlign === a.key ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.08)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)' }}>
{ key: 'center', icon: 'format-align-center' },
{ key: 'right', icon: 'format-align-right' },
] as const).map(a => (
<TouchableOpacity
key={a.key}
onPress={() => setSubtitleAlign(a.key)}
style={{ paddingHorizontal: isCompact ? 8 : 10, paddingVertical: isCompact ? 4 : 6, borderRadius: 8, backgroundColor: subtitleAlign === a.key ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.08)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)' }}
>
<MaterialIcons name={a.icon as any} size={18} color="#FFFFFF" /> <MaterialIcons name={a.icon as any} size={18} color="#FFFFFF" />
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </View>
</View> </View>
{/* Bottom Offset */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<Text style={{ color: 'white', fontWeight: '600' }}>Bottom Offset</Text> <Text style={{ color: 'white', fontWeight: '600' }}>Bottom Offset</Text>
<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}> <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
@ -729,8 +349,6 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
{/* Background Opacity */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<Text style={{ color: 'white', fontWeight: '600' }}>Background Opacity</Text> <Text style={{ color: 'white', fontWeight: '600' }}>Background Opacity</Text>
<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}> <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
@ -745,15 +363,12 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
{/* Shadow */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<Text style={{ color: 'white', fontWeight: '600' }}>Text Shadow</Text> <Text style={{ color: 'white', fontWeight: '600' }}>Text Shadow</Text>
<TouchableOpacity onPress={() => setSubtitleTextShadow(!subtitleTextShadow)} style={{ paddingHorizontal: 10, paddingVertical: 8, borderRadius: 10, backgroundColor: subtitleTextShadow ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.08)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)', alignItems: 'center' }}> <TouchableOpacity onPress={() => setSubtitleTextShadow(!subtitleTextShadow)} style={{ paddingHorizontal: 10, paddingVertical: 8, borderRadius: 10, backgroundColor: subtitleTextShadow ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.08)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)', alignItems: 'center' }}>
<Text style={{ color: '#fff', fontWeight: '700' }}>{subtitleTextShadow ? 'On' : 'Off'}</Text> <Text style={{ color: '#fff', fontWeight: '700' }}>{subtitleTextShadow ? 'On' : 'Off'}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{/* Outline color & width */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<Text style={{ color: 'white' }}>Outline Color</Text> <Text style={{ color: 'white' }}>Outline Color</Text>
<View style={{ flexDirection: 'row', gap: 8 }}> <View style={{ flexDirection: 'row', gap: 8 }}>
@ -776,8 +391,6 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
{/* Spacing (two columns) */}
<View style={{ flexDirection: isCompact ? 'column' : 'row', justifyContent: 'space-between', gap: 12 }}> <View style={{ flexDirection: isCompact ? 'column' : 'row', justifyContent: 'space-between', gap: 12 }}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={{ color: 'white', fontWeight: '600' }}>Letter Spacing</Text> <Text style={{ color: 'white', fontWeight: '600' }}>Letter Spacing</Text>
@ -808,8 +421,6 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</View> </View>
</View> </View>
</View> </View>
{/* Timing Offset */}
<View style={{ marginTop: 4 }}> <View style={{ marginTop: 4 }}>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<Text style={{ color: 'white', fontWeight: '600' }}>Timing Offset (s)</Text> <Text style={{ color: 'white', fontWeight: '600' }}>Timing Offset (s)</Text>
@ -827,22 +438,13 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</View> </View>
<Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 11, marginTop: 6 }}>Nudge subtitles earlier (-) or later (+) to sync if needed.</Text> <Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 11, marginTop: 6 }}>Nudge subtitles earlier (-) or later (+) to sync if needed.</Text>
</View> </View>
{/* Reset to defaults */}
<View style={{ alignItems: 'flex-end', marginTop: 8 }}> <View style={{ alignItems: 'flex-end', marginTop: 8 }}>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
setSubtitleTextColor('#FFFFFF'); setSubtitleTextColor('#FFFFFF'); setSubtitleBgOpacity(0.7); setSubtitleTextShadow(true);
setSubtitleBgOpacity(0.7); setSubtitleOutline(true); setSubtitleOutlineColor('#000000'); setSubtitleOutlineWidth(4);
setSubtitleTextShadow(true); setSubtitleAlign('center'); setSubtitleBottomOffset(10); setSubtitleLetterSpacing(0);
setSubtitleOutline(true); setSubtitleLineHeightMultiplier(1.2); setSubtitleOffsetSec(0);
setSubtitleOutlineColor('#000000');
setSubtitleOutlineWidth(4);
setSubtitleAlign('center');
setSubtitleBottomOffset(10);
setSubtitleLetterSpacing(0);
setSubtitleLineHeightMultiplier(1.2);
setSubtitleOffsetSec(0);
}} }}
style={{ paddingHorizontal: chipPadH, paddingVertical: chipPadV, borderRadius: 8, backgroundColor: 'rgba(255,255,255,0.1)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)' }} style={{ paddingHorizontal: chipPadH, paddingVertical: chipPadV, borderRadius: 8, backgroundColor: 'rgba(255,255,255,0.1)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)' }}
> >
@ -852,17 +454,11 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</View> </View>
</View> </View>
)} )}
</View>
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
</View> </View>
); </View>
};
return (
<>
{renderSubtitleMenu()}
</>
); );
}; };