Revert "Update Ui of Subtitle selection tab made modern popup window"

src/components/player/modals/SubtitleModals.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, ScrollView, Platform, useWindowDimensions, StyleSheet } from 'react-native';
+import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Platform, useWindowDimensions } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import Animated, { 
   FadeIn, 
   FadeOut,
-  SlideInDown,
+  SlideInRight,
-  SlideOutDown,
+  SlideOutRight,
-  useAnimatedStyle,
-  withTiming,
 } from 'react-native-reanimated';
+import { styles } from '../utils/playerStyles';
 import { WyzieSubtitle, SubtitleCue } from '../utils/playerTypes';
 import { getTrackDisplayName, formatLanguage } from '../utils/playerUtils';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface SubtitleModalsProps {
   showSubtitleModal: boolean;
@@ -24,6 +24,7 @@ interface SubtitleModalsProps {
   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.
   isKsPlayerActive?: boolean;
   subtitleSize: number;
   subtitleBackground: boolean;
@@ -34,6 +35,7 @@ interface SubtitleModalsProps {
   increaseSubtitleSize: () => void;
   decreaseSubtitleSize: () => void;
   toggleSubtitleBackground: () => void;
+  // Customization props
   subtitleTextColor: string;
   setSubtitleTextColor: (c: string) => void;
   subtitleBgOpacity: number;
@@ -58,136 +60,522 @@ interface SubtitleModalsProps {
   setSubtitleOffsetSec: (n: number) => void;
 }
 
-const MorphingTab = ({ label, isSelected, onPress }: any) => {
+// Dynamic sizing handled inside component with useWindowDimensions
-  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> = ({
-  showSubtitleModal, setShowSubtitleModal, isLoadingSubtitleList, isLoadingSubtitles,
+  showSubtitleModal,
-  availableSubtitles, ksTextTracks, selectedTextTrack, useCustomSubtitles,
+  setShowSubtitleModal,
-  subtitleSize, subtitleBackground, fetchAvailableSubtitles,
+  showSubtitleLanguageModal,
-  loadWyzieSubtitle, selectTextTrack, increaseSubtitleSize,
+  setShowSubtitleLanguageModal,
-  decreaseSubtitleSize, toggleSubtitleBackground, subtitleTextColor, setSubtitleTextColor,
+  isLoadingSubtitleList,
-  subtitleBgOpacity, setSubtitleBgOpacity, subtitleTextShadow, setSubtitleTextShadow,
+  isLoadingSubtitles,
-  subtitleOutline, setSubtitleOutline, subtitleOutlineColor, setSubtitleOutlineColor,
+  customSubtitles,
-  subtitleOutlineWidth, setSubtitleOutlineWidth, subtitleAlign, setSubtitleAlign,
+  availableSubtitles,
-  subtitleBottomOffset, setSubtitleBottomOffset, subtitleLetterSpacing, setSubtitleLetterSpacing,
+  ksTextTracks,
-  subtitleLineHeightMultiplier, setSubtitleLineHeightMultiplier, subtitleOffsetSec, setSubtitleOffsetSec,
+  selectedTextTrack,
+  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 isIos = Platform.OS === 'ios';
   const isLandscape = width > height;
+  // Track which specific addon subtitle is currently loaded
   const [selectedOnlineSubtitleId, setSelectedOnlineSubtitleId] = React.useState<string | null>(null);
-  const [activeTab, setActiveTab] = React.useState<'built-in' | 'addon' | 'appearance'>('built-in');
+  // Track which addon subtitle is currently loading to show spinner per-item
-
+  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 sectionPad = isCompact ? 12 : 16;
   const chipPadH = isCompact ? 8 : 12;
   const chipPadV = isCompact ? 6 : 8;
   const controlBtn = { size: isCompact ? 28 : 32, radius: isCompact ? 14 : 16 };
   const previewHeight = isCompact ? 90 : (isIos && isLandscape ? 100 : 120);
-
+  const menuWidth = Math.min(
-  const menuWidth = Math.min(width * 0.9, 420);
+    width * (isIos ? (isLandscape ? 0.6 : 0.8) : 0.85),
-  const menuMaxHeight = height * 0.95;
+    isIos ? 420 : 400
+  );
  
   React.useEffect(() => {
-    if (showSubtitleModal && !isLoadingSubtitleList && availableSubtitles.length === 0) fetchAvailableSubtitles();
+    if (showSubtitleModal && !isLoadingSubtitleList && availableSubtitles.length === 0) {
+      fetchAvailableSubtitles();
+    }
   }, [showSubtitleModal]);
 
-  const handleClose = () => setShowSubtitleModal(false);
+  // Reset selected addon subtitle when switching to built-in tracks
+  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;
     
     return (
-    <View style={StyleSheet.absoluteFill} zIndex={9999}>
+      <>
         {/* Backdrop */}
-      <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
-        <Animated.View entering={FadeIn} exiting={FadeOut} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
-      </TouchableOpacity>
-
-      {/* Centered Modal Container */}
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none">
         <Animated.View 
-          entering={SlideInDown.duration(300)}
+          entering={FadeIn.duration(200)}
-          exiting={SlideOutDown.duration(250)}
+          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,
-            maxHeight: menuMaxHeight,
+            backgroundColor: '#1A1A1A',
-            backgroundColor: '#0f0f0f',
+            zIndex: 9999,
-            borderRadius: 24,
+            elevation: 20,
-            borderWidth: 1,
+            shadowColor: '#000',
-            borderColor: 'rgba(255,255,255,0.1)',
+            shadowOffset: { width: -5, height: 0 },
-            overflow: 'hidden'
+            shadowOpacity: 0.3,
+            shadowRadius: 10,
+            borderTopLeftRadius: 20,
+            borderBottomLeftRadius: 20,
+            paddingRight: 0,
           }}
         >
           {/* Header */}
-          <View style={{ flexDirection: 'row', alignItems: 'center', padding: 15, position: 'relative' }}>
+          <View style={{
-            <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Subtitles</Text>
+            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>
-
-          {/* Tab Bar */}
-          <View style={{ flexDirection: 'row', gap: 15, paddingHorizontal: 70, marginBottom: 20 }}>
-            <MorphingTab label="Built-in" isSelected={activeTab === 'built-in'} onPress={() => setActiveTab('built-in')} />
-            <MorphingTab label="Addons" isSelected={activeTab === 'addon'} onPress={() => setActiveTab('addon')} />
-            <MorphingTab label="Style" isSelected={activeTab === 'appearance'} onPress={() => setActiveTab('appearance')} />
             </View>
-
-          <ScrollView showsVerticalScrollIndicator={false}>
-            <View style={{ paddingHorizontal: 20, paddingBottom: 20 }}>
-              {activeTab === 'built-in' && (
-                <View style={{ gap: 8 }}>
             <TouchableOpacity 
-                    onPress={() => { selectTextTrack(-1); setSelectedOnlineSubtitleId(null); }}
+              style={{
-                    style={{ padding: 10, borderRadius: 12, backgroundColor: selectedTextTrack === -1 ? 'white' : 'rgba(242, 184, 181)' }}
+                width: 36,
+                height: 36,
+                borderRadius: 18,
+                backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+              onPress={handleClose}
+              activeOpacity={0.7}
             >
-                    <Text style={{ color: selectedTextTrack === -1 ? 'black' : 'rgba(96, 20, 16)', fontWeight: '600' }}>None</Text>
+              <MaterialIcons name="close" size={20} color="#FFFFFF" />
             </TouchableOpacity>
-                  {ksTextTracks.map((track) => (
+          </View>
+
+          {/* Segmented Tabs */}
+          <View style={{ flexDirection: 'row', gap: 8, paddingHorizontal: 20, paddingTop: 10, paddingBottom: 6 }}>
+            {([
+              { key: 'built-in', label: 'Built‑in' },
+              { key: 'addon', label: 'Addons' },
+              { key: 'appearance', label: 'Appearance' },
+            ] as const).map(tab => (
               <TouchableOpacity
-                      key={track.id}
+                key={tab.key}
-                      onPress={() => { selectTextTrack(track.id); setSelectedOnlineSubtitleId(null); }}
+                onPress={() => setActiveTab(tab.key)}
-                      style={{ padding: 10, borderRadius: 12, backgroundColor: selectedTextTrack === track.id ? 'white' : 'rgba(255,255,255,0.05)', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
+                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: selectedTextTrack === track.id ? 'black' : 'white' }}>{getTrackDisplayName(track)}</Text>
+                <Text style={{ color: '#fff', fontWeight: '600', fontSize: isCompact ? 12 : 13 }}>{tab.label}</Text>
-                      {selectedTextTrack === track.id && <MaterialIcons name="check" size={18} color="black" />}
               </TouchableOpacity>
             ))}
           </View>
+
+          <ScrollView 
+            style={{ flex: 1 }}
+            contentContainerStyle={{ padding: 20, paddingBottom: (isCompact ? 24 : 40) + (isIos ? insets.bottom : 0) }}
+            showsVerticalScrollIndicator={false}
+          >
+            {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 }}>
+                    {ksTextTracks.map((track) => {
+                      const isSelected = selectedTextTrack === track.id && !useCustomSubtitles;
+                      return (
+                        <TouchableOpacity
+                          key={track.id}
+                          style={{
+                            backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)',
+                            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: '#FFFFFF',
+                              fontSize: isCompact ? 14 : 15,
+                              fontWeight: '500',
+                              flex: 1,
+                            }}>
+                              {getTrackDisplayName(track)}
+                            </Text>
+                            {isSelected && (
+                              <MaterialIcons name="check" size={20} color="#3B82F6" />
+                            )}
+                          </View>
+                        </TouchableOpacity>
+                      );
+                    })}
+                  </View>
+                )}
+              </View>
             )}
 
             {activeTab === 'addon' && (
-                <View style={{ gap: 8 }}>
+            <View style={{ marginBottom: 30 }}>
-                  {availableSubtitles.length === 0 ? (
+              <View style={{
-                    <TouchableOpacity onPress={fetchAvailableSubtitles} style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
+                flexDirection: 'row',
-                      <MaterialIcons name="cloud-download" size={32} color="white" />
+                alignItems: 'center',
-                      <Text style={{ color: 'white', marginTop: 10 }}>Search Online Subtitles</Text>
+                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" />
                     ) : (
-                    availableSubtitles.map((sub) => (
+                      <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 }}>
+                  {availableSubtitles.map((sub) => {
+                    const isSelected = useCustomSubtitles && selectedOnlineSubtitleId === sub.id;
+                    return (
                       <TouchableOpacity
                         key={sub.id}
-                        onPress={() => { setSelectedOnlineSubtitleId(sub.id); loadWyzieSubtitle(sub); }}
+                        style={{
-                        style={{ padding: 6, borderRadius: 12, backgroundColor: selectedOnlineSubtitleId === sub.id ? 'white' : 'rgba(255,255,255,0.05)', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
+                          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>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                          <Text style={{ marginLeft: 5, color: selectedOnlineSubtitleId === sub.id ? 'black' : 'white', fontWeight: '600' }}>{sub.display}</Text>
+                          <View style={{ flex: 1 }}>
-                          <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>
+                            <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>
                       </TouchableOpacity>
-                    ))
+                    );
+                  })}
+                </View>
               )}
             </View>
             )}
@@ -214,7 +602,9 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                           letterSpacing: subtitleLetterSpacing,
                           lineHeight: subtitleSize * subtitleLineHeightMultiplier,
                           textAlign: subtitleAlign,
-                            textShadowColor: subtitleOutline ? subtitleOutlineColor : (subtitleTextShadow ? 'rgba(0,0,0,0.9)' : undefined),
+                          textShadowColor: subtitleOutline
+                            ? subtitleOutlineColor
+                            : (subtitleTextShadow ? 'rgba(0,0,0,0.9)' : undefined),
                           textShadowOffset: (subtitleOutline || subtitleTextShadow) ? { width: 2, height: 2 } : undefined,
                           textShadowRadius: subtitleOutline ? Math.max(1, subtitleOutlineWidth) : (subtitleTextShadow ? 4 : undefined),
                         }}>
@@ -234,9 +624,15 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                   <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
                     <TouchableOpacity
                       onPress={() => {
-                          setSubtitleTextColor('#FFFFFF'); setSubtitleBgOpacity(0.7); setSubtitleTextShadow(true);
+                        setSubtitleTextColor('#FFFFFF');
-                          setSubtitleOutline(true); setSubtitleOutlineColor('#000000'); setSubtitleOutlineWidth(4);
+                        setSubtitleBgOpacity(0.7);
-                          setSubtitleAlign('center'); setSubtitleBottomOffset(10); setSubtitleLetterSpacing(0);
+                        setSubtitleTextShadow(true);
+                        setSubtitleOutline(true);
+                        setSubtitleOutlineColor('#000000');
+                        setSubtitleOutlineWidth(4);
+                        setSubtitleAlign('center');
+                        setSubtitleBottomOffset(10);
+                        setSubtitleLetterSpacing(0);
                         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)' }}
@@ -245,7 +641,12 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                     </TouchableOpacity>
                     <TouchableOpacity
                       onPress={() => {
-                          setSubtitleTextColor('#FFD700'); setSubtitleOutline(true); setSubtitleOutlineColor('#000000'); setSubtitleOutlineWidth(4); setSubtitleBgOpacity(0.3); setSubtitleTextShadow(false);
+                        setSubtitleTextColor('#FFD700');
+                        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)' }}
                     >
@@ -253,7 +654,13 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                     </TouchableOpacity>
                     <TouchableOpacity
                       onPress={() => {
-                          setSubtitleTextColor('#FFFFFF'); setSubtitleOutline(true); setSubtitleOutlineColor('#000000'); setSubtitleOutlineWidth(3); setSubtitleBgOpacity(0.0); setSubtitleTextShadow(false); setSubtitleLetterSpacing(0.5);
+                        setSubtitleTextColor('#FFFFFF');
+                        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)' }}
                     >
@@ -261,7 +668,12 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                     </TouchableOpacity>
                     <TouchableOpacity
                       onPress={() => {
-                          setSubtitleTextColor('#FFFFFF'); setSubtitleBgOpacity(0.6); setSubtitleTextShadow(true); setSubtitleOutline(true); setSubtitleAlign('center'); setSubtitleLineHeightMultiplier(1.3);
+                        setSubtitleTextColor('#FFFFFF');
+                        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)' }}
                     >
@@ -276,6 +688,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                     <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>
                   </View>
+                  {/* Font Size */}
                   <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                     <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                       <MaterialIcons name="format-size" size={16} color="rgba(255,255,255,0.7)" />
@@ -293,16 +706,17 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                       </TouchableOpacity>
                     </View>
                   </View>
+                  {/* Background toggle */}
                   <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                     <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                       <MaterialIcons name="layers" size={16} color="rgba(255,255,255,0.7)" />
                       <Text style={{ color: '#fff', fontWeight: '600', marginLeft: 8 }}>Show Background</Text>
                     </View>
                     <TouchableOpacity
-                        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 }}
+                      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 }}
                       onPress={toggleSubtitleBackground}
                     >
-                        <View style={{ width: 24, height: 24, backgroundColor: subtitleBackground ? 'black' : 'white', borderRadius: 12 }} />
+                      <View style={{ width: 24, height: 24, backgroundColor: 'white', borderRadius: 12 }} />
                     </TouchableOpacity>
                   </View>
                 </View>
@@ -313,6 +727,8 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                     <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>
                   </View>
+
+                  {/* Text Color */}
                   <View style={{ marginTop: 8, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                     <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                       <MaterialIcons name="palette" size={16} color="rgba(255,255,255,0.7)" />
@@ -324,16 +740,28 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                       ))}
                     </View>
                   </View>
+
+                  {/* Align */}
                   <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                     <Text style={{ color: 'white', fontWeight: '600' }}>Align</Text>
                     <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 => (
+                      {([
-                          <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: 'left', icon: 'format-align-left' },
+                        { 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" />
                         </TouchableOpacity>
                       ))}
                     </View>
                   </View>
+
+                  {/* Bottom Offset */}
                   <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                     <Text style={{ color: 'white', fontWeight: '600' }}>Bottom Offset</Text>
                     <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
@@ -348,6 +776,8 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                       </TouchableOpacity>
                     </View>
                   </View>
+
+                  {/* Background Opacity */}
                   <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                     <Text style={{ color: 'white', fontWeight: '600' }}>Background Opacity</Text>
                     <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
@@ -362,12 +792,15 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                       </TouchableOpacity>
                     </View>
                   </View>
+
+                  {/* Shadow */}
                   <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                     <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' }}>
                       <Text style={{ color: '#fff', fontWeight: '700' }}>{subtitleTextShadow ? 'On' : 'Off'}</Text>
                     </TouchableOpacity>
                   </View>
+                  {/* Outline color & width */}
                   <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                     <Text style={{ color: 'white' }}>Outline Color</Text>
                     <View style={{ flexDirection: 'row', gap: 8 }}>
@@ -390,6 +823,8 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                       </TouchableOpacity>
                     </View>
                   </View>
+
+                  {/* Spacing (two columns) */}
                   <View style={{ flexDirection: isCompact ? 'column' : 'row', justifyContent: 'space-between', gap: 12 }}>
                     <View style={{ flex: 1 }}>
                       <Text style={{ color: 'white', fontWeight: '600' }}>Letter Spacing</Text>
@@ -420,6 +855,8 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                       </View>
                     </View>
                   </View>
+
+                  {/* Timing Offset */}
                   <View style={{ marginTop: 4 }}>
                     <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                       <Text style={{ color: 'white', fontWeight: '600' }}>Timing Offset (s)</Text>
@@ -437,13 +874,22 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                     </View>
                     <Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 11, marginTop: 6 }}>Nudge subtitles earlier (-) or later (+) to sync if needed.</Text>
                   </View>
+
+                  {/* Reset to defaults */}
                   <View style={{ alignItems: 'flex-end', marginTop: 8 }}>
                     <TouchableOpacity
                       onPress={() => {
-                          setSubtitleTextColor('#FFFFFF'); setSubtitleBgOpacity(0.7); setSubtitleTextShadow(true);
+                        setSubtitleTextColor('#FFFFFF');
-                          setSubtitleOutline(true); setSubtitleOutlineColor('#000000'); setSubtitleOutlineWidth(4);
+                        setSubtitleBgOpacity(0.7);
-                          setSubtitleAlign('center'); setSubtitleBottomOffset(10); setSubtitleLetterSpacing(0);
+                        setSubtitleTextShadow(true);
-                          setSubtitleLineHeightMultiplier(1.2); setSubtitleOffsetSec(0);
+                        setSubtitleOutline(true);
+                        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)' }}
                     >
@@ -453,11 +899,17 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                 </View>
               </View>
             )}
-            </View>
+
           </ScrollView>
         </Animated.View>
-      </View>
+      </>
-    </View>
+    );
+  };
+
+  return (
+    <>
+      {renderSubtitleMenu()}
+    </>
   );
 };