Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-05-03 16:59:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

consistent theming across player modals

Browse source
This commit is contained in:
tapframe 2025-12-20 20:59:19 +05:30
parent a8dfe30546
commit 79b0cfc990
6 changed files with 545 additions and 790 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,19 +1,18 @@
import React from 'react'; import React from 'react';
import { View, Text, TouchableOpacity, ScrollView, useWindowDimensions, StyleSheet, Platform } from 'react-native'; import { View, Text, TouchableOpacity, ScrollView, StyleSheet, Platform, useWindowDimensions } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; import { MaterialIcons } from '@expo/vector-icons';
import Animated, { import Animated, {
FadeIn, FadeIn,
FadeOut, FadeOut,
SlideInDown, SlideInRight,
SlideOutDown, SlideOutRight,
} from 'react-native-reanimated'; } from 'react-native-reanimated';
import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils'; import { getTrackDisplayName } 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;
} }
@ -25,98 +24,89 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
selectedAudioTrack, selectedAudioTrack,
selectAudioTrack, selectAudioTrack,
}) => { }) => {
const { width, height } = useWindowDimensions(); const { width } = useWindowDimensions();
const MENU_WIDTH = Math.min(width * 0.85, 400);
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 }]}>
{/* Backdrop matching SubtitleModal */} <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={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 */} <Animated.View
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none"> entering={SlideInRight.duration(300)}
<Animated.View exiting={SlideOutRight.duration(250)}
entering={SlideInDown.duration(300)} style={{
exiting={SlideOutDown.duration(250)} position: 'absolute',
style={{ top: 0,
width: menuWidth, right: 0,
maxHeight: menuMaxHeight, bottom: 0,
backgroundColor: 'rgba(15, 15, 15, 0.98)', // Matches SubtitleModal width: MENU_WIDTH,
borderRadius: 24, backgroundColor: '#0f0f0f',
borderWidth: 1, 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={{ paddingHorizontal: 20, paddingBottom: 20 }} contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
> >
<View style={{ gap: 8 }}> <View style={{ gap: 8 }}>
{ksAudioTracks.map((track) => { {ksAudioTracks.map((track) => {
const isSelected = selectedAudioTrack === track.id; const isSelected = selectedAudioTrack === track.id;
return ( return (
<TouchableOpacity <TouchableOpacity
key={track.id} key={track.id}
onPress={() => { onPress={() => {
selectAudioTrack(track.id); selectAudioTrack(track.id);
setTimeout(handleClose, 200); setTimeout(handleClose, 200);
}} }}
style={{ style={{
padding: 10, paddingHorizontal: 16,
borderRadius: 12, paddingVertical: 12,
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)', // Matches SubtitleModal item colors borderRadius: 12,
flexDirection: 'row', backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
justifyContent: 'space-between', borderWidth: 1,
alignItems: 'center' borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
}} flexDirection: 'row',
> justifyContent: 'space-between',
<View style={{ flex: 1 }}> alignItems: 'center'
<Text style={{ }}
color: isSelected ? 'black' : 'white', >
fontWeight: isSelected ? '700' : '400', <View style={{ flex: 1 }}>
fontSize: 15 <Text style={{
}}> color: isSelected ? 'black' : 'white',
{getTrackDisplayName(track)} fontWeight: isSelected ? '700' : '500',
</Text> fontSize: 15
</View> }}>
{isSelected && <MaterialIcons name="check" size={18} color="black" />} {getTrackDisplayName(track)}
</TouchableOpacity> </Text>
); </View>
})} {isSelected && <MaterialIcons name="check" size={18} color="black" />}
</TouchableOpacity>
);
})}
{ksAudioTracks.length === 0 && ( {ksAudioTracks.length === 0 && (
<View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}> <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
<MaterialIcons name="volume-off" size={32} color="white" /> <MaterialIcons name="volume-off" size={32} color="white" />
<Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text> <Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text>
</View> </View>
)} )}
</View> </View>
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
</View>
</View> </View>
); );
}; };

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

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Dimensions } from 'react-native'; import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, StyleSheet, Platform, useWindowDimensions } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; import { MaterialIcons } from '@expo/vector-icons';
import Animated, { import Animated, {
FadeIn, FadeIn,
@ -20,9 +20,6 @@ interface EpisodeStreamsModalProps {
metadata?: { id?: string; name?: string }; metadata?: { id?: string; name?: string };
} }
const { width } = Dimensions.get('window');
const MENU_WIDTH = Math.min(width * 0.85, 400);
const QualityBadge = ({ quality }: { quality: string | null }) => { const QualityBadge = ({ quality }: { quality: string | null }) => {
if (!quality) return null; if (!quality) return null;
@ -73,6 +70,9 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
onSelectStream, onSelectStream,
metadata, metadata,
}) => { }) => {
const { width } = useWindowDimensions();
const MENU_WIDTH = Math.min(width * 0.85, 400);
const [availableStreams, setAvailableStreams] = useState<{ [providerId: string]: { streams: Stream[]; addonName: string } }>({}); const [availableStreams, setAvailableStreams] = useState<{ [providerId: string]: { streams: Stream[]; addonName: string } }>({});
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [hasErrors, setHasErrors] = useState<string[]>([]); const [hasErrors, setHasErrors] = useState<string[]>([]);
@ -117,7 +117,6 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
logger.warn(`[EpisodeStreamsModal] Error from ${addonName || addonId}:`, 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) {
// Update state incrementally for each provider
setAvailableStreams(prev => ({ setAvailableStreams(prev => ({
...prev, ...prev,
[addonId]: { [addonId]: {
@ -158,38 +157,16 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
return match ? match[1] : null; return match ? match[1] : null;
}; };
const handleClose = () => {
onClose();
};
if (!visible) return null; if (!visible) return null;
const sortedProviders = Object.entries(availableStreams); const sortedProviders = Object.entries(availableStreams);
return ( return (
<> <View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
{/* Backdrop */} <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={onClose}>
<Animated.View <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
entering={FadeIn.duration(200)} </TouchableOpacity>
exiting={FadeOut.duration(150)}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 9998,
}}
>
<TouchableOpacity
style={{ flex: 1 }}
onPress={handleClose}
activeOpacity={1}
/>
</Animated.View>
{/* Side Menu */}
<Animated.View <Animated.View
entering={SlideInRight.duration(300)} entering={SlideInRight.duration(300)}
exiting={SlideOutRight.duration(250)} exiting={SlideOutRight.duration(250)}
@ -199,66 +176,29 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
right: 0, right: 0,
bottom: 0, bottom: 0,
width: MENU_WIDTH, width: MENU_WIDTH,
backgroundColor: '#1A1A1A', backgroundColor: '#0f0f0f',
zIndex: 9999, borderLeftWidth: 1,
elevation: 20, borderColor: 'rgba(255,255,255,0.1)',
shadowColor: '#000',
shadowOffset: { width: -5, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
}} }}
> >
{/* Header */} <View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
<View style={{ <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
flexDirection: 'row', <View style={{ flex: 1 }}>
alignItems: 'center', <Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }} numberOfLines={1}>
justifyContent: 'space-between', {episode?.name || 'Select Stream'}
paddingHorizontal: 20,
paddingTop: 60,
paddingBottom: 20,
borderBottomWidth: 1,
borderBottomColor: 'rgba(255, 255, 255, 0.08)',
}}>
<View style={{ flex: 1 }}>
<Text style={{
color: '#FFFFFF',
fontSize: 18,
fontWeight: '700',
}}>
{episode?.name || 'Select Stream'}
</Text>
{episode && (
<Text style={{
color: 'rgba(255, 255, 255, 0.6)',
fontSize: 12,
marginTop: 4,
}}>
S{episode.season_number}E{episode.episode_number}
</Text> </Text>
)} {episode && (
<Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13, marginTop: 4 }}>
S{episode.season_number}E{episode.episode_number}
</Text>
)}
</View>
</View> </View>
<TouchableOpacity
style={{
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
justifyContent: 'center',
alignItems: 'center',
}}
onPress={handleClose}
activeOpacity={0.7}
>
<MaterialIcons name="close" size={20} color="#FFFFFF" />
</TouchableOpacity>
</View> </View>
<ScrollView <ScrollView
style={{ flex: 1 }}
contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
> >
{isLoading && ( {isLoading && (
<View style={{ <View style={{
@ -301,11 +241,11 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
<TouchableOpacity <TouchableOpacity
key={`${providerId}-${index}`} key={`${providerId}-${index}`}
style={{ style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)', backgroundColor: 'rgba(255,255,255,0.06)',
borderRadius: 16, borderRadius: 12,
padding: 16, padding: 12,
borderWidth: 1, borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)', borderColor: 'rgba(255,255,255,0.1)',
}} }}
onPress={() => onSelectStream(stream)} onPress={() => onSelectStream(stream)}
activeOpacity={0.7} activeOpacity={0.7}
@ -319,7 +259,7 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
gap: 8, gap: 8,
}}> }}>
<Text style={{ <Text style={{
color: '#FFFFFF', color: 'white',
fontSize: 15, fontSize: 15,
fontWeight: '500', fontWeight: '500',
flex: 1, flex: 1,
@ -333,9 +273,9 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}> <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
{stream.size && ( {stream.size && (
<View style={{ flexDirection: 'row', alignItems: 'center' }}> <View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="storage" size={14} color="rgba(107, 114, 128, 0.8)" /> <MaterialIcons name="storage" size={14} color="rgba(255,255,255,0.5)" />
<Text style={{ <Text style={{
color: 'rgba(107, 114, 128, 0.8)', color: 'rgba(255,255,255,0.5)',
fontSize: 12, fontSize: 12,
fontWeight: '600', fontWeight: '600',
marginLeft: 4, marginLeft: 4,
@ -346,9 +286,9 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
)} )}
{stream.lang && ( {stream.lang && (
<View style={{ flexDirection: 'row', alignItems: 'center' }}> <View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="language" size={14} color="rgba(59, 130, 246, 0.8)" /> <MaterialIcons name="language" size={14} color="rgba(59,130,246,0.8)" />
<Text style={{ <Text style={{
color: 'rgba(59, 130, 246, 0.8)', color: 'rgba(59,130,246,0.8)',
fontSize: 12, fontSize: 12,
fontWeight: '600', fontWeight: '600',
marginLeft: 4, marginLeft: 4,
@ -361,10 +301,7 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
)} )}
</View> </View>
<View style={{ <View style={{ marginLeft: 12, alignItems: 'center' }}>
marginLeft: 12,
alignItems: 'center',
}}>
<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.4)" />
</View> </View>
</View> </View>
@ -434,7 +371,6 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
)} )}
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
</> </View>
); );
}; };

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

@ -55,12 +55,22 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
if (showEpisodesModal && metadata?.id) { if (showEpisodesModal && metadata?.id) {
setIsLoadingProgress(true); setIsLoadingProgress(true);
try { try {
const progress = await storageService.getShowProgress(metadata.id); const allProgress = await storageService.getAllWatchProgress();
setEpisodeProgress(progress || {}); 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);
// Trakt sync logic preserved // Trakt sync logic preserved
if (await TraktService.isAuthenticated()) { const traktService = TraktService.getInstance();
// Optional: background sync logic if (await traktService.isAuthenticated()) {
// Optional: background sync logic
} }
} catch (err) { } catch (err) {
logger.error('Failed to fetch episode progress', err); logger.error('Failed to fetch episode progress', err);
@ -84,7 +94,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>

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

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Dimensions } from 'react-native'; import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, StyleSheet, Platform, useWindowDimensions } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; import { MaterialIcons } from '@expo/vector-icons';
import Animated, { import Animated, {
FadeIn, FadeIn,
@ -18,9 +18,6 @@ interface SourcesModalProps {
isChangingSource?: boolean; isChangingSource?: boolean;
} }
const { width } = Dimensions.get('window');
const MENU_WIDTH = Math.min(width * 0.85, 400);
const QualityBadge = ({ quality }: { quality: string | null }) => { const QualityBadge = ({ quality }: { quality: string | null }) => {
if (!quality) return null; if (!quality) return null;
@ -72,6 +69,9 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
onSelectStream, onSelectStream,
isChangingSource = false, isChangingSource = false,
}) => { }) => {
const { width } = useWindowDimensions();
const MENU_WIDTH = Math.min(width * 0.85, 400);
const handleClose = () => { const handleClose = () => {
setShowSourcesModal(false); setShowSourcesModal(false);
}; };
@ -97,29 +97,11 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
}; };
return ( return (
<> <View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
{/* Backdrop */} <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
<Animated.View <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
entering={FadeIn.duration(200)} </TouchableOpacity>
exiting={FadeOut.duration(150)}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 9998,
}}
>
<TouchableOpacity
style={{ flex: 1 }}
onPress={handleClose}
activeOpacity={1}
/>
</Animated.View>
{/* Side Menu */}
<Animated.View <Animated.View
entering={SlideInRight.duration(300)} entering={SlideInRight.duration(300)}
exiting={SlideOutRight.duration(250)} exiting={SlideOutRight.duration(250)}
@ -129,55 +111,20 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
right: 0, right: 0,
bottom: 0, bottom: 0,
width: MENU_WIDTH, width: MENU_WIDTH,
backgroundColor: '#1A1A1A', backgroundColor: '#0f0f0f',
zIndex: 9999, borderLeftWidth: 1,
elevation: 20, borderColor: 'rgba(255,255,255,0.1)',
shadowColor: '#000',
shadowOffset: { width: -5, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
}} }}
> >
{/* Header */} <View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
<View style={{ <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
flexDirection: 'row', <Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Change Source</Text>
alignItems: 'center', </View>
justifyContent: 'space-between',
paddingHorizontal: 20,
paddingTop: 60,
paddingBottom: 20,
borderBottomWidth: 1,
borderBottomColor: 'rgba(255, 255, 255, 0.08)',
}}>
<Text style={{
color: '#FFFFFF',
fontSize: 22,
fontWeight: '700',
}}>
Change Source
</Text>
<TouchableOpacity
style={{
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
justifyContent: 'center',
alignItems: 'center',
}}
onPress={handleClose}
activeOpacity={0.7}
>
<MaterialIcons name="close" size={20} color="#FFFFFF" />
</TouchableOpacity>
</View> </View>
<ScrollView <ScrollView
style={{ flex: 1 }}
contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
> >
{isChangingSource && ( {isChangingSource && (
<View style={{ <View style={{
@ -223,11 +170,11 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
<TouchableOpacity <TouchableOpacity
key={`${providerId}-${index}`} key={`${providerId}-${index}`}
style={{ style={{
backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)', backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
borderRadius: 16, borderRadius: 12,
padding: 16, padding: 12,
borderWidth: 1, borderWidth: 1,
borderColor: isSelected ? 'rgba(59, 130, 246, 0.3)' : 'rgba(255, 255, 255, 0.1)', borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
opacity: (isChangingSource && !isSelected) ? 0.6 : 1, opacity: (isChangingSource && !isSelected) ? 0.6 : 1,
}} }}
onPress={() => handleStreamSelect(stream)} onPress={() => handleStreamSelect(stream)}
@ -243,9 +190,9 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
gap: 8, gap: 8,
}}> }}>
<Text style={{ <Text style={{
color: '#FFFFFF', color: isSelected ? 'black' : 'white',
fontSize: 15, fontSize: 15,
fontWeight: '500', fontWeight: isSelected ? '700' : '500',
flex: 1, flex: 1,
}}> }}>
{stream.title || stream.name || `Stream ${index + 1}`} {stream.title || stream.name || `Stream ${index + 1}`}
@ -257,9 +204,9 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}> <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
{stream.size && ( {stream.size && (
<View style={{ flexDirection: 'row', alignItems: 'center' }}> <View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="storage" size={14} color="rgba(107, 114, 128, 0.8)" /> <MaterialIcons name="storage" size={14} color={isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.5)'} />
<Text style={{ <Text style={{
color: 'rgba(107, 114, 128, 0.8)', color: isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.5)',
fontSize: 12, fontSize: 12,
fontWeight: '600', fontWeight: '600',
marginLeft: 4, marginLeft: 4,
@ -270,9 +217,9 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
)} )}
{stream.lang && ( {stream.lang && (
<View style={{ flexDirection: 'row', alignItems: 'center' }}> <View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="language" size={14} color="rgba(59, 130, 246, 0.8)" /> <MaterialIcons name="language" size={14} color={isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(59,130,246,0.8)'} />
<Text style={{ <Text style={{
color: 'rgba(59, 130, 246, 0.8)', color: isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(59,130,246,0.8)',
fontSize: 12, fontSize: 12,
fontWeight: '600', fontWeight: '600',
marginLeft: 4, marginLeft: 4,
@ -285,12 +232,9 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
)} )}
</View> </View>
<View style={{ <View style={{ marginLeft: 12, alignItems: 'center' }}>
marginLeft: 12,
alignItems: 'center',
}}>
{isSelected ? ( {isSelected ? (
<MaterialIcons name="check" size={20} color="#3B82F6" /> <MaterialIcons name="check" size={18} 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.4)" />
)} )}
@ -330,6 +274,6 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
)} )}
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
</> </View>
); );
}; };

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

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { View, Text, TouchableOpacity, Platform, useWindowDimensions, ScrollView } from 'react-native'; import { View, Text, TouchableOpacity, Platform, useWindowDimensions, ScrollView, StyleSheet } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; import { MaterialIcons } from '@expo/vector-icons';
import Animated, { import Animated, {
FadeIn, FadeIn,
@ -7,7 +7,6 @@ import Animated, {
SlideInRight, SlideInRight,
SlideOutRight, SlideOutRight,
} from 'react-native-reanimated'; } from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
interface SpeedModalProps { interface SpeedModalProps {
showSpeedModal: boolean; showSpeedModal: boolean;
@ -30,20 +29,8 @@ export const SpeedModal: React.FC<SpeedModalProps> = ({
holdToSpeedValue, holdToSpeedValue,
setHoldToSpeedValue, setHoldToSpeedValue,
}) => { }) => {
const insets = useSafeAreaInsets(); const { width } = useWindowDimensions();
const { width, height } = useWindowDimensions(); const MENU_WIDTH = Math.min(width * 0.85, 400);
const isIos = Platform.OS === 'ios';
const isLandscape = width > height;
// Responsive tuning - more aggressive compacting
const isCompact = width < 360 || height < 640;
const sectionPad = isCompact ? 6 : 8;
const chipPadH = isCompact ? 4 : 6;
const chipPadV = isCompact ? 3 : 4;
const menuWidth = Math.min(
width * (isIos ? (isLandscape ? 0.55 : 0.8) : 0.85),
isIos ? 380 : 360
);
const speedPresets = [0.5, 1.0, 1.5, 2.0, 2.5]; const speedPresets = [0.5, 1.0, 1.5, 2.0, 2.5];
const holdSpeedOptions = [1.5, 2.0]; const holdSpeedOptions = [1.5, 2.0];
@ -60,268 +47,203 @@ export const SpeedModal: React.FC<SpeedModalProps> = ({
setHoldToSpeedValue(speed); setHoldToSpeedValue(speed);
}; };
const renderSpeedModal = () => { if (!showSpeedModal) return null;
if (!showSpeedModal) return null;
return (
<>
{/* Backdrop */}
<Animated.View
entering={FadeIn.duration(200)}
exiting={FadeOut.duration(150)}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 9998,
}}
>
<TouchableOpacity
style={{ flex: 1 }}
onPress={handleClose}
activeOpacity={1}
/>
</Animated.View>
{/* Side Menu */}
<Animated.View
entering={SlideInRight.duration(300)}
exiting={SlideOutRight.duration(250)}
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
width: menuWidth,
backgroundColor: '#1A1A1A',
zIndex: 9999,
elevation: 20,
shadowColor: '#000',
shadowOffset: { width: -5, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
paddingRight: 0,
}}
>
{/* Header */}
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 20,
paddingTop: insets.top + (isCompact ? 4 : 6),
paddingBottom: 6,
borderBottomWidth: 1,
borderBottomColor: 'rgba(255, 255, 255, 0.08)',
}}>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
<MaterialIcons name="speed" size={20} color="#FFFFFF" />
<Text style={{ color: '#FFFFFF', fontSize: 18, fontWeight: '700' }}>Playback Speed</Text>
</View>
<TouchableOpacity
style={{
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
justifyContent: 'center',
alignItems: 'center',
}}
onPress={handleClose}
activeOpacity={0.7}
>
<MaterialIcons name="close" size={20} color="#FFFFFF" />
</TouchableOpacity>
</View>
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{
padding: 12,
paddingBottom: (isCompact ? 16 : 20) + (isIos ? insets.bottom : 0)
}}
showsVerticalScrollIndicator={false}
>
{/* Current Speed Display */}
<View style={{
backgroundColor: 'rgba(59, 130, 246, 0.15)',
borderRadius: 12,
padding: sectionPad * 0.75,
marginBottom: 12,
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: isCompact ? 16 : 18,
fontWeight: '700',
marginLeft: 6
}}>
Current: {currentSpeed}x
</Text>
</View>
</View>
{/* Speed Presets */}
<View style={{ marginBottom: 16 }}>
<Text style={{
color: 'rgba(255, 255, 255, 0.7)',
fontSize: 14,
fontWeight: '600',
marginBottom: 10,
textTransform: 'uppercase',
letterSpacing: 0.5,
}}>
Speed Presets
</Text>
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
{speedPresets.map((speed) => {
const isSelected = currentSpeed === speed;
return (
<TouchableOpacity
key={speed}
onPress={() => handleSpeedSelect(speed)}
style={{
paddingHorizontal: chipPadH,
paddingVertical: chipPadV,
borderRadius: 12,
backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)',
borderWidth: 1,
borderColor: isSelected ? 'rgba(59, 130, 246, 0.3)' : 'rgba(255, 255, 255, 0.1)',
minWidth: 50,
alignItems: 'center',
}}
activeOpacity={0.7}
>
<Text style={{
color: isSelected ? '#3B82F6' : '#FFFFFF',
fontWeight: '600',
fontSize: isCompact ? 11 : 12
}}>
{speed}x
</Text>
</TouchableOpacity>
);
})}
</View>
</View>
{/* Hold-to-Speed Settings */}
<View style={{ gap: isCompact ? 8 : 12 }}>
<View style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 12, padding: sectionPad }}>
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
<MaterialIcons name="touch-app" size={14} color="rgba(255,255,255,0.7)" />
<Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 11, marginLeft: 4, fontWeight: '600' }}>
Hold-to-Speed
</Text>
</View>
{/* Enable Toggle */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
<Text style={{ color: '#FFFFFF', fontWeight: '600', fontSize: 13 }}>Enable Hold Speed</Text>
<TouchableOpacity
style={{
width: isCompact ? 48 : 54,
height: isCompact ? 28 : 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: 8 }}>
<Text style={{ color: '#FFFFFF', fontWeight: '600', marginBottom: 6, fontSize: 13 }}>Hold Speed</Text>
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
{holdSpeedOptions.map((speed) => {
const isSelected = holdToSpeedValue === speed;
return (
<TouchableOpacity
key={speed}
onPress={() => handleHoldSpeedSelect(speed)}
style={{
paddingHorizontal: chipPadH,
paddingVertical: chipPadV,
borderRadius: 10,
backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)',
borderWidth: 1,
borderColor: isSelected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(255, 255, 255, 0.1)',
minWidth: 45,
alignItems: 'center',
}}
activeOpacity={0.7}
>
<Text style={{
color: isSelected ? '#22C55E' : '#FFFFFF',
fontWeight: '600',
fontSize: isCompact ? 10 : 11
}}>
{speed}x
</Text>
</TouchableOpacity>
);
})}
</View>
</View>
)}
{/* Info Text */}
<View style={{
backgroundColor: 'rgba(34, 197, 94, 0.1)',
borderRadius: 10,
padding: sectionPad * 0.75,
borderWidth: 1,
borderColor: 'rgba(34, 197, 94, 0.3)',
}}>
<View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}>
<MaterialIcons name="info" size={14} color="#22C55E" />
<View style={{ flex: 1 }}>
<Text style={{
color: '#22C55E',
fontSize: isCompact ? 12 : 13,
fontWeight: '600',
marginBottom: 4,
}}>
Hold left/right sides
</Text>
<Text style={{
color: 'rgba(255, 255, 255, 0.8)',
fontSize: isCompact ? 11 : 12,
lineHeight: isCompact ? 14 : 16,
}}>
Hold and press the left or right side of the video player to temporarily boost playback speed.
</Text>
</View>
</View>
</View>
</View>
</View>
</ScrollView>
</Animated.View>
</>
);
};
return ( return (
<> <View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
{renderSpeedModal()} <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
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,
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}
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>
)}
{/* 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>
</View>
); );
}; };

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

@ -7,7 +7,7 @@ import Animated, {
SlideInRight, SlideInRight,
SlideOutRight, SlideOutRight,
} from 'react-native-reanimated'; } from 'react-native-reanimated';
import { styles } from '../utils/playerStyles'; 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'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
@ -21,7 +21,7 @@ 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. // When true, KSPlayer is active (iOS MKV path). Use to gate iOS-only limitations.
@ -185,29 +185,11 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
if (!showSubtitleModal) return null; if (!showSubtitleModal) return null;
return ( return (
<> <View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
{/* Backdrop */} <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
<Animated.View <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
entering={FadeIn.duration(200)} </TouchableOpacity>
exiting={FadeOut.duration(150)}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 9998,
}}
>
<TouchableOpacity
style={{ flex: 1 }}
onPress={handleClose}
activeOpacity={1}
/>
</Animated.View>
{/* Side Menu */}
<Animated.View <Animated.View
entering={SlideInRight.duration(300)} entering={SlideInRight.duration(300)}
exiting={SlideOutRight.duration(250)} exiting={SlideOutRight.duration(250)}
@ -217,51 +199,22 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
right: 0, right: 0,
bottom: 0, bottom: 0,
width: menuWidth, width: menuWidth,
backgroundColor: '#1A1A1A', backgroundColor: '#0f0f0f',
zIndex: 9999, borderLeftWidth: 1,
elevation: 20, borderColor: 'rgba(255,255,255,0.1)',
shadowColor: '#000',
shadowOffset: { width: -5, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
paddingRight: 0,
}} }}
> >
{/* Header */} <View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
<View style={{ <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 }}>
flexDirection: 'row', <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
alignItems: 'center', <Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Subtitles</Text>
justifyContent: 'space-between', <View style={{ paddingHorizontal: 10, paddingVertical: 4, borderRadius: 12, backgroundColor: useCustomSubtitles ? 'rgba(34,197,94,0.2)' : 'rgba(59,130,246,0.2)' }}>
paddingHorizontal: 20, <Text style={{ color: useCustomSubtitles ? '#22C55E' : '#3B82F6', fontSize: 11, fontWeight: '700' }}>
paddingTop: insets.top + (isCompact ? 8 : 12), {useCustomSubtitles ? 'Addon in use' : 'Built‑in in use'}
paddingBottom: 12, </Text>
borderBottomWidth: 1, </View>
borderBottomColor: 'rgba(255, 255, 255, 0.08)',
}}>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
<Text style={{ color: '#FFFFFF', 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>
<TouchableOpacity
style={{
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
justifyContent: 'center',
alignItems: 'center',
}}
onPress={handleClose}
activeOpacity={0.7}
>
<MaterialIcons name="close" size={20} color="#FFFFFF" />
</TouchableOpacity>
</View> </View>
{/* Segmented Tabs */} {/* Segmented Tabs */}
@ -413,171 +366,171 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
)} )}
{activeTab === 'addon' && ( {activeTab === 'addon' && (
<View style={{ marginBottom: 30 }}> <View style={{ marginBottom: 30 }}>
<View style={{ <View style={{
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
marginBottom: 15, 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 style={{
</Text> color: 'rgba(255, 255, 255, 0.7)',
<View style={{ flexDirection: 'row', gap: 8 }}> fontSize: isCompact ? 13 : 14,
{useCustomSubtitles && ( 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 <TouchableOpacity
style={{ style={{
backgroundColor: 'rgba(239, 68, 68, 0.15)', backgroundColor: 'rgba(34, 197, 94, 0.15)',
borderRadius: 12, borderRadius: 12,
paddingHorizontal: chipPadH, paddingHorizontal: chipPadH,
paddingVertical: chipPadV-2, paddingVertical: chipPadV - 2,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
}} }}
onPress={() => { onPress={() => fetchAvailableSubtitles()}
disableCustomSubtitles(); disabled={isLoadingSubtitleList}
setSelectedOnlineSubtitleId(null);
}}
activeOpacity={0.7}
> >
<MaterialIcons name="close" size={16} color="#EF4444" /> {isLoadingSubtitleList ? (
<ActivityIndicator size="small" color="#22C55E" />
) : (
<MaterialIcons name="refresh" size={16} color="#22C55E" />
)}
<Text style={{ <Text style={{
color: '#EF4444', color: '#22C55E',
fontSize: isCompact ? 11 : 12, fontSize: isCompact ? 11 : 12,
fontWeight: '600', fontWeight: '600',
marginLeft: 6, marginLeft: 6,
}}> }}>
Disable {isLoadingSubtitleList ? 'Searching' : 'Refresh'}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
)} </View>
</View>
{(availableSubtitles.length === 0) && !isLoadingSubtitleList ? (
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor: 'rgba(34, 197, 94, 0.15)', backgroundColor: 'rgba(255, 255, 255, 0.05)',
borderRadius: 12, borderRadius: 16,
paddingHorizontal: chipPadH, padding: isCompact ? 14 : 20,
paddingVertical: chipPadV-2,
flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
borderStyle: 'dashed',
}} }}
onPress={() => fetchAvailableSubtitles()} onPress={() => fetchAvailableSubtitles()}
disabled={isLoadingSubtitleList} activeOpacity={0.7}
> >
{isLoadingSubtitleList ? ( <MaterialIcons name="cloud-download" size={24} color="rgba(255,255,255,0.4)" />
<ActivityIndicator size="small" color="#22C55E" />
) : (
<MaterialIcons name="refresh" size={16} color="#22C55E" />
)}
<Text style={{ <Text style={{
color: '#22C55E', color: 'rgba(255, 255, 255, 0.6)',
fontSize: isCompact ? 11 : 12, fontSize: isCompact ? 13 : 14,
fontWeight: '600', marginTop: 8,
marginLeft: 6, textAlign: 'center',
}}> }}>
{isLoadingSubtitleList ? 'Searching' : 'Refresh'} Tap to fetch from addons
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> ) : isLoadingSubtitleList ? (
</View> <View style={{
{(availableSubtitles.length === 0) && !isLoadingSubtitleList ? (
<TouchableOpacity
style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)', backgroundColor: 'rgba(255, 255, 255, 0.05)',
borderRadius: 16, borderRadius: 16,
padding: isCompact ? 14 : 20, padding: isCompact ? 14 : 20,
alignItems: 'center', 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 <ActivityIndicator size="large" color="#22C55E" />
</Text> <Text style={{
</TouchableOpacity> color: 'rgba(255, 255, 255, 0.6)',
) : isLoadingSubtitleList ? ( fontSize: isCompact ? 13 : 14,
<View style={{ marginTop: 12,
backgroundColor: 'rgba(255, 255, 255, 0.05)', }}>
borderRadius: 16, Searching...
padding: isCompact ? 14 : 20, </Text>
alignItems: 'center', </View>
}}> ) : (
<ActivityIndicator size="large" color="#22C55E" /> <View style={{ gap: 8 }}>
<Text style={{ {availableSubtitles.map((sub) => {
color: 'rgba(255, 255, 255, 0.6)', const isSelected = useCustomSubtitles && selectedOnlineSubtitleId === sub.id;
fontSize: isCompact ? 13 : 14, return (
marginTop: 12, <TouchableOpacity
}}> key={sub.id}
Searching... style={{
</Text> backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)',
</View> borderRadius: 16,
) : ( padding: sectionPad,
<View style={{ gap: 8 }}> borderWidth: 1,
{availableSubtitles.map((sub) => { borderColor: isSelected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(255, 255, 255, 0.1)',
const isSelected = useCustomSubtitles && selectedOnlineSubtitleId === sub.id; }}
return ( onPress={() => {
<TouchableOpacity handleLoadWyzieSubtitle(sub);
key={sub.id} }}
style={{ activeOpacity={0.7}
backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)', disabled={isLoadingSubtitles}
borderRadius: 16, >
padding: sectionPad, <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
borderWidth: 1, <View style={{ flex: 1 }}>
borderColor: isSelected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(255, 255, 255, 0.1)', <Text style={{ color: '#FFFFFF', fontSize: 15, fontWeight: '500' }}>
}} {sub.display}
onPress={() => { </Text>
handleLoadWyzieSubtitle(sub); {(() => {
}} const filename = getFileNameFromUrl(sub.url);
activeOpacity={0.7} if (!filename) return null;
disabled={isLoadingSubtitles} return (
> <Text style={{ color: 'rgba(255,255,255,0.75)', fontSize: 12, marginTop: 2 }} numberOfLines={1}>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> {filename}
<View style={{ flex: 1 }}> </Text>
<Text style={{ color: '#FFFFFF', fontSize: 15, fontWeight: '500' }}> );
{sub.display} })()}
</Text> <Text style={{ color: 'rgba(255, 255, 255, 0.6)', fontSize: 13, marginTop: 2 }}>
{(() => { {formatLanguage(sub.language)}{sub.source ? ` · ${sub.source}` : ''}
const filename = getFileNameFromUrl(sub.url); </Text>
if (!filename) return null; </View>
return ( {(isLoadingSubtitles && loadingSubtitleId === sub.id) ? (
<Text style={{ color: 'rgba(255,255,255,0.75)', fontSize: 12, marginTop: 2 }} numberOfLines={1}> <ActivityIndicator size="small" color="#22C55E" />
{filename} ) : isSelected ? (
</Text> <MaterialIcons name="check" size={20} color="#22C55E" />
); ) : (
})()} <MaterialIcons name="download" size={20} color="rgba(255,255,255,0.4)" />
<Text style={{ color: 'rgba(255, 255, 255, 0.6)', fontSize: 13, marginTop: 2 }}> )}
{formatLanguage(sub.language)}{sub.source ? ` · ${sub.source}` : ''}
</Text>
</View> </View>
{(isLoadingSubtitles && loadingSubtitleId === sub.id) ? ( </TouchableOpacity>
<ActivityIndicator size="small" color="#22C55E" /> );
) : isSelected ? ( })}
<MaterialIcons name="check" size={20} color="#22C55E" /> </View>
) : ( )}
<MaterialIcons name="download" size={20} color="rgba(255,255,255,0.4)" /> </View>
)}
</View>
</TouchableOpacity>
);
})}
</View>
)}
</View>
)} )}
{activeTab === 'appearance' && ( {activeTab === 'appearance' && (
@ -902,7 +855,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
</> </View>
); );
}; };