From 2487ef892c73445b7a8fb3f6536155a5b132edf5 Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Sat, 5 Jul 2025 13:35:36 +0530
Subject: [PATCH] Enhance video player components by adding zoom scale support
 and updating aspect ratio options. Introduce online subtitles section in
 SubtitleModals for improved subtitle management.

---
 src/components/player/AndroidVideoPlayer.tsx  |  3 +-
 src/components/player/VideoPlayer.tsx         |  1 +
 .../player/modals/SubtitleModals.tsx          | 65 +++++++++++++++++++
 .../player/subtitles/CustomSubtitles.tsx      | 13 +++-
 4 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/src/components/player/AndroidVideoPlayer.tsx b/src/components/player/AndroidVideoPlayer.tsx
index b202a6f83..8e69effe0 100644
--- a/src/components/player/AndroidVideoPlayer.tsx
+++ b/src/components/player/AndroidVideoPlayer.tsx
@@ -530,7 +530,7 @@ const AndroidVideoPlayer: React.FC = () => {
 
   const cycleAspectRatio = () => {
     // Android: cycle through native resize modes
-    const resizeModes: ResizeModeType[] = ['contain', 'cover', 'stretch', 'none'];
+    const resizeModes: ResizeModeType[] = ['contain', 'cover', 'fill', 'none'];
     const currentIndex = resizeModes.indexOf(resizeMode);
     const nextIndex = (currentIndex + 1) % resizeModes.length;
     setResizeMode(resizeModes[nextIndex]);
@@ -1091,6 +1091,7 @@ const AndroidVideoPlayer: React.FC = () => {
             useCustomSubtitles={useCustomSubtitles}
             currentSubtitle={currentSubtitle}
             subtitleSize={subtitleSize}
+            zoomScale={zoomScale}
           />
 
           <ResumeOverlay
diff --git a/src/components/player/VideoPlayer.tsx b/src/components/player/VideoPlayer.tsx
index 0674c2375..906fd90ed 100644
--- a/src/components/player/VideoPlayer.tsx
+++ b/src/components/player/VideoPlayer.tsx
@@ -1101,6 +1101,7 @@ const VideoPlayer: React.FC = () => {
             useCustomSubtitles={useCustomSubtitles}
             currentSubtitle={currentSubtitle}
             subtitleSize={subtitleSize}
+            zoomScale={zoomScale}
           />
 
           <ResumeOverlay
diff --git a/src/components/player/modals/SubtitleModals.tsx b/src/components/player/modals/SubtitleModals.tsx
index 455905a73..e7f3bef61 100644
--- a/src/components/player/modals/SubtitleModals.tsx
+++ b/src/components/player/modals/SubtitleModals.tsx
@@ -694,6 +694,71 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                     </TouchableOpacity>
                   </View>
                 ))}
+
+                {/* Online subtitles section */}
+                {isLoadingSubtitleList && (
+                  <View style={{ alignItems: 'center', marginTop: 24 }}>
+                    <ActivityIndicator size="large" color="#22C55E" />
+                  </View>
+                )}
+
+                {availableSubtitles.length > 0 && (
+                  <>
+                    <View style={{ marginVertical: 24 }}>
+                      <Text style={{
+                        color: 'rgba(255, 255, 255, 0.7)',
+                        fontSize: 14,
+                        fontWeight: '600',
+                        letterSpacing: 0.3,
+                        textTransform: 'uppercase',
+                      }}>
+                        Online Subtitles
+                      </Text>
+                    </View>
+
+                    {availableSubtitles.map((sub) => (
+                      <View key={sub.id} style={{ marginBottom: 12, width: '100%' }}>
+                        <TouchableOpacity
+                          style={{
+                            backgroundColor: 'rgba(34, 197, 94, 0.08)',
+                            borderRadius: 20,
+                            padding: 20,
+                            borderWidth: 2,
+                            borderColor: 'rgba(34, 197, 94, 0.4)',
+                            width: '100%',
+                          }}
+                          onPress={() => {
+                            loadWyzieSubtitle(sub);
+                            handleLanguageClose();
+                          }}
+                          activeOpacity={0.85}
+                        >
+                          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+                            <View style={{ flex: 1, marginRight: 16 }}>
+                              <Text style={{
+                                color: '#fff',
+                                fontSize: 16,
+                                fontWeight: '700',
+                                letterSpacing: -0.2,
+                                marginBottom: 4,
+                              }}>
+                                {sub.display}
+                              </Text>
+                              <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, alignItems: 'center' }}>
+                                <SubtitleBadge 
+                                  text={formatLanguage(sub.language)} 
+                                  color="#22C55E" 
+                                  bgColor="rgba(34, 197, 94, 0.15)"
+                                />
+                              </View>
+                            </View>
+                            <MaterialIcons name="cloud-download" size={24} color="#22C55E" />
+                          </View>
+                        </TouchableOpacity>
+                      </View>
+                    ))}
+                  </>
+                )}
               </View>
             </ScrollView>
           </BlurView>
diff --git a/src/components/player/subtitles/CustomSubtitles.tsx b/src/components/player/subtitles/CustomSubtitles.tsx
index 66bbedf6f..ea8df40ac 100644
--- a/src/components/player/subtitles/CustomSubtitles.tsx
+++ b/src/components/player/subtitles/CustomSubtitles.tsx
@@ -6,17 +6,28 @@ interface CustomSubtitlesProps {
   useCustomSubtitles: boolean;
   currentSubtitle: string;
   subtitleSize: number;
+  zoomScale?: number; // current video zoom scale; defaults to 1
 }
 
 export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
   useCustomSubtitles,
   currentSubtitle,
   subtitleSize,
+  zoomScale = 1,
 }) => {
   if (!useCustomSubtitles || !currentSubtitle) return null;
   
+  const inverseScale = 1 / zoomScale;
   return (
-    <View style={styles.customSubtitleContainer} pointerEvents="none">
+    <View
+      style={[
+        styles.customSubtitleContainer,
+        {
+          transform: [{ scale: inverseScale }],
+        },
+      ]}
+      pointerEvents="none"
+    >
       <View style={styles.customSubtitleWrapper}>
         <Text style={[styles.customSubtitleText, { fontSize: subtitleSize }]}>
           {currentSubtitle}