Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-03-11 17:45:38 +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 { 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 Animated, {
FadeIn,
FadeOut,
SlideInDown,
SlideOutDown,
SlideInRight,
SlideOutRight,
} from 'react-native-reanimated';
import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils';
import { logger } from '../../../utils/logger';
import { getTrackDisplayName } from '../utils/playerUtils';
interface AudioTrackModalProps {
showAudioModal: boolean;
setShowAudioModal: (show: boolean) => void;
ksAudioTracks: Array<{id: number, name: string, language?: string}>;
ksAudioTracks: Array<{ id: number, name: string, language?: string }>;
selectedAudioTrack: number | null;
selectAudioTrack: (trackId: number) => void;
}
@ -25,98 +24,89 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
selectedAudioTrack,
selectAudioTrack,
}) => {
const { width, height } = useWindowDimensions();
const menuWidth = Math.min(width * 0.9, 420);
const menuMaxHeight = height * 0.9;
const { width } = useWindowDimensions();
const MENU_WIDTH = Math.min(width * 0.85, 400);
const handleClose = () => setShowAudioModal(false);
if (!showAudioModal) return null;
return (
<View style={StyleSheet.absoluteFill} zIndex={9999}>
{/* Backdrop matching SubtitleModal */}
<TouchableOpacity
style={StyleSheet.absoluteFill}
activeOpacity={1}
onPress={handleClose}
>
<Animated.View
entering={FadeIn.duration(200)}
exiting={FadeOut.duration(150)}
style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)' }}
/>
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
</TouchableOpacity>
{/* Center Alignment Container */}
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none">
<Animated.View
entering={SlideInDown.duration(300)}
exiting={SlideOutDown.duration(250)}
style={{
width: menuWidth,
maxHeight: menuMaxHeight,
backgroundColor: 'rgba(15, 15, 15, 0.98)', // Matches SubtitleModal
borderRadius: 24,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.1)',
overflow: 'hidden'
}}
>
{/* Header with shared aesthetics */}
<View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
<Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Audio Tracks</Text>
<Animated.View
entering={SlideInRight.duration(300)}
exiting={SlideOutRight.duration(250)}
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
width: MENU_WIDTH,
backgroundColor: '#0f0f0f',
borderLeftWidth: 1,
borderColor: 'rgba(255,255,255,0.1)',
}}
>
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Audio Tracks</Text>
</View>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }}
>
<View style={{ gap: 8 }}>
{ksAudioTracks.map((track) => {
const isSelected = selectedAudioTrack === track.id;
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
>
<View style={{ gap: 8 }}>
{ksAudioTracks.map((track) => {
const isSelected = selectedAudioTrack === track.id;
return (
<TouchableOpacity
key={track.id}
onPress={() => {
selectAudioTrack(track.id);
setTimeout(handleClose, 200);
}}
style={{
padding: 10,
borderRadius: 12,
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)', // Matches SubtitleModal item colors
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}
>
<View style={{ flex: 1 }}>
<Text style={{
color: isSelected ? 'black' : 'white',
fontWeight: isSelected ? '700' : '400',
fontSize: 15
}}>
{getTrackDisplayName(track)}
</Text>
</View>
{isSelected && <MaterialIcons name="check" size={18} color="black" />}
</TouchableOpacity>
);
})}
return (
<TouchableOpacity
key={track.id}
onPress={() => {
selectAudioTrack(track.id);
setTimeout(handleClose, 200);
}}
style={{
paddingHorizontal: 16,
paddingVertical: 12,
borderRadius: 12,
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
borderWidth: 1,
borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}
>
<View style={{ flex: 1 }}>
<Text style={{
color: isSelected ? 'black' : 'white',
fontWeight: isSelected ? '700' : '500',
fontSize: 15
}}>
{getTrackDisplayName(track)}
</Text>
</View>
{isSelected && <MaterialIcons name="check" size={18} color="black" />}
</TouchableOpacity>
);
})}
{ksAudioTracks.length === 0 && (
<View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
<MaterialIcons name="volume-off" size={32} color="white" />
<Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text>
</View>
)}
</View>
</ScrollView>
</Animated.View>
</View>
{ksAudioTracks.length === 0 && (
<View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
<MaterialIcons name="volume-off" size={32} color="white" />
<Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text>
</View>
)}
</View>
</ScrollView>
</Animated.View>
</View>
);
};

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

