Refactor ContinueWatchingSection and AndroidVideoPlayer for improved UI and performance, including layout adjustments and more frequent time updates for subtitle synchronization.

src/components/home/ContinueWatchingSection.tsx

@@ -556,9 +556,9 @@ const ContinueWatchingSection = React.forwardRef<ContinueWatchingRef>((props, re
                         {item.name}
                       </Text>
                       {isUpNext && (
-                        <View style={[styles.progressBadge, { backgroundColor: currentTheme.colors.primary }]}>
+                      <View style={[styles.progressBadge, { backgroundColor: currentTheme.colors.primary }]}>
                           <Text style={styles.progressText}>Up Next</Text>
-                        </View>
+                      </View>
                       )}
                     </View>
                   );

src/components/player/AndroidVideoPlayer.tsx

@@ -502,13 +502,13 @@ const AndroidVideoPlayer: React.FC = () => {
     
     const currentTimeInSeconds = data.currentTime;
     
-    // Only update if there's a significant change to avoid unnecessary updates
-    if (Math.abs(currentTimeInSeconds - currentTime) > 0.5) {
+    // Update time more frequently for subtitle synchronization (0.1s threshold)
+    if (Math.abs(currentTimeInSeconds - currentTime) > 0.1) {
       safeSetState(() => setCurrentTime(currentTimeInSeconds));
       const progressPercent = duration > 0 ? currentTimeInSeconds / duration : 0;
       Animated.timing(progressAnim, {
         toValue: progressPercent,
-        duration: 250,
+        duration: 100,
         useNativeDriver: false,
       }).start();
       const bufferedTime = data.playableDuration || currentTimeInSeconds;
@@ -1150,7 +1150,7 @@ const AndroidVideoPlayer: React.FC = () => {
                   playWhenInactive={false}
                   ignoreSilentSwitch="ignore"
                   mixWithOthers="inherit"
-                  progressUpdateInterval={1000}
+                  progressUpdateInterval={250}
                 />
               </TouchableOpacity>
             </View>

src/components/player/subtitles/CustomSubtitles.tsx

@@ -20,16 +20,17 @@ export const CustomSubtitles: React.FC<CustomSubtitlesProps> = ({
   const inverseScale = 1 / zoomScale;
   return (
     <View
-      style={[
-        styles.customSubtitleContainer,
-        {
-          transform: [{ scale: inverseScale }],
-        },
-      ]}
+      style={styles.customSubtitleContainer}
       pointerEvents="none"
     >
       <View style={styles.customSubtitleWrapper}>
-        <Text style={[styles.customSubtitleText, { fontSize: subtitleSize }]}>
+        <Text style={[
+          styles.customSubtitleText, 
+          { 
+            fontSize: subtitleSize * inverseScale,
+            transform: [{ scale: inverseScale }],
+          }
+        ]}>
           {currentSubtitle}
         </Text>
       </View>