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