@ -1,8 +1,8 @@
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 Animated, {
FadeIn,
import Animated, {
FadeIn,
FadeOut,
SlideInRight,
SlideOutRight,
@ -20,16 +20,13 @@ interface EpisodeStreamsModalProps {
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 }) => {
if (!quality) return null;
const qualityNum = parseInt(quality);
let color = '#8B5CF6';
let label = `${quality}p`;
if (qualityNum >= 2160) {
color = '#F59E0B';
label = '4K';
@ -40,9 +37,9 @@ const QualityBadge = ({ quality }: { quality: string | null }) => {
color = '#10B981';
label = 'HD';
}
return (
<View
<View
style={{
backgroundColor: `${color}20`,
borderColor: `${color}60`,
@ -73,6 +70,9 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
onSelectStream,
metadata,
}) => {
const { width } = useWindowDimensions();
const MENU_WIDTH = Math.min(width * 0.85, 400);
const [availableStreams, setAvailableStreams] = useState<{ [providerId: string]: { streams: Stream[]; addonName: string } }>({});
const [isLoading, setIsLoading] = useState(false);
const [hasErrors, setHasErrors] = useState<string[]>([]);
@ -89,35 +89,34 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
const fetchStreams = async () => {
if (!episode || !metadata?.id) return;
setIsLoading(true);
setHasErrors([]);
setAvailableStreams({});
try {
const episodeId = episode.stremioId || `${metadata.id}:${episode.season_number}:${episode.episode_number}`;
let completedProviders = 0;
const expectedProviders = new Set<string>();
const respondedProviders = new Set<string>();
const installedAddons = stremioService.getInstalledAddons();
const streamAddons = installedAddons.filter((addon: any) =>
const streamAddons = installedAddons.filter((addon: any) =>
addon.resources && addon.resources.includes('stream')
);
streamAddons.forEach((addon: any) => expectedProviders.add(addon.id));
logger.log(`[EpisodeStreamsModal] Fetching streams for ${episodeId}, expecting ${expectedProviders.size} providers`);
await stremioService.getStreams('series', episodeId, (streams: any, addonId: any, addonName: any, error: any) => {
completedProviders++;
respondedProviders.add(addonId);
if (error) {
logger.warn(`[EpisodeStreamsModal] Error from ${addonName || addonId}:`, error);
setHasErrors(prev => [...prev, `${addonName || addonId}: ${error.message || 'Unknown error'}`]);
} else if (streams && streams.length > 0) {
// Update state incrementally for each provider
setAvailableStreams(prev => ({
...prev,
[addonId]: {
@ -129,13 +128,13 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
} else {
logger.log(`[EpisodeStreamsModal] No streams from ${addonName || addonId}`);
}
if (completedProviders >= expectedProviders.size) {
logger.log(`[EpisodeStreamsModal] All providers completed. Total providers responded: ${respondedProviders.size}`);
setIsLoading(false);
}
});
// Fallback timeout
setTimeout(() => {
if (respondedProviders.size === 0) {
@ -144,7 +143,7 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
setIsLoading(false);
}
}, 8000);
} catch (error) {
logger.error('[EpisodeStreamsModal] Error fetching streams:', error);
setHasErrors(prev => [...prev, `Failed to fetch streams: ${error}`]);
@ -158,38 +157,16 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
return match ? match[1] : null;
};
const handleClose = () => {
onClose();
};
if (!visible) return null;
const sortedProviders = Object.entries(availableStreams);
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>
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={onClose}>
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
</TouchableOpacity>
{/* Side Menu */}
<Animated.View
entering={SlideInRight.duration(300)}
exiting={SlideOutRight.duration(250)}
@ -199,66 +176,29 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
right: 0,
bottom: 0,
width: MENU_WIDTH,
backgroundColor: '#1A1A1A',
zIndex: 9999,
elevation: 20,
shadowColor: '#000',
shadowOffset: { width: -5, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
backgroundColor: '#0f0f0f',
borderLeftWidth: 1,
borderColor: 'rgba(255,255,255,0.1)',
}}
>
{/* Header */}
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
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}
<View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
<View style={{ flex: 1 }}>
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }} numberOfLines={1}>
{episode?.name || 'Select Stream'}
</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>
<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: 20, paddingBottom: 40 }}
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
>
{isLoading && (
<View style={{
@ -292,20 +232,20 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
}}>
{providerData.addonName} ({providerData.streams.length})
</Text>
<View style={{ gap: 8 }}>
{providerData.streams.map((stream, index) => {
const quality = getQualityFromTitle(stream.title) || stream.quality;
return (
<TouchableOpacity
key={`${providerId}-${index}`}
style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)',
borderRadius: 16,
padding: 16,
backgroundColor: 'rgba(255,255,255,0.06)',
borderRadius: 12,
padding: 12,
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
borderColor: 'rgba(255,255,255,0.1)',
}}
onPress={() => onSelectStream(stream)}
activeOpacity={0.7}
@ -319,7 +259,7 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
gap: 8,
}}>
<Text style={{
color: '#FFFFFF',
color: 'white',
fontSize: 15,
fontWeight: '500',
flex: 1,
@ -328,14 +268,14 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
</Text>
{quality && <QualityBadge quality={quality} />}
</View>
{(stream.size || stream.lang) && (
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
{stream.size && (
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="storage" size={14} color="rgba(107, 114, 128, 0.8)" />
<MaterialIcons name="storage" size={14} color="rgba(255,255,255,0.5)" />
<Text style={{
color: 'rgba(107, 114, 128, 0.8)',
color: 'rgba(255,255,255,0.5)',
fontSize: 12,
fontWeight: '600',
marginLeft: 4,
@ -346,9 +286,9 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
)}
{stream.lang && (
<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={{
color: 'rgba(59, 130, 246, 0.8)',
color: 'rgba(59,130,246,0.8)',
fontSize: 12,
fontWeight: '600',
marginLeft: 4,
@ -360,11 +300,8 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
</View>
)}
</View>
<View style={{
marginLeft: 12,
alignItems: 'center',
}}>
<View style={{ marginLeft: 12, alignItems: 'center' }}>
<MaterialIcons name="play-arrow" size={20} color="rgba(255,255,255,0.4)" />
</View>
</View>
@ -434,7 +371,6 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
)}
</ScrollView>
</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) {
setIsLoadingProgress(true);
try {
const progress = await storageService.getShowProgress(metadata.id);
setEpisodeProgress(progress || {});
const allProgress = await storageService.getAllWatchProgress();
const progress: { [key: string]: any } = {};
// Filter progress for current show's episodes
Object.entries(allProgress).forEach(([key, value]) => {
if (key.includes(metadata.id!)) {
progress[key] = value;
}
});
setEpisodeProgress(progress);
// Trakt sync logic preserved
if (await TraktService.isAuthenticated()) {
// Optional: background sync logic
const traktService = TraktService.getInstance();
if (await traktService.isAuthenticated()) {
// Optional: background sync logic
}
} catch (err) {
logger.error('Failed to fetch episode progress', err);
@ -84,7 +94,7 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
const currentSeasonEpisodes = groupedEpisodes[selectedSeason] || [];
return (
<View style={StyleSheet.absoluteFill} zIndex={9999}>
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={() => setShowEpisodesModal(false)}>
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
</TouchableOpacity>

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

@ -1,8 +1,8 @@
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 Animated, {
FadeIn,
import Animated, {
FadeIn,
FadeOut,
SlideInRight,
SlideOutRight,
@ -18,16 +18,13 @@ interface SourcesModalProps {
isChangingSource?: boolean;
}
const { width } = Dimensions.get('window');
const MENU_WIDTH = Math.min(width * 0.85, 400);
const QualityBadge = ({ quality }: { quality: string | null }) => {
if (!quality) return null;
const qualityNum = parseInt(quality);
let color = '#8B5CF6'; // Default purple
let label = `${quality}p`;
if (qualityNum >= 2160) {
color = '#F59E0B'; // Gold for 4K
label = '4K';
@ -38,9 +35,9 @@ const QualityBadge = ({ quality }: { quality: string | null }) => {
color = '#10B981'; // Green for 720p
label = 'HD';
}
return (
<View
<View
style={{
backgroundColor: `${color}20`,
borderColor: `${color}60`,
@ -72,6 +69,9 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
onSelectStream,
isChangingSource = false,
}) => {
const { width } = useWindowDimensions();
const MENU_WIDTH = Math.min(width * 0.85, 400);
const handleClose = () => {
setShowSourcesModal(false);
};
@ -97,29 +97,11 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
};
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>
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
</TouchableOpacity>
{/* Side Menu */}
<Animated.View
entering={SlideInRight.duration(300)}
exiting={SlideOutRight.duration(250)}
@ -129,55 +111,20 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
right: 0,
bottom: 0,
width: MENU_WIDTH,
backgroundColor: '#1A1A1A',
zIndex: 9999,
elevation: 20,
shadowColor: '#000',
shadowOffset: { width: -5, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
backgroundColor: '#0f0f0f',
borderLeftWidth: 1,
borderColor: 'rgba(255,255,255,0.1)',
}}
>
{/* Header */}
<View style={{
flexDirection: 'row',
alignItems: 'center',
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 style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
<Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Change Source</Text>
</View>
</View>
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
>
{isChangingSource && (
<View style={{
@ -213,21 +160,21 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
}}>
{providerData.addonName} ({providerData.streams.length})
</Text>
<View style={{ gap: 8 }}>
{providerData.streams.map((stream, index) => {
const isSelected = isStreamSelected(stream);
const quality = getQualityFromTitle(stream.title) || stream.quality;
return (
<TouchableOpacity
key={`${providerId}-${index}`}
style={{
backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)',
borderRadius: 16,
padding: 16,
backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
borderRadius: 12,
padding: 12,
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,
}}
onPress={() => handleStreamSelect(stream)}
@ -243,23 +190,23 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
gap: 8,
}}>
<Text style={{
color: '#FFFFFF',
color: isSelected ? 'black' : 'white',
fontSize: 15,
fontWeight: '500',
fontWeight: isSelected ? '700' : '500',
flex: 1,
}}>
{stream.title || stream.name || `Stream ${index + 1}`}
</Text>
{quality && <QualityBadge quality={quality} />}
</View>
{(stream.size || stream.lang) && (
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
{stream.size && (
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="storage" size={14} color="rgba(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={{
color: 'rgba(107, 114, 128, 0.8)',
color: isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.5)',
fontSize: 12,
fontWeight: '600',
marginLeft: 4,
@ -270,9 +217,9 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
)}
{stream.lang && (
<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={{
color: 'rgba(59, 130, 246, 0.8)',
color: isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(59,130,246,0.8)',
fontSize: 12,
fontWeight: '600',
marginLeft: 4,
@ -284,13 +231,10 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
</View>
)}
</View>
<View style={{
marginLeft: 12,
alignItems: 'center',
}}>
<View style={{ marginLeft: 12, alignItems: 'center' }}>
{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)" />
)}
@ -330,6 +274,6 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
)}
</ScrollView>
</Animated.View>
</>
</View>
);
};

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

@ -1,13 +1,12 @@
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 Animated, {
FadeIn,
import Animated, {
FadeIn,
FadeOut,
SlideInRight,
SlideOutRight,
} from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
interface SpeedModalProps {
showSpeedModal: boolean;
@ -30,20 +29,8 @@ export const SpeedModal: React.FC<SpeedModalProps> = ({
holdToSpeedValue,
setHoldToSpeedValue,
}) => {
const insets = useSafeAreaInsets();
const { width, height } = useWindowDimensions();
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 { width } = useWindowDimensions();
const MENU_WIDTH = Math.min(width * 0.85, 400);
const speedPresets = [0.5, 1.0, 1.5, 2.0, 2.5];
const holdSpeedOptions = [1.5, 2.0];
@ -60,268 +47,203 @@ export const SpeedModal: React.FC<SpeedModalProps> = ({
setHoldToSpeedValue(speed);
};
const renderSpeedModal = () => {
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>
</>
);
};
if (!showSpeedModal) return null;
return (
<>
{renderSpeedModal()}
</>
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
</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>
);
};

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

@ -1,13 +1,13 @@
import React from 'react';
import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Platform, useWindowDimensions } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import Animated, {
FadeIn,
import Animated, {
FadeIn,
FadeOut,
SlideInRight,
SlideOutRight,
} from 'react-native-reanimated';
import { styles } from '../utils/playerStyles';
import { StyleSheet } from 'react-native';
import { WyzieSubtitle, SubtitleCue } from '../utils/playerTypes';
import { getTrackDisplayName, formatLanguage } from '../utils/playerUtils';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
@ -21,7 +21,7 @@ interface SubtitleModalsProps {
isLoadingSubtitles: boolean;
customSubtitles: SubtitleCue[];
availableSubtitles: WyzieSubtitle[];
ksTextTracks: Array<{id: number, name: string, language?: string}>;
ksTextTracks: Array<{ id: number, name: string, language?: string }>;
selectedTextTrack: number;
useCustomSubtitles: boolean;
// When true, KSPlayer is active (iOS MKV path). Use to gate iOS-only limitations.
@ -128,7 +128,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
width * (isIos ? (isLandscape ? 0.6 : 0.8) : 0.85),
isIos ? 420 : 400
);
React.useEffect(() => {
if (showSubtitleModal && !isLoadingSubtitleList && availableSubtitles.length === 0) {
fetchAvailableSubtitles();
@ -183,31 +183,13 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
// Main subtitle menu
const renderSubtitleMenu = () => {
if (!showSubtitleModal) 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 */}
return (
<View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
</TouchableOpacity>
<Animated.View
entering={SlideInRight.duration(300)}
exiting={SlideOutRight.duration(250)}
@ -217,51 +199,22 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
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,
backgroundColor: '#0f0f0f',
borderLeftWidth: 1,
borderColor: 'rgba(255,255,255,0.1)',
}}
>
{/* Header */}
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 20,
paddingTop: insets.top + (isCompact ? 8 : 12),
paddingBottom: 12,
borderBottomWidth: 1,
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 style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 }}>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
<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>
<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>
{/* Segmented Tabs */}
@ -288,7 +241,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
))}
</View>
<ScrollView
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{ padding: 20, paddingBottom: (isCompact ? 24 : 40) + (isIos ? insets.bottom : 0) }}
showsVerticalScrollIndicator={false}
@ -413,171 +366,171 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
)}
{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,
<View style={{ marginBottom: 30 }}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 15,
}}>
Addon Subtitles
</Text>
<View style={{ flexDirection: 'row', gap: 8 }}>
{useCustomSubtitles && (
<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(239, 68, 68, 0.15)',
backgroundColor: 'rgba(34, 197, 94, 0.15)',
borderRadius: 12,
paddingHorizontal: chipPadH,
paddingVertical: chipPadV-2,
paddingVertical: chipPadV - 2,
flexDirection: 'row',
alignItems: 'center',
}}
onPress={() => {
disableCustomSubtitles();
setSelectedOnlineSubtitleId(null);
}}
activeOpacity={0.7}
onPress={() => fetchAvailableSubtitles()}
disabled={isLoadingSubtitleList}
>
<MaterialIcons name="close" size={16} color="#EF4444" />
{isLoadingSubtitleList ? (
<ActivityIndicator size="small" color="#22C55E" />
) : (
<MaterialIcons name="refresh" size={16} color="#22C55E" />
)}
<Text style={{
color: '#EF4444',
color: '#22C55E',
fontSize: isCompact ? 11 : 12,
fontWeight: '600',
marginLeft: 6,
}}>
Disable
{isLoadingSubtitleList ? 'Searching' : 'Refresh'}
</Text>
</TouchableOpacity>
)}
</View>
</View>
{(availableSubtitles.length === 0) && !isLoadingSubtitleList ? (
<TouchableOpacity
style={{
backgroundColor: 'rgba(34, 197, 94, 0.15)',
borderRadius: 12,
paddingHorizontal: chipPadH,
paddingVertical: chipPadV-2,
flexDirection: 'row',
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()}
disabled={isLoadingSubtitleList}
activeOpacity={0.7}
>
{isLoadingSubtitleList ? (
<ActivityIndicator size="small" color="#22C55E" />
) : (
<MaterialIcons name="refresh" size={16} color="#22C55E" />
)}
<MaterialIcons name="cloud-download" size={24} color="rgba(255,255,255,0.4)" />
<Text style={{
color: '#22C55E',
fontSize: isCompact ? 11 : 12,
fontWeight: '600',
marginLeft: 6,
color: 'rgba(255, 255, 255, 0.6)',
fontSize: isCompact ? 13 : 14,
marginTop: 8,
textAlign: 'center',
}}>
{isLoadingSubtitleList ? 'Searching' : 'Refresh'}
Tap to fetch from addons
</Text>
</TouchableOpacity>
</View>
</View>
{(availableSubtitles.length === 0) && !isLoadingSubtitleList ? (
<TouchableOpacity
style={{
) : isLoadingSubtitleList ? (
<View 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 }}>
{availableSubtitles.map((sub) => {
const isSelected = useCustomSubtitles && selectedOnlineSubtitleId === sub.id;
return (
<TouchableOpacity
key={sub.id}
style={{
backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)',
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 style={{ flex: 1 }}>
<Text style={{ color: '#FFFFFF', fontSize: 15, fontWeight: '500' }}>
{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>
<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 }}>
{availableSubtitles.map((sub) => {
const isSelected = useCustomSubtitles && selectedOnlineSubtitleId === sub.id;
return (
<TouchableOpacity
key={sub.id}
style={{
backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)',
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 style={{ flex: 1 }}>
<Text style={{ color: '#FFFFFF', fontSize: 15, fontWeight: '500' }}>
{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>
{(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>
</TouchableOpacity>
);
})}
</View>
)}
</View>
</TouchableOpacity>
);
})}
</View>
)}
</View>
)}
{activeTab === 'appearance' && (
@ -902,7 +855,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
</ScrollView>
</Animated.View>
</>
</View>
);
};