From 65ece6a32a783e0633688aa2f9c36e4492942e0b Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Tue, 8 Jul 2025 15:54:48 +0530
Subject: [PATCH] Update SubtitleModals to conditionally display font size and
 background toggle sections based on custom subtitles setting. Adjust custom
 subtitle container position for better alignment.

---
 .../player/modals/SubtitleModals.tsx          | 56 ++++++++++---------
 src/components/player/utils/playerStyles.ts   |  2 +-
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/components/player/modals/SubtitleModals.tsx b/src/components/player/modals/SubtitleModals.tsx
index 75e29e2..c2aa2ba 100644
--- a/src/components/player/modals/SubtitleModals.tsx
+++ b/src/components/player/modals/SubtitleModals.tsx
@@ -169,28 +169,29 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
             contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
             showsVerticalScrollIndicator={false}
           >
-            {/* Font Size 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,
-              }}>
-                Font Size
-              </Text>
-              
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                borderRadius: 16,
-                padding: 16,
-              }}>
-                <TouchableOpacity
+            {/* Font Size Section - Only show for custom subtitles */}
+            {useCustomSubtitles && (
+              <View style={{ marginBottom: 30 }}>
+                <Text style={{
+                  color: 'rgba(255, 255, 255, 0.7)',
+                  fontSize: 14,
+                  fontWeight: '600',
+                  marginBottom: 15,
+                  textTransform: 'uppercase',
+                  letterSpacing: 0.5,
+                }}>
+                  Font Size
+                </Text>
+                
+                <View style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                  borderRadius: 16,
+                  padding: 16,
+                }}>
+                  <TouchableOpacity
                   style={{
                     width: 40,
                     height: 40,
@@ -226,10 +227,12 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                   <MaterialIcons name="add" size={20} color="#FFFFFF" />
                 </TouchableOpacity>
               </View>
-            </View>
+              </View>
+            )}
 
-            {/* Background Toggle Section */}
-            <View style={{ marginBottom: 30 }}>
+            {/* Background Toggle Section - Only show for custom subtitles */}
+            {useCustomSubtitles && (
+              <View style={{ marginBottom: 30 }}>
               <Text style={{
                 color: 'rgba(255, 255, 255, 0.7)',
                 fontSize: 14,
@@ -277,7 +280,8 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                   }} />
                 </TouchableOpacity>
               </View>
-            </View>
+              </View>
+            )}
 
             {/* Built-in Subtitles */}
             {vlcTextTracks.length > 0 && (
diff --git a/src/components/player/utils/playerStyles.ts b/src/components/player/utils/playerStyles.ts
index 5d8427e..7226408 100644
--- a/src/components/player/utils/playerStyles.ts
+++ b/src/components/player/utils/playerStyles.ts
@@ -530,7 +530,7 @@ export const styles = StyleSheet.create({
   },
   customSubtitleContainer: {
     position: 'absolute',
-    bottom: 40, // Position above controls and progress bar
+    bottom: 20, // Position lower, closer to bottom
     left: 20,
     right: 20,
     alignItems: 'center',