Add subtitle background toggle functionality in AndroidVideoPlayer and SubtitleModals, enhancing user control over subtitle appearance. Update CustomSubtitles to reflect background setting.

src/components/player/AndroidVideoPlayer.tsx

@@ -145,6 +145,7 @@ const AndroidVideoPlayer: React.FC = () => {
   const [customSubtitles, setCustomSubtitles] = useState<SubtitleCue[]>([]);
   const [currentSubtitle, setCurrentSubtitle] = useState<string>('');
   const [subtitleSize, setSubtitleSize] = useState<number>(DEFAULT_SUBTITLE_SIZE);
+  const [subtitleBackground, setSubtitleBackground] = useState<boolean>(true);
   const [useCustomSubtitles, setUseCustomSubtitles] = useState<boolean>(false);
   const [isLoadingSubtitles, setIsLoadingSubtitles] = useState<boolean>(false);
   const [availableSubtitles, setAvailableSubtitles] = useState<WyzieSubtitle[]>([]);
@@ -895,6 +896,10 @@ const AndroidVideoPlayer: React.FC = () => {
     saveSubtitleSize(newSize);
   };
 
+  const toggleSubtitleBackground = () => {
+    setSubtitleBackground(!subtitleBackground);
+  };
+
   useEffect(() => {
     if (pendingSeek && isPlayerReady && isVideoLoaded && duration > 0) {
       logger.log(`[AndroidVideoPlayer] Player ready after source change, seeking to position: ${pendingSeek.position}s out of ${duration}s total`);
@@ -1196,6 +1201,7 @@ const AndroidVideoPlayer: React.FC = () => {
             useCustomSubtitles={useCustomSubtitles}
             currentSubtitle={currentSubtitle}
             subtitleSize={subtitleSize}
+            subtitleBackground={subtitleBackground}
             zoomScale={zoomScale}
           />
 
@@ -1232,11 +1238,13 @@ const AndroidVideoPlayer: React.FC = () => {
         selectedTextTrack={selectedTextTrack}
         useCustomSubtitles={useCustomSubtitles}
         subtitleSize={subtitleSize}
+        subtitleBackground={subtitleBackground}
         fetchAvailableSubtitles={fetchAvailableSubtitles}
         loadWyzieSubtitle={loadWyzieSubtitle}
         selectTextTrack={selectTextTrack}
         increaseSubtitleSize={increaseSubtitleSize}
         decreaseSubtitleSize={decreaseSubtitleSize}
+        toggleSubtitleBackground={toggleSubtitleBackground}
       />
       
       <SourcesModal

src/components/player/modals/SubtitleModals.tsx

@@ -24,11 +24,13 @@ interface SubtitleModalsProps {
   selectedTextTrack: number;
   useCustomSubtitles: boolean;
   subtitleSize: number;
+  subtitleBackground: boolean;
   fetchAvailableSubtitles: () => void;
   loadWyzieSubtitle: (subtitle: WyzieSubtitle) => void;
   selectTextTrack: (trackId: number) => void;
   increaseSubtitleSize: () => void;
   decreaseSubtitleSize: () => void;
+  toggleSubtitleBackground: () => void;
 }
 
 const { width, height } = Dimensions.get('window');
@@ -47,11 +49,13 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
   selectedTextTrack,
   useCustomSubtitles,
   subtitleSize,
+  subtitleBackground,
   fetchAvailableSubtitles,
   loadWyzieSubtitle,
   selectTextTrack,
   increaseSubtitleSize,
   decreaseSubtitleSize,
+  toggleSubtitleBackground,
 }) => {
   // Track which specific online subtitle is currently loaded
   const [selectedOnlineSubtitleId, setSelectedOnlineSubtitleId] = React.useState<string | null>(null);
@@ -224,6 +228,57 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
               </View>
             </View>
 
+            {/* Background Toggle Section */}
+            <View style={{ marginBottom: 30 }}>
+              <Text style={{
+                color: 'rgba(255, 255, 255, 0.7)',
+                fontSize: 14,
+                fontWeight: '600',
+                marginBottom: 15,
+                textTransform: 'uppercase',
+                letterSpacing: 0.5,
+              }}>
+                Background
+              </Text>
+              
+              <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                borderRadius: 16,
+                padding: 16,
+              }}>
+                <Text style={{
+                  color: 'white',
+                  fontSize: 16,
+                  fontWeight: '500',
+                }}>
+                  Show Background
+                </Text>
+                
+                <TouchableOpacity
+                  style={{
+                    width: 50,
+                    height: 28,
+                    backgroundColor: subtitleBackground ? '#007AFF' : 'rgba(255, 255, 255, 0.2)',
+                    borderRadius: 14,
+                    justifyContent: 'center',
+                    alignItems: subtitleBackground ? 'flex-end' : 'flex-start',
+                    paddingHorizontal: 2,
+                  }}
+                  onPress={toggleSubtitleBackground}
+                >
+                  <View style={{
+                    width: 24,
+                    height: 24,
+                    backgroundColor: 'white',
+                    borderRadius: 12,
+                  }} />
+                </TouchableOpacity>
+              </View>
+            </View>
+
             {/* Built-in Subtitles */}
             {vlcTextTracks.length > 0 && (
               <View style={{ marginBottom: 30 }}>

src/components/player/subtitles/CustomSubtitles.tsx

@@ -6,6 +6,7 @@ interface CustomSubtitlesProps {
   useCustomSubtitles: boolean;
   currentSubtitle: string;
   subtitleSize: number;
+  subtitleBackground: boolean;
   zoomScale?: number; // current video zoom scale; defaults to 1
 }
 
@@ -13,6 +14,7 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
   useCustomSubtitles,
   currentSubtitle,
   subtitleSize,
+  subtitleBackground,
   zoomScale = 1,
 }) => {
   if (!useCustomSubtitles || !currentSubtitle) return null;
@@ -23,7 +25,12 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
       style={styles.customSubtitleContainer}
       pointerEvents="none"
     >
-      <View style={styles.customSubtitleWrapper}>
+      <View style={[
+        styles.customSubtitleWrapper,
+        {
+          backgroundColor: subtitleBackground ? 'rgba(0, 0, 0, 0.7)' : 'transparent',
+        }
+      ]}>
         <Text style={[
           styles.customSubtitleText, 
           { 

src/components/player/utils/playerStyles.ts

@@ -537,7 +537,6 @@ export const styles = StyleSheet.create({
     zIndex: 1500, // Higher z-index to appear above other elements
   },
   customSubtitleWrapper: {
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
     padding: 10,
     borderRadius: 5,
   },