release: 1.3.5 (33)

fix: issue #301

.env.example

@@ -17,3 +17,8 @@ EXPO_PUBLIC_MOVIEBOX_TMDB_API_KEY=your_tmdb_api_key_for_moviebox
 EXPO_PUBLIC_TRAKT_CLIENT_ID=your_trakt_client_id
 EXPO_PUBLIC_TRAKT_CLIENT_SECRET=your_trakt_client_secret
 EXPO_PUBLIC_TRAKT_REDIRECT_URI=stremioexpo://auth/trakt
+
+# Skip Intro API (IntroDB)
+# Fetches intro timestamps for TV shows to enable skip intro functionality
+EXPO_PUBLIC_INTRODB_API_URL=https://api.introdb.app
+EXPO_PUBLIC_DISCORD_USER_API=

.gitignore

@@ -2,6 +2,9 @@
 
 # dependencies
 node_modules/
+# Un-ignore specific react-native-video source files we patch
+!node_modules/react-native-video/android/src/main/java/com/brentvatne/common/api/SubtitleStyle.kt
+!node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.kt
 !node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
 
 # Expo
@@ -51,6 +54,7 @@ android/build/
 android/.gradle/
 android/app/libs/*.aar
 !android/app/libs/lib-decoder-ffmpeg-release.aar
+!android/app/libs/libmpv-release.aar
 HEATING_OPTIMIZATIONS.md
 # sliderreadme.md
 .cursor/mcp.json
@@ -88,4 +92,9 @@ ios/sentry.properties
 android/sentry.properties
 Stremio addons refer
 trakt-docs
-trakt-docss
+trakt-docss
+
+# Removed submodules (kept locally)
+libmpv-android/
+mpv-android/
+mpvKt/

App.tsx

@@ -13,6 +13,7 @@ import {
   Platform,
   LogBox
 } from 'react-native';
+import './src/i18n'; // Initialize i18n
 import { NavigationContainer } from '@react-navigation/native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { StatusBar } from 'expo-status-bar';
@@ -22,6 +23,7 @@ import AppNavigator, {
   CustomNavigationDarkTheme,
   CustomDarkTheme
 } from './src/navigation/AppNavigator';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import 'react-native-reanimated';
 import { CatalogProvider } from './src/contexts/CatalogContext';
 import { GenreProvider } from './src/contexts/GenreContext';
@@ -41,7 +43,6 @@ import { aiService } from './src/services/aiService';
 import { AccountProvider, useAccount } from './src/contexts/AccountContext';
 import { ToastProvider } from './src/contexts/ToastContext';
 import { mmkvStorage } from './src/services/mmkvStorage';
-import AnnouncementOverlay from './src/components/AnnouncementOverlay';
 import { CampaignManager } from './src/components/promotions/CampaignManager';
 
 Sentry.init({
@@ -89,7 +90,6 @@ const ThemedApp = () => {
   const { currentTheme } = useTheme();
   const [isAppReady, setIsAppReady] = useState(false);
   const [hasCompletedOnboarding, setHasCompletedOnboarding] = useState<boolean | null>(null);
-  const [showAnnouncement, setShowAnnouncement] = useState(false);
 
   // Update popup functionality
   const {
@@ -104,16 +104,6 @@ const ThemedApp = () => {
   // GitHub major/minor release overlay
   const githubUpdate = useGithubMajorUpdate();
 
-  // Announcement data
-  const announcements = [
-    {
-      icon: 'zap',
-      title: 'Debrid Integration',
-      description: 'Unlock 4K high-quality streams with lightning-fast speeds. Connect your TorBox account to access cached premium content with zero buffering.',
-      tag: 'NEW',
-    },
-  ];
-
   // Check onboarding status and initialize services
   useEffect(() => {
     const initializeApp = async () => {
@@ -133,15 +123,6 @@ const ThemedApp = () => {
         await aiService.initialize();
         console.log('AI service initialized');
 
-        // Check if announcement should be shown (version 1.0.0)
-        const announcementShown = await mmkvStorage.getItem('announcement_v1.0.0_shown');
-        if (!announcementShown && onboardingCompleted === 'true') {
-          // Show announcement only after app is ready
-          setTimeout(() => {
-            setShowAnnouncement(true);
-          }, 1000);
-        }
-
       } catch (error) {
         console.error('Error initializing app:', error);
         // Default to showing onboarding if we can't check
@@ -179,20 +160,6 @@ const ThemedApp = () => {
   // Navigation reference
   const navigationRef = React.useRef<any>(null);
 
-  // Handler for navigating to debrid integration
-  const handleNavigateToDebrid = () => {
-    if (navigationRef.current) {
-      navigationRef.current.navigate('DebridIntegration');
-    }
-  };
-
-  // Handler for announcement close
-  const handleAnnouncementClose = async () => {
-    setShowAnnouncement(false);
-    // Mark announcement as shown
-    await mmkvStorage.setItem('announcement_v1.0.0_shown', 'true');
-  };
-
   // Don't render anything until we know the onboarding status
   const shouldShowApp = isAppReady && hasCompletedOnboarding !== null;
   const initialRouteName = hasCompletedOnboarding ? 'MainTabs' : 'Onboarding';
@@ -203,7 +170,16 @@ const ThemedApp = () => {
         <NavigationContainer
           ref={navigationRef}
           theme={customNavigationTheme}
-          linking={undefined}
+          linking={{
+            prefixes: ['nuvio://'],
+            config: {
+              screens: {
+                ScraperSettings: {
+                  path: 'repo',
+                },
+              },
+            },
+          }}
         >
           <DownloadsProvider>
             <View style={[styles.container, { backgroundColor: currentTheme.colors.darkBackground }]}>
@@ -226,13 +202,6 @@ const ThemedApp = () => {
                 onDismiss={githubUpdate.onDismiss}
                 onLater={githubUpdate.onLater}
               />
-              <AnnouncementOverlay
-                visible={showAnnouncement}
-                announcements={announcements}
-                onClose={handleAnnouncementClose}
-                onActionPress={handleNavigateToDebrid}
-                actionButtonText="Connect Now"
-              />
               <CampaignManager />
             </View>
           </DownloadsProvider>
@@ -245,19 +214,21 @@ const ThemedApp = () => {
 function App(): React.JSX.Element {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <GenreProvider>
-        <CatalogProvider>
-          <TraktProvider>
-            <ThemeProvider>
-              <TrailerProvider>
-                <ToastProvider>
-                  <ThemedApp />
-                </ToastProvider>
-              </TrailerProvider>
-            </ThemeProvider>
-          </TraktProvider>
-        </CatalogProvider>
-      </GenreProvider>
+      <BottomSheetModalProvider>
+        <GenreProvider>
+          <CatalogProvider>
+            <TraktProvider>
+              <ThemeProvider>
+                <TrailerProvider>
+                  <ToastProvider>
+                    <ThemedApp />
+                  </ToastProvider>
+                </TrailerProvider>
+              </ThemeProvider>
+            </TraktProvider>
+          </CatalogProvider>
+        </GenreProvider>
+      </BottomSheetModalProvider>
     </GestureHandlerRootView>
   );
 }

README.md

@@ -1,16 +1,15 @@
-<!-- Improved compatibility of back to top link -->
-<a id="readme-top"></a>
-
-<!-- PROJECT SHIELDS -->
-[![Contributors][contributors-shield]][contributors-url]
-[![Forks][forks-shield]][forks-url]
-[![Stargazers][stars-shield]][stars-url]
-[![Issues][issues-shield]][issues-url]
-[![License][license-shield]][license-url]
-
 <!-- PROJECT LOGO -->
-<br />
 <div align="center">
+  <a id="readme-top"></a>
+
+  [![Contributors][contributors-shield]][contributors-url]
+  [![Forks][forks-shield]][forks-url]
+  [![Stargazers][stars-shield]][stars-url]
+  [![Issues][issues-shield]][issues-url]
+  [![License][license-shield]][license-url]
+
+  <br />
+  <br />
   <img src="assets/titlelogo.png" alt="Nuvio Logo" width="120" />
   <h1 align="center">🎬 Nuvio Media Hub</h1>
   <p align="center">
@@ -22,11 +21,10 @@
     <a href="#getting-started"><strong>Get Started »</strong></a>
     <br />
     <br />
-    <a href="#demo">View Screenshots</a>
-    ·
-    <a href="https://github.com/tapframe/NuvioStreaming/issues/new?labels=bug&template=bug_report.md">Report Bug</a>
-    ·
-    <a href="https://github.com/tapframe/NuvioStreaming/issues/new?labels=enhancement&template=feature_request.md">Request Feature</a>
+
+<a href="https://github.com/tapframe/NuvioStreaming/issues/new?labels=bug&template=bug_report.md">Report Bug</a>
+·
+<a href="https://github.com/tapframe/NuvioStreaming/issues/new?labels=enhancement&template=feature_request.md">Request Feature</a>
   </p>
 </div>
 
@@ -38,11 +36,13 @@
       <a href="#about-the-project">About The Project</a>
     </li>
     <li><a href="#installation">Installation</a></li>
-    <li><a href="#demo">Screenshots</a></li>
+
     <li><a href="#getting-started">Getting Started</a></li>
     <li><a href="#contributing">Contributing</a></li>
     <li><a href="#support">Support</a></li>
+    <li><a href="#support">Support</a></li>
     <li><a href="#license">License</a></li>
+    <li><a href="#legal">Legal</a></li>
     <li><a href="#contact">Contact</a></li>
     <li><a href="#acknowledgments">Acknowledgments</a></li>
     <li><a href="#built-with">Built With</a></li>
@@ -79,20 +79,12 @@ Download the latest APK from [GitHub Releases](https://github.com/tapframe/Nuvio
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-<!-- DEMO / SCREENSHOTS -->
-## Demo
-<a id="demo"></a>
 
-| Home | Details |
-|:----:|:-------:|
-| ![Home](screenshots/Simulator%20Screenshot%20-%20iPhone%2016%20Pro%20-%202025-08-27%20at%2021.08.32-portrait.png) | ![Details](screenshots/WhatsApp%20Image%202025-09-02%20at%2000.24.31-portrait.png) |
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- GETTING STARTED -->
 ## Getting Started
 
-Follow the steps below to run the app locally for development.
+Follow the steps below to run the app locally for development. For detailed setup and troubleshooting, see [Project Documentation](docs/DOCUMENTATION.md).
 
 ### Development Build
 
@@ -148,6 +140,14 @@ Distributed under the GNU GPLv3 License. See `LICENSE` for more information.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
+## Legal
+
+For comprehensive legal information, including our full disclaimer, third-party extension policy, and DMCA/Copyright information, please visit our **[Legal & Disclaimer Page](https://tapframe.github.io/NuvioStreaming/#legal)**.
+
+**Disclaimer:** Nuvio functions solely as a client-side interface for browsing metadata and playing media files provided by user-installed extensions. It does not host, store, or distribute any media content.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
 ## Contact
 
 **Project Links:**

android/app/build.gradle

@@ -95,8 +95,8 @@ android {
         applicationId 'com.nuvio.app'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 28
-        versionName "1.3.0"
+        versionCode 33
+        versionName "1.3.5"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
     }
@@ -118,7 +118,7 @@ android {
     def abiVersionCodes = ['armeabi-v7a': 1, 'arm64-v8a': 2, 'x86': 3, 'x86_64': 4]
     applicationVariants.all { variant ->
         variant.outputs.each { output ->
-            def baseVersionCode = 28 // Current versionCode 28 from defaultConfig
+            def baseVersionCode = 33 // Current versionCode 33 from defaultConfig
             def abiName = output.getFilter(com.android.build.OutputFile.ABI)
 
             def versionCode = baseVersionCode * 100 // Base multiplier

android/app/src/main/AndroidManifest.xml

@@ -1,5 +1,4 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:tools="http://schemas.android.com/tools">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
   <uses-sdk tools:overrideLibrary="dev.jdtech.mpv"/>
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
@@ -22,7 +21,7 @@
     <meta-data android:name="expo.modules.updates.EXPO_RUNTIME_VERSION" android:value="@string/expo_runtime_version"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ERROR_RECOVERY_ONLY"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="30000"/>
-    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://grim-reyna-tapframe-69970143.koyeb.app/api/manifest"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://ota.nuvioapp.space/api/manifest"/>
     <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode|locale|layoutDirection" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="unspecified">
       <intent-filter>
         <action android:name="android.intent.action.MAIN"/>

android/app/src/main/java/com/nuvio/app/mpv/MPVView.kt

@@ -8,6 +8,9 @@ import android.view.Surface
 import android.view.TextureView
 import dev.jdtech.mpv.MPVLib
 
+import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.ReactContext
+
 class MPVView @JvmOverloads constructor(
     context: Context,
     attrs: AttributeSet? = null,
@@ -24,8 +27,11 @@ class MPVView @JvmOverloads constructor(
     private var surface: Surface? = null
     private var httpHeaders: Map<String, String>? = null
     
-    // Hardware decoding setting (default: false = software decoding)
-    var useHardwareDecoding: Boolean = false
+    // Decoder mode setting: 'auto', 'sw', 'hw', 'hw+' (default: auto)
+    var decoderMode: String = "auto"
+    
+    // GPU mode setting: 'gpu', 'gpu-next' (default: gpu)
+    var gpuMode: String = "gpu"
     
     // Flag to track if onLoad has been fired (prevents multiple fires for HLS streams)
     private var hasLoadEventFired: Boolean = false
@@ -37,9 +43,27 @@ class MPVView @JvmOverloads constructor(
     var onErrorCallback: ((message: String) -> Unit)? = null
     var onTracksChangedCallback: ((audioTracks: List<Map<String, Any>>, subtitleTracks: List<Map<String, Any>>) -> Unit)? = null
 
+    private var resumeOnForeground = false
+    private val lifeCycleListener = object : LifecycleEventListener {
+        override fun onHostPause() {
+                resumeOnForeground = !isPaused;
+                if(resumeOnForeground) {
+                Log.d(TAG, "App backgrounded — pausing MPV")
+                setPaused(true)
+                }
+            }
+            override fun onHostResume() {
+                if(resumeOnForeground) {
+                    setPaused(false)
+                    resumeOnForeground = false
+                }
+            }
+            override fun onHostDestroy() {}
+    }
     init {
         surfaceTextureListener = this
         isOpaque = false
+        (context as? ReactContext)?.addLifecycleEventListener(lifeCycleListener)
     }
 
     override fun onSurfaceTextureAvailable(surfaceTexture: SurfaceTexture, width: Int, height: Int) {
@@ -77,6 +101,7 @@ class MPVView @JvmOverloads constructor(
 
     override fun onSurfaceTextureDestroyed(surfaceTexture: SurfaceTexture): Boolean {
         Log.d(TAG, "Surface texture destroyed")
+        (context as? ReactContext)?.removeLifecycleEventListener(lifeCycleListener)
         if (isMpvInitialized) {
             MPVLib.removeObserver(this)
             MPVLib.detachSurface()
@@ -94,22 +119,47 @@ class MPVView @JvmOverloads constructor(
 
     private fun initOptions() {
         MPVLib.setOptionString("profile", "fast")
-        MPVLib.setOptionString("vo", "gpu")
+        
+        // GPU rendering mode (gpu or gpu-next)
+        MPVLib.setOptionString("vo", gpuMode)
         MPVLib.setOptionString("gpu-context", "android")
         MPVLib.setOptionString("opengl-es", "yes")
         
-        val hwdecValue = if (useHardwareDecoding) "mediacodec,mediacodec-copy" else "no"
-        Log.d(TAG, "Hardware decoding: $useHardwareDecoding, hwdec value: $hwdecValue")
+        // Decoder mode mapping (same as mpvKt)
+        val hwdecValue = when (decoderMode) {
+            "auto" -> "auto-copy"      // Best balance: HW decode, copy to CPU for filters
+            "sw" -> "no"               // Software decoding only
+            "hw" -> "mediacodec-copy"  // HW decode with copy (safer)
+            "hw+" -> "mediacodec"      // Full HW decode (fastest, may have issues)
+            else -> "auto-copy"
+        }
+        Log.d(TAG, "Decoder mode: $decoderMode, hwdec value: $hwdecValue, GPU mode: $gpuMode")
         MPVLib.setOptionString("hwdec", hwdecValue)
-        MPVLib.setOptionString("hwdec-codecs", "h264,hevc,mpeg4,mpeg2video,vp8,vp9,av1")
+        // Note: Not setting hwdec-codecs explicitly - let mpv use defaults
         
         MPVLib.setOptionString("target-colorspace-hint", "yes")
+        
+        // HDR and Dolby Vision support
+        // target-prim: Signal target display primaries (auto = passthrough when display supports)
+        MPVLib.setOptionString("target-prim", "auto")
+        // target-trc: Signal target transfer characteristics (auto = passthrough when display supports)  
+        MPVLib.setOptionString("target-trc", "auto")
+        // tone-mapping: How to handle HDR/DV content on SDR displays (auto = best automatic choice)
+        MPVLib.setOptionString("tone-mapping", "auto")
+        // hdr-compute-peak: Compute peak brightness for better tone mapping
+        MPVLib.setOptionString("hdr-compute-peak", "auto")
+        // Allow DV Profile 5 (HEVC with RPU) to be decoded by hardware decoder
+        MPVLib.setOptionString("vd-lavc-o", "strict=-2")
+        
+        // Workaround for https://github.com/mpv-player/mpv/issues/14651
         MPVLib.setOptionString("vd-lavc-film-grain", "cpu")
         
         MPVLib.setOptionString("ao", "audiotrack,opensles")
         
-        MPVLib.setOptionString("demuxer-max-bytes", "67108864")
-        MPVLib.setOptionString("demuxer-max-back-bytes", "33554432")
+        // Limit demuxer cache based on Android version (like mpvKt)
+        val cacheMegs = if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O_MR1) 64 else 32
+        MPVLib.setOptionString("demuxer-max-bytes", "${cacheMegs * 1024 * 1024}")
+        MPVLib.setOptionString("demuxer-max-back-bytes", "${cacheMegs * 1024 * 1024}")
         MPVLib.setOptionString("cache", "yes")
         MPVLib.setOptionString("cache-secs", "30")
         
@@ -126,13 +176,10 @@ class MPVView @JvmOverloads constructor(
         MPVLib.setOptionString("demuxer-seekable-cache", "yes")
         MPVLib.setOptionString("force-seekable", "yes")
         
-        MPVLib.setOptionString("demuxer-lavf-probesize", "10000000")
-        MPVLib.setOptionString("demuxer-lavf-analyzeduration", "10")
-        
         MPVLib.setOptionString("sub-auto", "fuzzy")
         MPVLib.setOptionString("sub-visibility", "yes")
         MPVLib.setOptionString("sub-font-size", "48")
-        MPVLib.setOptionString("sub-pos", "95")
+        MPVLib.setOptionString("sub-pos", "100")
         MPVLib.setOptionString("sub-color", "#FFFFFFFF")
         MPVLib.setOptionString("sub-border-size", "3")
         MPVLib.setOptionString("sub-border-color", "#FF000000")
@@ -146,15 +193,15 @@ class MPVView @JvmOverloads constructor(
         
         MPVLib.setOptionString("sub-codepage", "auto")
         
-        MPVLib.setOptionString("osc", "no")
-        MPVLib.setOptionString("osd-level", "1")
-    
         MPVLib.setOptionString("blend-subtitles", "no")
-        MPVLib.setOptionString("sub-use-margins", "no")
-        MPVLib.setOptionString("sub-ass-override", "scale")
+        MPVLib.setOptionString("sub-use-margins", "yes")
+        MPVLib.setOptionString("sub-ass-override", "force")
         MPVLib.setOptionString("sub-scale", "1.0")
         MPVLib.setOptionString("sub-fix-timing", "yes")
         
+        MPVLib.setOptionString("osc", "no")
+        MPVLib.setOptionString("osd-level", "1")
+        
         MPVLib.setOptionString("sid", "auto")
         
         MPVLib.setOptionString("terminal", "no")
@@ -317,6 +364,119 @@ class MPVView @JvmOverloads constructor(
         }
     }
 
+    // Subtitle Styling Methods
+    
+    fun setSubtitleSize(size: Int) {
+        if (isMpvInitialized) {
+            Log.d(TAG, "Setting subtitle size: $size")
+            MPVLib.setPropertyInt("sub-font-size", size)
+        }
+    }
+
+    fun setSubtitleColor(color: String) {
+        if (isMpvInitialized) {
+            // MPV expects color in #AARRGGBB format, but we receive #RRGGBB
+            // Convert to MPV format with full opacity
+            val mpvColor = if (color.length == 7) "#FF${color.substring(1)}" else color
+            Log.d(TAG, "Setting subtitle color: $mpvColor")
+            MPVLib.setPropertyString("sub-color", mpvColor)
+        }
+    }
+
+    fun setSubtitleBackgroundColor(color: String, opacity: Float) {
+        if (isMpvInitialized) {
+            // Convert opacity (0-1) to hex (00-FF)
+            val alphaHex = (opacity * 255).toInt().coerceIn(0, 255).let { 
+                String.format("%02X", it) 
+            }
+            // MPV format: #AARRGGBB
+            val baseColor = if (color.startsWith("#")) color.substring(1) else color
+            val mpvColor = "#${alphaHex}${baseColor.takeLast(6)}"
+            Log.d(TAG, "Setting subtitle background: $mpvColor (opacity: $opacity)")
+            MPVLib.setPropertyString("sub-back-color", mpvColor)
+        }
+    }
+
+    fun setSubtitleBorderSize(size: Int) {
+        if (isMpvInitialized) {
+            Log.d(TAG, "Setting subtitle border size: $size")
+            MPVLib.setPropertyInt("sub-border-size", size)
+        }
+    }
+
+    fun setSubtitleBorderColor(color: String) {
+        if (isMpvInitialized) {
+            val mpvColor = if (color.length == 7) "#FF${color.substring(1)}" else color
+            Log.d(TAG, "Setting subtitle border color: $mpvColor")
+            MPVLib.setPropertyString("sub-border-color", mpvColor)
+        }
+    }
+
+    fun setSubtitleShadow(enabled: Boolean, offset: Int) {
+        if (isMpvInitialized) {
+            Log.d(TAG, "Setting subtitle shadow: enabled=$enabled, offset=$offset")
+            if (enabled) {
+                MPVLib.setPropertyInt("sub-shadow-offset", offset)
+                MPVLib.setPropertyString("sub-shadow-color", "#80000000")
+            } else {
+                MPVLib.setPropertyInt("sub-shadow-offset", 0)
+            }
+        }
+    }
+
+    fun setSubtitlePosition(pos: Int) {
+        if (isMpvInitialized) {
+            // sub-pos: 0=top, 100=bottom, can go beyond 100 for more offset
+            // UI sends bottomOffset (0=at bottom, higher=more up from bottom)
+            // Convert: MPV pos = 100 - (bottomOffset / screenHeightFactor)
+            // Simplified: just pass pos directly, UI should convert
+            Log.d(TAG, "Setting subtitle position: $pos")
+            MPVLib.setPropertyInt("sub-pos", pos)
+        }
+    }
+
+    fun setSubtitleDelay(delaySec: Double) {
+        if (isMpvInitialized) {
+            Log.d(TAG, "Setting subtitle delay: $delaySec seconds")
+            MPVLib.setPropertyDouble("sub-delay", delaySec)
+        }
+    }
+
+    fun setSubtitleScale(scale: Double) {
+        if (isMpvInitialized) {
+            Log.d(TAG, "Setting subtitle scale: $scale")
+            MPVLib.setPropertyDouble("sub-scale", scale)
+        }
+    }
+
+    fun setSubtitleAlignment(align: String) {
+        if (isMpvInitialized) {
+            // MPV sub-justify values: left, center, right, auto
+            val mpvAlign = when (align) {
+                "left" -> "left"
+                "right" -> "right"
+                "center" -> "center"
+                else -> "center"
+            }
+            Log.d(TAG, "Setting subtitle alignment: $mpvAlign")
+            MPVLib.setPropertyString("sub-justify", mpvAlign)
+        }
+    }
+
+    fun setSubtitleBold(bold: Boolean) {
+        if (isMpvInitialized) {
+            Log.d(TAG, "Setting subtitle bold: $bold")
+            MPVLib.setPropertyString("sub-bold", if (bold) "yes" else "no")
+        }
+    }
+
+    fun setSubtitleItalic(italic: Boolean) {
+        if (isMpvInitialized) {
+            Log.d(TAG, "Setting subtitle italic: $italic")
+            MPVLib.setPropertyString("sub-italic", if (italic) "yes" else "no")
+        }
+    }
+
     // MPVLib.EventObserver implementation
 
     override fun eventProperty(property: String) {

android/app/src/main/java/com/nuvio/app/mpv/MpvPlayerViewManager.kt

@@ -181,8 +181,61 @@ class MpvPlayerViewManager(
         }
     }
 
-    @ReactProp(name = "useHardwareDecoding")
-    fun setUseHardwareDecoding(view: MPVView, useHardwareDecoding: Boolean) {
-        view.useHardwareDecoding = useHardwareDecoding
+    @ReactProp(name = "decoderMode")
+    fun setDecoderMode(view: MPVView, decoderMode: String?) {
+        view.decoderMode = decoderMode ?: "auto"
+    }
+
+    @ReactProp(name = "gpuMode")
+    fun setGpuMode(view: MPVView, gpuMode: String?) {
+        view.gpuMode = gpuMode ?: "gpu"
+    }
+
+    // Subtitle Styling Props
+
+    @ReactProp(name = "subtitleSize", defaultInt = 48)
+    fun setSubtitleSize(view: MPVView, size: Int) {
+        view.setSubtitleSize(size)
+    }
+
+    @ReactProp(name = "subtitleColor")
+    fun setSubtitleColor(view: MPVView, color: String?) {
+        view.setSubtitleColor(color ?: "#FFFFFF")
+    }
+
+    @ReactProp(name = "subtitleBackgroundOpacity", defaultFloat = 0.0f)
+    fun setSubtitleBackgroundOpacity(view: MPVView, opacity: Float) {
+        // Black background with user-specified opacity
+        view.setSubtitleBackgroundColor("#000000", opacity)
+    }
+
+    @ReactProp(name = "subtitleBorderSize", defaultInt = 3)
+    fun setSubtitleBorderSize(view: MPVView, size: Int) {
+        view.setSubtitleBorderSize(size)
+    }
+
+    @ReactProp(name = "subtitleBorderColor")
+    fun setSubtitleBorderColor(view: MPVView, color: String?) {
+        view.setSubtitleBorderColor(color ?: "#000000")
+    }
+
+    @ReactProp(name = "subtitleShadowEnabled", defaultBoolean = true)
+    fun setSubtitleShadowEnabled(view: MPVView, enabled: Boolean) {
+        view.setSubtitleShadow(enabled, if (enabled) 2 else 0)
+    }
+
+    @ReactProp(name = "subtitlePosition", defaultInt = 100)
+    fun setSubtitlePosition(view: MPVView, pos: Int) {
+        view.setSubtitlePosition(pos)
+    }
+
+    @ReactProp(name = "subtitleDelay", defaultFloat = 0.0f)
+    fun setSubtitleDelay(view: MPVView, delay: Float) {
+        view.setSubtitleDelay(delay.toDouble())
+    }
+
+    @ReactProp(name = "subtitleAlignment")
+    fun setSubtitleAlignment(view: MPVView, align: String?) {
+        view.setSubtitleAlignment(align ?: "center")
     }
 }

android/app/src/main/res/values/strings.xml

@@ -3,5 +3,5 @@
   <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
   <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
   <string name="expo_system_ui_user_interface_style" translatable="false">dark</string>
-  <string name="expo_runtime_version">1.3.0</string>
+  <string name="expo_runtime_version">1.3.5</string>
 </resources>

android/build.gradle

@@ -7,6 +7,7 @@ buildscript {
     compileSdkVersion = 35
     targetSdkVersion = 35
     castFrameworkVersion = "22.1.0"
+    ndkVersion = "29.0.14206865" // Required for libmpv AAR built with NDK r29
   }
   repositories {
     google()

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Nuvio",
     "slug": "nuvio",
-    "version": "1.3.0",
+    "version": "1.3.5",
     "orientation": "default",
     "backgroundColor": "#020404",
     "icon": "./assets/ios/AppIcon.appiconset/Icon-App-60x60@3x.png",
@@ -16,9 +16,8 @@
     },
     "ios": {
       "supportsTablet": true,
-      "requireFullScreen": true,
       "icon": "./assets/ios/AppIcon.appiconset/Icon-App-60x60@3x.png",
-      "buildNumber": "28",
+      "buildNumber": "33",
       "infoPlist": {
         "NSAppTransportSecurity": {
           "NSAllowsArbitraryLoads": true
@@ -52,7 +51,7 @@
         "android.permission.WRITE_SETTINGS"
       ],
       "package": "com.nuvio.app",
-      "versionCode": 28,
+      "versionCode": 33,
       "architectures": [
         "arm64-v8a",
         "armeabi-v7a",
@@ -90,15 +89,14 @@
           "receiverAppId": "CC1AD845",
           "iosStartDiscoveryAfterFirstTapOnCastButton": true
         }
-      ],
-      "./plugins/mpv-bridge/withMpvBridge"
+      ]
     ],
     "updates": {
       "enabled": true,
       "checkAutomatically": "ON_ERROR_RECOVERY",
       "fallbackToCacheTimeout": 30000,
-      "url": "https://grim-reyna-tapframe-69970143.koyeb.app/api/manifest"
+      "url": "https://ota.nuvioapp.space/api/manifest"
     },
-    "runtimeVersion": "1.3.0"
+    "runtimeVersion": "1.3.5"
   }
 }

components/AndroidVideoPlayer.tsx

@@ -1,8 +1,41 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import { Platform, Animated, TouchableWithoutFeedback, View } from 'react-native';
 import Video, { VideoRef, SelectedTrack, BufferingStrategyType, ResizeMode } from 'react-native-video';
 import RNImmersiveMode from 'react-native-immersive-mode';
 
+// Subtitle style configuration interface - matches ExoPlayer's SubtitleStyle
+export interface SubtitleStyleConfig {
+  // Font size in SP (scale-independent pixels) for subtitle text
+  // Default: -1 (uses system default)
+  fontSize?: number;
+  
+  // Padding values in pixels
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  
+  // Opacity of subtitles (0.0 to 1.0)
+  // 0 = hidden, 1 = fully visible
+  opacity?: number;
+  
+  // Whether subtitles should follow video position when video is resized
+  // true = subtitles stay within video bounds
+  // false = subtitles can extend beyond video bounds
+  subtitlesFollowVideo?: boolean;
+}
+
+// Default subtitle style configuration
+export const DEFAULT_SUBTITLE_STYLE: SubtitleStyleConfig = {
+  fontSize: 18,
+  paddingTop: 0,
+  paddingBottom: 60,
+  paddingLeft: 16,
+  paddingRight: 16,
+  opacity: 1,
+  subtitlesFollowVideo: true,
+};
+
 interface VideoPlayerProps {
   src: string;
   headers?: { [key: string]: string };
@@ -12,6 +45,8 @@ interface VideoPlayerProps {
   selectedAudioTrack?: SelectedTrack;
   selectedTextTrack?: SelectedTrack;
   resizeMode?: ResizeMode;
+  // Subtitle customization - pass custom subtitle styling
+  subtitleStyle?: SubtitleStyleConfig;
   onProgress?: (data: { currentTime: number; playableDuration: number }) => void;
   onLoad?: (data: { duration: number }) => void;
   onError?: (error: any) => void;
@@ -29,6 +64,7 @@ export const AndroidVideoPlayer: React.FC<VideoPlayerProps> = ({
   selectedAudioTrack,
   selectedTextTrack,
   resizeMode = 'contain' as ResizeMode,
+  subtitleStyle: customSubtitleStyle,
   onProgress,
   onLoad,
   onError,
@@ -41,6 +77,12 @@ export const AndroidVideoPlayer: React.FC<VideoPlayerProps> = ({
   const [isSeeking, setIsSeeking] = useState(false);
   const [lastSeekTime, setLastSeekTime] = useState<number>(0);
 
+  // Merge custom subtitle style with defaults
+  const subtitleStyle = useMemo(() => ({
+    ...DEFAULT_SUBTITLE_STYLE,
+    ...customSubtitleStyle,
+  }), [customSubtitleStyle]);
+
   // Enable immersive mode when video player mounts, disable when it unmounts
   useEffect(() => {
     if (Platform.OS === 'android') {
@@ -132,13 +174,21 @@ export const AndroidVideoPlayer: React.FC<VideoPlayerProps> = ({
       rate={1.0}
       repeat={false}
       reportBandwidth={true}
-      textTracks={[]}
-      useTextureView={false}
+      useTextureView={true}
       disableFocus={false}
       minLoadRetryCount={3}
       automaticallyWaitsToMinimizeStalling={true}
       hideShutterView={false}
       shutterColor="#000000"
+      subtitleStyle={{
+        fontSize: subtitleStyle.fontSize,
+        paddingTop: subtitleStyle.paddingTop,
+        paddingBottom: subtitleStyle.paddingBottom,
+        paddingLeft: subtitleStyle.paddingLeft,
+        paddingRight: subtitleStyle.paddingRight,
+        opacity: subtitleStyle.opacity,
+        subtitlesFollowVideo: subtitleStyle.subtitlesFollowVideo,
+      }}
     />
   );
 };

docs/DOCUMENTATION.md

@@ -0,0 +1,244 @@
+# Nuvio Streaming Project Documentation
+
+This document provides a comprehensive, step-by-step guide on how to build, run, and develop the Nuvio Streaming application for both Android and iOS platforms. It covers prerequisites, initial setup, prebuilding, and native execution.
+
+## Table of Contents
+
+1. [Prerequisites](#prerequisites)
+2. [Project Setup](#project-setup)
+3. [Understanding Prebuild](#understanding-prebuild)
+4. [Running on Android](#running-on-android)
+5. [Running on iOS](#running-on-ios)
+6. [Troubleshooting](#troubleshooting)
+7. [Useful Commands](#useful-commands)
+
+---
+
+## Prerequisites
+
+Before you begin, ensure your development environment is correctly set up.
+
+### General Tools
+- **Node.js**: Install the Long Term Support (LTS) version (v18 or newer recommended). [Download Node.js](https://nodejs.org/)
+- **Git**: For version control. [Download Git](https://git-scm.com/)
+- **Watchman** (macOS users): Highly recommended for better file watching performance.
+  ```bash
+  brew install watchman
+  ```
+
+### Environment Configuration
+
+**All environment variables are optional for development.**
+The app is designed to run "out of the box" without a `.env` file. Features requiring API keys (like Trakt syncing) will simply be disabled or use default fallbacks.
+
+3.  **Setup (Optional)**:
+    If you wish to enable specific features, create a `.env` file:
+    ```bash
+    cp .env.example .env
+    ```
+
+    **Recommended Variables:**
+    *   `EXPO_PUBLIC_TRAKT_CLIENT_ID` (etc): Enables Trakt integration.
+
+### For Android Development
+
+1. **Java Development Kit (JDK)**: Install JDK 11 or newer (JDK 17 is often recommended for modern React Native).
+   - [OpenJDK](https://openjdk.org/) or [Azul Zulu](https://www.azul.com/downloads/).
+   - Ensure your `JAVA_HOME` environment variable is set.
+2. **Android Studio**:
+   - Install [Android Studio](https://developer.android.com/studio).
+   - During installation, ensure the **Android SDK**, **Android SDK Platform-Tools**, and **Android Virtual Device** are selected.
+   - Set up your `ANDROID_HOME` (or `ANDROID_SDK_ROOT`) environment variable pointing to your SDK location.
+
+### For iOS Development (macOS only)
+
+1. **Xcode**: Install the latest version of Xcode from the Mac App Store.
+2. **Xcode Command Line Tools**:
+   ```bash
+   xcode-select --install
+   ```
+3. **CocoaPods**: Required for managing iOS dependencies.
+   ```bash
+   sudo gem install cocoapods
+   ```
+   *Note: On Apple Silicon (M1/M2/M3) Macs, you might need to use Homebrew to install Ruby or manage Cocoapods differently if you encounter issues.*
+
+---
+
+## Project Setup
+
+1. **Clone the Repository**
+   ```bash
+   git clone https://github.com/tapframe/NuvioStreaming.git
+   cd NuvioStreaming
+   ```
+
+2. **Install Dependencies**
+   Install the project dependencies using `npm`.
+   ```bash
+   npm install
+   ```
+   *Note: If you encounter peer dependency conflicts, you can try `npm install --legacy-peer-deps`, but typically `npm install` should work if the `package.json` is well-maintained.*
+
+---
+
+## Understanding Prebuild
+
+This project is built with **Expo**. Since it may use native modules that are not included in the standard Expo Go client (Custom Dev Client), we often need to "prebuild" the project to generate the native `android` and `ios` directories.
+
+**What `npx expo prebuild` does:**
+- It generates the native `android` and `ios` project directories based on your configuration in `app.json` / `app.config.js`.
+- It applies any Config Plugins specified.
+- It prepares the project to be built locally using Android Studio or Xcode tools (Gradle/Podfile).
+
+You typically run this command before compiling the native app if you have made changes to the native configuration (e.g., icons, splash screens, permissions in `app.json`).
+
+```bash
+npx expo prebuild
+```
+
+> [!WARNING]
+> **Important:** Running `npx expo prebuild --clean` will delete the `android` and `ios` directories.
+> If you have manually modified files in these directories (that are not covered by Expo config plugins), they will be lost.
+> **Recommendation:** Immediately after running prebuild, use `git status` to see what changed. If important files were deleted or reset, use `git checkout <path/to/file>` to revert them to your custom version.
+> Example:
+> ```bash
+> git checkout android/build.gradle
+> ```
+
+To prebuild for a specific platform:
+```bash
+npx expo prebuild --platform android
+npx expo prebuild --platform ios
+```
+
+---
+
+## Running on Android
+
+Follow these steps to build and run the app on an Android Emulator or connected physical device.
+
+**Step 1: Start an Emulator or Connect a Device**
+- **Emulator**: Open Android Studio, go to "Device Manager", and start a virtual device.
+- **Physical Device**: Connect it via USB, enable **Developer Options** and **USB Debugging**. Verify connection with `adb devices`.
+
+**Step 2: Generate Native Directories (Prebuild)**
+If you haven't done so (or if you cleaned the project):
+```bash
+npx expo prebuild --platform android
+```
+
+**Step 3: Compile and Run**
+Run the following command to build the Android app and launch it on your device/emulator:
+```bash
+npx expo run:android
+```
+*This command will start the Metro bundler in a new window/tab and begin the Gradle build process.*
+
+**Alternative: Open in Android Studio**
+If you prefer identifying build errors in the IDE:
+1. Run `npx expo prebuild --platform android`.
+2. Open Android Studio.
+3. Select "Open an existing Android Studio Project" and choose the `android` folder inside `NuvioStreaming`.
+4. Wait for Gradle sync to complete, then press the **Run** (green play) button.
+
+---
+
+## Running on iOS
+
+**Note:** iOS development requires a Mac with Xcode.
+
+**Step 1: Generate Native Directories (Prebuild)**
+```bash
+npx expo prebuild --platform ios
+```
+*This will generate the `ios` folder and automatically run `pod install` inside it.*
+
+**Step 2: Compile and Run**
+Run the following command to build the iOS app and launch it on the iOS Simulator:
+```bash
+npx expo run:ios
+```
+*To run on a specific simulator device:*
+```bash
+npx expo run:ios --device "iPhone 15 Pro"
+```
+
+**Step 3: Running on a Physical iOS Device**
+1. You need an Apple Developer Account (a free account works for local testing, but requires re-signing every 7 days).
+2. Open the project in Xcode:
+   ```bash
+   xcode-open ios/nuvio.xcworkspace
+   ```
+   *(Or simple open `ios/nuvio.xcworkspace` in Xcode manually)*.
+3. In Xcode, select your project target, go to the **Signing & Capabilities** tab.
+4. Select your **Team**.
+5. Connect your device via USB.
+6. Select your device from the build target dropdown (top bar).
+7. Press **Cmd + R** to build and run.
+
+---
+
+## Troubleshooting
+
+### "CocoaPods not found" or Pod install errors
+If `npx expo run:ios` fails during pod installation:
+```bash
+cd ios
+pod install
+cd ..
+```
+If you are on an Apple Silicon Mac and have issues:
+```bash
+cd ios
+arch -x86_64 pod install
+cd ..
+```
+
+### Build Failures after changing dependencies
+If you install a new library that includes native code, you must rebuild the native app.
+1. Stop the Metro server.
+2. Run the platform-specific run command again:
+   ```bash
+   npx expo run:android
+   # or
+   npx expo run:ios
+   ```
+
+### General Clean Up
+If things are acting weird (stale cache, weird build errors), try cleaning the project:
+
+**1. Clear Metro Cache:**
+```bash
+npx expo start -c
+```
+
+**2. Clean Native Directories (Drastic Measure):**
+WARNING: This deletes the `android` and `ios` folders. Only do this if you can regenerate them with `prebuild`.
+```bash
+rm -rf android ios
+npx expo prebuild
+```
+*Note: If you have manual changes in `android` or `ios` folders that usually shouldn't be there in a managed workflow, they will be lost. Ensure all native config is configured via Config Plugins in `app.json`.*
+
+### "SDK location not found" (Android)
+Create a `local.properties` file in the `android` directory with the path to your SDK:
+```properties
+# android/local.properties
+sdk.dir=/Users/YOUR_USERNAME/Library/Android/sdk
+```
+(Replace `YOUR_USERNAME` with your actual username).
+
+---
+
+## Useful Commands
+
+| Command | Description |
+|---------|-------------|
+| `npm start` or `npx expo start` | Starts the Metro Bundler (development server). |
+| `npx expo start --clear` | Starts the bundler with a clear cache. |
+| `npx expo prebuild` | Generates native `android` and `ios` code. |
+| `npx expo prebuild --clean` | Deletes existing native folders and regenerates them. |
+| `npx expo run:android` | Builds and opens the app on Android. |
+| `npx expo run:ios` | Builds and opens the app on iOS. |
+| `npx expo install <package>` | Installs a library compatible with your Expo SDK version. |

ios/KSPlayerManager.m

@@ -1,55 +0,0 @@
-//
-//  KSPlayerManager.m
-//  Nuvio
-//
-//  Created by KSPlayer integration
-//
-
-#import <React/RCTViewManager.h>
-#import <React/RCTBridgeModule.h>
-#import <React/RCTEventEmitter.h>
-
-@interface RCT_EXTERN_MODULE(KSPlayerViewManager, RCTViewManager)
-
-RCT_EXPORT_VIEW_PROPERTY(source, NSDictionary)
-RCT_EXPORT_VIEW_PROPERTY(paused, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(volume, NSNumber)
-RCT_EXPORT_VIEW_PROPERTY(rate, NSNumber)
-RCT_EXPORT_VIEW_PROPERTY(audioTrack, NSNumber)
-RCT_EXPORT_VIEW_PROPERTY(textTrack, NSNumber)
-RCT_EXPORT_VIEW_PROPERTY(allowsExternalPlayback, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(usesExternalPlaybackWhileExternalScreenIsActive, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(subtitleBottomOffset, NSNumber)
-RCT_EXPORT_VIEW_PROPERTY(subtitleFontSize, NSNumber)
-RCT_EXPORT_VIEW_PROPERTY(resizeMode, NSString)
-
-// Event properties
-RCT_EXPORT_VIEW_PROPERTY(onLoad, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onProgress, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onBuffering, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onEnd, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onError, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onBufferingProgress, RCTDirectEventBlock)
-
-RCT_EXTERN_METHOD(seek:(nonnull NSNumber *)node toTime:(nonnull NSNumber *)time)
-RCT_EXTERN_METHOD(setSource:(nonnull NSNumber *)node source:(nonnull NSDictionary *)source)
-RCT_EXTERN_METHOD(setPaused:(nonnull NSNumber *)node paused:(BOOL)paused)
-RCT_EXTERN_METHOD(setVolume:(nonnull NSNumber *)node volume:(nonnull NSNumber *)volume)
-RCT_EXTERN_METHOD(setPlaybackRate:(nonnull NSNumber *)node rate:(nonnull NSNumber *)rate)
-RCT_EXTERN_METHOD(setAudioTrack:(nonnull NSNumber *)node trackId:(nonnull NSNumber *)trackId)
-RCT_EXTERN_METHOD(setTextTrack:(nonnull NSNumber *)node trackId:(nonnull NSNumber *)trackId)
-RCT_EXTERN_METHOD(getTracks:(nonnull NSNumber *)node resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)
-RCT_EXTERN_METHOD(setAllowsExternalPlayback:(nonnull NSNumber *)node allows:(BOOL)allows)
-RCT_EXTERN_METHOD(setUsesExternalPlaybackWhileExternalScreenIsActive:(nonnull NSNumber *)node uses:(BOOL)uses)
-RCT_EXTERN_METHOD(getAirPlayState:(nonnull NSNumber *)node resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)
-RCT_EXTERN_METHOD(showAirPlayPicker:(nonnull NSNumber *)node)
-
-@end
-
-@interface RCT_EXTERN_MODULE(KSPlayerModule, RCTEventEmitter)
-
-RCT_EXTERN_METHOD(getTracks:(NSNumber *)nodeTag resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)
-RCT_EXTERN_METHOD(getAirPlayState:(NSNumber *)nodeTag resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)
-RCT_EXTERN_METHOD(showAirPlayPicker:(NSNumber *)nodeTag)
-
-@end

ios/KSPlayerModule.swift

@@ -1,71 +0,0 @@
-//
-//  KSPlayerModule.swift
-//  Nuvio
-//
-//  Created by KSPlayer integration
-//
-
-import Foundation
-import KSPlayer
-import React
-
-@objc(KSPlayerModule)
-class KSPlayerModule: RCTEventEmitter {
-    override static func requiresMainQueueSetup() -> Bool {
-        return true
-    }
-
-    override func supportedEvents() -> [String]! {
-        return [
-            "KSPlayer-onLoad",
-            "KSPlayer-onProgress",
-            "KSPlayer-onBuffering",
-            "KSPlayer-onEnd",
-            "KSPlayer-onError"
-        ]
-    }
-
-    @objc func getTracks(_ nodeTag: NSNumber?, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
-        guard let nodeTag = nodeTag else {
-            reject("INVALID_ARGUMENT", "nodeTag must not be nil", nil)
-            return
-        }
-        DispatchQueue.main.async {
-            if let viewManager = self.bridge.module(for: KSPlayerViewManager.self) as? KSPlayerViewManager {
-                viewManager.getTracks(nodeTag, resolve: resolve, reject: reject)
-            } else {
-                reject("NO_VIEW_MANAGER", "KSPlayerViewManager not found", nil)
-            }
-        }
-    }
-    
-    @objc func getAirPlayState(_ nodeTag: NSNumber?, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
-        guard let nodeTag = nodeTag else {
-            reject("INVALID_ARGUMENT", "nodeTag must not be nil", nil)
-            return
-        }
-        DispatchQueue.main.async {
-            if let viewManager = self.bridge.module(for: KSPlayerViewManager.self) as? KSPlayerViewManager {
-                viewManager.getAirPlayState(nodeTag, resolve: resolve, reject: reject)
-            } else {
-                reject("NO_VIEW_MANAGER", "KSPlayerViewManager not found", nil)
-            }
-        }
-    }
-    
-    @objc func showAirPlayPicker(_ nodeTag: NSNumber?) {
-        guard let nodeTag = nodeTag else {
-             print("[KSPlayerModule] showAirPlayPicker called with nil nodeTag")
-             return
-        }
-        print("[KSPlayerModule] showAirPlayPicker called for nodeTag: \(nodeTag)")
-        DispatchQueue.main.async {
-            if let viewManager = self.bridge.module(for: KSPlayerViewManager.self) as? KSPlayerViewManager {
-                print("[KSPlayerModule] Found KSPlayerViewManager, calling showAirPlayPicker")
-                viewManager.showAirPlayPicker(nodeTag)
-            } else {
-                print("[KSPlayerModule] Could not find KSPlayerViewManager")
-            }
-        }
-    }
-}

ios/KSPlayerViewManager.swift

@@ -1,147 +0,0 @@
-//
-//  KSPlayerViewManager.swift
-//  Nuvio
-//
-//  Created by KSPlayer integration
-//
-
-import Foundation
-import KSPlayer
-import React
-
-@objc(KSPlayerViewManager)
-class KSPlayerViewManager: RCTViewManager {
-    
-    // Not needed for RCTViewManager-based views; events are exported via Objective-C externs in KSPlayerManager.m
-    override func view() -> UIView! {
-        let view = KSPlayerView()
-        view.viewManager = self
-        return view
-    }
-
-    override static func requiresMainQueueSetup() -> Bool {
-        return true
-    }
-
-    override func constantsToExport() -> [AnyHashable : Any]! {
-        return [
-            "EventTypes": [
-                "onLoad": "onLoad",
-                "onProgress": "onProgress",
-                "onBuffering": "onBuffering",
-                "onEnd": "onEnd",
-                "onError": "onError",
-                "onBufferingProgress": "onBufferingProgress"
-            ]
-        ]
-    }
-
-    // No-op: events are sent via direct event blocks on the view
-
-    @objc func seek(_ node: NSNumber, toTime time: NSNumber) {
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                view.seek(to: TimeInterval(truncating: time))
-            }
-        }
-    }
-
-    @objc func setSource(_ node: NSNumber, source: NSDictionary) {
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                view.setSource(source)
-            }
-        }
-    }
-
-    @objc func setPaused(_ node: NSNumber, paused: Bool) {
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                view.setPaused(paused)
-            }
-        }
-    }
-
-    @objc func setVolume(_ node: NSNumber, volume: NSNumber) {
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                view.setVolume(Float(truncating: volume))
-            }
-        }
-    }
-
-    @objc func setPlaybackRate(_ node: NSNumber, rate: NSNumber) {
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                view.setPlaybackRate(Float(truncating: rate))
-            }
-        }
-    }
-
-    @objc func setAudioTrack(_ node: NSNumber, trackId: NSNumber) {
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                view.setAudioTrack(Int(truncating: trackId))
-            }
-        }
-    }
-
-    @objc func setTextTrack(_ node: NSNumber, trackId: NSNumber) {
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                view.setTextTrack(Int(truncating: trackId))
-            }
-        }
-    }
-    
-    @objc func getTracks(_ node: NSNumber, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                let tracks = view.getAvailableTracks()
-                resolve(tracks)
-            } else {
-                reject("NO_VIEW", "KSPlayerView not found", nil)
-            }
-        }
-    }
-    
-    // AirPlay methods
-    @objc func setAllowsExternalPlayback(_ node: NSNumber, allows: Bool) {
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                view.setAllowsExternalPlayback(allows)
-            }
-        }
-    }
-    
-    @objc func setUsesExternalPlaybackWhileExternalScreenIsActive(_ node: NSNumber, uses: Bool) {
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                view.setUsesExternalPlaybackWhileExternalScreenIsActive(uses)
-            }
-        }
-    }
-    
-    @objc func getAirPlayState(_ node: NSNumber, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                let airPlayState = view.getAirPlayState()
-                resolve(airPlayState)
-            } else {
-                reject("NO_VIEW", "KSPlayerView not found", nil)
-            }
-        }
-    }
-    
-    @objc func showAirPlayPicker(_ node: NSNumber) {
-        print("[KSPlayerViewManager] showAirPlayPicker called for node: \(node)")
-        DispatchQueue.main.async {
-            if let view = self.bridge.uiManager.view(forReactTag: node) as? KSPlayerView {
-                print("[KSPlayerViewManager] Found KSPlayerView, calling showAirPlayPicker")
-                view.showAirPlayPicker()
-            } else {
-                print("[KSPlayerViewManager] Could not find KSPlayerView for node: \(node)")
-            }
-        }
-    }
-}

ios/Nuvio.xcodeproj/project.pbxproj

@@ -11,12 +11,12 @@
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		2AA769395C1242F225F875AF /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6E007C0BAC8C453623E81663 /* ExpoModulesProvider.swift */; };
 		3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; };
-		564F8559E25775FFA08707DA /* libPods-Nuvio.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 18260C6F06D8D6DAF4C1D17E /* libPods-Nuvio.a */; };
 		9FBA88F42E86ECD700892850 /* KSPlayerViewManager.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9FBA88F32E86ECD700892850 /* KSPlayerViewManager.swift */; };
 		9FBA88F52E86ECD700892850 /* KSPlayerModule.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9FBA88F12E86ECD700892850 /* KSPlayerModule.swift */; };
 		9FBA88F62E86ECD700892850 /* KSPlayerManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 9FBA88F02E86ECD700892850 /* KSPlayerManager.m */; };
 		9FBA88F72E86ECD700892850 /* KSPlayerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9FBA88F22E86ECD700892850 /* KSPlayerView.swift */; };
 		BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; };
+		D66ACCC72CB69F1FF14A2585 /* libPods-Nuvio.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 436A6FCA2C83F29076E121BA /* libPods-Nuvio.a */; };
 		F11748422D0307B40044C1D9 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = F11748412D0307B40044C1D9 /* AppDelegate.swift */; };
 /* End PBXBuildFile section */
 
@@ -24,16 +24,16 @@
 		13B07F961A680F5B00A75B9A /* Nuvio.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Nuvio.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Nuvio/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Nuvio/Info.plist; sourceTree = "<group>"; };
-		18260C6F06D8D6DAF4C1D17E /* libPods-Nuvio.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Nuvio.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		2118C3C63E4B7D66EAC534DE /* Pods-Nuvio.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Nuvio.debug.xcconfig"; path = "Target Support Files/Pods-Nuvio/Pods-Nuvio.debug.xcconfig"; sourceTree = "<group>"; };
+		436A6FCA2C83F29076E121BA /* libPods-Nuvio.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Nuvio.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		49055D6E250FAFA21141FE49 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xml; name = PrivacyInfo.xcprivacy; path = Nuvio/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
+		5346BAA9EF8C9C8182D4485C /* Pods-Nuvio.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Nuvio.release.xcconfig"; path = "Target Support Files/Pods-Nuvio/Pods-Nuvio.release.xcconfig"; sourceTree = "<group>"; };
 		6E007C0BAC8C453623E81663 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-Nuvio/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
 		73BB213C2E9EEAC700EC03F8 /* NuvioRelease.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = NuvioRelease.entitlements; path = Nuvio/NuvioRelease.entitlements; sourceTree = "<group>"; };
-		7F2FA62198C389C99926AA47 /* Pods-Nuvio.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Nuvio.release.xcconfig"; path = "Target Support Files/Pods-Nuvio/Pods-Nuvio.release.xcconfig"; sourceTree = "<group>"; };
-		9FBA88F02E86ECD700892850 /* KSPlayerManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = KSPlayerManager.m; sourceTree = "<group>"; };
-		9FBA88F12E86ECD700892850 /* KSPlayerModule.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KSPlayerModule.swift; sourceTree = "<group>"; };
-		9FBA88F22E86ECD700892850 /* KSPlayerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KSPlayerView.swift; sourceTree = "<group>"; };
-		9FBA88F32E86ECD700892850 /* KSPlayerViewManager.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KSPlayerViewManager.swift; sourceTree = "<group>"; };
+		904B4A0A0308D3727268BA5E /* Pods-Nuvio.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Nuvio.debug.xcconfig"; path = "Target Support Files/Pods-Nuvio/Pods-Nuvio.debug.xcconfig"; sourceTree = "<group>"; };
+		9FBA88F02E86ECD700892850 /* KSPlayerManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ../KSPlayer/RNBridge/KSPlayerManager.m; sourceTree = "<group>"; };
+		9FBA88F12E86ECD700892850 /* KSPlayerModule.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ../KSPlayer/RNBridge/KSPlayerModule.swift; sourceTree = "<group>"; };
+		9FBA88F22E86ECD700892850 /* KSPlayerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ../KSPlayer/RNBridge/KSPlayerView.swift; sourceTree = "<group>"; };
+		9FBA88F32E86ECD700892850 /* KSPlayerViewManager.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ../KSPlayer/RNBridge/KSPlayerViewManager.swift; sourceTree = "<group>"; };
 		AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = Nuvio/SplashScreen.storyboard; sourceTree = "<group>"; };
 		BB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
@@ -46,7 +46,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				564F8559E25775FFA08707DA /* libPods-Nuvio.a in Frameworks */,
+				D66ACCC72CB69F1FF14A2585 /* libPods-Nuvio.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -76,7 +76,7 @@
 			isa = PBXGroup;
 			children = (
 				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
-				18260C6F06D8D6DAF4C1D17E /* libPods-Nuvio.a */,
+				436A6FCA2C83F29076E121BA /* libPods-Nuvio.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -131,8 +131,8 @@
 		D90A3959C97EE9926C513293 /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				2118C3C63E4B7D66EAC534DE /* Pods-Nuvio.debug.xcconfig */,
-				7F2FA62198C389C99926AA47 /* Pods-Nuvio.release.xcconfig */,
+				904B4A0A0308D3727268BA5E /* Pods-Nuvio.debug.xcconfig */,
+				5346BAA9EF8C9C8182D4485C /* Pods-Nuvio.release.xcconfig */,
 			);
 			path = Pods;
 			sourceTree = "<group>";
@@ -152,15 +152,15 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "Nuvio" */;
 			buildPhases = (
-				4A10611824FCBAA4C1793637 /* [CP] Check Pods Manifest.lock */,
+				3B2D9C1D63379C2F30AC0F2B /* [CP] Check Pods Manifest.lock */,
 				99A79B70155E84EE1FB7F466 /* [Expo] Configure project */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				9B977D89FE30470F8C59964C /* Upload Debug Symbols to Sentry */,
-				EE80421364369BBCA82253B9 /* [CP] Embed Pods Frameworks */,
-				778B42B39FEE5454E4D24252 /* [CP] Copy Pods Resources */,
+				9F740EE07B5F97C85979C145 /* [CP] Embed Pods Frameworks */,
+				550CD54859274FE505BA4957 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -234,7 +234,7 @@
 			shellPath = /bin/sh;
 			shellScript = "if [[ -f \"$PODS_ROOT/../.xcode.env\" ]]; then\n  source \"$PODS_ROOT/../.xcode.env\"\nfi\nif [[ -f \"$PODS_ROOT/../.xcode.env.local\" ]]; then\n  source \"$PODS_ROOT/../.xcode.env.local\"\nfi\n\n# The project root by default is one level up from the ios directory\nexport PROJECT_ROOT=\"$PROJECT_DIR\"/..\n\nif [[ \"$CONFIGURATION\" = *Debug* ]]; then\n  export SKIP_BUNDLING=1\nfi\nif [[ -z \"$ENTRY_FILE\" ]]; then\n  # Set the entry JS file using the bundler's entry resolution.\n  export ENTRY_FILE=\"$(\"$NODE_BINARY\" -e \"require('expo/scripts/resolveAppEntry')\" \"$PROJECT_ROOT\" ios absolute | tail -n 1)\"\nfi\n\nif [[ -z \"$CLI_PATH\" ]]; then\n  # Use Expo CLI\n  export CLI_PATH=\"$(\"$NODE_BINARY\" --print \"require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })\")\"\nfi\nif [[ -z \"$BUNDLE_COMMAND\" ]]; then\n  # Default Expo CLI command for bundling\n  export BUNDLE_COMMAND=\"export:embed\"\nfi\n\n# Source .xcode.env.updates if it exists to allow\n# SKIP_BUNDLING to be unset if needed\nif [[ -f \"$PODS_ROOT/../.xcode.env.updates\" ]]; then\n  source \"$PODS_ROOT/../.xcode.env.updates\"\nfi\n# Source local changes to allow overrides\n# if needed\nif [[ -f \"$PODS_ROOT/../.xcode.env.local\" ]]; then\n  source \"$PODS_ROOT/../.xcode.env.local\"\nfi\n\n/bin/sh `\"$NODE_BINARY\" --print \"require('path').dirname(require.resolve('@sentry/react-native/package.json')) + '/scripts/sentry-xcode.sh'\"` `\"$NODE_BINARY\" --print \"require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'\"`\n\n";
 		};
-		4A10611824FCBAA4C1793637 /* [CP] Check Pods Manifest.lock */ = {
+		3B2D9C1D63379C2F30AC0F2B /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -256,7 +256,7 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		778B42B39FEE5454E4D24252 /* [CP] Copy Pods Resources */ = {
+		550CD54859274FE505BA4957 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -406,7 +406,7 @@
 			shellPath = /bin/sh;
 			shellScript = "/bin/sh `${NODE_BINARY:-node} --print \"require('path').dirname(require.resolve('@sentry/react-native/package.json')) + '/scripts/sentry-xcode-debug-files.sh'\"`";
 		};
-		EE80421364369BBCA82253B9 /* [CP] Embed Pods Frameworks */ = {
+		9F740EE07B5F97C85979C145 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -449,13 +449,13 @@
 /* Begin XCBuildConfiguration section */
 		13B07F941A680F5B00A75B9A /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 2118C3C63E4B7D66EAC534DE /* Pods-Nuvio.debug.xcconfig */;
+			baseConfigurationReference = 904B4A0A0308D3727268BA5E /* Pods-Nuvio.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Nuvio/Nuvio.entitlements;
 				CURRENT_PROJECT_VERSION = 1;
-				DEVELOPMENT_TEAM = NLXTHANK2N;
+				DEVELOPMENT_TEAM = 8QBDZ766S3;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"$(inherited)",
@@ -476,6 +476,7 @@
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = com.nuvio.app;
 				PRODUCT_NAME = Nuvio;
+				SUPPORTS_MACCATALYST = YES;
 				SWIFT_OBJC_BRIDGING_HEADER = "Nuvio/Nuvio-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -486,7 +487,7 @@
 		};
 		13B07F951A680F5B00A75B9A /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 7F2FA62198C389C99926AA47 /* Pods-Nuvio.release.xcconfig */;
+			baseConfigurationReference = 5346BAA9EF8C9C8182D4485C /* Pods-Nuvio.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
@@ -508,6 +509,7 @@
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.nuvio.hub;
 				PRODUCT_NAME = Nuvio;
+				SUPPORTS_MACCATALYST = YES;
 				SWIFT_OBJC_BRIDGING_HEADER = "Nuvio/Nuvio-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";

ios/Nuvio/Info.plist

@@ -39,7 +39,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>28</string>
+	<string>29</string>
 	<key>LSMinimumSystemVersion</key>
 	<string>12.0</string>
 	<key>LSRequiresIPhoneOS</key>
@@ -73,12 +73,19 @@
 	<true/>
 	<key>UILaunchStoryboardName</key>
 	<string>SplashScreen</string>
+	<key>UILaunchScreen</key>
+	<dict>
+		<key>UIColorName</key>
+		<string>SplashScreenBackground</string>
+		<key>UIImageName</key>
+		<string>SplashScreenLegacy</string>
+	</dict>
 	<key>UIRequiredDeviceCapabilities</key>
 	<array>
 		<string>arm64</string>
 	</array>
 	<key>UIRequiresFullScreen</key>
-	<true/>
+	<false/>
 	<key>UIStatusBarStyle</key>
 	<string>UIStatusBarStyleDefault</string>
 	<key>UISupportedInterfaceOrientations</key>

ios/Nuvio/SplashScreen.storyboard

@@ -15,7 +15,7 @@
                 <viewController storyboardIdentifier="SplashScreenViewController" id="EXPO-VIEWCONTROLLER-1" sceneMemberID="viewController">
                     <view key="view" userInteractionEnabled="NO" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="EXPO-ContainerView" userLabel="ContainerView">
                         <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
-                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <imageView id="EXPO-SplashScreen" userLabel="SplashScreenLegacy" image="SplashScreenLegacy" contentMode="scaleAspectFit" clipsSubviews="true" userInteractionEnabled="false" translatesAutoresizingMaskIntoConstraints="false">
                                 <rect key="frame" x="0" y="0" width="414" height="736"/>

ios/Nuvio/Supporting/Expo.plist

@@ -11,6 +11,6 @@
     <key>EXUpdatesRuntimeVersion</key>
     <string>1.2.11</string>
     <key>EXUpdatesURL</key>
-    <string>https://grim-reyna-tapframe-69970143.koyeb.app/api/manifest</string>
+    <string>https://ota.nuvioapp.space/api/manifest</string>
   </dict>
 </plist>

ios/Podfile

@@ -50,8 +50,9 @@ target 'Nuvio' do
   )
 
   # KSPlayer dependencies
-  pod 'KSPlayer', :git => 'https://github.com/kingslay/KSPlayer.git', :branch => 'main'
-  pod 'DisplayCriteria', :git => 'https://github.com/kingslay/KSPlayer.git', :branch => 'main', :modular_headers => true
+  # Use the local checkout so we can patch subtitle rendering (and other behaviors) without forking.
+  pod 'KSPlayer', :path => '../KSPlayer'
+  pod 'DisplayCriteria', :path => '../KSPlayer', :modular_headers => true
   pod 'FFmpegKit', :git => 'https://github.com/kingslay/FFmpegKit.git', :branch => 'main', :modular_headers => true
   pod 'Libass', :git => 'https://github.com/kingslay/FFmpegKit.git', :branch => 'main'
 

ios/Podfile.lock

@@ -1902,6 +1902,30 @@ PODS:
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
     - Yoga
+  - react-native-skia (2.4.14):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React
+    - React-callinvoker
+    - React-Core
+    - React-Core-prebuilt
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - Yoga
   - react-native-slider (5.1.1):
     - hermes-engine
     - RCTRequired
@@ -2736,7 +2760,7 @@ PODS:
   - Yoga (0.0.0)
 
 DEPENDENCIES:
-  - DisplayCriteria (from `https://github.com/kingslay/KSPlayer.git`, branch `main`)
+  - DisplayCriteria (from `../KSPlayer`)
   - EASClient (from `../node_modules/expo-eas-client/ios`)
   - EXApplication (from `../node_modules/expo-application/ios`)
   - EXConstants (from `../node_modules/expo-constants/ios`)
@@ -2776,7 +2800,7 @@ DEPENDENCIES:
   - FFmpegKit (from `https://github.com/kingslay/FFmpegKit.git`, branch `main`)
   - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
   - ImageColors (from `../node_modules/react-native-image-colors/ios`)
-  - KSPlayer (from `https://github.com/kingslay/KSPlayer.git`, branch `main`)
+  - KSPlayer (from `../KSPlayer`)
   - Libass (from `https://github.com/kingslay/FFmpegKit.git`, branch `main`)
   - lottie-react-native (from `../node_modules/lottie-react-native`)
   - NitroMmkv (from `../node_modules/react-native-mmkv`)
@@ -2822,6 +2846,7 @@ DEPENDENCIES:
   - react-native-google-cast (from `../node_modules/react-native-google-cast`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - "react-native-skia (from `../node_modules/@shopify/react-native-skia`)"
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-video (from `../node_modules/react-native-video`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -2885,8 +2910,7 @@ SPEC REPOS:
 
 EXTERNAL SOURCES:
   DisplayCriteria:
-    :branch: main
-    :git: https://github.com/kingslay/KSPlayer.git
+    :path: "../KSPlayer"
   EASClient:
     :path: "../node_modules/expo-eas-client/ios"
   EXApplication:
@@ -2968,8 +2992,7 @@ EXTERNAL SOURCES:
   ImageColors:
     :path: "../node_modules/react-native-image-colors/ios"
   KSPlayer:
-    :branch: main
-    :git: https://github.com/kingslay/KSPlayer.git
+    :path: "../KSPlayer"
   Libass:
     :branch: main
     :git: https://github.com/kingslay/FFmpegKit.git
@@ -3059,6 +3082,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/netinfo"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-skia:
+    :path: "../node_modules/@shopify/react-native-skia"
   react-native-slider:
     :path: "../node_modules/@react-native-community/slider"
   react-native-video:
@@ -3147,15 +3172,9 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 CHECKOUT OPTIONS:
-  DisplayCriteria:
-    :commit: 101cceed0f2d9b6833ee69cf29b65a042de720a3
-    :git: https://github.com/kingslay/KSPlayer.git
   FFmpegKit:
     :commit: d7048037a2eb94a3b08113fbf43aa92bdcb332d9
     :git: https://github.com/kingslay/FFmpegKit.git
-  KSPlayer:
-    :commit: 101cceed0f2d9b6833ee69cf29b65a042de720a3
-    :git: https://github.com/kingslay/KSPlayer.git
   Libass:
     :commit: d7048037a2eb94a3b08113fbf43aa92bdcb332d9
     :git: https://github.com/kingslay/FFmpegKit.git
@@ -3254,6 +3273,7 @@ SPEC CHECKSUMS:
   react-native-google-cast: 7be68a5d0b7eeb95a5924c3ecef8d319ef6c0a44
   react-native-netinfo: cec9c4e86083cb5b6aba0e0711f563e2fbbff187
   react-native-safe-area-context: 37e680fc4cace3c0030ee46e8987d24f5d3bdab2
+  react-native-skia: 268f183f849742e9da216743ee234bd7ad81c69b
   react-native-slider: f954578344106f0a732a4358ce3a3e11015eb6e1
   react-native-video: f5982e21efab0dc356d92541a8a9e19581307f58
   React-NativeModulesApple: a9464983ccc0f66f45e93558671f60fc7536e438
@@ -3304,6 +3324,6 @@ SPEC CHECKSUMS:
   SwiftUIIntrospect: fee9aa07293ee280373a591e1824e8ddc869ba5d
   Yoga: 051f086b5ccf465ff2ed38a2cf5a558ae01aaaa1
 
-PODFILE CHECKSUM: 7c74c9cd2c7f3df7ab68b4284d9f324282e54542
+PODFILE CHECKSUM: b884d1ff07ac4a43323bce2e2e1342592513858c
 
 COCOAPODS: 1.16.2

ios/Podfile.properties.json

@@ -1,5 +1,6 @@
 {
   "expo.jsEngine": "hermes",
   "EX_DEV_CLIENT_NETWORK_INSPECTOR": "true",
-  "newArchEnabled": "true"
-}
+  "newArchEnabled": "true",
+  "ios.deploymentTarget": "16.0"
+}

libmpv-android

@@ -1 +0,0 @@
-Subproject commit 8c4778b5aad441bb0449a7f9b3d6d827fd3d6a2a

mpv-android

@@ -1 +0,0 @@
-Subproject commit 118cd1ed3d498265e44230e5dbb015bdd59f9dad

node_modules/react-native-video/android/src/main/java/com/brentvatne/common/api/SubtitleStyle.kt

@@ -0,0 +1,81 @@
+package com.brentvatne.common.api
+
+import android.graphics.Color
+import com.brentvatne.common.toolbox.ReactBridgeUtils
+import com.facebook.react.bridge.ReadableMap
+
+/**
+ * Helper file to parse SubtitleStyle prop and build a dedicated class
+ */
+class SubtitleStyle public constructor() {
+    var fontSize = -1
+        private set
+    var paddingLeft = 0
+        private set
+    var paddingRight = 0
+        private set
+    var paddingTop = 0
+        private set
+    var paddingBottom = 0
+        private set
+    var opacity = 1f
+        private set
+    var subtitlesFollowVideo = true
+        private set
+
+    // Extended styling (used by ExoPlayerView via Media3 SubtitleView)
+    // Stored as Android color ints to avoid parsing multiple times.
+    var textColor: Int? = null
+        private set
+    var backgroundColor: Int? = null
+        private set
+    var edgeType: String? = null
+        private set
+    var edgeColor: Int? = null
+        private set
+
+    companion object {
+        private const val PROP_FONT_SIZE_TRACK = "fontSize"
+        private const val PROP_PADDING_BOTTOM = "paddingBottom"
+        private const val PROP_PADDING_TOP = "paddingTop"
+        private const val PROP_PADDING_LEFT = "paddingLeft"
+        private const val PROP_PADDING_RIGHT = "paddingRight"
+        private const val PROP_OPACITY = "opacity"
+        private const val PROP_SUBTITLES_FOLLOW_VIDEO = "subtitlesFollowVideo"
+
+        // Extended props (optional)
+        private const val PROP_TEXT_COLOR = "textColor"
+        private const val PROP_BACKGROUND_COLOR = "backgroundColor"
+        private const val PROP_EDGE_TYPE = "edgeType"
+        private const val PROP_EDGE_COLOR = "edgeColor"
+
+        private fun parseColorOrNull(value: String?): Int? {
+            if (value.isNullOrBlank()) return null
+            return try {
+                Color.parseColor(value)
+            } catch (_: IllegalArgumentException) {
+                null
+            }
+        }
+
+        @JvmStatic
+        fun parse(src: ReadableMap?): SubtitleStyle {
+            val subtitleStyle = SubtitleStyle()
+            subtitleStyle.fontSize = ReactBridgeUtils.safeGetInt(src, PROP_FONT_SIZE_TRACK, -1)
+            subtitleStyle.paddingBottom = ReactBridgeUtils.safeGetInt(src, PROP_PADDING_BOTTOM, 0)
+            subtitleStyle.paddingTop = ReactBridgeUtils.safeGetInt(src, PROP_PADDING_TOP, 0)
+            subtitleStyle.paddingLeft = ReactBridgeUtils.safeGetInt(src, PROP_PADDING_LEFT, 0)
+            subtitleStyle.paddingRight = ReactBridgeUtils.safeGetInt(src, PROP_PADDING_RIGHT, 0)
+            subtitleStyle.opacity = ReactBridgeUtils.safeGetFloat(src, PROP_OPACITY, 1f)
+            subtitleStyle.subtitlesFollowVideo = ReactBridgeUtils.safeGetBool(src, PROP_SUBTITLES_FOLLOW_VIDEO, true)
+
+            // Extended styling
+            subtitleStyle.textColor = parseColorOrNull(ReactBridgeUtils.safeGetString(src, PROP_TEXT_COLOR, null))
+            subtitleStyle.backgroundColor = parseColorOrNull(ReactBridgeUtils.safeGetString(src, PROP_BACKGROUND_COLOR, null))
+            subtitleStyle.edgeType = ReactBridgeUtils.safeGetString(src, PROP_EDGE_TYPE, null)
+            subtitleStyle.edgeColor = parseColorOrNull(ReactBridgeUtils.safeGetString(src, PROP_EDGE_COLOR, null))
+
+            return subtitleStyle
+        }
+    }
+}

node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.kt

@@ -0,0 +1,441 @@
+package com.brentvatne.exoplayer
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.drawable.GradientDrawable
+import android.util.AttributeSet
+import android.view.View
+import android.view.View.MeasureSpec
+import android.widget.FrameLayout
+import android.widget.TextView
+import androidx.media3.common.Player
+import androidx.media3.common.Timeline
+import androidx.media3.common.text.CueGroup
+import androidx.media3.common.util.UnstableApi
+import androidx.media3.exoplayer.ExoPlayer
+import androidx.media3.ui.AspectRatioFrameLayout
+import androidx.media3.ui.CaptionStyleCompat
+import androidx.media3.ui.DefaultTimeBar
+import androidx.media3.ui.PlayerView
+import androidx.media3.ui.SubtitleView
+import com.brentvatne.common.api.ResizeMode
+import com.brentvatne.common.api.SubtitleStyle
+
+@UnstableApi
+class ExoPlayerView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
+    FrameLayout(context, attrs, defStyleAttr) {
+
+    private var localStyle = SubtitleStyle()
+    private var pendingResizeMode: Int? = null
+    private val liveBadge: TextView = TextView(context).apply {
+        text = "LIVE"
+        setTextColor(Color.WHITE)
+        textSize = 12f
+        val drawable = GradientDrawable()
+        drawable.setColor(Color.RED)
+        drawable.cornerRadius = 6f
+        background = drawable
+        setPadding(12, 4, 12, 4)
+        visibility = View.GONE
+    }
+
+    private val playerView = PlayerView(context).apply {
+        layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        setShutterBackgroundColor(Color.TRANSPARENT)
+        useController = true
+        controllerAutoShow = true
+        controllerHideOnTouch = true
+        controllerShowTimeoutMs = 5000
+        // Don't show subtitle button by default - will be enabled when tracks are available
+        setShowSubtitleButton(false)
+        // Enable proper surface view handling to prevent rendering issues
+        setUseArtwork(false)
+        setDefaultArtwork(null)
+        // Ensure proper video scaling - start with FIT mode
+        resizeMode = androidx.media3.ui.AspectRatioFrameLayout.RESIZE_MODE_FIT
+    }
+
+    /**
+     * Subtitles rendered in a full-size overlay (NOT inside PlayerView's content frame).
+     * This keeps subtitles anchored in-place even when the video surface/content frame moves
+     * due to aspect ratio / resizeMode changes.
+     *
+     * Controlled by SubtitleStyle.subtitlesFollowVideo.
+     */
+    private val overlaySubtitleView = SubtitleView(context).apply {
+        layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        visibility = View.GONE
+        // We control styling via SubtitleStyle; don't pull Android system caption defaults.
+        setApplyEmbeddedStyles(true)
+        setApplyEmbeddedFontSizes(true)
+    }
+
+    private fun updateSubtitleRenderingMode() {
+        val internalSubtitleView = playerView.subtitleView
+        val followVideo = localStyle.subtitlesFollowVideo
+        val shouldShow = localStyle.opacity != 0.0f
+
+        if (followVideo) {
+            internalSubtitleView?.visibility = if (shouldShow) View.VISIBLE else View.GONE
+            overlaySubtitleView.visibility = View.GONE
+        } else {
+            // Hard-disable PlayerView's internal subtitle view. PlayerView can recreate/toggle this view
+            // during resize/layout, so we re-assert this in multiple lifecycle points.
+            internalSubtitleView?.visibility = View.GONE
+            internalSubtitleView?.alpha = 0f
+            overlaySubtitleView.visibility = if (shouldShow) View.VISIBLE else View.GONE
+            overlaySubtitleView.alpha = 1f
+        }
+    }
+
+    init {
+        // Add PlayerView with explicit layout parameters
+        val playerViewLayoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        addView(playerView, playerViewLayoutParams)
+
+        // Add overlay subtitles above PlayerView (so it doesn't move with video content frame)
+        val subtitleOverlayLayoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        addView(overlaySubtitleView, subtitleOverlayLayoutParams)
+
+        // Add live badge with its own layout parameters
+        val liveBadgeLayoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
+        liveBadgeLayoutParams.setMargins(16, 16, 16, 16)
+        addView(liveBadge, liveBadgeLayoutParams)
+
+        // PlayerView may internally recreate its subtitle view during relayouts (e.g. resizeMode changes).
+        // Ensure our rendering mode is re-applied whenever PlayerView lays out.
+        playerView.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
+            updateSubtitleRenderingMode()
+        }
+    }
+
+    fun setPlayer(player: ExoPlayer?) {
+        val currentPlayer = playerView.player
+
+        if (currentPlayer != null) {
+            currentPlayer.removeListener(playerListener)
+        }
+
+        playerView.player = player
+
+        if (player != null) {
+            player.addListener(playerListener)
+
+            // Apply pending resize mode if we have one
+            pendingResizeMode?.let { resizeMode ->
+                playerView.resizeMode = resizeMode
+            }
+        }
+
+        // Re-assert subtitle rendering mode for the current style.
+        updateSubtitleRenderingMode()
+        applySubtitleStyle(localStyle)
+    }
+
+    fun getPlayerView(): PlayerView = playerView
+
+    fun setResizeMode(@ResizeMode.Mode resizeMode: Int) {
+        val targetResizeMode = when (resizeMode) {
+            ResizeMode.RESIZE_MODE_FILL -> AspectRatioFrameLayout.RESIZE_MODE_FILL
+            ResizeMode.RESIZE_MODE_CENTER_CROP -> AspectRatioFrameLayout.RESIZE_MODE_ZOOM
+            ResizeMode.RESIZE_MODE_FIT -> AspectRatioFrameLayout.RESIZE_MODE_FIT
+            ResizeMode.RESIZE_MODE_FIXED_WIDTH -> AspectRatioFrameLayout.RESIZE_MODE_FIXED_WIDTH
+            ResizeMode.RESIZE_MODE_FIXED_HEIGHT -> AspectRatioFrameLayout.RESIZE_MODE_FIXED_HEIGHT
+            else -> AspectRatioFrameLayout.RESIZE_MODE_FIT
+        }
+
+        // Apply the resize mode to PlayerView immediately
+        playerView.resizeMode = targetResizeMode
+
+        // Store it for reapplication if needed
+        pendingResizeMode = targetResizeMode
+
+        // Force PlayerView to recalculate its layout
+        playerView.requestLayout()
+
+        // Also request layout on the parent to ensure proper sizing
+        requestLayout()
+    }
+
+    fun setSubtitleStyle(style: SubtitleStyle) {
+        localStyle = style
+        applySubtitleStyle(localStyle)
+    }
+
+    private fun applySubtitleStyle(style: SubtitleStyle) {
+        updateSubtitleRenderingMode()
+
+        playerView.subtitleView?.let { subtitleView ->
+            // Important:
+            // Avoid inheriting Android system caption settings via setUserDefaultStyle(),
+            // because those can force a background/window that the app doesn't want.
+            val resolvedTextColor = style.textColor ?: CaptionStyleCompat.DEFAULT.foregroundColor
+            val resolvedBackgroundColor = style.backgroundColor ?: Color.TRANSPARENT
+            val resolvedEdgeColor = style.edgeColor ?: Color.BLACK
+
+            val resolvedEdgeType = when (style.edgeType?.lowercase()) {
+                "outline" -> CaptionStyleCompat.EDGE_TYPE_OUTLINE
+                "shadow" -> CaptionStyleCompat.EDGE_TYPE_DROP_SHADOW
+                else -> CaptionStyleCompat.EDGE_TYPE_NONE
+            }
+
+            // windowColor MUST be transparent to avoid the "caption window" background.
+            val captionStyle = CaptionStyleCompat(
+                resolvedTextColor,
+                resolvedBackgroundColor,
+                Color.TRANSPARENT,
+                resolvedEdgeType,
+                resolvedEdgeColor,
+                null
+            )
+            subtitleView.setStyle(captionStyle)
+
+            // Text size: if not provided, fall back to user default size.
+            if (style.fontSize > 0) {
+                // Use DIP so the value matches React Native's dp-based fontSize more closely.
+                // SP would multiply by system fontScale and makes "30" look larger than RN "30".
+                subtitleView.setFixedTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, style.fontSize.toFloat())
+            } else {
+                subtitleView.setUserDefaultTextSize()
+            }
+
+            // Horizontal padding is still useful (safe area); vertical offset is handled via bottomPaddingFraction.
+            subtitleView.setPadding(
+                style.paddingLeft,
+                style.paddingTop,
+                style.paddingRight,
+                0
+            )
+
+            // Bottom offset for *internal* subtitles:
+            // Use Media3 SubtitleView's bottomPaddingFraction (moves cues up) rather than raw view padding.
+            if (style.paddingBottom > 0 && playerView.height > 0) {
+                val fraction = (style.paddingBottom.toFloat() / playerView.height.toFloat())
+                    .coerceIn(0f, 0.9f)
+                subtitleView.setBottomPaddingFraction(fraction)
+            }
+
+            if (style.opacity != 0.0f) {
+                subtitleView.alpha = style.opacity
+                subtitleView.visibility = android.view.View.VISIBLE
+            } else {
+                subtitleView.visibility = android.view.View.GONE
+            }
+        }
+
+        // Apply the same styling to the overlay subtitle view.
+        run {
+            val subtitleView = overlaySubtitleView
+
+            val resolvedTextColor = style.textColor ?: CaptionStyleCompat.DEFAULT.foregroundColor
+            val resolvedBackgroundColor = style.backgroundColor ?: Color.TRANSPARENT
+            val resolvedEdgeColor = style.edgeColor ?: Color.BLACK
+
+            val resolvedEdgeType = when (style.edgeType?.lowercase()) {
+                "outline" -> CaptionStyleCompat.EDGE_TYPE_OUTLINE
+                "shadow" -> CaptionStyleCompat.EDGE_TYPE_DROP_SHADOW
+                else -> CaptionStyleCompat.EDGE_TYPE_NONE
+            }
+
+            val captionStyle = CaptionStyleCompat(
+                resolvedTextColor,
+                resolvedBackgroundColor,
+                Color.TRANSPARENT,
+                resolvedEdgeType,
+                resolvedEdgeColor,
+                null
+            )
+            subtitleView.setStyle(captionStyle)
+
+            if (style.fontSize > 0) {
+                // Use DIP so the value matches React Native's dp-based fontSize more closely.
+                subtitleView.setFixedTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, style.fontSize.toFloat())
+            } else {
+                subtitleView.setUserDefaultTextSize()
+            }
+
+            subtitleView.setPadding(
+                style.paddingLeft,
+                style.paddingTop,
+                style.paddingRight,
+                0
+            )
+
+            // Bottom offset relative to the full view height (stable even when video content frame moves).
+            val h = height.takeIf { it > 0 } ?: subtitleView.height
+            if (style.paddingBottom > 0 && h > 0) {
+                val fraction = (style.paddingBottom.toFloat() / h.toFloat())
+                    .coerceIn(0f, 0.9f)
+                subtitleView.setBottomPaddingFraction(fraction)
+            } else {
+                subtitleView.setBottomPaddingFraction(0f)
+            }
+
+            if (style.opacity != 0.0f) {
+                subtitleView.alpha = style.opacity
+            }
+        }
+    }
+
+    fun setShutterColor(color: Int) {
+        playerView.setShutterBackgroundColor(color)
+    }
+
+    fun updateSurfaceView(viewType: Int) {
+        // TODO: Implement proper surface type switching if needed
+    }
+
+    val isPlaying: Boolean
+        get() = playerView.player?.isPlaying ?: false
+
+    fun invalidateAspectRatio() {
+        // PlayerView handles aspect ratio automatically through its internal AspectRatioFrameLayout
+        playerView.requestLayout()
+
+        // Reapply the current resize mode to ensure it's properly set
+        pendingResizeMode?.let { resizeMode ->
+            playerView.resizeMode = resizeMode
+        }
+    }
+
+    fun setUseController(useController: Boolean) {
+        playerView.useController = useController
+        if (useController) {
+            // Ensure proper touch handling when controls are enabled
+            playerView.controllerAutoShow = true
+            playerView.controllerHideOnTouch = true
+            // Show controls immediately when enabled
+            playerView.showController()
+        }
+    }
+
+    fun showController() {
+        playerView.showController()
+    }
+
+    fun hideController() {
+        playerView.hideController()
+    }
+
+    fun setControllerShowTimeoutMs(showTimeoutMs: Int) {
+        playerView.controllerShowTimeoutMs = showTimeoutMs
+    }
+
+    fun setControllerAutoShow(autoShow: Boolean) {
+        playerView.controllerAutoShow = autoShow
+    }
+
+    fun setControllerHideOnTouch(hideOnTouch: Boolean) {
+        playerView.controllerHideOnTouch = hideOnTouch
+    }
+
+    fun setFullscreenButtonClickListener(listener: PlayerView.FullscreenButtonClickListener?) {
+        playerView.setFullscreenButtonClickListener(listener)
+    }
+
+    fun setShowSubtitleButton(show: Boolean) {
+        playerView.setShowSubtitleButton(show)
+    }
+
+    fun isControllerVisible(): Boolean = playerView.isControllerFullyVisible
+
+    fun setControllerVisibilityListener(listener: PlayerView.ControllerVisibilityListener?) {
+        playerView.setControllerVisibilityListener(listener)
+    }
+
+    override fun addOnLayoutChangeListener(listener: View.OnLayoutChangeListener) {
+        playerView.addOnLayoutChangeListener(listener)
+    }
+
+    override fun setFocusable(focusable: Boolean) {
+        playerView.isFocusable = focusable
+    }
+
+    private fun updateLiveUi() {
+        val player = playerView.player ?: return
+        val isLive = player.isCurrentMediaItemLive
+        val seekable = player.isCurrentMediaItemSeekable
+
+        // Show/hide badge
+        liveBadge.visibility = if (isLive) View.VISIBLE else View.GONE
+
+        // Disable/enable scrubbing based on seekable
+        val timeBar = playerView.findViewById<DefaultTimeBar?>(androidx.media3.ui.R.id.exo_progress)
+        timeBar?.isEnabled = !isLive || seekable
+    }
+
+    private val playerListener = object : Player.Listener {
+        override fun onCues(cueGroup: CueGroup) {
+            // Keep overlay subtitles in sync. This does NOT interfere with PlayerView's own subtitle rendering.
+            // When subtitlesFollowVideo=false, overlaySubtitleView is the visible one.
+            updateSubtitleRenderingMode()
+            overlaySubtitleView.setCues(cueGroup.cues)
+        }
+
+        override fun onTimelineChanged(timeline: Timeline, reason: Int) {
+            playerView.post {
+                playerView.requestLayout()
+                // Reapply resize mode to ensure it's properly set after timeline changes
+                pendingResizeMode?.let { resizeMode ->
+                    playerView.resizeMode = resizeMode
+                }
+            }
+            updateLiveUi()
+        }
+
+        override fun onEvents(player: Player, events: Player.Events) {
+            if (events.contains(Player.EVENT_MEDIA_ITEM_TRANSITION) ||
+                events.contains(Player.EVENT_IS_PLAYING_CHANGED)
+            ) {
+                updateLiveUi()
+            }
+
+            // Handle video size changes which affect aspect ratio
+            if (events.contains(Player.EVENT_VIDEO_SIZE_CHANGED)) {
+                pendingResizeMode?.let { resizeMode ->
+                    playerView.resizeMode = resizeMode
+                }
+                playerView.requestLayout()
+                requestLayout()
+            }
+        }
+    }
+
+    companion object {
+        private const val TAG = "ExoPlayerView"
+    }
+
+    /**
+     * React Native (Yoga) can sometimes defer layout passes that are required by
+     * PlayerView for its child views (controller overlay, surface view, subtitle view, …).
+     * This helper forces a second measure / layout after RN finishes, ensuring the
+     * internal views receive the final size. The same approach is used in the v7
+     * implementation (see VideoView.kt) and in React Native core (Toolbar example [link]).
+     */
+    private val layoutRunnable = Runnable {
+        measure(
+            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+        )
+        layout(left, top, right, bottom)
+    }
+
+    override fun requestLayout() {
+        super.requestLayout()
+        // Post a second layout pass so the ExoPlayer internal views get correct bounds.
+        post(layoutRunnable)
+    }
+
+    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        super.onLayout(changed, left, top, right, bottom)
+
+        if (changed) {
+            pendingResizeMode?.let { resizeMode ->
+                playerView.resizeMode = resizeMode
+            }
+            // Re-apply bottomPaddingFraction once we have a concrete height.
+            updateSubtitleRenderingMode()
+            applySubtitleStyle(localStyle)
+        }
+    }
+}

nuvio-source.json

@@ -30,6 +30,38 @@
         "https://github.com/tapframe/NuvioStreaming/blob/main/screenshots/search-portrait.png?raw=true"
       ],
       "versions": [
+        {
+          "version": "1.3.5",
+          "buildVersion": "33",
+          "date": "2026-01-09",
+          "localizedDescription": "## Update Notes\n\n### ExoPlayer Subtitle Fixes\nThis update mainly focuses on fixing multiple subtitle-related issues in ExoPlayer:\n- Fixed issue where **only the first subtitle index** was being rendered  \n- Fixed subtitles **always showing background** due to Android native caption settings  \n- Fixed subtitles being **rendered inside the player view**  \n- Fixed **subtitle bottom offset** issues  \n- Merged PR **#391** by **@saifshaikh1805**  \n  - Fixes issue **#301**\n\n### KSPlayer Improvements\n- Improved **subtitle behavior** in KSPlayer  \n- Merged PR **#394** by **@AdityasahuX07**\n\n### Settings & Persistence\n- Implemented **save and load** functionality for **Discover settings**\n\nThis release improves subtitle rendering accuracy across players and adds better persistence for user preferences.",
+          "downloadURL": "https://github.com/tapframe/NuvioStreaming/releases/download/v1.3.5/app-release.apk",
+          "size": 25700000
+        },
+        {
+          "version": "1.3.4",
+          "buildVersion": "32",
+          "date": "2026-01-06",
+          "localizedDescription": "## Update Notes\n\n### Player & Playback\n- Fixed **Android player crashes with large files** when using ExoPlayer  \n  - Merged PR **#361** by **@chrisk325**\n\n### Trakt Improvements\n- Improved **Trakt Continue Watching** section for better accuracy and reliability\n\n### Internationalization\n- Added **multi-language support** across the app using **i18n**  \n  - More languages will be added through **community contributions**  \n  - ⚠️ **Arabic UI does not use RTL yet**. RTL support will be added in a future update\n\n### Stability & Fixes\n- Crash optimizations and internal stability improvements\n\nThis update focuses on improving playback stability, Trakt experience, and expanding language support.",
+          "downloadURL": "https://github.com/tapframe/NuvioStreaming/releases/download/v1.3.4/app-release.apk",
+          "size": 25700000
+        },
+        {
+          "version": "1.3.3",
+          "buildVersion": "31",
+          "date": "2026-01-01",
+          "localizedDescription": "# Nuvio Media Hub – v1.3.3\n\n## Update Notes\n\n### Playback & Preferences\n- Added **default audio and subtitle track selection**\n\n### Plugins & Repositories\n- Added support for **multiple active repositories**\n- Improved **plugin fetch logic** for better reliability and performance\n- Changed OTA server.\n\n### Trakt & Metadata Fixes\n- Fixed **TMDB enrichment logic**\n- Fixed **Trakt watch progress not syncing** for older seasons  \n  - Contributed by **@chrisk325**  \n  - Fixes #331 and closes #233  \n  - ⚠️ It is recommended to **log out and log back into Trakt** inside the app to correctly reflect watched status for older seasons\n\n### UI Improvements & Bug Fixes\n- Minor UI refinements and bug fixes  \n- Added **YouTube-style press-and-hold playback speed indicator**  \n- Refined **gesture indicator pill**  \n- Fixed **OSC not auto-hiding on Android**  \n  - Contributed by **@AdityasahuX07**  \n  - Fixes #326 and #298  \n\nThis release includes valuable contributions from the community and focuses on improving playback preferences, plugin handling, Trakt syncing, and overall UI polish.",
+          "downloadURL": "https://github.com/tapframe/NuvioStreaming/releases/download/1.3.3/Stable_1-3-3.ipa",
+          "size": 25700000
+        },
+        {
+          "version": "1.3.2",
+          "buildVersion": "30",
+          "date": "2025-12-28",
+          "localizedDescription": "# Nuvio Media Hub – v1.3.2\n\n### New Features\n- Added **Skip Intro** feature powered by **IntroDB**  \n- Added support for **Internal Subtitle customization** for both **MPV** and **ExoPlayer**  \n  - ExoPlayer customization is currently limited  \n\n### Stability & Fixes\n- Improved **StreamScreen error handling** to prevent crashes  \n- Minor bug fixes and internal improvements",
+          "downloadURL": "https://github.com/tapframe/NuvioStreaming/releases/download/1.3.2/Stable_1-3-2.ipa",
+          "size": 25700000
+        },
         {
           "version": "1.3.0",
           "buildVersion": "28",

package-lock.json

@@ -29,6 +29,7 @@
         "@react-navigation/stack": "^7.2.10",
         "@sentry/react-native": "^7.6.0",
         "@shopify/flash-list": "^2.2.0",
+        "@shopify/react-native-skia": "^2.4.14",
         "@types/lodash": "^4.17.16",
         "@types/react-native-video": "^5.0.20",
         "axios": "^1.12.2",
@@ -44,7 +45,7 @@
         "expo-brightness": "~14.0.7",
         "expo-clipboard": "~8.0.8",
         "expo-crypto": "~15.0.7",
-        "expo-dev-client": "~6.0.15",
+        "expo-dev-client": "~6.0.20",
         "expo-device": "~8.0.9",
         "expo-document-picker": "~14.0.7",
         "expo-file-system": "~19.0.17",
@@ -63,10 +64,14 @@
         "expo-system-ui": "~6.0.7",
         "expo-updates": "~29.0.12",
         "expo-web-browser": "~15.0.8",
+        "i18next": "^25.7.3",
+        "intl-pluralrules": "^2.0.1",
         "lodash": "^4.17.21",
         "lottie-react-native": "~7.3.1",
         "posthog-react-native": "^4.4.0",
         "react": "19.1.0",
+        "react-dom": "19.1.0",
+        "react-i18next": "^16.5.1",
         "react-native": "0.81.4",
         "react-native-boost": "^0.6.2",
         "react-native-bottom-tabs": "^1.0.2",
@@ -86,7 +91,7 @@
         "react-native-svg": "^15.12.1",
         "react-native-url-polyfill": "^3.0.0",
         "react-native-vector-icons": "^10.3.0",
-        "react-native-video": "^6.17.0",
+        "react-native-video": "6.18.0",
         "react-native-web": "^0.21.0",
         "react-native-wheel-color-picker": "^1.3.1",
         "react-native-worklets": "^0.7.1"
@@ -100,7 +105,7 @@
         "babel-plugin-transform-remove-console": "^6.9.4",
         "patch-package": "^8.0.1",
         "react-native-svg-transformer": "^1.5.0",
-        "typescript": "^5.3.3",
+        "typescript": "^5.9.3",
         "xcode": "^3.0.1"
       }
     },
@@ -3642,6 +3647,33 @@
         "react-native": "*"
       }
     },
+    "node_modules/@shopify/react-native-skia": {
+      "version": "2.4.14",
+      "resolved": "https://registry.npmjs.org/@shopify/react-native-skia/-/react-native-skia-2.4.14.tgz",
+      "integrity": "sha512-zFxjAQbfrdOxoNJoaOCZQzZliuAWXjFkrNZv2PtofG2RAUPWIxWmk2J/oOROpTwXgkmh1JLvFp3uONccTXUthQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "canvaskit-wasm": "0.40.0",
+        "react-reconciler": "0.31.0"
+      },
+      "bin": {
+        "setup-skia-web": "scripts/setup-canvaskit.js"
+      },
+      "peerDependencies": {
+        "react": ">=19.0",
+        "react-native": ">=0.78",
+        "react-native-reanimated": ">=3.19.1"
+      },
+      "peerDependenciesMeta": {
+        "react-native": {
+          "optional": true
+        },
+        "react-native-reanimated": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -4304,6 +4336,12 @@
         "url": "https://github.com/sponsors/crutchcorn"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.21",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.21.tgz",
+      "integrity": "sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.11",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz",
@@ -5158,6 +5196,15 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvaskit-wasm": {
+      "version": "0.40.0",
+      "resolved": "https://registry.npmjs.org/canvaskit-wasm/-/canvaskit-wasm-0.40.0.tgz",
+      "integrity": "sha512-Od2o+ZmoEw9PBdN/yCGvzfu0WVqlufBPEWNG452wY7E9aT8RBE+ChpZF526doOlg7zumO4iCS+RAeht4P0Gbpw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@webgpu/types": "0.1.21"
+      }
+    },
     "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -7462,6 +7509,15 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "license": "ISC"
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/htmlparser2-without-node-native": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/htmlparser2-without-node-native/-/htmlparser2-without-node-native-3.9.2.tgz",
@@ -7573,6 +7629,37 @@
       "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/i18next": {
+      "version": "25.7.3",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.7.3.tgz",
+      "integrity": "sha512-2XaT+HpYGuc2uTExq9TVRhLsso+Dxym6PWaKpn36wfBmTI779OQ7iP/XaZHzrnGyzU4SHpFrTYLKfVyBfAhVNA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -7700,6 +7787,12 @@
         "css-in-js-utils": "^3.1.0"
       }
     },
+    "node_modules/intl-pluralrules": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/intl-pluralrules/-/intl-pluralrules-2.0.1.tgz",
+      "integrity": "sha512-astxTLzIdXPeN0K9Rumi6LfMpm3rvNO0iJE+h/k8Kr/is+wPbRe4ikyDjlLr6VTh/mEfNv8RjN+gu3KwDiuhqg==",
+      "license": "ISC"
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -10482,6 +10575,18 @@
         }
       }
     },
+    "node_modules/react-dom": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0"
+      }
+    },
     "node_modules/react-freeze": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz",
@@ -10494,6 +10599,33 @@
         "react": ">=17.0.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "16.5.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.5.1.tgz",
+      "integrity": "sha512-Hks6UIRZWW4c+qDAnx1csVsCGYeIR4MoBGQgJ+NUoNnO6qLxXuf8zu0xdcinyXUORgGzCdRsexxO1Xzv3sTdnw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.6.2",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
@@ -11307,6 +11439,27 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "node_modules/react-reconciler": {
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.31.0.tgz",
+      "integrity": "sha512-7Ob7Z+URmesIsIVRjnLoDGwBEG/tVitidU0nMsqX/eeJaLY89RISO/10ERe0MqmzuKUUB1rmY+h1itMbUHg9BQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.25.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/react-reconciler/node_modules/scheduler": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -13186,6 +13339,15 @@
       "integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==",
       "license": "MIT"
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",

package.json

@@ -29,6 +29,7 @@
     "@react-navigation/stack": "^7.2.10",
     "@sentry/react-native": "^7.6.0",
     "@shopify/flash-list": "^2.2.0",
+    "@shopify/react-native-skia": "^2.4.14",
     "@types/lodash": "^4.17.16",
     "@types/react-native-video": "^5.0.20",
     "axios": "^1.12.2",
@@ -44,7 +45,7 @@
     "expo-brightness": "~14.0.7",
     "expo-clipboard": "~8.0.8",
     "expo-crypto": "~15.0.7",
-    "expo-dev-client": "~6.0.15",
+    "expo-dev-client": "~6.0.20",
     "expo-device": "~8.0.9",
     "expo-document-picker": "~14.0.7",
     "expo-file-system": "~19.0.17",
@@ -63,10 +64,14 @@
     "expo-system-ui": "~6.0.7",
     "expo-updates": "~29.0.12",
     "expo-web-browser": "~15.0.8",
+    "i18next": "^25.7.3",
+    "intl-pluralrules": "^2.0.1",
     "lodash": "^4.17.21",
     "lottie-react-native": "~7.3.1",
     "posthog-react-native": "^4.4.0",
     "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-i18next": "^16.5.1",
     "react-native": "0.81.4",
     "react-native-boost": "^0.6.2",
     "react-native-bottom-tabs": "^1.0.2",
@@ -86,7 +91,7 @@
     "react-native-svg": "^15.12.1",
     "react-native-url-polyfill": "^3.0.0",
     "react-native-vector-icons": "^10.3.0",
-    "react-native-video": "^6.17.0",
+    "react-native-video": "6.18.0",
     "react-native-web": "^0.21.0",
     "react-native-wheel-color-picker": "^1.3.1",
     "react-native-worklets": "^0.7.1"
@@ -100,7 +105,7 @@
     "babel-plugin-transform-remove-console": "^6.9.4",
     "patch-package": "^8.0.1",
     "react-native-svg-transformer": "^1.5.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.9.3",
     "xcode": "^3.0.1"
   },
   "private": true

patches/react-native-video+6.18.0.patch

@@ -1,14 +1,58 @@
-diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/cde462de23ae0e930ed29ed683a0d845/results.bin b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/cde462de23ae0e930ed29ed683a0d845/results.bin
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/028370e4575f206e9ebac60013572605/results.bin b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/028370e4575f206e9ebac60013572605/results.bin
 new file mode 100644
 index 0000000..0d259dd
 --- /dev/null
-+++ b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/cde462de23ae0e930ed29ed683a0d845/results.bin
++++ b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/028370e4575f206e9ebac60013572605/results.bin
 @@ -0,0 +1 @@
 +o/classes
-diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/cde462de23ae0e930ed29ed683a0d845/transformed/classes/classes_dex/classes.dex b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/cde462de23ae0e930ed29ed683a0d845/transformed/classes/classes_dex/classes.dex
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/028370e4575f206e9ebac60013572605/transformed/classes/classes_dex/classes.dex b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/028370e4575f206e9ebac60013572605/transformed/classes/classes_dex/classes.dex
 new file mode 100644
-index 0000000..f27c56f
-Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/cde462de23ae0e930ed29ed683a0d845/transformed/classes/classes_dex/classes.dex differ
+index 0000000..83d6ed6
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/028370e4575f206e9ebac60013572605/transformed/classes/classes_dex/classes.dex differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/41904b52a493ec37d5f38c060e4ae4c7/results.bin b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/41904b52a493ec37d5f38c060e4ae4c7/results.bin
+new file mode 100644
+index 0000000..0d259dd
+--- /dev/null
++++ b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/41904b52a493ec37d5f38c060e4ae4c7/results.bin
+@@ -0,0 +1 @@
++o/classes
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/41904b52a493ec37d5f38c060e4ae4c7/transformed/classes/classes_dex/classes.dex b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/41904b52a493ec37d5f38c060e4ae4c7/transformed/classes/classes_dex/classes.dex
+new file mode 100644
+index 0000000..5c0a147
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/41904b52a493ec37d5f38c060e4ae4c7/transformed/classes/classes_dex/classes.dex differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4ab1c81df82d5078216fa3a2e3e201e5/results.bin b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4ab1c81df82d5078216fa3a2e3e201e5/results.bin
+new file mode 100644
+index 0000000..0d259dd
+--- /dev/null
++++ b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4ab1c81df82d5078216fa3a2e3e201e5/results.bin
+@@ -0,0 +1 @@
++o/classes
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4ab1c81df82d5078216fa3a2e3e201e5/transformed/classes/classes_dex/classes.dex b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4ab1c81df82d5078216fa3a2e3e201e5/transformed/classes/classes_dex/classes.dex
+new file mode 100644
+index 0000000..e74c2bf
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4ab1c81df82d5078216fa3a2e3e201e5/transformed/classes/classes_dex/classes.dex differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4e62ae45002eade3f68471ae8fe8d84f/results.bin b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4e62ae45002eade3f68471ae8fe8d84f/results.bin
+new file mode 100644
+index 0000000..0d259dd
+--- /dev/null
++++ b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4e62ae45002eade3f68471ae8fe8d84f/results.bin
+@@ -0,0 +1 @@
++o/classes
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4e62ae45002eade3f68471ae8fe8d84f/transformed/classes/classes_dex/classes.dex b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4e62ae45002eade3f68471ae8fe8d84f/transformed/classes/classes_dex/classes.dex
+new file mode 100644
+index 0000000..d25d1d1
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/4e62ae45002eade3f68471ae8fe8d84f/transformed/classes/classes_dex/classes.dex differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/6db26500d91cbce8361f70f1540f2ea8/results.bin b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/6db26500d91cbce8361f70f1540f2ea8/results.bin
+new file mode 100644
+index 0000000..0d259dd
+--- /dev/null
++++ b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/6db26500d91cbce8361f70f1540f2ea8/results.bin
+@@ -0,0 +1 @@
++o/classes
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/6db26500d91cbce8361f70f1540f2ea8/transformed/classes/classes_dex/classes.dex b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/6db26500d91cbce8361f70f1540f2ea8/transformed/classes/classes_dex/classes.dex
+new file mode 100644
+index 0000000..28daa05
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/.transforms/6db26500d91cbce8361f70f1540f2ea8/transformed/classes/classes_dex/classes.dex differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/generated/source/buildConfig/debug/com/brentvatne/react/BuildConfig.java b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/generated/source/buildConfig/debug/com/brentvatne/react/BuildConfig.java
 new file mode 100644
 index 0000000..b26a50e
@@ -76,10 +120,6 @@ index 0000000..247891c
 +  "elementType": "File"
 +}
 \ No newline at end of file
-diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/aar_main_jar/debug/syncDebugLibJars/classes.jar b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/aar_main_jar/debug/syncDebugLibJars/classes.jar
-new file mode 100644
-index 0000000..1f4ce80
-Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/aar_main_jar/debug/syncDebugLibJars/classes.jar differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/aar_metadata/debug/writeDebugAarMetadata/aar-metadata.properties b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/aar_metadata/debug/writeDebugAarMetadata/aar-metadata.properties
 new file mode 100644
 index 0000000..1211b1e
@@ -100,12 +140,9 @@ index 0000000..9e26dfe
 @@ -0,0 +1 @@
 +{}
 \ No newline at end of file
-diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/annotations_typedef_file/debug/extractDebugAnnotations/typedefs.txt b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/annotations_typedef_file/debug/extractDebugAnnotations/typedefs.txt
-new file mode 100644
-index 0000000..e69de29
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/compile_library_classes_jar/debug/bundleLibCompileToJarDebug/classes.jar b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/compile_library_classes_jar/debug/bundleLibCompileToJarDebug/classes.jar
 new file mode 100644
-index 0000000..9ec2b04
+index 0000000..e5f72fd
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/compile_library_classes_jar/debug/bundleLibCompileToJarDebug/classes.jar differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/compile_r_class_jar/debug/generateDebugRFile/R.jar b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/compile_r_class_jar/debug/generateDebugRFile/R.jar
 new file mode 100644
@@ -169,17 +206,13 @@ diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda
 new file mode 100644
 index 0000000..bb5b5f9
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/compiled_local_resources/debug/compileDebugLibraryResources/out/layout_exo_legacy_player_control_view.xml.flat differ
-diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/incremental/debug-mergeJavaRes/merge-state b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/incremental/debug-mergeJavaRes/merge-state
-new file mode 100644
-index 0000000..441a1d2
-Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/incremental/debug-mergeJavaRes/merge-state differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/incremental/debug/packageDebugResources/compile-file-map.properties b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/incremental/debug/packageDebugResources/compile-file-map.properties
 new file mode 100644
-index 0000000..842471c
+index 0000000..186e5bd
 --- /dev/null
 +++ b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/incremental/debug/packageDebugResources/compile-file-map.properties
 @@ -0,0 +1,3 @@
-+#Thu Oct 16 20:19:39 IST 2025
++#Sun Jan 11 19:30:05 IST 2026
 +com.brentvatne.react.react-native-video-main-6\:/drawable/circle.xml=/Users/nayifnoushad/Documents/Projects/NuvioStreaming/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/packaged_res/debug/packageDebugResources/drawable/circle.xml
 +com.brentvatne.react.react-native-video-main-6\:/layout/exo_legacy_player_control_view.xml=/Users/nayifnoushad/Documents/Projects/NuvioStreaming/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/packaged_res/debug/packageDebugResources/layout/exo_legacy_player_control_view.xml
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/incremental/debug/packageDebugResources/merged.dir/values/values.xml b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/incremental/debug/packageDebugResources/merged.dir/values/values.xml
@@ -283,31 +316,31 @@ index 0000000..2f92e20
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/androidx/media3/exoplayer/rtsp/RtspMediaSource.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$1.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$1.class
 new file mode 100644
-index 0000000..a1368f5
+index 0000000..2a5b980
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$1.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$2.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$2.class
 new file mode 100644
-index 0000000..ec7b745
+index 0000000..750c145
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$2.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$3.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$3.class
 new file mode 100644
-index 0000000..598654a
+index 0000000..19b4277
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$3.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$4.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$4.class
 new file mode 100644
-index 0000000..803aefe
+index 0000000..9f6af89
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$4.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$OnAudioFocusChangedListener.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$OnAudioFocusChangedListener.class
 new file mode 100644
-index 0000000..6ec4ad1
+index 0000000..99b4560
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$OnAudioFocusChangedListener.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$RNVLoadControl.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$RNVLoadControl.class
 new file mode 100644
-index 0000000..22d8796
+index 0000000..077afc1
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView$RNVLoadControl.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView.class
 new file mode 100644
-index 0000000..53eee7f
+index 0000000..4d14dd4
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/exoplayer/ReactExoplayerView.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/react/BuildConfig.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/javac/debug/compileDebugJavaWithJavac/classes/com/brentvatne/react/BuildConfig.class
 new file mode 100644
@@ -414,10 +447,6 @@ index 0000000..2300097
 +5    <uses-sdk android:minSdkVersion="24" />
 +6
 +7</manifest>
-diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/merged_java_res/debug/mergeDebugJavaResource/feature-react-native-video.jar b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/merged_java_res/debug/mergeDebugJavaResource/feature-react-native-video.jar
-new file mode 100644
-index 0000000..87d384d
-Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/merged_java_res/debug/mergeDebugJavaResource/feature-react-native-video.jar differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/merged_manifest/debug/processDebugManifest/AndroidManifest.xml b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/merged_manifest/debug/processDebugManifest/AndroidManifest.xml
 new file mode 100644
 index 0000000..728c5a9
@@ -628,7 +657,7 @@ index 0000000..e8dd9e4
 \ No newline at end of file
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/runtime_library_classes_jar/debug/bundleLibRuntimeToJarDebug/classes.jar b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/runtime_library_classes_jar/debug/bundleLibRuntimeToJarDebug/classes.jar
 new file mode 100644
-index 0000000..e65b062
+index 0000000..1f68b89
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/runtime_library_classes_jar/debug/bundleLibRuntimeToJarDebug/classes.jar differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/symbol_list_with_package_name/debug/generateDebugRFile/package-aware-r.txt b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/intermediates/symbol_list_with_package_name/debug/generateDebugRFile/package-aware-r.txt
 new file mode 100644
@@ -683,7 +712,7 @@ index 0000000..1cb95ed
 +style ExoMediaButton_FullScreen
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab
 new file mode 100644
-index 0000000..7df5bcf
+index 0000000..6eb806a
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab.keystream b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab.keystream
 new file mode 100644
@@ -699,7 +728,7 @@ index 0000000..41d6c24
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab.values.at b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab.values.at
 new file mode 100644
-index 0000000..d0eda54
+index 0000000..c7f2806
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab.values.at differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab_i b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab_i
 new file mode 100644
@@ -711,7 +740,7 @@ index 0000000..131e265
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/inputs/source-to-output.tab_i.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab
 new file mode 100644
-index 0000000..532458c
+index 0000000..d038dce
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab.keystream b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab.keystream
 new file mode 100644
@@ -727,7 +756,7 @@ index 0000000..bba171d
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab.values.at b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab.values.at
 new file mode 100644
-index 0000000..5d6b64a
+index 0000000..9a58d92
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab.values.at differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab_i b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab_i
 new file mode 100644
@@ -739,7 +768,7 @@ index 0000000..131e265
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-attributes.tab_i.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-fq-name-to-source.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-fq-name-to-source.tab
 new file mode 100644
-index 0000000..8178530
+index 0000000..e70d24d
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-fq-name-to-source.tab differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-fq-name-to-source.tab.keystream b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-fq-name-to-source.tab.keystream
 new file mode 100644
@@ -755,7 +784,7 @@ index 0000000..bba171d
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-fq-name-to-source.tab.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-fq-name-to-source.tab.values.at b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-fq-name-to-source.tab.values.at
 new file mode 100644
-index 0000000..6a45a65
+index 0000000..23ddf3d
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-fq-name-to-source.tab.values.at differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-fq-name-to-source.tab_i b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/class-fq-name-to-source.tab_i
 new file mode 100644
@@ -795,7 +824,7 @@ index 0000000..131e265
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/constants.tab_i.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/internal-name-to-source.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/internal-name-to-source.tab
 new file mode 100644
-index 0000000..c3975e3
+index 0000000..daeef6b
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/internal-name-to-source.tab differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/internal-name-to-source.tab.keystream b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/internal-name-to-source.tab.keystream
 new file mode 100644
@@ -811,7 +840,7 @@ index 0000000..b7d7395
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/internal-name-to-source.tab.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/internal-name-to-source.tab.values.at b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/internal-name-to-source.tab.values.at
 new file mode 100644
-index 0000000..e3911a1
+index 0000000..3412003
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/internal-name-to-source.tab.values.at differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/internal-name-to-source.tab_i b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/internal-name-to-source.tab_i
 new file mode 100644
@@ -851,7 +880,7 @@ index 0000000..131e265
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/package-parts.tab_i.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab
 new file mode 100644
-index 0000000..c626f49
+index 0000000..409b10e
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.keystream b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.keystream
 new file mode 100644
@@ -867,19 +896,19 @@ index 0000000..882f24f
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.values b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.values
 new file mode 100644
-index 0000000..2ff3eb7
+index 0000000..8cabf48
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.values differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.values.at b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.values.at
 new file mode 100644
-index 0000000..af661f7
+index 0000000..6e6f502
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.values.at differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.values.s b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.values.s
 new file mode 100644
-index 0000000..b6551b9
+index 0000000..67a228d
 --- /dev/null
 +++ b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab.values.s
 @@ -0,0 +1 @@
-+ÏÒ

++ÏÒ
ñÐ
ãÊ
ÃÊ

 \ No newline at end of file
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab_i b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab_i
 new file mode 100644
@@ -891,7 +920,7 @@ index 0000000..131e265
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/proto.tab_i.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab
 new file mode 100644
-index 0000000..85d9216
+index 0000000..1298c8c
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab.keystream b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab.keystream
 new file mode 100644
@@ -907,7 +936,7 @@ index 0000000..41d6c24
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab.values.at b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab.values.at
 new file mode 100644
-index 0000000..dfc60fb
+index 0000000..7c991ce
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab.values.at differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab_i b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab_i
 new file mode 100644
@@ -919,7 +948,7 @@ index 0000000..131e265
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/source-to-classes.tab_i.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab
 new file mode 100644
-index 0000000..95c2c01
+index 0000000..5a73f92
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab.keystream b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab.keystream
 new file mode 100644
@@ -935,7 +964,7 @@ index 0000000..385642d
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab.values.at b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab.values.at
 new file mode 100644
-index 0000000..195d865
+index 0000000..119e277
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab.values.at differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab_i b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab_i
 new file mode 100644
@@ -947,7 +976,7 @@ index 0000000..131e265
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/subtypes.tab_i.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab
 new file mode 100644
-index 0000000..d98dace
+index 0000000..52ad30e
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab.keystream b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab.keystream
 new file mode 100644
@@ -963,7 +992,7 @@ index 0000000..42df8b9
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab.values.at b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab.values.at
 new file mode 100644
-index 0000000..bc345c6
+index 0000000..8157519
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab.values.at differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab_i b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab_i
 new file mode 100644
@@ -975,16 +1004,16 @@ index 0000000..131e265
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/jvm/kotlin/supertypes.tab_i.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/counters.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/counters.tab
 new file mode 100644
-index 0000000..672070d
+index 0000000..1c94f4d
 --- /dev/null
 +++ b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/counters.tab
 @@ -0,0 +1,2 @@
-+44
++49
 +0
 \ No newline at end of file
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab
 new file mode 100644
-index 0000000..1878d5a
+index 0000000..b2fe254
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab.keystream b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab.keystream
 new file mode 100644
@@ -1000,7 +1029,7 @@ index 0000000..41d6c24
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab.values.at b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab.values.at
 new file mode 100644
-index 0000000..d3fcc7e
+index 0000000..d69b273
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab.values.at differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab_i b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab_i
 new file mode 100644
@@ -1012,27 +1041,27 @@ index 0000000..131e265
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/file-to-id.tab_i.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab
 new file mode 100644
-index 0000000..04aeda4
+index 0000000..bfd339b
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.keystream b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.keystream
 new file mode 100644
-index 0000000..132a271
+index 0000000..5ecc69a
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.keystream differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.keystream.len b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.keystream.len
 new file mode 100644
-index 0000000..79ad34c
+index 0000000..1c209ae
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.keystream.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.len b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.len
 new file mode 100644
-index 0000000..41d6c24
+index 0000000..31ed51e
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.values.at b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.values.at
 new file mode 100644
-index 0000000..c834290
+index 0000000..17f0ceb
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab.values.at differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab_i b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab_i
 new file mode 100644
-index 0000000..1601c02
+index 0000000..c49a939
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab_i differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab_i.len b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab_i.len
 new file mode 100644
@@ -1040,27 +1069,39 @@ index 0000000..131e265
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/id-to-file.tab_i.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab
 new file mode 100644
-index 0000000..5fc703e
+index 0000000..cb83174
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.keystream b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.keystream
 new file mode 100644
-index 0000000..39f4cac
+index 0000000..9652ad6
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.keystream differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.keystream.len b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.keystream.len
 new file mode 100644
-index 0000000..e381b23
+index 0000000..33b23e4
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.keystream.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.len b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.len
 new file mode 100644
-index 0000000..35ed991
+index 0000000..47e3ec3
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.len differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.values b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.values
+new file mode 100644
+index 0000000..19d0fa5
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.values differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.values.at b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.values.at
 new file mode 100644
-index 0000000..a262c4a
+index 0000000..00fa3dd
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.values.at differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.values.s b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.values.s
+new file mode 100644
+index 0000000..9ae424c
+--- /dev/null
++++ b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab.values.s
+@@ -0,0 +1 @@
++ì‡

+\ No newline at end of file
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab_i b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab_i
 new file mode 100644
-index 0000000..1bfa622
+index 0000000..ab80614
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab_i differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab_i.len b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab_i.len
 new file mode 100644
@@ -1068,16 +1109,16 @@ index 0000000..131e265
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/caches-jvm/lookups/lookups.tab_i.len differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/last-build.bin b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/last-build.bin
 new file mode 100644
-index 0000000..1fe138d
+index 0000000..dcaf58a
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/cacheable/last-build.bin differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/classpath-snapshot/shrunk-classpath-snapshot.bin b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/classpath-snapshot/shrunk-classpath-snapshot.bin
 new file mode 100644
-index 0000000..fb7ec91
+index 0000000..d7d62e0
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/classpath-snapshot/shrunk-classpath-snapshot.bin differ
-diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/outputs/aar/react-native-video-debug.aar b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/outputs/aar/react-native-video-debug.aar
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/local-state/build-history.bin b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/local-state/build-history.bin
 new file mode 100644
-index 0000000..a704fe4
-Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/outputs/aar/react-native-video-debug.aar differ
+index 0000000..ee3ec97
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/kotlin/compileDebugKotlin/local-state/build-history.bin differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/outputs/logs/manifest-merger-debug-report.txt b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/outputs/logs/manifest-merger-debug-report.txt
 new file mode 100644
 index 0000000..a388215
@@ -1100,9 +1141,37 @@ index 0000000..a388215
 +		INJECTED from /Users/nayifnoushad/Documents/Projects/NuvioStreaming/node_modules/react-native-video/android/src/main/AndroidManifestNew.xml
 +	android:minSdkVersion
 +		INJECTED from /Users/nayifnoushad/Documents/Projects/NuvioStreaming/node_modules/react-native-video/android/src/main/AndroidManifestNew.xml
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$1.class.uniqueId3 b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$1.class.uniqueId3
+new file mode 100644
+index 0000000..2a5b980
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$1.class.uniqueId3 differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$2.class.uniqueId5 b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$2.class.uniqueId5
+new file mode 100644
+index 0000000..750c145
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$2.class.uniqueId5 differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$3.class.uniqueId1 b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$3.class.uniqueId1
+new file mode 100644
+index 0000000..19b4277
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$3.class.uniqueId1 differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$4.class.uniqueId6 b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$4.class.uniqueId6
+new file mode 100644
+index 0000000..9f6af89
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$4.class.uniqueId6 differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$OnAudioFocusChangedListener.class.uniqueId2 b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$OnAudioFocusChangedListener.class.uniqueId2
+new file mode 100644
+index 0000000..99b4560
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$OnAudioFocusChangedListener.class.uniqueId2 differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$RNVLoadControl.class.uniqueId4 b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$RNVLoadControl.class.uniqueId4
+new file mode 100644
+index 0000000..077afc1
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView$RNVLoadControl.class.uniqueId4 differ
+diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView.class.uniqueId0 b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView.class.uniqueId0
+new file mode 100644
+index 0000000..4d14dd4
+Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/compileTransaction/stash-dir/ReactExoplayerView.class.uniqueId0 differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/previous-compilation-data.bin b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/previous-compilation-data.bin
 new file mode 100644
-index 0000000..b63c0e3
+index 0000000..0f0a9cf
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/compileDebugJavaWithJavac/previous-compilation-data.bin differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/META-INF/react-native-video_debug.kotlin_module b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/META-INF/react-native-video_debug.kotlin_module
 new file mode 100644
@@ -1214,11 +1283,11 @@ index 0000000..763511c
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/common/api/Source.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/common/api/SubtitleStyle$Companion.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/common/api/SubtitleStyle$Companion.class
 new file mode 100644
-index 0000000..1ef82f1
+index 0000000..efa138a
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/common/api/SubtitleStyle$Companion.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/common/api/SubtitleStyle.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/common/api/SubtitleStyle.class
 new file mode 100644
-index 0000000..4ebb38c
+index 0000000..c328ffb
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/common/api/SubtitleStyle.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/common/api/TimedMetadata.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/common/api/TimedMetadata.class
 new file mode 100644
@@ -1314,15 +1383,15 @@ index 0000000..7d79368
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/DefaultReactExoplayerConfig.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/ExoPlayerView$Companion.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/ExoPlayerView$Companion.class
 new file mode 100644
-index 0000000..345dd50
+index 0000000..7c35b62
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/ExoPlayerView$Companion.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/ExoPlayerView$playerListener$1.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/ExoPlayerView$playerListener$1.class
 new file mode 100644
-index 0000000..4dcc80e
+index 0000000..055451a
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/ExoPlayerView$playerListener$1.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/ExoPlayerView.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/ExoPlayerView.class
 new file mode 100644
-index 0000000..df0ace7
+index 0000000..be801e5
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/ExoPlayerView.class differ
 diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/FullScreenPlayerView$KeepScreenOnUpdater$Companion.class b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/exoplayer/FullScreenPlayerView$KeepScreenOnUpdater$Companion.class
 new file mode 100644
@@ -1452,11 +1521,377 @@ diff --git a/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda
 new file mode 100644
 index 0000000..0143f64
 Binary files /dev/null and b/node_modules/react-native-video/android/buildOutput_a15d4dee7fc4eda61b91308cbb6a2e72/tmp/kotlin-classes/debug/com/brentvatne/receiver/PictureInPictureReceiver.class differ
+diff --git a/node_modules/react-native-video/android/src/main/java/com/brentvatne/common/api/SubtitleStyle.kt b/node_modules/react-native-video/android/src/main/java/com/brentvatne/common/api/SubtitleStyle.kt
+index 1ac0fd0..953eb59 100644
+--- a/node_modules/react-native-video/android/src/main/java/com/brentvatne/common/api/SubtitleStyle.kt
++++ b/node_modules/react-native-video/android/src/main/java/com/brentvatne/common/api/SubtitleStyle.kt
+@@ -1,5 +1,6 @@
+ package com.brentvatne.common.api
+ 
++import android.graphics.Color
+ import com.brentvatne.common.toolbox.ReactBridgeUtils
+ import com.facebook.react.bridge.ReadableMap
+ 
+@@ -22,6 +23,17 @@ class SubtitleStyle public constructor() {
+     var subtitlesFollowVideo = true
+         private set
+ 
++    // Extended styling (used by ExoPlayerView via Media3 SubtitleView)
++    // Stored as Android color ints to avoid parsing multiple times.
++    var textColor: Int? = null
++        private set
++    var backgroundColor: Int? = null
++        private set
++    var edgeType: String? = null
++        private set
++    var edgeColor: Int? = null
++        private set
++
+     companion object {
+         private const val PROP_FONT_SIZE_TRACK = "fontSize"
+         private const val PROP_PADDING_BOTTOM = "paddingBottom"
+@@ -31,6 +43,21 @@ class SubtitleStyle public constructor() {
+         private const val PROP_OPACITY = "opacity"
+         private const val PROP_SUBTITLES_FOLLOW_VIDEO = "subtitlesFollowVideo"
+ 
++        // Extended props (optional)
++        private const val PROP_TEXT_COLOR = "textColor"
++        private const val PROP_BACKGROUND_COLOR = "backgroundColor"
++        private const val PROP_EDGE_TYPE = "edgeType"
++        private const val PROP_EDGE_COLOR = "edgeColor"
++
++        private fun parseColorOrNull(value: String?): Int? {
++            if (value.isNullOrBlank()) return null
++            return try {
++                Color.parseColor(value)
++            } catch (_: IllegalArgumentException) {
++                null
++            }
++        }
++
+         @JvmStatic
+         fun parse(src: ReadableMap?): SubtitleStyle {
+             val subtitleStyle = SubtitleStyle()
+@@ -41,6 +68,13 @@ class SubtitleStyle public constructor() {
+             subtitleStyle.paddingRight = ReactBridgeUtils.safeGetInt(src, PROP_PADDING_RIGHT, 0)
+             subtitleStyle.opacity = ReactBridgeUtils.safeGetFloat(src, PROP_OPACITY, 1f)
+             subtitleStyle.subtitlesFollowVideo = ReactBridgeUtils.safeGetBool(src, PROP_SUBTITLES_FOLLOW_VIDEO, true)
++
++            // Extended styling
++            subtitleStyle.textColor = parseColorOrNull(ReactBridgeUtils.safeGetString(src, PROP_TEXT_COLOR, null))
++            subtitleStyle.backgroundColor = parseColorOrNull(ReactBridgeUtils.safeGetString(src, PROP_BACKGROUND_COLOR, null))
++            subtitleStyle.edgeType = ReactBridgeUtils.safeGetString(src, PROP_EDGE_TYPE, null)
++            subtitleStyle.edgeColor = parseColorOrNull(ReactBridgeUtils.safeGetString(src, PROP_EDGE_COLOR, null))
++
+             return subtitleStyle
+         }
+     }
+diff --git a/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.kt b/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.kt
+index bb945fe..2d3f8ca 100644
+--- a/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.kt
++++ b/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.kt
+@@ -10,11 +10,14 @@ import android.widget.FrameLayout
+ import android.widget.TextView
+ import androidx.media3.common.Player
+ import androidx.media3.common.Timeline
++import androidx.media3.common.text.CueGroup
+ import androidx.media3.common.util.UnstableApi
+ import androidx.media3.exoplayer.ExoPlayer
+ import androidx.media3.ui.AspectRatioFrameLayout
++import androidx.media3.ui.CaptionStyleCompat
+ import androidx.media3.ui.DefaultTimeBar
+ import androidx.media3.ui.PlayerView
++import androidx.media3.ui.SubtitleView
+ import com.brentvatne.common.api.ResizeMode
+ import com.brentvatne.common.api.SubtitleStyle
+ 
+@@ -52,15 +55,58 @@ class ExoPlayerView @JvmOverloads constructor(context: Context, attrs: Attribute
+         resizeMode = androidx.media3.ui.AspectRatioFrameLayout.RESIZE_MODE_FIT
+     }
+ 
++    /**
++     * Subtitles rendered in a full-size overlay (NOT inside PlayerView's content frame).
++     * This keeps subtitles anchored in-place even when the video surface/content frame moves
++     * due to aspect ratio / resizeMode changes.
++     *
++     * Controlled by SubtitleStyle.subtitlesFollowVideo.
++     */
++    private val overlaySubtitleView = SubtitleView(context).apply {
++        layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
++        visibility = View.GONE
++        // We control styling via SubtitleStyle; don't pull Android system caption defaults.
++        setApplyEmbeddedStyles(true)
++        setApplyEmbeddedFontSizes(true)
++    }
++
++    private fun updateSubtitleRenderingMode() {
++        val internalSubtitleView = playerView.subtitleView
++        val followVideo = localStyle.subtitlesFollowVideo
++        val shouldShow = localStyle.opacity != 0.0f
++
++        if (followVideo) {
++            internalSubtitleView?.visibility = if (shouldShow) View.VISIBLE else View.GONE
++            overlaySubtitleView.visibility = View.GONE
++        } else {
++            // Hard-disable PlayerView's internal subtitle view. PlayerView can recreate/toggle this view
++            // during resize/layout, so we re-assert this in multiple lifecycle points.
++            internalSubtitleView?.visibility = View.GONE
++            internalSubtitleView?.alpha = 0f
++            overlaySubtitleView.visibility = if (shouldShow) View.VISIBLE else View.GONE
++            overlaySubtitleView.alpha = 1f
++        }
++    }
++
+     init {
+         // Add PlayerView with explicit layout parameters
+         val playerViewLayoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+         addView(playerView, playerViewLayoutParams)
+ 
++        // Add overlay subtitles above PlayerView (so it doesn't move with video content frame)
++        val subtitleOverlayLayoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
++        addView(overlaySubtitleView, subtitleOverlayLayoutParams)
++
+         // Add live badge with its own layout parameters
+         val liveBadgeLayoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
+         liveBadgeLayoutParams.setMargins(16, 16, 16, 16)
+         addView(liveBadge, liveBadgeLayoutParams)
++
++        // PlayerView may internally recreate its subtitle view during relayouts (e.g. resizeMode changes).
++        // Ensure our rendering mode is re-applied whenever PlayerView lays out.
++        playerView.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
++            updateSubtitleRenderingMode()
++        }
+     }
+ 
+     fun setPlayer(player: ExoPlayer?) {
+@@ -80,6 +126,10 @@ class ExoPlayerView @JvmOverloads constructor(context: Context, attrs: Attribute
+                 playerView.resizeMode = resizeMode
+             }
+         }
++
++        // Re-assert subtitle rendering mode for the current style.
++        updateSubtitleRenderingMode()
++        applySubtitleStyle(localStyle)
+     }
+ 
+     fun getPlayerView(): PlayerView = playerView
+@@ -108,23 +158,63 @@ class ExoPlayerView @JvmOverloads constructor(context: Context, attrs: Attribute
+     }
+ 
+     fun setSubtitleStyle(style: SubtitleStyle) {
++        localStyle = style
++        applySubtitleStyle(localStyle)
++    }
++
++    private fun applySubtitleStyle(style: SubtitleStyle) {
++        updateSubtitleRenderingMode()
++
+         playerView.subtitleView?.let { subtitleView ->
+-            // Reset to defaults
+-            subtitleView.setUserDefaultStyle()
+-            subtitleView.setUserDefaultTextSize()
++            // Important:
++            // Avoid inheriting Android system caption settings via setUserDefaultStyle(),
++            // because those can force a background/window that the app doesn't want.
++            val resolvedTextColor = style.textColor ?: CaptionStyleCompat.DEFAULT.foregroundColor
++            val resolvedBackgroundColor = style.backgroundColor ?: Color.TRANSPARENT
++            val resolvedEdgeColor = style.edgeColor ?: Color.BLACK
++
++            val resolvedEdgeType = when (style.edgeType?.lowercase()) {
++                "outline" -> CaptionStyleCompat.EDGE_TYPE_OUTLINE
++                "shadow" -> CaptionStyleCompat.EDGE_TYPE_DROP_SHADOW
++                else -> CaptionStyleCompat.EDGE_TYPE_NONE
++            }
++
++            // windowColor MUST be transparent to avoid the "caption window" background.
++            val captionStyle = CaptionStyleCompat(
++                resolvedTextColor,
++                resolvedBackgroundColor,
++                Color.TRANSPARENT,
++                resolvedEdgeType,
++                resolvedEdgeColor,
++                null
++            )
++            subtitleView.setStyle(captionStyle)
+ 
+-            // Apply custom styling
++            // Text size: if not provided, fall back to user default size.
+             if (style.fontSize > 0) {
+-                subtitleView.setFixedTextSize(android.util.TypedValue.COMPLEX_UNIT_SP, style.fontSize.toFloat())
++                // Use DIP so the value matches React Native's dp-based fontSize more closely.
++                // SP would multiply by system fontScale and makes "30" look larger than RN "30".
++                subtitleView.setFixedTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, style.fontSize.toFloat())
++            } else {
++                subtitleView.setUserDefaultTextSize()
+             }
+ 
++            // Horizontal padding is still useful (safe area); vertical offset is handled via bottomPaddingFraction.
+             subtitleView.setPadding(
+                 style.paddingLeft,
+                 style.paddingTop,
+                 style.paddingRight,
+-                style.paddingBottom
++                0
+             )
+ 
++            // Bottom offset for *internal* subtitles:
++            // Use Media3 SubtitleView's bottomPaddingFraction (moves cues up) rather than raw view padding.
++            if (style.paddingBottom > 0 && playerView.height > 0) {
++                val fraction = (style.paddingBottom.toFloat() / playerView.height.toFloat())
++                    .coerceIn(0f, 0.9f)
++                subtitleView.setBottomPaddingFraction(fraction)
++            }
++
+             if (style.opacity != 0.0f) {
+                 subtitleView.alpha = style.opacity
+                 subtitleView.visibility = android.view.View.VISIBLE
+@@ -132,7 +222,59 @@ class ExoPlayerView @JvmOverloads constructor(context: Context, attrs: Attribute
+                 subtitleView.visibility = android.view.View.GONE
+             }
+         }
+-        localStyle = style
++
++        // Apply the same styling to the overlay subtitle view.
++        run {
++            val subtitleView = overlaySubtitleView
++
++            val resolvedTextColor = style.textColor ?: CaptionStyleCompat.DEFAULT.foregroundColor
++            val resolvedBackgroundColor = style.backgroundColor ?: Color.TRANSPARENT
++            val resolvedEdgeColor = style.edgeColor ?: Color.BLACK
++
++            val resolvedEdgeType = when (style.edgeType?.lowercase()) {
++                "outline" -> CaptionStyleCompat.EDGE_TYPE_OUTLINE
++                "shadow" -> CaptionStyleCompat.EDGE_TYPE_DROP_SHADOW
++                else -> CaptionStyleCompat.EDGE_TYPE_NONE
++            }
++
++            val captionStyle = CaptionStyleCompat(
++                resolvedTextColor,
++                resolvedBackgroundColor,
++                Color.TRANSPARENT,
++                resolvedEdgeType,
++                resolvedEdgeColor,
++                null
++            )
++            subtitleView.setStyle(captionStyle)
++
++            if (style.fontSize > 0) {
++                // Use DIP so the value matches React Native's dp-based fontSize more closely.
++                subtitleView.setFixedTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, style.fontSize.toFloat())
++            } else {
++                subtitleView.setUserDefaultTextSize()
++            }
++
++            subtitleView.setPadding(
++                style.paddingLeft,
++                style.paddingTop,
++                style.paddingRight,
++                0
++            )
++
++            // Bottom offset relative to the full view height (stable even when video content frame moves).
++            val h = height.takeIf { it > 0 } ?: subtitleView.height
++            if (style.paddingBottom > 0 && h > 0) {
++                val fraction = (style.paddingBottom.toFloat() / h.toFloat())
++                    .coerceIn(0f, 0.9f)
++                subtitleView.setBottomPaddingFraction(fraction)
++            } else {
++                subtitleView.setBottomPaddingFraction(0f)
++            }
++
++            if (style.opacity != 0.0f) {
++                subtitleView.alpha = style.opacity
++            }
++        }
+     }
+ 
+     fun setShutterColor(color: Int) {
+@@ -223,6 +365,13 @@ class ExoPlayerView @JvmOverloads constructor(context: Context, attrs: Attribute
+     }
+ 
+     private val playerListener = object : Player.Listener {
++        override fun onCues(cueGroup: CueGroup) {
++            // Keep overlay subtitles in sync. This does NOT interfere with PlayerView's own subtitle rendering.
++            // When subtitlesFollowVideo=false, overlaySubtitleView is the visible one.
++            updateSubtitleRenderingMode()
++            overlaySubtitleView.setCues(cueGroup.cues)
++        }
++
+         override fun onTimelineChanged(timeline: Timeline, reason: Int) {
+             playerView.post {
+                 playerView.requestLayout()
+@@ -284,6 +433,9 @@ class ExoPlayerView @JvmOverloads constructor(context: Context, attrs: Attribute
+             pendingResizeMode?.let { resizeMode ->
+                 playerView.resizeMode = resizeMode
+             }
++            // Re-apply bottomPaddingFraction once we have a concrete height.
++            updateSubtitleRenderingMode()
++            applySubtitleStyle(localStyle)
+         }
+     }
+ }
 diff --git a/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
-index f175dec..87e436a 100644
+index 539ecfd..54312f7 100644
 --- a/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
 +++ b/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
-@@ -726,7 +726,7 @@ public class ReactExoplayerView extends FrameLayout implements
+@@ -161,10 +161,11 @@ public class ReactExoplayerView extends FrameLayout implements
+         AdEvent.AdEventListener,
+         AdErrorEvent.AdErrorListener {
+ 
+-    public static final double DEFAULT_MAX_HEAP_ALLOCATION_PERCENT = 1;
++    public static final double DEFAULT_MAX_HEAP_ALLOCATION_PERCENT = 0.5;
+     public static final double DEFAULT_MIN_BUFFER_MEMORY_RESERVE = 0;
+ 
+     private static final String TAG = "ReactExoplayerView";
++    private static final ExecutorService SHARED_EXECUTOR = Executors.newSingleThreadExecutor();
+ 
+     private static final CookieManager DEFAULT_COOKIE_MANAGER;
+     private static final int SHOW_PROGRESS = 1;
+@@ -211,6 +212,7 @@ public class ReactExoplayerView extends FrameLayout implements
+     private float audioVolume = 1f;
+     private int maxBitRate = 0;
+     private boolean hasDrmFailed = false;
++    private int drmRetryCount = 0;
+     private boolean isUsingContentResolution = false;
+     private boolean selectTrackWhenReady = false;
+     private final Handler mainHandler;
+@@ -243,7 +245,7 @@ public class ReactExoplayerView extends FrameLayout implements
+     private BufferingStrategy.BufferingStrategyEnum bufferingStrategy;
+     private boolean disableDisconnectError;
+     private boolean preventsDisplaySleepDuringVideoPlayback = true;
+-    private float mProgressUpdateInterval = 250.0f;
++    private float mProgressUpdateInterval = 1000.0f;
+     protected boolean playInBackground = false;
+     private boolean mReportBandwidth = false;
+     private boolean controls = false;
+@@ -643,9 +645,12 @@ public class ReactExoplayerView extends FrameLayout implements
+                     PictureInPictureUtil.applyAutoEnterEnabled(themedReactContext, pictureInPictureParamsBuilder, this.enterPictureInPictureOnLeave);
+                 }
+                 if (!source.isLocalAssetFile() && !source.isAsset() && source.getBufferConfig().getCacheSize() > 0) {
++                    long requestedCacheSize = source.getBufferConfig().getCacheSize();
++                    long MAX_SAFE_CACHE_SIZE = 100L * 1024 * 1024;
++                    long effectiveCacheSize = Math.min(requestedCacheSize, MAX_SAFE_CACHE_SIZE);
+                     RNVSimpleCache.INSTANCE.setSimpleCache(
+                             this.getContext(),
+-                            source.getBufferConfig().getCacheSize()
++                            (int) effectiveCacheSize
+                     );
+                     useCache = true;
+                 } else {
+@@ -654,9 +659,10 @@ public class ReactExoplayerView extends FrameLayout implements
+                 if (playerNeedsSource) {
+                     // Will force display of shutter view if needed
+                     exoPlayerView.invalidateAspectRatio();
++                    drmRetryCount = 0;
++                    hasDrmFailed = false;
+                     // DRM session manager creation must be done on a different thread to prevent crashes so we start a new thread
+-                    ExecutorService es = Executors.newSingleThreadExecutor();
+-                    es.execute(() -> {
++                    SHARED_EXECUTOR.execute(() -> {
+                         // DRM initialization must run on a different thread
+                         if (viewHasDropped && runningSource == source) {
+                             return;
+@@ -727,7 +733,7 @@ public class ReactExoplayerView extends FrameLayout implements
  
          DefaultRenderersFactory renderersFactory =
                  new DefaultRenderersFactory(getContext())
@@ -1465,3 +1900,110 @@ index f175dec..87e436a 100644
                          .setEnableDecoderFallback(true)
                          .forceEnableMediaCodecAsynchronousQueueing();
  
+@@ -851,13 +857,10 @@ public class ReactExoplayerView extends FrameLayout implements
+         MediaSource mediaSource = Objects.requireNonNullElse(mediaSourceWithAds, videoSource);
+ 
+         // wait for player to be set
+-        while (player == null) {
+-            try {
+-                wait();
+-            } catch (InterruptedException ex) {
+-                Thread.currentThread().interrupt();
+-                DebugLog.e(TAG, ex.toString());
+-            }
++        if (player == null) {
++           DebugLog.w(TAG, "Player not ready yet, aborting source initialization");
++           playerNeedsSource = true;
++           return;
+         }
+ 
+         boolean haveResumePosition = resumeWindow != C.INDEX_UNSET;
+@@ -1484,8 +1487,7 @@ public class ReactExoplayerView extends FrameLayout implements
+             ArrayList<Track> textTracks  = getTextTrackInfo();
+ 
+             if (source.getContentStartTime() != -1) {
+-                ExecutorService es = Executors.newSingleThreadExecutor();
+-                es.execute(() -> {
++                SHARED_EXECUTOR.execute(() -> {
+                     // To prevent ANRs caused by getVideoTrackInfo we run this on a different thread and notify the player only when we're done
+                     ArrayList<VideoTrack> videoTracks = getVideoTrackInfoFromManifest();
+                     if (videoTracks != null) {
+@@ -1596,12 +1598,11 @@ public class ReactExoplayerView extends FrameLayout implements
+     // We need retry count to in case where minefest request fails from poor network conditions
+     @WorkerThread
+     private ArrayList<VideoTrack> getVideoTrackInfoFromManifest(int retryCount) {
+-        ExecutorService es = Executors.newSingleThreadExecutor();
+         final DataSource dataSource = this.mediaDataSourceFactory.createDataSource();
+         final Uri sourceUri = source.getUri();
+         final long startTime = source.getContentStartTime() * 1000 - 100; // s -> ms with 100ms offset
+ 
+-        Future<ArrayList<VideoTrack>> result = es.submit(new Callable() {
++        Future<ArrayList<VideoTrack>> result = SHARED_EXECUTOR.submit(new Callable<ArrayList<VideoTrack>>() {
+             final DataSource ds = dataSource;
+             final Uri uri = sourceUri;
+             final long startTimeUs = startTime * 1000; // ms -> us
+@@ -1648,7 +1649,6 @@ public class ReactExoplayerView extends FrameLayout implements
+             if (results == null && retryCount < 1) {
+                 return this.getVideoTrackInfoFromManifest(++retryCount);
+             }
+-            es.shutdown();
+             return results;
+         } catch (Exception e) {
+             DebugLog.w(TAG, "error in getVideoTrackInfoFromManifest handling request:" + e.getMessage());
+@@ -1939,12 +1939,15 @@ public class ReactExoplayerView extends FrameLayout implements
+             case PlaybackException.ERROR_CODE_DRM_UNSPECIFIED:
+                 if (!hasDrmFailed) {
+                     // When DRM fails to reach the app level certificate server it will fail with a source error so we assume that it is DRM related and try one more time
+-                    hasDrmFailed = true;
+-                    playerNeedsSource = true;
+-                    updateResumePosition();
+-                    initializePlayer();
+-                    setPlayWhenReady(true);
+-                    return;
++                    if (drmRetryCount < 1) {
++                        drmRetryCount++;
++                        hasDrmFailed = true;
++                        playerNeedsSource = true;
++                        updateResumePosition();
++                        initializePlayer();
++                        setPlayWhenReady(true);
++                        return;
++                    }
+                 }
+                 break;
+             default:
+@@ -2123,6 +2126,16 @@ public class ReactExoplayerView extends FrameLayout implements
+                 if (textRendererIndex != C.INDEX_UNSET) {
+                     TrackGroupArray groups = info.getTrackGroups(textRendererIndex);
+                     boolean trackFound = false;
++                    // NOTE:
++                    // RNVideo emits textTracks as a flattened list (Track.index is assigned using textTracks.size()).
++                    // However, previous logic compared the requested "index" against the *trackIndex within a group*,
++                    // which makes any index > 0 either select the wrong subtitle or keep the first one.
++                    // Here we interpret type="index" as the flattened index, matching the JS list order.
++                    int targetFlatIndex = -1;
++                    if ("index".equals(type)) {
++                        targetFlatIndex = ReactBridgeUtils.safeParseInt(value, -1);
++                    }
++                    int flatIndex = 0;
+                     
+                     for (int groupIndex = 0; groupIndex < groups.length; groupIndex++) {
+                         TrackGroup group = groups.get(groupIndex);
+@@ -2135,8 +2148,7 @@ public class ReactExoplayerView extends FrameLayout implements
+                             } else if ("title".equals(type) && format.label != null && format.label.equals(value)) {
+                                 isMatch = true;
+                             } else if ("index".equals(type)) {
+-                                int targetIndex = ReactBridgeUtils.safeParseInt(value, -1);
+-                                if (targetIndex == trackIndex) {
++                                if (targetFlatIndex != -1 && targetFlatIndex == flatIndex) {
+                                     isMatch = true;
+                                 }
+                             }
+@@ -2148,6 +2160,7 @@ public class ReactExoplayerView extends FrameLayout implements
+                                 trackFound = true;
+                                 break;
+                             }
++                            flatIndex++;
+                         }
+                         if (trackFound) break;
+                     }

plugins/mpv-bridge/withMpvBridge.js

@@ -1,94 +0,0 @@
-const { withDangerousMod, withMainApplication, withMainActivity } = require('@expo/config-plugins');
-const fs = require('fs');
-const path = require('path');
-
-/**
- * Copy MPV native files to android project
- */
-function copyMpvFiles(projectRoot) {
-    const sourceDir = path.join(projectRoot, 'plugins', 'mpv-bridge', 'android', 'mpv');
-    const destDir = path.join(projectRoot, 'android', 'app', 'src', 'main', 'java', 'com', 'nuvio', 'app', 'mpv');
-
-    // Create destination directory if it doesn't exist
-    if (!fs.existsSync(destDir)) {
-        fs.mkdirSync(destDir, { recursive: true });
-    }
-
-    // Copy all files from source to destination
-    if (fs.existsSync(sourceDir)) {
-        const files = fs.readdirSync(sourceDir);
-        files.forEach(file => {
-            const srcFile = path.join(sourceDir, file);
-            const destFile = path.join(destDir, file);
-            if (fs.statSync(srcFile).isFile()) {
-                fs.copyFileSync(srcFile, destFile);
-                console.log(`[mpv-bridge] Copied ${file} to android project`);
-            }
-        });
-    }
-}
-
-/**
- * Modify MainApplication.kt to include MpvPackage
- */
-function withMpvMainApplication(config) {
-    return withMainApplication(config, async (config) => {
-        let contents = config.modResults.contents;
-
-        // Add import for MpvPackage
-        const mpvImport = 'import com.nuvio.app.mpv.MpvPackage';
-        if (!contents.includes(mpvImport)) {
-            // Add import after the last import statement
-            const lastImportIndex = contents.lastIndexOf('import ');
-            const endOfLastImport = contents.indexOf('\n', lastImportIndex);
-            contents = contents.slice(0, endOfLastImport + 1) + mpvImport + '\n' + contents.slice(endOfLastImport + 1);
-        }
-
-        // Add MpvPackage to the packages list
-        const packagesPattern = /override fun getPackages\(\): List<ReactPackage> \{[\s\S]*?return PackageList\(this\)\.packages\.apply \{/;
-        if (contents.match(packagesPattern) && !contents.includes('MpvPackage()')) {
-            contents = contents.replace(
-                packagesPattern,
-                (match) => match + '\n          add(MpvPackage())'
-            );
-        }
-
-        config.modResults.contents = contents;
-        return config;
-    });
-}
-
-/**
- * Modify MainActivity.kt to handle MPV lifecycle if needed
- */
-function withMpvMainActivity(config) {
-    return withMainActivity(config, async (config) => {
-        // Currently no modifications needed for MainActivity
-        // But this hook is available for future enhancements
-        return config;
-    });
-}
-
-/**
- * Main plugin function
- */
-function withMpvBridge(config) {
-    // Copy native files during prebuild
-    config = withDangerousMod(config, [
-        'android',
-        async (config) => {
-            copyMpvFiles(config.modRequest.projectRoot);
-            return config;
-        },
-    ]);
-
-    // Modify MainApplication to register the package
-    config = withMpvMainApplication(config);
-
-    // Modify MainActivity if needed
-    config = withMpvMainActivity(config);
-
-    return config;
-}
-
-module.exports = withMpvBridge;

src/assets/qualitybadge/VISION.svg

@@ -1,10 +0,0 @@
-<svg width="50" height="14" viewBox="0 0 50 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="49" height="13" rx="1.5" stroke="#575757"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 3.5H3V10.5H11.9999V3.5ZM4.49995 9.5C4.32871 9.5 4.16151 9.48267 3.99995 9.44995V4.55005C4.10415 4.52905 4.21069 4.51416 4.31915 4.50635C4.33529 4.50513 4.35146 4.50439 4.36768 4.50366L4.40562 4.50195C4.43691 4.50073 4.46836 4.5 4.49995 4.5C5.88065 4.5 6.99995 5.61938 6.99995 7C6.99995 8.38062 5.88065 9.5 4.49995 9.5ZM10.4999 9.5C10.5348 9.5 10.5695 9.49927 10.6041 9.4978C10.6614 9.49561 10.7183 9.49146 10.7746 9.48535C10.8508 9.47681 10.926 9.46509 10.9999 9.44995V4.55005C10.9079 4.53149 10.814 4.51782 10.7187 4.50952C10.6466 4.50317 10.5736 4.5 10.4999 4.5C9.11924 4.5 7.99995 5.61938 7.99995 7C7.99995 8.38062 9.11924 9.5 10.4999 9.5Z" fill="#CBCBCB"/>
-<path d="M20.2905 4.092L17.8875 10.356H16.6095L14.2065 4.092H15.5385L17.2755 8.88L19.0035 4.092H20.2905Z" fill="#CBCBCB"/>
-<path d="M22.6024 10.356H21.3784V4.092H22.6024V10.356Z" fill="#CBCBCB"/>
-<path d="M26.4969 10.5C25.7649 10.5 25.1679 10.332 24.7059 9.996C24.2499 9.66 23.9529 9.192 23.8149 8.592H25.0389C25.1169 8.844 25.2819 9.048 25.5339 9.204C25.7919 9.354 26.1069 9.429 26.4789 9.429C26.8329 9.429 27.1239 9.363 27.3519 9.231C27.5859 9.093 27.7029 8.895 27.7029 8.637C27.7029 8.487 27.6699 8.358 27.6039 8.25C27.5379 8.136 27.4149 8.04 27.2349 7.962C27.0549 7.878 26.7939 7.809 26.4519 7.755L25.7499 7.638C25.1679 7.542 24.7299 7.356 24.4359 7.08C24.1479 6.804 24.0039 6.408 24.0039 5.892C24.0039 5.496 24.1089 5.154 24.3189 4.866C24.5349 4.572 24.8229 4.347 25.1829 4.191C25.5489 4.029 25.9569 3.948 26.4069 3.948C27.0609 3.948 27.6099 4.104 28.0539 4.416C28.4979 4.722 28.7709 5.172 28.8729 5.766H27.6489C27.5889 5.514 27.4509 5.328 27.2349 5.208C27.0189 5.082 26.7459 5.019 26.4159 5.019C26.0499 5.019 25.7619 5.088 25.5519 5.226C25.3419 5.358 25.2369 5.544 25.2369 5.784C25.2369 6 25.3149 6.168 25.4709 6.288C25.6329 6.408 25.9509 6.507 26.4249 6.585L27.0999 6.693C28.3299 6.891 28.9449 7.5 28.9449 8.52C28.9449 8.94 28.8399 9.3 28.6299 9.6C28.4199 9.894 28.1289 10.119 27.7569 10.275C27.3909 10.425 26.9709 10.5 26.4969 10.5Z" fill="#CBCBCB"/>
-<path d="M31.4959 10.356H30.2719V4.092H31.4959V10.356Z" fill="#CBCBCB"/>
-<path d="M36.0024 10.5C35.5404 10.5 35.1144 10.419 34.7244 10.257C34.3404 10.095 34.0074 9.867 33.7254 9.573C33.4434 9.279 33.2244 8.934 33.0684 8.538C32.9124 8.136 32.8344 7.698 32.8344 7.224C32.8344 6.75 32.9124 6.315 33.0684 5.919C33.2244 5.517 33.4434 5.169 33.7254 4.875C34.0074 4.581 34.3404 4.353 34.7244 4.191C35.1144 4.029 35.5404 3.948 36.0024 3.948C36.4644 3.948 36.8874 4.029 37.2714 4.191C37.6614 4.353 37.9974 4.581 38.2794 4.875C38.5674 5.169 38.7894 5.517 38.9454 5.919C39.1014 6.315 39.1794 6.75 39.1794 7.224C39.1794 7.698 39.1014 8.136 38.9454 8.538C38.7894 8.934 38.5674 9.279 38.2794 9.573C37.9974 9.867 37.6614 10.095 37.2714 10.257C36.8874 10.419 36.4644 10.5 36.0024 10.5ZM36.0024 9.402C36.3804 9.402 36.7134 9.312 37.0014 9.132C37.2954 8.946 37.5234 8.691 37.6854 8.367C37.8534 8.037 37.9374 7.656 37.9374 7.224C37.9374 6.792 37.8534 6.414 37.6854 6.09C37.5234 5.76 37.2954 5.505 37.0014 5.325C36.7134 5.139 36.3804 5.046 36.0024 5.046C35.6304 5.046 35.2974 5.139 35.0034 5.325C34.7154 5.505 34.4874 5.76 34.3194 6.09C34.1574 6.414 34.0764 6.792 34.0764 7.224C34.0764 7.656 34.1574 8.037 34.3194 8.367C34.4874 8.691 34.7154 8.946 35.0034 9.132C35.2974 9.312 35.6304 9.402 36.0024 9.402Z" fill="#CBCBCB"/>
-<path d="M40.519 10.356V4.092H41.707L44.812 8.484V4.092H46V10.356H44.812L41.707 5.964V10.356H40.519Z" fill="#CBCBCB"/>
-</svg>

src/components/SplashScreen.tsx

@@ -7,34 +7,42 @@ interface SplashScreenProps {
 }
 
 const SplashScreen = ({ onFinish }: SplashScreenProps) => {
-  // Animation value for opacity
-  const fadeAnim = new Animated.Value(1);
-
+  // TEMPORARILY DISABLED
   useEffect(() => {
-    // Wait for a short period then start fade out animation
-    const timer = setTimeout(() => {
-      Animated.timing(fadeAnim, {
-        toValue: 0,
-        duration: 400,
-        useNativeDriver: true,
-      }).start(() => {
-        // Call onFinish when animation completes
+    // Immediately call onFinish to skip splash screen
         onFinish();
-      });
-    }, 300); // Show splash for 0.8 seconds
+  }, [onFinish]);
 
-    return () => clearTimeout(timer);
-  }, [fadeAnim, onFinish]);
+  return null;
 
-  return (
-    <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
-      <Image
-        source={require('../assets/splash-icon-new.png')}
-        style={styles.image}
-        resizeMode="contain"
-      />
-    </Animated.View>
-  );
+  // Animation value for opacity
+  // const fadeAnim = new Animated.Value(1);
+
+  // useEffect(() => {
+  //   // Wait for a short period then start fade out animation
+  //   const timer = setTimeout(() => {
+  //     Animated.timing(fadeAnim, {
+  //       toValue: 0,
+  //       duration: 400,
+  //       useNativeDriver: true,
+  //     }).start(() => {
+  //       // Call onFinish when animation completes
+  //       onFinish();
+  //     });
+  //   }, 300); // Show splash for 0.8 seconds
+
+  //   return () => clearTimeout(timer);
+  // }, [fadeAnim, onFinish]);
+
+  // return (
+  //   <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
+  //     <Image
+  //       source={require('../assets/splash-icon-new.png')}
+  //       style={styles.image}
+  //       resizeMode="contain"
+  //     />
+  //   </Animated.View>
+  // );
 };
 
 const styles = StyleSheet.create({

src/components/TabletStreamsLayout.tsx

@@ -1,21 +1,20 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect, useState, useCallback, useMemo } from 'react';
 import {
   View,
   Text,
   StyleSheet,
   ActivityIndicator,
-  FlatList,
   Platform,
-  ScrollView,
   TouchableOpacity,
 } from 'react-native';
+import { LegendList } from '@legendapp/list';
 import { LinearGradient } from 'expo-linear-gradient';
 import FastImage from '@d11/react-native-fast-image';
 import { MaterialIcons } from '@expo/vector-icons';
 import { BlurView as ExpoBlurView } from 'expo-blur';
-import Animated, { 
-  useSharedValue, 
-  useAnimatedStyle, 
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
   withTiming,
   withDelay,
   Easing
@@ -45,36 +44,36 @@ interface TabletStreamsLayoutProps {
   metadata?: any;
   type: string;
   currentEpisode?: any;
-  
+
   // Movie logo props
   movieLogoError: boolean;
   setMovieLogoError: (error: boolean) => void;
-  
+
   // Stream-related props
   streamsEmpty: boolean;
   selectedProvider: string;
   filterItems: Array<{ id: string; name: string; }>;
   handleProviderChange: (provider: string) => void;
   activeFetchingScrapers: string[];
-  
+
   // Loading states
   isAutoplayWaiting: boolean;
   autoplayTriggered: boolean;
   showNoSourcesError: boolean;
   showInitialLoading: boolean;
   showStillFetching: boolean;
-  
+
   // Stream rendering props
   sections: Array<{ title: string; addonId: string; data: Stream[]; isEmptyDueToQualityFilter?: boolean } | null>;
   renderSectionHeader: ({ section }: { section: { title: string; addonId: string; isEmptyDueToQualityFilter?: boolean } }) => React.ReactElement;
   handleStreamPress: (stream: Stream) => void;
   openAlert: (title: string, message: string) => void;
-  
+
   // Settings and theme
   settings: any;
   currentTheme: any;
   colors: any;
-  
+
   // Other props
   navigation: RootStackNavigationProp;
   insets: any;
@@ -123,19 +122,19 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
   hasStremioStreamProviders,
 }) => {
   const styles = React.useMemo(() => createStyles(colors), [colors]);
-  
+
   // Animation values for backdrop entrance
   const backdropOpacity = useSharedValue(0);
   const backdropScale = useSharedValue(1.05);
   const [backdropLoaded, setBackdropLoaded] = useState(false);
   const [backdropError, setBackdropError] = useState(false);
-  
+
   // Animation values for content panels
   const leftPanelOpacity = useSharedValue(0);
   const leftPanelTranslateX = useSharedValue(-30);
   const rightPanelOpacity = useSharedValue(0);
   const rightPanelTranslateX = useSharedValue(30);
-  
+
   // Get the backdrop source - prioritize episode thumbnail, then show backdrop, then poster
   // For episodes without thumbnails, use show's backdrop instead of poster
   const backdropSource = React.useMemo(() => {
@@ -149,7 +148,7 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
         backdropError
       });
     }
-    
+
     // If episodeImage failed to load, skip it and use backdrop
     if (backdropError && episodeImage && episodeImage !== metadata?.poster) {
       if (__DEV__) console.log('[TabletStreamsLayout] Episode thumbnail failed, falling back to backdrop');
@@ -158,26 +157,55 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
         return { uri: bannerImage };
       }
     }
-    
+
     // If episodeImage exists and is not the same as poster, use it (real episode thumbnail)
     if (episodeImage && episodeImage !== metadata?.poster && !backdropError) {
       if (__DEV__) console.log('[TabletStreamsLayout] Using episode thumbnail:', episodeImage);
       return { uri: episodeImage };
     }
-    
+
     // If episodeImage is the same as poster (fallback case), prioritize backdrop
     if (bannerImage) {
       if (__DEV__) console.log('[TabletStreamsLayout] Using show backdrop:', bannerImage);
       return { uri: bannerImage };
     }
-    
+
     // No fallback to poster images
-    
+
     if (__DEV__) console.log('[TabletStreamsLayout] No backdrop source found');
     return undefined;
   }, [episodeImage, bannerImage, metadata?.poster, backdropError]);
-  
-  // Animate backdrop when it loads, or animate content immediately if no backdrop
+
+
+  useEffect(() => {
+    if (backdropSource?.uri && !backdropLoaded && !backdropError) {
+
+      const timeoutId = setTimeout(() => {
+
+        leftPanelOpacity.value = withTiming(1, {
+          duration: 600,
+          easing: Easing.out(Easing.cubic)
+        });
+        leftPanelTranslateX.value = withTiming(0, {
+          duration: 600,
+          easing: Easing.out(Easing.cubic)
+        });
+
+        rightPanelOpacity.value = withDelay(200, withTiming(1, {
+          duration: 600,
+          easing: Easing.out(Easing.cubic)
+        }));
+        rightPanelTranslateX.value = withDelay(200, withTiming(0, {
+          duration: 600,
+          easing: Easing.out(Easing.cubic)
+        }));
+      }, 1000);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [backdropSource?.uri, backdropLoaded, backdropError]);
+
+
   useEffect(() => {
     if (backdropSource?.uri && backdropLoaded) {
       // Animate backdrop first
@@ -189,7 +217,7 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
         duration: 1000,
         easing: Easing.out(Easing.cubic)
       });
-      
+
       // Animate content panels with delay after backdrop starts loading
       leftPanelOpacity.value = withDelay(300, withTiming(1, {
         duration: 600,
@@ -199,7 +227,7 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
         duration: 600,
         easing: Easing.out(Easing.cubic)
       }));
-      
+
       rightPanelOpacity.value = withDelay(500, withTiming(1, {
         duration: 600,
         easing: Easing.out(Easing.cubic)
@@ -218,7 +246,7 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
         duration: 600,
         easing: Easing.out(Easing.cubic)
       });
-      
+
       rightPanelOpacity.value = withDelay(200, withTiming(1, {
         duration: 600,
         easing: Easing.out(Easing.cubic)
@@ -229,7 +257,7 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
       }));
     }
   }, [backdropSource?.uri, backdropLoaded, backdropError]);
-  
+
   // Reset animation when episode changes
   useEffect(() => {
     backdropOpacity.value = 0;
@@ -241,28 +269,28 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
     setBackdropLoaded(false);
     setBackdropError(false);
   }, [episodeImage]);
-  
+
   // Animated styles for backdrop
   const backdropAnimatedStyle = useAnimatedStyle(() => ({
     opacity: backdropOpacity.value,
     transform: [{ scale: backdropScale.value }],
   }));
-  
+
   // Animated styles for content panels
   const leftPanelAnimatedStyle = useAnimatedStyle(() => ({
     opacity: leftPanelOpacity.value,
     transform: [{ translateX: leftPanelTranslateX.value }],
   }));
-  
+
   const rightPanelAnimatedStyle = useAnimatedStyle(() => ({
     opacity: rightPanelOpacity.value,
     transform: [{ translateX: rightPanelTranslateX.value }],
   }));
-  
+
   const handleBackdropLoad = () => {
     setBackdropLoaded(true);
   };
-  
+
   const handleBackdropError = () => {
     if (__DEV__) console.log('[TabletStreamsLayout] Backdrop image failed to load:', backdropSource?.uri);
     setBackdropError(true);
@@ -295,8 +323,8 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
             <ActivityIndicator size="large" color={colors.primary} />
             <Text style={styles.loadingText}>
               {isAutoplayWaiting ? 'Finding best stream for autoplay...' :
-               showStillFetching ? 'Still fetching streams…' :
-               'Finding available streams...'}
+                showStillFetching ? 'Still fetching streams…' :
+                  'Finding available streams...'}
             </Text>
           </View>
         );
@@ -310,78 +338,85 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
       }
     }
 
+    // Flatten sections into a single list with header items
+    type ListItem = { type: 'header'; title: string; addonId: string } | { type: 'stream'; stream: Stream; index: number };
+
+    const flatListData: ListItem[] = [];
+    sections
+      .filter(Boolean)
+      .filter(section => section!.data && section!.data.length > 0)
+      .forEach(section => {
+        flatListData.push({ type: 'header', title: section!.title, addonId: section!.addonId });
+        section!.data.forEach((stream, index) => {
+          flatListData.push({ type: 'stream', stream, index });
+        });
+      });
+
+    const renderItem = ({ item }: { item: ListItem }) => {
+      if (item.type === 'header') {
+        return renderSectionHeader({ section: { title: item.title, addonId: item.addonId } });
+      }
+
+      const stream = item.stream;
+      return (
+        <StreamCard
+          stream={stream}
+          onPress={() => handleStreamPress(stream)}
+          index={item.index}
+          isLoading={false}
+          statusMessage={undefined}
+          theme={currentTheme}
+          showLogos={settings.showScraperLogos}
+          scraperLogo={(stream.addonId && scraperLogos[stream.addonId]) || (stream as any).addon ? scraperLogos[(stream.addonId || (stream as any).addon) as string] || null : null}
+          showAlert={(t: string, m: string) => openAlert(t, m)}
+          parentTitle={metadata?.name}
+          parentType={type as 'movie' | 'series'}
+          parentSeason={(type === 'series' || type === 'other') ? currentEpisode?.season_number : undefined}
+          parentEpisode={(type === 'series' || type === 'other') ? currentEpisode?.episode_number : undefined}
+          parentEpisodeTitle={(type === 'series' || type === 'other') ? currentEpisode?.name : undefined}
+          parentPosterUrl={episodeImage || metadata?.poster || undefined}
+          providerName={streams && Object.keys(streams).find(pid => (streams as any)[pid]?.streams?.includes?.(stream))}
+          parentId={id}
+          parentImdbId={imdbId || undefined}
+        />
+      );
+    };
+
+    const keyExtractor = (item: ListItem, index: number) => {
+      if (item.type === 'header') {
+        return `header-${item.addonId}-${index}`;
+      }
+      if (item.stream && item.stream.url) {
+        return `stream-${item.stream.url}-${index}`;
+      }
+      return `empty-${index}`;
+    };
+
+    const ListFooterComponent = () => {
+      if (!(loadingStreams || loadingEpisodeStreams) || !hasStremioStreamProviders) return null;
+      return (
+        <View style={styles.footerLoading}>
+          <ActivityIndicator size="small" color={colors.primary} />
+          <Text style={styles.footerLoadingText}>Loading more sources...</Text>
+        </View>
+      );
+    };
+
     return (
-      <ScrollView
-        style={styles.streamsContent}
+      <LegendList
+        data={flatListData}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        ListFooterComponent={ListFooterComponent}
         contentContainerStyle={[
           styles.streamsContainer,
           { paddingBottom: insets.bottom + 100 }
         ]}
+        style={styles.streamsContent}
         showsVerticalScrollIndicator={false}
-        bounces={true}
-        overScrollMode="never"
-        scrollEventThrottle={16}
-      >
-        {sections.filter(Boolean).map((section, sectionIndex) => (
-          <View key={section!.addonId || sectionIndex}>
-            {renderSectionHeader({ section: section! })}
-            
-            {section!.data && section!.data.length > 0 ? (
-              <FlatList
-                data={section!.data}
-                keyExtractor={(item, index) => {
-                  if (item && item.url) {
-                    return `${item.url}-${sectionIndex}-${index}`;
-                  }
-                  return `empty-${sectionIndex}-${index}`;
-                }}
-                renderItem={({ item, index }) => (
-                  <View>
-                    <StreamCard
-                      stream={item}
-                      onPress={() => handleStreamPress(item)}
-                      index={index}
-                      isLoading={false}
-                      statusMessage={undefined}
-                      theme={currentTheme}
-                      showLogos={settings.showScraperLogos}
-                      scraperLogo={(item.addonId && scraperLogos[item.addonId]) || (item as any).addon ? scraperLogos[(item.addonId || (item as any).addon) as string] || null : null}
-                      showAlert={(t: string, m: string) => openAlert(t, m)}
-                      parentTitle={metadata?.name}
-                      parentType={type as 'movie' | 'series'}
-                      parentSeason={(type === 'series' || type === 'other') ? currentEpisode?.season_number : undefined}
-                      parentEpisode={(type === 'series' || type === 'other') ? currentEpisode?.episode_number : undefined}
-                      parentEpisodeTitle={(type === 'series' || type === 'other') ? currentEpisode?.name : undefined}
-                      parentPosterUrl={episodeImage || metadata?.poster || undefined}
-                      providerName={streams && Object.keys(streams).find(pid => (streams as any)[pid]?.streams?.includes?.(item))}
-                      parentId={id}
-                      parentImdbId={imdbId || undefined}
-                    />
-                  </View>
-                )}
-                scrollEnabled={false}
-                initialNumToRender={6}
-                maxToRenderPerBatch={2}
-                windowSize={3}
-                removeClippedSubviews={true}
-                showsVerticalScrollIndicator={false}
-                getItemLayout={(data, index) => ({
-                  length: 78,
-                  offset: 78 * index,
-                  index,
-                })}
-              />
-            ) : null}
-          </View>
-        ))}
-
-        {(loadingStreams || loadingEpisodeStreams) && hasStremioStreamProviders && (
-          <View style={styles.footerLoading}>
-            <ActivityIndicator size="small" color={colors.primary} />
-            <Text style={styles.footerLoadingText}>Loading more sources...</Text>
-          </View>
-        )}
-      </ScrollView>
+        recycleItems={true}
+        estimatedItemSize={78}
+      />
     );
   };
 
@@ -408,7 +443,7 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
         locations={[0, 0.5, 1]}
         style={styles.tabletFullScreenGradient}
       />
-      
+
       {/* Left Panel: Movie Logo/Episode Info */}
       <Animated.View style={[styles.tabletLeftPanel, leftPanelAnimatedStyle]}>
         {type === 'movie' && metadata ? (

src/components/calendar/CalendarSection.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import { InteractionManager } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
+import { useTranslation } from 'react-i18next';
 import { format, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isToday, isSameDay } from 'date-fns';
 import Animated, { FadeIn } from 'react-native-reanimated';
 import { useTheme } from '../../contexts/ThemeContext';
@@ -16,7 +17,6 @@ import { useTheme } from '../../contexts/ThemeContext';
 const { width } = Dimensions.get('window');
 const COLUMN_COUNT = 7; // 7 days in a week
 const DAY_ITEM_SIZE = (width - 32 - 56) / 7; // Slightly smaller than 1/7 to fit all days
-const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 
 interface CalendarEpisode {
   id: string;
@@ -76,8 +76,19 @@ export const CalendarSection: React.FC<CalendarSectionProps> = ({
   episodes = [], 
   onSelectDate 
 }) => {
+  const { t } = useTranslation();
   const { currentTheme } = useTheme();
   const [currentDate, setCurrentDate] = useState(new Date());
+
+  const weekDays = [
+    t('common.days_short.sun'), 
+    t('common.days_short.mon'), 
+    t('common.days_short.tue'), 
+    t('common.days_short.wed'), 
+    t('common.days_short.thu'), 
+    t('common.days_short.fri'), 
+    t('common.days_short.sat')
+  ];
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
   const scrollViewRef = useRef<ScrollView>(null);
   const [uiReady, setUiReady] = useState(false);

src/components/common/Poster.tsx

@@ -0,0 +1,268 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    Platform,
+    Dimensions,
+    ViewStyle,
+} from 'react-native';
+import FastImage from '@d11/react-native-fast-image';
+import { MaterialIcons } from '@expo/vector-icons';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useSettings } from '../../hooks/useSettings';
+
+const { width } = Dimensions.get('window');
+
+// Enhanced responsive breakpoints
+const BREAKPOINTS = {
+    phone: 0,
+    tablet: 768,
+    largeTablet: 1024,
+    tv: 1440,
+};
+
+const getDeviceType = (screenWidth: number) => {
+    if (screenWidth >= BREAKPOINTS.tv) return 'tv';
+    if (screenWidth >= BREAKPOINTS.largeTablet) return 'largeTablet';
+    if (screenWidth >= BREAKPOINTS.tablet) return 'tablet';
+    return 'phone';
+};
+
+export type PosterShape = 'poster' | 'landscape' | 'square';
+
+export interface PosterProps {
+    /** The poster image URL */
+    uri?: string | null;
+    /** Width of the poster */
+    width: number;
+    /** Shape of the poster - determines aspect ratio */
+    shape?: PosterShape;
+    /** Optional custom aspect ratio override */
+    aspectRatio?: number;
+    /** Optional custom border radius (uses settings.posterBorderRadius by default) */
+    borderRadius?: number;
+    /** Optional title to display below the poster */
+    title?: string;
+    /** Whether to show the title */
+    showTitle?: boolean;
+    /** Fallback text to show when no poster is available */
+    fallbackText?: string;
+    /** Additional styles for the container */
+    style?: ViewStyle;
+    /** Additional styles for the poster container */
+    posterStyle?: ViewStyle;
+}
+
+/**
+ * Shared Poster component with consistent styling across the app.
+ * Matches the design from ContentItem.tsx with:
+ * - Border: 1.5px solid rgba(255,255,255,0.15)
+ * - Border Radius: settings.posterBorderRadius (default 12)
+ * - Shadow: elevation 1 on Android, subtle shadow on iOS
+ * - Aspect Ratio: 2/3 for poster, 16/9 for landscape, 1/1 for square
+ */
+export const Poster: React.FC<PosterProps> = ({
+    uri,
+    width: posterWidth,
+    shape = 'poster',
+    aspectRatio: customAspectRatio,
+    borderRadius: customBorderRadius,
+    title,
+    showTitle = false,
+    fallbackText,
+    style,
+    posterStyle,
+}) => {
+    const { currentTheme } = useTheme();
+    const { settings, isLoaded } = useSettings();
+    const [imageError, setImageError] = useState(false);
+
+    // Reset error state when URI changes
+    useEffect(() => {
+        setImageError(false);
+    }, [uri]);
+
+    // Determine aspect ratio based on shape
+    const aspectRatio = useMemo(() => {
+        if (customAspectRatio) return customAspectRatio;
+        switch (shape) {
+            case 'landscape':
+                return 16 / 9;
+            case 'square':
+                return 1;
+            case 'poster':
+            default:
+                return 2 / 3;
+        }
+    }, [shape, customAspectRatio]);
+
+    // Border radius from settings or custom
+    const borderRadius = customBorderRadius ??
+        (typeof settings.posterBorderRadius === 'number' ? settings.posterBorderRadius : 12);
+
+    // Device type for responsive title sizing
+    const deviceType = getDeviceType(width);
+
+    // Title font size based on device type
+    const titleFontSize = useMemo(() => {
+        switch (deviceType) {
+            case 'tv':
+                return 16;
+            case 'largeTablet':
+                return 15;
+            case 'tablet':
+                return 14;
+            default:
+                return 13;
+        }
+    }, [deviceType]);
+
+    // Optimize poster URL for TMDB
+    const optimizedUrl = useMemo(() => {
+        if (!uri || uri.includes('placeholder')) {
+            return null;
+        }
+        if (uri.includes('image.tmdb.org')) {
+            return uri.replace(/\/w\d+\//, '/w154/');
+        }
+        return uri;
+    }, [uri]);
+
+    // Placeholder while settings load
+    if (!isLoaded) {
+        return (
+            <View style={[styles.container, { width: posterWidth }, style]}>
+                <View
+                    style={[
+                        styles.posterContainer,
+                        {
+                            width: posterWidth,
+                            aspectRatio,
+                            borderRadius,
+                            backgroundColor: currentTheme.colors.elevation1,
+                        },
+                        posterStyle,
+                    ]}
+                />
+                {showTitle && <View style={{ height: 18, marginTop: 4 }} />}
+            </View>
+        );
+    }
+
+    return (
+        <View style={[styles.container, { width: posterWidth }, style]}>
+            <View
+                style={[
+                    styles.posterContainer,
+                    {
+                        width: posterWidth,
+                        aspectRatio,
+                        borderRadius,
+                        backgroundColor: currentTheme.colors.elevation1,
+                    },
+                    posterStyle,
+                ]}
+            >
+                {optimizedUrl && !imageError ? (
+                    <FastImage
+                        source={{
+                            uri: optimizedUrl,
+                            priority: FastImage.priority.normal,
+                            cache: FastImage.cacheControl.immutable,
+                        }}
+                        style={[styles.poster, { borderRadius }]}
+                        resizeMode={FastImage.resizeMode.cover}
+                        onLoad={() => setImageError(false)}
+                        onError={() => setImageError(true)}
+                    />
+                ) : (
+                    <View
+                        style={[
+                            styles.poster,
+                            styles.fallbackContainer,
+                            {
+                                backgroundColor: currentTheme.colors.elevation1,
+                                borderRadius,
+                            },
+                        ]}
+                    >
+                        {imageError ? (
+                            <MaterialIcons
+                                name="broken-image"
+                                size={24}
+                                color={currentTheme.colors.textMuted}
+                            />
+                        ) : fallbackText ? (
+                            <Text
+                                style={[styles.fallbackText, { color: currentTheme.colors.textMuted }]}
+                                numberOfLines={2}
+                            >
+                                {fallbackText.length > 20 ? `${fallbackText.substring(0, 20)}...` : fallbackText}
+                            </Text>
+                        ) : (
+                            <MaterialIcons
+                                name="image"
+                                size={24}
+                                color={currentTheme.colors.textMuted}
+                            />
+                        )}
+                    </View>
+                )}
+            </View>
+
+            {showTitle && title && (
+                <Text
+                    style={[
+                        styles.title,
+                        {
+                            color: currentTheme.colors.mediumEmphasis,
+                            fontSize: titleFontSize,
+                        },
+                    ]}
+                    numberOfLines={2}
+                >
+                    {title}
+                </Text>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {},
+    posterContainer: {
+        overflow: 'hidden',
+        position: 'relative',
+        // Consistent shadow/elevation matching ContentItem
+        elevation: Platform.OS === 'android' ? 1 : 0,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.05,
+        shadowRadius: 1,
+        // Consistent border styling
+        borderWidth: 1.5,
+        borderColor: 'rgba(255,255,255,0.15)',
+        marginBottom: 8,
+    },
+    poster: {
+        width: '100%',
+        height: '100%',
+    },
+    fallbackContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    fallbackText: {
+        fontSize: 10,
+        textAlign: 'center',
+        paddingHorizontal: 4,
+    },
+    title: {
+        fontWeight: '500',
+        marginTop: 4,
+        textAlign: 'center',
+    },
+});
+
+export default Poster;

src/components/home/AppleTVHero.tsx

@@ -12,6 +12,7 @@ import {
   Image,
 } from 'react-native';
 import { NavigationProp, useNavigation, useIsFocused } from '@react-navigation/native';
+import { useTranslation } from 'react-i18next';
 import { RootStackParamList } from '../../navigation/AppNavigator';
 import { LinearGradient } from 'expo-linear-gradient';
 import FastImage from '@d11/react-native-fast-image';
@@ -144,6 +145,7 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
   onRetry,
   scrollY: externalScrollY,
 }) => {
+  const { t } = useTranslation();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const isFocused = useIsFocused();
   const { currentTheme } = useTheme();
@@ -158,7 +160,7 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
   const [inLibrary, setInLibrary] = useState(false);
   const [isInWatchlist, setIsInWatchlist] = useState(false);
   const [isWatched, setIsWatched] = useState(false);
-  const [playButtonText, setPlayButtonText] = useState('Play');
+  const [shouldResume, setShouldResume] = useState(false);
   const [type, setType] = useState<'movie' | 'series'>('movie');
 
   // Create internal scrollY if not provided externally
@@ -530,7 +532,8 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
   useEffect(() => {
     if (currentItem) {
       const buttonText = getProgressPlayButtonText();
-      setPlayButtonText(buttonText);
+      // Use internal state for resume logic instead of string comparison
+      setShouldResume(buttonText === 'Resume');
 
       // Update watched state based on progress
       if (watchProgress) {
@@ -672,6 +675,7 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
         id: currentItem.id,
         type: currentItem.type,
         title: currentItem.name,
+        addonId: currentItem.addonId,
         metadata: {
           poster: currentItem.poster,
           banner: currentItem.banner,
@@ -697,6 +701,7 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
         id: currentItem.id,
         type: currentItem.type,
         title: currentItem.name,
+        addonId: currentItem.addonId,
         metadata: {
           poster: currentItem.poster,
           banner: currentItem.banner,
@@ -985,10 +990,10 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
       <View style={[styles.container, { height: HERO_HEIGHT, marginTop: -insets.top }]}>
         <View style={styles.noContentContainer}>
           <MaterialIcons name="theaters" size={48} color="rgba(255,255,255,0.5)" />
-          <Text style={styles.noContentText}>No featured content available</Text>
+          <Text style={styles.noContentText}>{t('home.no_featured_available')}</Text>
           {onRetry && (
             <TouchableOpacity style={styles.retryButton} onPress={onRetry} activeOpacity={0.7}>
-              <Text style={styles.retryButtonText}>Retry</Text>
+              <Text style={styles.retryButtonText}>{t('home.retry')}</Text>
             </TouchableOpacity>
           )}
         </View>
@@ -1184,6 +1189,7 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
                     navigation.navigate('Metadata', {
                       id: currentItem.id,
                       type: currentItem.type,
+                      addonId: currentItem.addonId,
                     });
                   }
                 }}
@@ -1220,6 +1226,7 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
                     navigation.navigate('Metadata', {
                       id: currentItem.id,
                       type: currentItem.type,
+                      addonId: currentItem.addonId,
                     });
                   }
                 }}
@@ -1238,7 +1245,7 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
             <View style={styles.metadataBadge}>
               <MaterialIcons name="tv" size={16} color="#fff" />
               <Text style={styles.metadataText}>
-                {currentItem.type === 'series' ? 'TV Show' : 'Movie'}
+                {currentItem.type === 'series' ? t('home.tv_show') : t('home.movie')}
               </Text>
               {currentItem.genres && currentItem.genres.length > 0 && (
                 <>
@@ -1258,11 +1265,11 @@ const AppleTVHero: React.FC<AppleTVHeroProps> = ({
               activeOpacity={0.85}
             >
               <MaterialIcons
-                name={playButtonText === 'Resume' ? "replay" : "play-arrow"}
+                name={shouldResume ? "replay" : "play-arrow"}
                 size={24}
                 color="#000"
               />
-              <Text style={styles.playButtonText}>{playButtonText}</Text>
+              <Text style={styles.playButtonText}>{shouldResume ? t('home.resume') : t('home.play')}</Text>
             </TouchableOpacity>
 
             {/* Save Button */}

src/components/home/CatalogSection.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, Platform, Dimensions, FlatList } from 'react-native';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useTranslation } from 'react-i18next';
 import { MaterialIcons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
 import { CatalogContent, StreamingContent } from '../../services/catalogService';
@@ -8,6 +9,7 @@ import { useTheme } from '../../contexts/ThemeContext';
 import ContentItem from './ContentItem';
 import Animated, { FadeIn, Layout } from 'react-native-reanimated';
 import { RootStackParamList } from '../../navigation/AppNavigator';
+import { getFormattedCatalogName, getCatalogDisplayName } from '../../utils/catalogNameUtils';
 
 interface CatalogSectionProps {
   catalog: CatalogContent;
@@ -73,9 +75,44 @@ const posterLayout = calculatePosterLayout(width);
 const POSTER_WIDTH = posterLayout.posterWidth;
 
 const CatalogSection = ({ catalog }: CatalogSectionProps) => {
+  const { t, i18n } = useTranslation();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const { currentTheme } = useTheme();
 
+  // Use state for the display name to handle async custom name resolution
+  const [displayName, setDisplayName] = React.useState(catalog.name);
+
+  // Re-resolve and format the name when language or catalog data changes
+  React.useEffect(() => {
+    const resolveName = async () => {
+      // 1. Check for user-defined custom name
+      const customName = await getCatalogDisplayName(
+        catalog.addon,
+        catalog.type,
+        catalog.id,
+        catalog.originalName || catalog.name
+      );
+
+      // 2. If it's a user setting, use it as is
+      if (customName !== (catalog.originalName || catalog.name)) {
+        setDisplayName(customName);
+        return;
+      }
+
+      // 3. Otherwise, use localized formatting
+      const formatted = getFormattedCatalogName(
+        customName,
+        catalog.type,
+        t('home.movies'),
+        t('home.tv_shows'),
+        t('home.channels')
+      );
+      setDisplayName(formatted);
+    };
+
+    resolveName();
+  }, [catalog.addon, catalog.id, catalog.type, catalog.name, catalog.originalName, i18n.language, t]);
+
   const handleContentPress = useCallback((id: string, type: string) => {
     navigation.navigate('Metadata', { id, type, addonId: catalog.addon });
   }, [navigation, catalog.addon]);
@@ -117,7 +154,7 @@ const CatalogSection = ({ catalog }: CatalogSectionProps) => {
             ]}
             numberOfLines={1}
           >
-            {catalog.name}
+            {displayName}
           </Text>
           <View
             style={[
@@ -154,7 +191,7 @@ const CatalogSection = ({ catalog }: CatalogSectionProps) => {
               fontSize: isTV ? 16 : isLargeTablet ? 15 : isTablet ? 14 : 14,
               marginRight: isTV ? 6 : isLargeTablet ? 5 : 4,
             }
-          ]}>View All</Text>
+          ]}>{t('home.view_all')}</Text>
           <MaterialIcons
             name="chevron-right"
             size={isTV ? 24 : isLargeTablet ? 22 : isTablet ? 20 : 20}

src/components/home/ContentItem.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useToast } from '../../contexts/ToastContext';
 import { DeviceEventEmitter } from 'react-native';
 import { View, TouchableOpacity, ActivityIndicator, StyleSheet, Dimensions, Platform, Text, Share } from 'react-native';
@@ -82,6 +83,7 @@ const posterLayout = calculatePosterLayout(width);
 const POSTER_WIDTH = posterLayout.posterWidth;
 
 const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, deferMs = 0 }: ContentItemProps) => {
+  const { t } = useTranslation();
   // Track inLibrary status locally to force re-render
   const [inLibrary, setInLibrary] = useState(!!item.inLibrary);
 
@@ -182,10 +184,10 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
       case 'library':
         if (inLibrary) {
           catalogService.removeFromLibrary(item.type, item.id);
-          showInfo('Removed from Library', 'Removed from your local library');
+          showInfo(t('library.removed_from_library'), t('library.item_removed'));
         } else {
           catalogService.addToLibrary(item);
-          showSuccess('Added to Library', 'Added to your local library');
+          showSuccess(t('library.added_to_library'), t('library.item_added'));
         }
         break;
       case 'watched': {
@@ -194,7 +196,7 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
         try {
           await mmkvStorage.setItem(`watched:${item.type}:${item.id}`, targetWatched ? 'true' : 'false');
         } catch { }
-        showInfo(targetWatched ? 'Marked as Watched' : 'Marked as Unwatched', targetWatched ? 'Item marked as watched' : 'Item marked as unwatched');
+        showInfo(targetWatched ? t('library.marked_watched') : t('library.marked_unwatched'), targetWatched ? t('library.item_marked_watched') : t('library.item_marked_unwatched'));
         setTimeout(() => {
           DeviceEventEmitter.emit('watchedStatusChanged');
         }, 100);
@@ -240,10 +242,10 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
       case 'trakt-watchlist': {
         if (isInWatchlist(item.id, item.type as 'movie' | 'show')) {
           await removeFromWatchlist(item.id, item.type as 'movie' | 'show');
-          showInfo('Removed from Watchlist', 'Removed from your Trakt watchlist');
+          showInfo(t('library.removed_from_watchlist'), t('library.removed_from_watchlist_desc'));
         } else {
           await addToWatchlist(item.id, item.type as 'movie' | 'show');
-          showSuccess('Added to Watchlist', 'Added to your Trakt watchlist');
+          showSuccess(t('library.added_to_watchlist'), t('library.added_to_watchlist_desc'));
         }
         setMenuVisible(false);
         break;
@@ -251,10 +253,10 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
       case 'trakt-collection': {
         if (isInCollection(item.id, item.type as 'movie' | 'show')) {
           await removeFromCollection(item.id, item.type as 'movie' | 'show');
-          showInfo('Removed from Collection', 'Removed from your Trakt collection');
+          showInfo(t('library.removed_from_collection'), t('library.removed_from_collection_desc'));
         } else {
           await addToCollection(item.id, item.type as 'movie' | 'show');
-          showSuccess('Added to Collection', 'Added to your Trakt collection');
+          showSuccess(t('library.added_to_collection'), t('library.added_to_collection_desc'));
         }
         setMenuVisible(false);
         break;

src/components/home/DropUpMenu.tsx

@@ -10,6 +10,7 @@ import {
   Dimensions,
   Platform
 } from 'react-native';
+import { useTranslation } from 'react-i18next';
 import { MaterialIcons } from '@expo/vector-icons';
 import FastImage from '@d11/react-native-fast-image';
 import { useTraktContext } from '../../contexts/TraktContext';
@@ -39,6 +40,7 @@ interface DropUpMenuProps {
 }
 
 export const DropUpMenu = ({ visible, onClose, item, onOptionSelect, isSaved: isSavedProp, isWatched: isWatchedProp }: DropUpMenuProps) => {
+  const { t } = useTranslation();
   const translateY = useSharedValue(300);
   const opacity = useSharedValue(0);
   const isDarkMode = useColorScheme() === 'dark';
@@ -102,12 +104,12 @@ export const DropUpMenu = ({ visible, onClose, item, onOptionSelect, isSaved: is
   let menuOptions = [
     {
       icon: 'bookmark',
-      label: isSaved ? 'Remove from Library' : 'Add to Library',
+      label: isSaved ? t('library.remove_from_library') : t('library.add_to_library'),
       action: 'library'
     },
     {
       icon: 'check-circle',
-      label: isWatched ? 'Mark as Unwatched' : 'Mark as Watched',
+      label: isWatched ? t('library.mark_unwatched') : t('library.mark_watched'),
       action: 'watched'
     },
     /*
@@ -119,7 +121,7 @@ export const DropUpMenu = ({ visible, onClose, item, onOptionSelect, isSaved: is
     */
     {
       icon: 'share',
-      label: 'Share',
+      label: t('library.share'),
       action: 'share'
     }
   ];
@@ -129,12 +131,12 @@ export const DropUpMenu = ({ visible, onClose, item, onOptionSelect, isSaved: is
     menuOptions.push(
       {
         icon: 'playlist-add-check',
-        label: inTraktWatchlist ? 'Remove from Trakt Watchlist' : 'Add to Trakt Watchlist',
+        label: inTraktWatchlist ? t('library.remove_from_watchlist') : t('library.add_to_watchlist'),
         action: 'trakt-watchlist'
       },
       {
         icon: 'video-library',
-        label: inTraktCollection ? 'Remove from Trakt Collection' : 'Add to Trakt Collection',
+        label: inTraktCollection ? t('library.remove_from_collection') : t('library.add_to_collection'),
         action: 'trakt-collection'
       }
     );

src/components/home/FeaturedContent.tsx

@@ -13,6 +13,7 @@ import {
   Platform
 } from 'react-native';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useTranslation } from 'react-i18next';
 import { RootStackParamList } from '../../navigation/AppNavigator';
 import { LinearGradient } from 'expo-linear-gradient';
 import FastImage from '@d11/react-native-fast-image';
@@ -52,6 +53,7 @@ const nowMs = () => Date.now();
 const since = (start: number) => `${(nowMs() - start).toFixed(0)}ms`;
 
 const NoFeaturedContent = ({ onRetry }: { onRetry?: () => void }) => {
+  const { t } = useTranslation();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const { currentTheme } = useTheme();
 
@@ -103,11 +105,11 @@ const NoFeaturedContent = ({ onRetry }: { onRetry?: () => void }) => {
   return (
     <View style={styles.noContentContainer}>
       <MaterialIcons name="theaters" size={48} color={currentTheme.colors.mediumEmphasis} />
-      <Text style={styles.noContentTitle}>{onRetry ? 'Couldn\'t load featured content' : 'No Featured Content'}</Text>
+      <Text style={styles.noContentTitle}>{onRetry ? t('home.couldnt_load_featured') : t('home.no_featured_content')}</Text>
       <Text style={styles.noContentText}>
         {onRetry
-          ? 'There was a problem fetching featured content. Please check your connection and try again.'
-          : 'Install addons with catalogs or change the content source in your settings.'}
+          ? t('home.load_error_desc')
+          : t('home.no_featured_desc')}
       </Text>
       <View style={styles.noContentButtons}>
         {onRetry ? (
@@ -115,7 +117,7 @@ const NoFeaturedContent = ({ onRetry }: { onRetry?: () => void }) => {
             style={[styles.noContentButton, { backgroundColor: currentTheme.colors.primary }]}
             onPress={onRetry}
           >
-            <Text style={[styles.noContentButtonText, { color: currentTheme.colors.white }]}>Retry</Text>
+            <Text style={[styles.noContentButtonText, { color: currentTheme.colors.white }]}>{t('home.retry')}</Text>
           </TouchableOpacity>
         ) : (
           <>
@@ -123,13 +125,13 @@ const NoFeaturedContent = ({ onRetry }: { onRetry?: () => void }) => {
               style={[styles.noContentButton, { backgroundColor: currentTheme.colors.primary }]}
               onPress={() => navigation.navigate('Addons')}
             >
-              <Text style={[styles.noContentButtonText, { color: currentTheme.colors.white }]}>Install Addons</Text>
+              <Text style={[styles.noContentButtonText, { color: currentTheme.colors.white }]}>{t('home.install_addons')}</Text>
             </TouchableOpacity>
             <TouchableOpacity
               style={styles.noContentButton}
               onPress={() => navigation.navigate('HomeScreenSettings')}
             >
-              <Text style={styles.noContentButtonText}>Settings</Text>
+              <Text style={styles.noContentButtonText}>{t('home.settings')}</Text>
             </TouchableOpacity>
           </>
         )}
@@ -139,6 +141,7 @@ const NoFeaturedContent = ({ onRetry }: { onRetry?: () => void }) => {
 };
 
 const FeaturedContent = ({ featuredContent, isSaved, handleSaveToLibrary, loading, onRetry }: FeaturedContentProps) => {
+  const { t } = useTranslation();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const { currentTheme } = useTheme();
   const [bannerUrl, setBannerUrl] = useState<string | null>(null);
@@ -509,7 +512,7 @@ const FeaturedContent = ({ featuredContent, isSaved, handleSaveToLibrary, loadin
             >
               <MaterialIcons name="play-arrow" size={28} color={currentTheme.colors.black} />
               <Text style={[styles.tabletPlayButtonText as TextStyle, { color: currentTheme.colors.black }]}>
-                Play Now
+                {t('home.play_now')}
               </Text>
             </TouchableOpacity>
 
@@ -520,7 +523,7 @@ const FeaturedContent = ({ featuredContent, isSaved, handleSaveToLibrary, loadin
             >
               <MaterialIcons name={isSaved ? "bookmark" : "bookmark-outline"} size={20} color={currentTheme.colors.white} />
               <Text style={[styles.tabletSecondaryButtonText as TextStyle, { color: currentTheme.colors.white }]}>
-                {isSaved ? "Saved" : "My List"}
+                {isSaved ? t('home.saved') : t('home.my_list')}
               </Text>
             </TouchableOpacity>
 
@@ -531,7 +534,7 @@ const FeaturedContent = ({ featuredContent, isSaved, handleSaveToLibrary, loadin
             >
               <MaterialIcons name="info-outline" size={20} color={currentTheme.colors.white} />
               <Text style={[styles.tabletSecondaryButtonText as TextStyle, { color: currentTheme.colors.white }]}>
-                More Info
+                {t('home.more_info')}
               </Text>
             </TouchableOpacity>
           </Animated.View>
@@ -626,7 +629,7 @@ const FeaturedContent = ({ featuredContent, isSaved, handleSaveToLibrary, loadin
                   >
                     <MaterialIcons name={isSaved ? "bookmark" : "bookmark-outline"} size={24} color={currentTheme.colors.white} />
                     <Text style={[styles.myListButtonText as TextStyle, { color: currentTheme.colors.white }]}>
-                      {isSaved ? "Saved" : "Save"}
+                      {isSaved ? t('home.saved') : t('home.save')}
                     </Text>
                   </TouchableOpacity>
 
@@ -644,7 +647,7 @@ const FeaturedContent = ({ featuredContent, isSaved, handleSaveToLibrary, loadin
                   >
                     <MaterialIcons name="play-arrow" size={24} color={currentTheme.colors.black} />
                     <Text style={[styles.playButtonText as TextStyle, { color: currentTheme.colors.black }]}>
-                      Play
+                      {t('home.play')}
                     </Text>
                   </TouchableOpacity>
 
@@ -655,7 +658,7 @@ const FeaturedContent = ({ featuredContent, isSaved, handleSaveToLibrary, loadin
                   >
                     <MaterialIcons name="info-outline" size={24} color={currentTheme.colors.white} />
                     <Text style={[styles.infoButtonText as TextStyle, { color: currentTheme.colors.white }]}>
-                      Info
+                      {t('home.info')}
                     </Text>
                   </TouchableOpacity>
                 </Animated.View>

src/components/home/HeroCarousel.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState, useEffect, useCallback, memo, useRef } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, ViewStyle, TextStyle, ImageStyle, ScrollView, StyleProp, Platform, Image, useWindowDimensions } from 'react-native';
+import { useTranslation } from 'react-i18next';
 import Animated, { FadeIn, FadeOut, Easing, useSharedValue, withTiming, useAnimatedStyle, useAnimatedScrollHandler, useAnimatedReaction, runOnJS, SharedValue, interpolate, Extrapolation } from 'react-native-reanimated';
 import { LinearGradient } from 'expo-linear-gradient';
 import { BlurView } from 'expo-blur';
@@ -38,6 +39,7 @@ interface HeroCarouselProps {
 const TOP_TABS_OFFSET = Platform.OS === 'ios' ? 44 : 48;
 
 const HeroCarousel: React.FC<HeroCarouselProps> = ({ items, loading = false }) => {
+  const { t } = useTranslation();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const { currentTheme } = useTheme();
   const insets = useSafeAreaInsets();
@@ -228,9 +230,9 @@ const HeroCarousel: React.FC<HeroCarouselProps> = ({ items, loading = false }) =
 
   const contentPadding = useMemo(() => ({ paddingHorizontal: (windowWidth - cardWidth) / 2 }), [windowWidth, cardWidth]);
 
-  const handleNavigateToMetadata = useCallback((id: string, type: any) => {
-    navigation.navigate('Metadata', { id, type });
-  }, [navigation]);
+  const handleNavigateToMetadata = useCallback((id: string, type: any, addonId?: string) => {
+  navigation.navigate('Metadata', { id, type, addonId });
+}, [navigation]);
 
   // Container animation based on scroll - must be before early returns
   // TEMPORARILY DISABLED FOR PERFORMANCE TESTING
@@ -399,7 +401,7 @@ const HeroCarousel: React.FC<HeroCarouselProps> = ({ items, loading = false }) =
               colors={currentTheme.colors}
               logoFailed={failedLogoIds.has(item.id)}
               onLogoError={() => setFailedLogoIds((prev) => new Set(prev).add(item.id))}
-              onPressInfo={() => handleNavigateToMetadata(item.id, item.type)}
+              onPressInfo={() => handleNavigateToMetadata(item.id, item.type, item.addonId)}
               scrollX={scrollX}
               index={index}
               flipped={!!flippedMap[item.id]}
@@ -610,6 +612,7 @@ interface CarouselCardProps {
 }
 
 const CarouselCard: React.FC<CarouselCardProps> = memo(({ item, colors, logoFailed, onLogoError, onPressInfo, scrollX, index, flipped, onToggleFlip, interval, cardWidth, cardHeight, isTablet }) => {
+  const { t } = useTranslation();
   const [bannerLoaded, setBannerLoaded] = useState(false);
   const [logoLoaded, setLogoLoaded] = useState(false);
 
@@ -847,7 +850,7 @@ const CarouselCard: React.FC<CarouselCardProps> = memo(({ item, colors, logoFail
                       textShadowRadius: 2,
                     }
                   ]}>
-                    {item.description || 'No description available'}
+                    {item.description || t('home.no_description')}
                   </Text>
                 </ScrollView>
               </View>
@@ -956,7 +959,7 @@ const CarouselCard: React.FC<CarouselCardProps> = memo(({ item, colors, logoFail
                         textShadowRadius: 2,
                       }
                     ]}>
-                      {item.description || 'No description available'}
+                      {item.description || t('home.no_description')}
                     </Text>
                   </ScrollView>
                 </View>

src/components/home/ThisWeekSection.tsx

@@ -9,6 +9,7 @@ import {
   Dimensions
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import { useTranslation } from 'react-i18next';
 import { NavigationProp } from '@react-navigation/native';
 import FastImage from '@d11/react-native-fast-image';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -50,6 +51,7 @@ interface ThisWeekEpisode {
   vote_average: number;
   still_path: string | null;
   season_poster_path: string | null;
+  addonId?: string;
   // Grouping fields
   isGroup?: boolean;
   episodeCount?: number;
@@ -57,6 +59,7 @@ interface ThisWeekEpisode {
 }
 
 export const ThisWeekSection = React.memo(() => {
+  const { t } = useTranslation();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const { currentTheme } = useTheme();
   const { calendarData, loading } = useCalendarData();
@@ -175,7 +178,7 @@ export const ThisWeekSection = React.memo(() => {
         processedItems.push({
           ...firstEp,
           id: `group_${firstEp.seriesId}_${firstEp.releaseDate}`, // Unique ID for the group
-          title: `${group.length} New Episodes`,
+          title: t('home.new_episodes', { count: group.length }),
           isReleased,
           isGroup: true,
           episodeCount: group.length,
@@ -199,7 +202,8 @@ export const ThisWeekSection = React.memo(() => {
     if (episode.isGroup) {
       navigation.navigate('Metadata', {
         id: episode.seriesId,
-        type: 'series'
+        type: 'series',
+        addonId: episode.addonId,
       });
       return;
     }
@@ -210,7 +214,8 @@ export const ThisWeekSection = React.memo(() => {
       navigation.navigate('Metadata', {
         id: episode.seriesId,
         type: 'series',
-        episodeId
+        episodeId,
+        addonId: episode.addonId,
       });
       return;
     }
@@ -220,7 +225,8 @@ export const ThisWeekSection = React.memo(() => {
     navigation.navigate('Streams', {
       id: episode.seriesId,
       type: 'series',
-      episodeId
+      episodeId,
+      addonId: episode.addonId,
     });
   };
 
@@ -235,7 +241,7 @@ export const ThisWeekSection = React.memo(() => {
   const renderEpisodeItem = ({ item, index }: { item: ThisWeekEpisode, index: number }) => {
     // Handle episodes without release dates gracefully
     const releaseDate = item.releaseDate ? parseISO(item.releaseDate) : null;
-    const formattedDate = releaseDate ? format(releaseDate, 'MMM d') : 'TBA';
+    const formattedDate = releaseDate ? format(releaseDate, 'MMM d') : t('home.tba');
     const isReleased = item.isReleased;
 
     // Use episode still image if available, fallback to series poster
@@ -290,12 +296,12 @@ export const ThisWeekSection = React.memo(() => {
               locations={[0, 0.4, 0.7, 1]}
             >
               <View style={styles.cardHeader}>
-                <View style={[
+                <View style={[  
                   styles.statusBadge,
                   { backgroundColor: isReleased ? currentTheme.colors.primary : 'rgba(0,0,0,0.6)' }
                 ]}>
                   <Text style={styles.statusText}>
-                    {isReleased ? (item.isGroup ? 'Released' : 'New') : formattedDate}
+                    {isReleased ? (item.isGroup ? t('home.released') : t('home.new')) : formattedDate}
                   </Text>
                 </View>
               </View>
@@ -353,7 +359,7 @@ export const ThisWeekSection = React.memo(() => {
               color: currentTheme.colors.text,
               fontSize: isTV ? 32 : isLargeTablet ? 28 : isTablet ? 26 : 24
             }
-          ]}>This Week</Text>
+          ]}>{t('home.this_week')}</Text>
           <View style={[
             styles.titleUnderline,
             {
@@ -376,7 +382,7 @@ export const ThisWeekSection = React.memo(() => {
               color: currentTheme.colors.textMuted,
               fontSize: isTV ? 18 : isLargeTablet ? 16 : isTablet ? 15 : 14
             }
-          ]}>View All</Text>
+          ]}>{t('home.view_all')}</Text>
           <MaterialIcons
             name="chevron-right"
             size={isTV ? 24 : isLargeTablet ? 22 : isTablet ? 20 : 20}
@@ -562,4 +568,4 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     zIndex: -1,
   },
-}); 
+}); 

src/components/metadata/CastDetailsModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   View,
   Text,
@@ -70,6 +71,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
   onClose,
   castMember,
 }) => {
+  const { t } = useTranslation();
   const { currentTheme } = useTheme();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const [personDetails, setPersonDetails] = useState<PersonDetails | null>(null);
@@ -82,14 +84,14 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
     if (visible && castMember) {
       modalOpacity.value = withTiming(1, { duration: 250 });
       modalScale.value = withSpring(1, { damping: 20, stiffness: 200 });
-      
+
       if (!hasFetched || personDetails?.id !== castMember.id) {
         fetchPersonDetails();
       }
     } else {
       modalOpacity.value = withTiming(0, { duration: 200 });
       modalScale.value = withTiming(0.9, { duration: 200 });
-      
+
       if (!visible) {
         setHasFetched(false);
         setPersonDetails(null);
@@ -99,7 +101,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
 
   const fetchPersonDetails = async () => {
     if (!castMember || loading) return;
-    
+
     setLoading(true);
     try {
       const details = await tmdbService.getPersonDetails(castMember.id);
@@ -150,11 +152,11 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
     const birthDate = new Date(birthday);
     let age = today.getFullYear() - birthDate.getFullYear();
     const monthDiff = today.getMonth() - birthDate.getMonth();
-    
+
     if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
       age--;
     }
-    
+
     return age;
   };
 
@@ -196,8 +198,8 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
             height: MODAL_HEIGHT,
             overflow: 'hidden',
             borderRadius: isTablet ? 32 : 24,
-            backgroundColor: Platform.OS === 'android' 
-              ? 'rgba(20, 20, 20, 0.95)' 
+            backgroundColor: Platform.OS === 'android'
+              ? 'rgba(20, 20, 20, 0.95)'
               : 'transparent',
           },
           modalStyle,
@@ -280,7 +282,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                 </View>
               )}
             </View>
-            
+
             <View style={{ flex: 1 }}>
               <Text style={{
                 color: '#fff',
@@ -296,7 +298,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                   fontSize: isTablet ? 14 : 13,
                   fontWeight: '500',
                 }} numberOfLines={2}>
-                  as {castMember.character}
+                  {t('cast.as_character', { character: castMember.character })}
                 </Text>
               )}
             </View>
@@ -336,7 +338,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                 fontSize: 14,
                 marginTop: 12,
               }}>
-                Loading details...
+                {t('cast.loading_details')}
               </Text>
             </View>
           ) : (
@@ -352,8 +354,8 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                   borderColor: 'rgba(255, 255, 255, 0.06)',
                 }}>
                   {personDetails?.birthday && (
-                    <View style={{ 
-                      flexDirection: 'row', 
+                    <View style={{
+                      flexDirection: 'row',
                       alignItems: 'center',
                       marginBottom: personDetails?.place_of_birth ? 10 : 0
                     }}>
@@ -369,7 +371,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                         fontSize: 13,
                         fontWeight: '500',
                       }}>
-                        {calculateAge(personDetails.birthday)} years old
+                        {t('cast.years_old', { age: calculateAge(personDetails.birthday) })}
                       </Text>
                     </View>
                   )}
@@ -389,7 +391,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                         fontWeight: '500',
                         flex: 1,
                       }}>
-                        Born in {personDetails.place_of_birth}
+                        {t('cast.born_in', { place: personDetails.place_of_birth })}
                       </Text>
                     </View>
                   )}
@@ -420,7 +422,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                   fontWeight: '600',
                   letterSpacing: 0.3,
                 }}>
-                  View Filmography
+                  {t('cast.view_filmography')}
                 </Text>
               </TouchableOpacity>
 
@@ -454,7 +456,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                     textTransform: 'uppercase',
                     letterSpacing: 0.5,
                   }}>
-                    Also Known As
+                    {t('cast.also_known_as')}
                   </Text>
                   <Text style={{
                     color: 'rgba(255, 255, 255, 0.7)',
@@ -480,7 +482,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                     textAlign: 'center',
                     fontWeight: '500',
                   }}>
-                    No additional information available
+                    {t('cast.no_info_available')}
                   </Text>
                 </View>
               )}

src/components/metadata/CastSection.tsx

@@ -8,6 +8,7 @@ import {
   ActivityIndicator,
   Dimensions,
 } from 'react-native';
+import { useTranslation } from 'react-i18next';
 import FastImage from '@d11/react-native-fast-image';
 import Animated, {
   FadeIn,
@@ -35,6 +36,7 @@ export const CastSection: React.FC<CastSectionProps> = ({
   onSelectCastMember,
   isTmdbEnrichmentEnabled = true,
 }) => {
+  const { t } = useTranslation();
   const { currentTheme } = useTheme();
 
   // Enhanced responsive sizing for tablets and TV screens
@@ -137,7 +139,7 @@ export const CastSection: React.FC<CastSectionProps> = ({
             fontSize: isTV ? 24 : isLargeTablet ? 22 : isTablet ? 20 : 18,
             marginBottom: isTV ? 16 : isLargeTablet ? 14 : isTablet ? 12 : 12
           }
-        ]}>Cast</Text>
+        ]}>{t('metadata.cast')}</Text>
       </View>
       <FlatList
         horizontal

src/components/metadata/CollectionSection.tsx

@@ -8,6 +8,7 @@ import {
   ActivityIndicator,
   Dimensions,
 } from 'react-native';
+import { useTranslation } from 'react-i18next';
 import FastImage from '@d11/react-native-fast-image';
 import { useNavigation, StackActions } from '@react-navigation/native';
 import { NavigationProp } from '@react-navigation/native';
@@ -39,6 +40,7 @@ export const CollectionSection: React.FC<CollectionSectionProps> = ({
   collectionMovies, 
   loadingCollection 
 }) => {
+  const { t } = useTranslation();
   const { currentTheme } = useTheme();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
 
@@ -109,9 +111,9 @@ export const CollectionSection: React.FC<CollectionSectionProps> = ({
       }
     } catch (error) {
       if (__DEV__) console.error('Error navigating to collection item:', error);
-      setAlertTitle('Error');
-      setAlertMessage('Unable to load this content. Please try again later.');
-      setAlertActions([{ label: 'OK', onPress: () => {} }]);
+      setAlertTitle(t('common.error'));
+      setAlertMessage(t('metadata.something_went_wrong'));
+      setAlertActions([{ label: t('common.ok'), onPress: () => {} }]);
       setAlertVisible(true);
     }
   };

src/components/metadata/CommentsSection.tsx

@@ -12,6 +12,7 @@ import {
   Animated,
   Linking,
 } from 'react-native';
+import { useTranslation } from 'react-i18next';
 import { MaterialIcons } from '@expo/vector-icons';
 import TraktIcon from '../../../assets/rating-icons/trakt.svg';
 import { useTheme } from '../../contexts/ThemeContext';
@@ -186,6 +187,7 @@ const CompactCommentCard: React.FC<{
   isSpoilerRevealed: boolean;
   onSpoilerPress: () => void;
 }> = ({ comment, theme, onPress, isSpoilerRevealed, onSpoilerPress }) => {
+  const { t } = useTranslation();
   const [isPressed, setIsPressed] = useState(false);
   const fadeInOpacity = useRef(new Animated.Value(0)).current;
 
@@ -262,7 +264,7 @@ const CompactCommentCard: React.FC<{
 
   // Handle missing user data gracefully
   const user = comment.user || {};
-  const username = user.name || user.username || 'Anonymous';
+  const username = user.name || user.username || t('common.anonymous_user');
 
   // Handle spoiler content
   const hasSpoiler = comment.spoiler;
@@ -280,10 +282,10 @@ const CompactCommentCard: React.FC<{
       const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
       const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
 
-      if (diffMins < 1) return 'now';
-      if (diffMins < 60) return `${diffMins}m ago`;
-      if (diffHours < 24) return `${diffHours}h ago`;
-      if (diffDays < 7) return `${diffDays}d ago`;
+      if (diffMins < 1) return t('common.time.now');
+      if (diffMins < 60) return t('common.time.minutes_ago', { count: diffMins });
+      if (diffHours < 24) return t('common.time.hours_ago', { count: diffHours });
+      if (diffDays < 7) return t('common.time.days_ago', { count: diffDays });
 
       // For older dates, show month/day
       return commentDate.toLocaleDateString('en-US', {
@@ -725,6 +727,7 @@ export const CommentsSection: React.FC<CommentsSectionProps> = ({
   episode,
   onCommentPress,
 }) => {
+  const { t } = useTranslation();
   const { currentTheme } = useTheme();
   const { settings } = useSettings();
   const [hasLoadedOnce, setHasLoadedOnce] = React.useState(false);
@@ -823,12 +826,12 @@ export const CommentsSection: React.FC<CommentsSectionProps> = ({
       <View style={styles.emptyContainer}>
         <MaterialIcons name="chat-bubble-outline" size={48} color={currentTheme.colors.mediumEmphasis} />
         <Text style={[styles.emptyText, { color: currentTheme.colors.mediumEmphasis }]}>
-          {error ? 'Comments unavailable' : 'No comments on Trakt yet'}
+          {error ? t('comments.unavailable') : t('comments.no_comments')}
         </Text>
         <Text style={[styles.emptySubtext, { color: currentTheme.colors.disabled }]}>
           {error
-            ? 'This content may not be in Trakt\'s database yet'
-            : 'Be the first to comment on Trakt.tv'
+            ? t('comments.not_in_database')
+            : t('comments.check_trakt')
           }
         </Text>
       </View>
@@ -930,7 +933,7 @@ export const CommentsSection: React.FC<CommentsSectionProps> = ({
             fontSize: isTV ? 28 : isLargeTablet ? 26 : isTablet ? 24 : 20
           }
         ]}>
-          Trakt Comments
+          {t('comments.title')}
         </Text>
       </View>
 
@@ -945,7 +948,7 @@ export const CommentsSection: React.FC<CommentsSectionProps> = ({
             onPress={refresh}
           >
             <Text style={[styles.retryButtonText, { color: currentTheme.colors.error }]}>
-              Retry
+              {t('common.retry')}
             </Text>
           </TouchableOpacity>
         </View>
@@ -993,7 +996,7 @@ export const CommentsSection: React.FC<CommentsSectionProps> = ({
                   ) : (
                     <>
                       <Text style={[styles.loadMoreText, { color: currentTheme.colors.primary }]}>
-                        Load More
+                        {t('common.load_more')}
                       </Text>
                       <MaterialIcons name="chevron-right" size={20} color={currentTheme.colors.primary} />
                     </>

src/components/metadata/MetadataDetails.tsx

@@ -233,21 +233,10 @@ const MetadataDetails: React.FC<MetadataDetailsProps> = ({
         )}
         {metadata.imdbRating && !isMDBEnabled && (
           <View style={styles.ratingContainer}>
-            <FastImage
-              source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/575px-IMDB_Logo_2016.svg.png' }}
-              style={[
-                styles.imdbLogo,
-                {
-                  width: isTV ? 42 : isLargeTablet ? 38 : isTablet ? 35 : 35,
-                  height: isTV ? 22 : isLargeTablet ? 20 : isTablet ? 18 : 18
-                }
-              ]}
-              resizeMode={FastImage.resizeMode.contain}
-            />
             <Text style={[
               styles.ratingText,
               {
-                color: currentTheme.colors.text,
+                color: '#F5C518',
                 fontSize: isTV ? 18 : isLargeTablet ? 17 : isTablet ? 16 : 15
               }
             ]}>{metadata.imdbRating}</Text>

src/components/metadata/MoreLikeThisSection.tsx

@@ -7,13 +7,16 @@ import {
   TouchableOpacity,
   ActivityIndicator,
   Dimensions,
+  Platform,
 } from 'react-native';
+import { useTranslation } from 'react-i18next';
 import FastImage from '@d11/react-native-fast-image';
 import { useNavigation, StackActions } from '@react-navigation/native';
 import { NavigationProp } from '@react-navigation/native';
 import { RootStackParamList } from '../../navigation/AppNavigator';
 import { StreamingContent } from '../../services/catalogService';
 import { useTheme } from '../../contexts/ThemeContext';
+import { useSettings } from '../../hooks/useSettings';
 import { TMDBService } from '../../services/tmdbService';
 import { catalogService } from '../../services/catalogService';
 import CustomAlert from '../../components/CustomAlert';
@@ -33,12 +36,15 @@ interface MoreLikeThisSectionProps {
   loadingRecommendations: boolean;
 }
 
-export const MoreLikeThisSection: React.FC<MoreLikeThisSectionProps> = ({ 
-  recommendations, 
-  loadingRecommendations 
+export const MoreLikeThisSection: React.FC<MoreLikeThisSectionProps> = ({
+  recommendations,
+  loadingRecommendations
 }) => {
+  const { t } = useTranslation();
   const { currentTheme } = useTheme();
+  const { settings } = useSettings();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
+  const borderRadius = settings.posterBorderRadius ?? 12;
 
   // Determine device type
   const deviceWidth = Dimensions.get('window').width;
@@ -91,16 +97,16 @@ export const MoreLikeThisSection: React.FC<MoreLikeThisSectionProps> = ({
     try {
       // Extract TMDB ID from the tmdb:123456 format
       const tmdbId = item.id.replace('tmdb:', '');
-      
+
       // Get Stremio ID directly using catalogService
       // The catalogService.getStremioId method already handles the conversion internally
       const stremioId = await catalogService.getStremioId(item.type, tmdbId);
-      
+
       if (stremioId) {
         navigation.dispatch(
-          StackActions.push('Metadata', { 
-            id: stremioId, 
-            type: item.type 
+          StackActions.push('Metadata', {
+            id: stremioId,
+            type: item.type
           })
         );
       } else {
@@ -108,21 +114,21 @@ export const MoreLikeThisSection: React.FC<MoreLikeThisSectionProps> = ({
       }
     } catch (error) {
       if (__DEV__) console.error('Error navigating to recommendation:', error);
-      setAlertTitle('Error');
-      setAlertMessage('Unable to load this content. Please try again later.');
-      setAlertActions([{ label: 'OK', onPress: () => {} }]);
+      setAlertTitle(t('common.error'));
+      setAlertMessage(t('metadata.something_went_wrong'));
+      setAlertActions([{ label: t('common.ok'), onPress: () => { } }]);
       setAlertVisible(true);
     }
   };
 
   const renderItem = ({ item }: { item: StreamingContent }) => (
-    <TouchableOpacity 
+    <TouchableOpacity
       style={[styles.itemContainer, { width: posterWidth, marginRight: itemSpacing }]}
       onPress={() => handleItemPress(item)}
     >
       <FastImage
         source={{ uri: item.poster }}
-        style={[styles.poster, { backgroundColor: currentTheme.colors.elevation1, width: posterWidth, height: posterHeight, borderRadius: isTV ? 12 : isLargeTablet ? 10 : isTablet ? 10 : 8 }]}
+        style={[styles.poster, { backgroundColor: currentTheme.colors.elevation1, width: posterWidth, height: posterHeight, borderRadius }]}
         resizeMode={FastImage.resizeMode.cover}
       />
       <Text style={[styles.title, { color: currentTheme.colors.mediumEmphasis, fontSize: isTV ? 14 : isLargeTablet ? 13 : isTablet ? 13 : 13, lineHeight: isTV ? 20 : 18 }]} numberOfLines={2}>
@@ -144,8 +150,8 @@ export const MoreLikeThisSection: React.FC<MoreLikeThisSectionProps> = ({
   }
 
   return (
-    <View style={[styles.container, { paddingLeft: 0 }] }>
-      <Text style={[styles.sectionTitle, { color: currentTheme.colors.highEmphasis, fontSize: isTV ? 24 : isLargeTablet ? 22 : isTablet ? 20 : 20, paddingHorizontal: horizontalPadding }]}>More Like This</Text>
+    <View style={[styles.container, { paddingLeft: 0 }]}>
+      <Text style={[styles.sectionTitle, { color: currentTheme.colors.highEmphasis, fontSize: isTV ? 24 : isLargeTablet ? 22 : isTablet ? 20 : 20, paddingHorizontal: horizontalPadding }]}>{t('metadata.more_like_this')}</Text>
       <FlatList
         data={recommendations}
         renderItem={renderItem}
@@ -183,10 +189,17 @@ const styles = StyleSheet.create({
     marginRight: 12, // will be overridden responsively
   },
   poster: {
-    borderRadius: 8, // overridden responsively
+    borderRadius: 12,
     marginBottom: 8,
-    borderWidth: 1,
+    // Consistent border styling matching ContentItem
+    borderWidth: 1.5,
     borderColor: 'rgba(255,255,255,0.15)',
+    // Consistent shadow/elevation
+    elevation: Platform.OS === 'android' ? 1 : 0,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 1,
   },
   title: {
     fontSize: 13, // overridden responsively

src/components/metadata/QualityBadge.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import HDSvg from '../../assets/qualitybadge/HD.svg';
-import VISIONSvg from '../../assets/qualitybadge/VISION.svg';
 import ADSvg from '../../assets/qualitybadge/AD.svg';
 
 interface QualityBadgeProps {
@@ -17,8 +16,6 @@ const QualityBadge: React.FC<QualityBadgeProps> = ({ type }) => {
   switch (type) {
     case 'HD':
       return <HDSvg {...svgProps} />;
-    case 'VISION':
-      return <VISIONSvg {...svgProps} />;
     case 'AD':
       return <ADSvg {...svgProps} />;
     default:

src/components/metadata/RatingsSection.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { View, Text, StyleSheet, ActivityIndicator, Image, Animated, Dimensions } from 'react-native';
+import { MaterialIcons as MaterialIconsWrapper } from '@expo/vector-icons';
 import { useTheme } from '../../contexts/ThemeContext';
 import { useMDBListRatings } from '../../hooks/useMDBListRatings';
 import { mmkvStorage } from '../../services/mmkvStorage';
@@ -158,42 +159,49 @@ export const RatingsSection: React.FC<RatingsSectionProps> = ({ imdbId, type })
   // Define the order and icons/colors for the ratings
   const ratingConfig = {
     imdb: {
-      icon: require('../../../assets/rating-icons/imdb.png'),
-      isImage: true,
+      name: 'IMDb',
+      icon: null, // No icon for IMDb
+      isImage: false,
       color: '#F5C518',
       transform: (value: number) => value.toFixed(1)
     },
     tmdb: {
+      name: 'TMDB',
       icon: TMDBIcon,
       isImage: false,
       color: '#01B4E4',
       transform: (value: number) => value.toFixed(0)
     },
     trakt: {
+      name: 'Trakt',
       icon: TraktIcon,
       isImage: false,
       color: '#ED1C24',
       transform: (value: number) => value.toFixed(0)
     },
     letterboxd: {
+      name: 'Letterboxd',
       icon: LetterboxdIcon,
       isImage: false,
       color: '#00E054',
       transform: (value: number) => value.toFixed(1)
     },
     tomatoes: {
+      name: 'Rotten Tomatoes',
       icon: RottenTomatoesIcon,
       isImage: false,
       color: '#FA320A',
       transform: (value: number) => Math.round(value).toString() + '%'
     },
     audience: {
+      name: 'Audience Score',
       icon: AudienceScoreIcon,
       isImage: true,
       color: '#FA320A',
       transform: (value: number) => Math.round(value).toString() + '%'
     },
     metacritic: {
+      name: 'Metacritic',
       icon: MetacriticIcon,
       isImage: true,
       color: '#FFCC33',
@@ -204,15 +212,15 @@ export const RatingsSection: React.FC<RatingsSectionProps> = ({ imdbId, type })
   // Priority: IMDB, TMDB, Tomatoes, Metacritic 
   const priorityOrder = ['imdb', 'tmdb', 'tomatoes', 'metacritic', 'trakt', 'letterboxd', 'audience'];
   const displayRatings = priorityOrder
-    .filter(source => 
-      source in ratings && 
+    .filter(source =>
+      source in ratings &&
       ratings[source as keyof typeof ratings] !== undefined &&
       (enabledProviders[source] ?? true) // Show by default if setting not found
     )
     .map(source => [source, ratings[source as keyof typeof ratings]!]);
 
   return (
-    <Animated.View 
+    <Animated.View
       style={[
         styles.container,
         {
@@ -231,22 +239,32 @@ export const RatingsSection: React.FC<RatingsSectionProps> = ({ imdbId, type })
         {displayRatings.map(([source, value]) => {
           const config = ratingConfig[source as keyof typeof ratingConfig];
           const displayValue = config.transform(parseFloat(value as string));
-          
+
           return (
             <View key={source} style={[styles.compactRatingItem, { marginRight: itemSpacing }]}>
               {config.isImage ? (
-                <Image 
+                <Image
                   source={config.icon as any}
                   style={[styles.compactRatingIcon, { width: iconSize, height: iconSize, marginRight: iconTextGap }]}
                   resizeMode="contain"
                 />
-              ) : (
+              ) : config.icon ? (
                 <View style={[styles.compactSvgContainer, { marginRight: iconTextGap }]}>
                   {React.createElement(config.icon as any, {
                     width: iconSize,
                     height: iconSize,
                   })}
                 </View>
+              ) : (
+                // Text fallback
+                <Text style={{
+                  color: config.color,
+                  fontSize: textSize,
+                  fontWeight: '900',
+                  marginRight: iconTextGap
+                }}>
+                  {config.name}
+                </Text>
               )}
               <Text style={[styles.compactRatingValue, { color: config.color, fontSize: textSize }]}>
                 {displayValue}

src/components/metadata/SeriesContent.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo, memo } from 'react';
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ActivityIndicator, Dimensions, useWindowDimensions, useColorScheme, FlatList, Modal, Pressable } from 'react-native';
+import { useTranslation } from 'react-i18next';
 import * as Haptics from 'expo-haptics';
 import FastImage from '@d11/react-native-fast-image';
 import { MaterialIcons } from '@expo/vector-icons';
@@ -40,7 +41,6 @@ interface SeriesContentProps {
 const DEFAULT_PLACEHOLDER = 'https://via.placeholder.com/300x450/1a1a1a/666666?text=No+Image';
 const EPISODE_PLACEHOLDER = 'https://via.placeholder.com/500x280/1a1a1a/666666?text=No+Preview';
 const TMDB_LOGO = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Tmdb.new.logo.svg/512px-Tmdb.new.logo.svg.png?20200406190906';
-const IMDb_LOGO = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/575px-IMDB_Logo_2016.svg.png';
 
 const SeriesContentComponent: React.FC<SeriesContentProps> = ({
   episodes,
@@ -54,6 +54,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
 }) => {
   const { currentTheme } = useTheme();
   const { settings } = useSettings();
+  const { t } = useTranslation();
   const { width } = useWindowDimensions();
   const isDarkMode = useColorScheme() === 'dark';
 
@@ -489,9 +490,18 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
     };
   }, []);
 
-  // Add effect to scroll to selected season
+  // Track previous season to only scroll when it actually changes
+  const previousSeasonRef = React.useRef<number | null>(null);
+
+  // Add effect to scroll to selected season (only when season changes, not on every groupedEpisodes update)
   useEffect(() => {
     if (selectedSeason && seasonScrollViewRef.current && Object.keys(groupedEpisodes).length > 0) {
+      // Only scroll if the season actually changed (not just groupedEpisodes update)
+      if (previousSeasonRef.current === selectedSeason) {
+        return; // Season didn't change, don't scroll
+      }
+      previousSeasonRef.current = selectedSeason;
+
       // Find the index of the selected season
       const seasons = Object.keys(groupedEpisodes).map(Number).sort((a, b) => a - b);
       const selectedIndex = seasons.findIndex(season => season === selectedSeason);
@@ -731,7 +741,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
     return (
       <View style={styles.centeredContainer}>
         <ActivityIndicator size="large" color={currentTheme.colors.primary} />
-        <Text style={[styles.centeredText, { color: currentTheme.colors.text }]}>Loading episodes...</Text>
+        <Text style={[styles.centeredText, { color: currentTheme.colors.text }]}>{t('metadata.loading_episodes')}</Text>
       </View>
     );
   }
@@ -740,7 +750,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
     return (
       <View style={styles.centeredContainer}>
         <MaterialIcons name="error-outline" size={48} color={currentTheme.colors.textMuted} />
-        <Text style={[styles.centeredText, { color: currentTheme.colors.text }]}>No episodes available</Text>
+        <Text style={[styles.centeredText, { color: currentTheme.colors.text }]}>{t('metadata.no_episodes_available')}</Text>
       </View>
     );
   }
@@ -776,7 +786,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
               color: currentTheme.colors.highEmphasis,
               fontSize: isTV ? 28 : isLargeTablet ? 26 : isTablet ? 24 : 18
             }
-          ]}>Seasons</Text>
+          ]}>{t('metadata.seasons')}</Text>
 
           {/* Dropdown Toggle Button */}
           <TouchableOpacity
@@ -855,7 +865,6 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
                       styles.seasonTextButton,
                       {
                         marginRight: seasonButtonSpacing,
-                        width: isTV ? 150 : isLargeTablet ? 140 : isTablet ? 130 : 110,
                         paddingVertical: isTV ? 16 : isLargeTablet ? 14 : isTablet ? 12 : 12,
                         paddingHorizontal: isTV ? 20 : isLargeTablet ? 18 : isTablet ? 16 : 16,
                         borderRadius: isTV ? 16 : isLargeTablet ? 14 : isTablet ? 12 : 12
@@ -874,7 +883,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
                         { color: currentTheme.colors.highEmphasis }
                       ]
                     ]} numberOfLines={1}>
-                      {season === 0 ? 'Specials' : `Season ${season}`}
+                      {season === 0 ? t('metadata.specials') : t('metadata.season_number', { number: season })}
                     </Text>
                   </TouchableOpacity>
                 </View>
@@ -937,7 +946,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
                       ]
                     ]}
                   >
-                    {season === 0 ? 'Specials' : `Season ${season}`}
+                    {season === 0 ? t('metadata.specials') : t('metadata.season_number', { number: season })}
                   </Text>
                 </TouchableOpacity>
               </View>
@@ -1157,17 +1166,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
                 <View style={styles.ratingContainer}>
                   {isImdbRating ? (
                     <>
-                      <FastImage
-                        source={{ uri: IMDb_LOGO }}
-                        style={[
-                          styles.imdbLogo,
-                          {
-                            width: isTV ? 32 : isLargeTablet ? 30 : isTablet ? 28 : 28,
-                            height: isTV ? 17 : isLargeTablet ? 16 : isTablet ? 15 : 15
-                          }
-                        ]}
-                        resizeMode={FastImage.resizeMode.contain}
-                      />
+
                       <Text style={[
                         styles.ratingText,
                         {
@@ -1423,17 +1422,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
                 <View style={styles.ratingContainerHorizontal}>
                   {isImdbRating ? (
                     <>
-                      <FastImage
-                        source={{ uri: IMDb_LOGO }}
-                        style={[
-                          styles.imdbLogoHorizontal,
-                          {
-                            width: isTV ? 32 : isLargeTablet ? 30 : isTablet ? 28 : 28,
-                            height: isTV ? 17 : isLargeTablet ? 16 : isTablet ? 15 : 15
-                          }
-                        ]}
-                        resizeMode={FastImage.resizeMode.contain}
-                      />
+
                       <Text style={[
                         styles.ratingTextHorizontal,
                         {
@@ -1447,7 +1436,17 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
                     </>
                   ) : (
                     <>
-                      <MaterialIcons name="star" size={isTV ? 16 : isLargeTablet ? 15 : isTablet ? 14 : 14} color="#FFD700" />
+                      <FastImage
+                        source={{ uri: TMDB_LOGO }}
+                        style={[
+                          styles.tmdbLogo,
+                          {
+                            width: isTV ? 22 : isLargeTablet ? 20 : isTablet ? 20 : 20,
+                            height: isTV ? 16 : isLargeTablet ? 15 : isTablet ? 14 : 14
+                          }
+                        ]}
+                        resizeMode={FastImage.resizeMode.contain}
+                      />
                       <Text style={[
                         styles.ratingTextHorizontal,
                         {
@@ -1548,7 +1547,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
             paddingHorizontal: horizontalPadding
           }
         ]}>
-          {currentSeasonEpisodes.length} {currentSeasonEpisodes.length === 1 ? 'Episode' : 'Episodes'}
+          {currentSeasonEpisodes.length === 1 ? t('metadata.episode_count', { count: currentSeasonEpisodes.length }) : t('metadata.episode_count_plural', { count: currentSeasonEpisodes.length })}
         </Text>
 
         {/* Show message when no episodes are available for selected season */}
@@ -1556,10 +1555,10 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
           <View style={styles.centeredContainer}>
             <MaterialIcons name="schedule" size={48} color={currentTheme.colors.textMuted} />
             <Text style={[styles.centeredText, { color: currentTheme.colors.text }]}>
-              No episodes available for Season {selectedSeason}
+              {t('metadata.no_episodes_for_season', { season: selectedSeason })}
             </Text>
             <Text style={[styles.centeredSubText, { color: currentTheme.colors.textMuted }]}>
-              Episodes may not be released yet
+              {t('metadata.episodes_not_released')}
             </Text>
           </View>
         )}
@@ -1739,7 +1738,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
                       fontSize: isTV ? 16 : 15,
                       fontWeight: '500',
                     }}>
-                      {markingAsWatched ? 'Removing...' : 'Mark as Unwatched'}
+                      {markingAsWatched ? t('metadata.removing') : t('metadata.mark_as_unwatched')}
                     </Text>
                   </TouchableOpacity>
                 ) : (
@@ -1766,7 +1765,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
                       fontSize: isTV ? 16 : 15,
                       fontWeight: '600',
                     }}>
-                      {markingAsWatched ? 'Marking...' : 'Mark as Watched'}
+                      {markingAsWatched ? t('metadata.marking') : t('metadata.mark_as_watched')}
                     </Text>
                   </TouchableOpacity>
                 )
@@ -1798,7 +1797,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
                     fontWeight: '500',
                     flex: 1, // Allow text to take up space
                   }} numberOfLines={1}>
-                    {markingAsWatched ? 'Removing...' : `Unmark Season ${selectedSeason}`}
+                    {markingAsWatched ? t('metadata.removing') : t('metadata.unmark_season', { season: selectedSeason })}
                   </Text>
                 </TouchableOpacity>
               ) : (
@@ -1826,7 +1825,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
                     fontWeight: '500',
                     flex: 1,
                   }} numberOfLines={1}>
-                    {markingAsWatched ? 'Marking...' : `Mark Season ${selectedSeason}`}
+                    {markingAsWatched ? t('metadata.marking') : t('metadata.mark_season', { season: selectedSeason })}
                   </Text>
                 </TouchableOpacity>
               )}
@@ -1845,7 +1844,7 @@ const SeriesContentComponent: React.FC<SeriesContentProps> = ({
                   fontSize: isTV ? 15 : 14,
                   fontWeight: '500',
                 }}>
-                  Cancel
+                  {t('common.cancel')}
                 </Text>
               </TouchableOpacity>
             </View>
@@ -1995,10 +1994,6 @@ const styles = StyleSheet.create({
     width: 20,
     height: 14,
   },
-  imdbLogo: {
-    width: 35,
-    height: 18,
-  },
   ratingText: {
     color: '#01b4e4',
     fontSize: 13,
@@ -2186,10 +2181,7 @@ const styles = StyleSheet.create({
     // chip background removed
     gap: 2,
   },
-  imdbLogoHorizontal: {
-    width: 35,
-    height: 18,
-  },
+
   ratingTextHorizontal: {
     color: '#FFD700',
     fontSize: 11,

src/components/metadata/TrailerModal.tsx

@@ -10,6 +10,7 @@ import {
   Platform,
   Alert,
 } from 'react-native';
+import { useTranslation } from 'react-i18next';
 import { useTheme } from '../../contexts/ThemeContext';
 import { useTrailer } from '../../contexts/TrailerContext';
 import { logger } from '../../utils/logger';
@@ -19,24 +20,6 @@ import Video, { VideoRef, OnLoadData, OnProgressData } from 'react-native-video'
 const { width, height } = Dimensions.get('window');
 const isTablet = width >= 768;
 
-// Helper function to format trailer type
-const formatTrailerType = (type: string): string => {
-  switch (type) {
-    case 'Trailer':
-      return 'Official Trailer';
-    case 'Teaser':
-      return 'Teaser';
-    case 'Clip':
-      return 'Clip';
-    case 'Featurette':
-      return 'Featurette';
-    case 'Behind the Scenes':
-      return 'Behind the Scenes';
-    default:
-      return type;
-  }
-};
-
 interface TrailerVideo {
   id: string;
   key: string;
@@ -61,8 +44,28 @@ const TrailerModal: React.FC<TrailerModalProps> = memo(({
   trailer,
   contentTitle
 }) => {
+  const { t } = useTranslation();
   const { currentTheme } = useTheme();
   const { pauseTrailer, resumeTrailer } = useTrailer();
+
+  // Helper function to format trailer type with translations
+  const formatTrailerType = useCallback((type: string): string => {
+    switch (type) {
+      case 'Trailer':
+        return t('trailers.official_trailer');
+      case 'Teaser':
+        return t('trailers.teaser');
+      case 'Clip':
+        return t('trailers.clip');
+      case 'Featurette':
+        return t('trailers.featurette');
+      case 'Behind the Scenes':
+        return t('trailers.behind_the_scenes');
+      default:
+        return type;
+    }
+  }, [t]);
+
   const videoRef = React.useRef<VideoRef>(null);
   const [trailerUrl, setTrailerUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
@@ -126,9 +129,9 @@ const TrailerModal: React.FC<TrailerModalProps> = memo(({
       logger.error('TrailerModal', 'Error loading trailer:', err);
 
       Alert.alert(
-        'Trailer Unavailable',
-        'This trailer could not be loaded at this time. Please try again later.',
-        [{ text: 'OK', style: 'default' }]
+        t('trailers.unavailable'),
+        t('trailers.unavailable_desc'),
+        [{ text: t('common.ok'), style: 'default' }]
       );
     }
   }, [trailer, contentTitle, pauseTrailer]);
@@ -232,7 +235,7 @@ const TrailerModal: React.FC<TrailerModalProps> = memo(({
               hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}
             >
               <Text style={[styles.closeButtonText, { color: currentTheme.colors.highEmphasis }]}>
-                Close
+                {t('common.close')}
               </Text>
             </TouchableOpacity>
           </View>
@@ -257,7 +260,7 @@ const TrailerModal: React.FC<TrailerModalProps> = memo(({
                   style={[styles.retryButton, { backgroundColor: currentTheme.colors.primary }]}
                   onPress={loadTrailer}
                 >
-                  <Text style={styles.retryButtonText}>Try Again</Text>
+                  <Text style={styles.retryButtonText}>{t('common.try_again')}</Text>
                 </TouchableOpacity>
               </View>
             )}

src/components/metadata/TrailersSection.tsx

@@ -11,6 +11,7 @@ import {
   ScrollView,
   Modal,
 } from 'react-native';
+import { useTranslation } from 'react-i18next';
 import { MaterialIcons } from '@expo/vector-icons';
 import FastImage from '@d11/react-native-fast-image';
 import { useTheme } from '../../contexts/ThemeContext';
@@ -59,6 +60,7 @@ const TrailersSection: React.FC<TrailersSectionProps> = memo(({
   contentId,
   contentTitle
 }) => {
+  const { t } = useTranslation();
   const { currentTheme } = useTheme();
   const { settings } = useSettings();
   const { pauseTrailer } = useTrailer();
@@ -414,22 +416,22 @@ const TrailersSection: React.FC<TrailersSectionProps> = memo(({
   };
 
   // Format trailer type for display
-  const formatTrailerType = (type: string): string => {
+  const formatTrailerType = useCallback((type: string): string => {
     switch (type) {
       case 'Trailer':
-        return 'Official Trailers';
+        return t('trailers.official_trailers');
       case 'Teaser':
-        return 'Teasers';
+        return t('trailers.teasers');
       case 'Clip':
-        return 'Clips & Scenes';
+        return t('trailers.clips_scenes');
       case 'Featurette':
-        return 'Featurettes';
+        return t('trailers.featurettes');
       case 'Behind the Scenes':
-        return 'Behind the Scenes';
+        return t('trailers.behind_the_scenes');
       default:
         return type;
     }
-  };
+  }, [t]);
 
   // Get icon for trailer type
   const getTrailerTypeIcon = (type: string): string => {
@@ -483,12 +485,12 @@ const TrailersSection: React.FC<TrailersSectionProps> = memo(({
           <View style={styles.header}>
             <MaterialIcons name="movie" size={20} color={currentTheme.colors.primary} />
             <Text style={[styles.headerTitle, { color: currentTheme.colors.highEmphasis }]}>
-              Trailers
+              {t('trailers.title')}
             </Text>
           </View>
           <View style={styles.noTrailersContainer}>
             <Text style={[styles.noTrailersText, { color: currentTheme.colors.textMuted }]}>
-              No trailers available
+              {t('trailers.no_trailers')}
             </Text>
           </View>
         </View>
@@ -512,7 +514,7 @@ const TrailersSection: React.FC<TrailersSectionProps> = memo(({
             fontSize: isTV ? 28 : isLargeTablet ? 26 : isTablet ? 24 : 20
           }
         ]}>
-          Trailers & Videos
+          {t('trailers.title')}
         </Text>
 
         {/* Category Selector - Right Aligned */}

src/components/onboarding/ShapeAnimation.tsx

@@ -0,0 +1,172 @@
+import React, { useEffect } from 'react';
+import { useWindowDimensions, StyleSheet } from 'react-native';
+import {
+    Blur,
+    BlurMask,
+    Canvas,
+    Circle,
+    Extrapolate,
+    interpolate,
+    interpolateColors,
+    LinearGradient,
+    Path,
+    RadialGradient,
+    usePathValue,
+    vec,
+} from '@shopify/react-native-skia';
+import {
+    Easing,
+    useSharedValue,
+    withRepeat,
+    withTiming,
+    SharedValue,
+    useDerivedValue,
+} from 'react-native-reanimated';
+
+import {
+    type Point3D,
+    N_POINTS,
+    ALL_SHAPES,
+    ALL_SHAPES_X,
+    ALL_SHAPES_Y,
+    ALL_SHAPES_Z,
+} from './shapes';
+
+// Color palettes for each shape (gradient stops)
+const COLOR_STOPS = [
+    { start: '#FFD700', end: '#FF6B00' }, // Star: Gold → Orange
+    { start: '#7C3AED', end: '#EC4899' }, // Plugin: Purple → Pink
+    { start: '#00D9FF', end: '#0EA5E9' }, // Search: Cyan → Blue
+    { start: '#FF006E', end: '#FB7185' }, // Heart: Pink → Rose
+];
+
+// ============ 3D UTILITIES ============
+const rotateX = (p: Point3D, angle: number): Point3D => {
+    'worklet';
+    return {
+        x: p.x,
+        y: p.y * Math.cos(angle) - p.z * Math.sin(angle),
+        z: p.y * Math.sin(angle) + p.z * Math.cos(angle),
+    };
+};
+
+const rotateY = (p: Point3D, angle: number): Point3D => {
+    'worklet';
+    return {
+        x: p.x * Math.cos(angle) + p.z * Math.sin(angle),
+        y: p.y,
+        z: -p.x * Math.sin(angle) + p.z * Math.cos(angle),
+    };
+};
+
+interface ShapeAnimationProps {
+    scrollX: SharedValue<number>;
+}
+
+export const ShapeAnimation: React.FC<ShapeAnimationProps> = ({ scrollX }) => {
+    const iTime = useSharedValue(0.0);
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+
+    // Pre-compute input range once
+    const shapeWidth = windowWidth;
+    const inputRange = ALL_SHAPES.map((_, idx) => shapeWidth * idx);
+
+    // Single optimized path - all 4 shapes batched into one Skia Path
+    const morphPath = usePathValue(skPath => {
+        'worklet';
+        const centerX = windowWidth / 2;
+        const centerY = windowHeight * 0.65;
+        const distance = 350;
+
+        for (let i = 0; i < N_POINTS; i++) {
+            // Interpolate 3D coordinates between all shapes
+            const baseX = interpolate(scrollX.value, inputRange, ALL_SHAPES_X[i], Extrapolate.CLAMP);
+            const baseY = interpolate(scrollX.value, inputRange, ALL_SHAPES_Y[i], Extrapolate.CLAMP);
+            const baseZ = interpolate(scrollX.value, inputRange, ALL_SHAPES_Z[i], Extrapolate.CLAMP);
+
+            // Apply 3D rotation
+            let p: Point3D = { x: baseX, y: baseY, z: baseZ };
+            p = rotateX(p, 0.2); // Fixed X tilt
+            p = rotateY(p, iTime.value); // Animated Y rotation
+
+            // Perspective projection
+            const scale = distance / (distance + p.z);
+            const screenX = centerX + p.x * scale;
+            const screenY = centerY + p.y * scale;
+
+            // Depth-based radius for parallax effect
+            const radius = Math.max(0.2, 0.5 * scale);
+            skPath.addCircle(screenX, screenY, radius);
+        }
+
+        return skPath;
+    });
+
+    // Interpolate gradient colors based on scroll position
+    const gradientColors = useDerivedValue(() => {
+        const startColors = COLOR_STOPS.map(c => c.start);
+        const endColors = COLOR_STOPS.map(c => c.end);
+
+        const start = interpolateColors(scrollX.value, inputRange, startColors);
+        const end = interpolateColors(scrollX.value, inputRange, endColors);
+
+        return [start, end];
+    });
+
+    // Rotation animation - infinite loop
+    useEffect(() => {
+        iTime.value = 0;
+        iTime.value = withRepeat(
+            withTiming(2 * Math.PI, {
+                duration: 12000,
+                easing: Easing.linear,
+            }),
+            -1,
+            false
+        );
+    }, []);
+
+    return (
+        <Canvas
+            style={[
+                styles.canvas,
+                {
+                    width: windowWidth,
+                    height: windowHeight,
+                },
+            ]}>
+            {/* Background glow */}
+            <Circle
+                cx={windowWidth / 2}
+                cy={windowHeight * 0.65}
+                r={windowWidth * 0.6}>
+                <RadialGradient
+                    c={vec(windowWidth / 2, windowHeight * 0.65)}
+                    r={windowWidth * 0.6}
+                    colors={['#ffffff20', 'transparent']}
+                />
+                <Blur blur={60} />
+            </Circle>
+
+            {/* Single optimized path with interpolated gradient */}
+            <Path path={morphPath} style="fill">
+                <LinearGradient
+                    start={vec(0, windowHeight * 0.4)}
+                    end={vec(windowWidth, windowHeight * 0.9)}
+                    colors={gradientColors}
+                />
+                <BlurMask blur={5} style="solid" />
+            </Path>
+        </Canvas>
+    );
+};
+
+const styles = StyleSheet.create({
+    canvas: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+    },
+});
+
+export default ShapeAnimation;

src/components/onboarding/shapes/constants.ts

@@ -0,0 +1,8 @@
+// Fixed number of points for all shapes (for interpolation)
+// Lower = better FPS, 1000 points is a good balance for smooth 60fps
+export const N_POINTS = 1000;
+
+export const GOLDEN_RATIO = (1 + Math.sqrt(5)) / 2;
+
+// Normalize a shape to have height TARGET_HEIGHT
+export const TARGET_HEIGHT = 200;

src/components/onboarding/shapes/cube.ts

@@ -0,0 +1,35 @@
+import { N_POINTS } from './constants';
+import { type Point3D } from './types';
+import { fibonacciPoint, normalizeShape, scaleShape } from './utils';
+
+// Cube - map sphere to cube
+const generateCubePoints = (size: number): Point3D[] => {
+    const points: Point3D[] = [];
+    const s = size / 2;
+
+    for (let i = 0; i < N_POINTS; i++) {
+        const { theta, phi } = fibonacciPoint(i, N_POINTS);
+        // Point on unit sphere
+        const sx = Math.sin(phi) * Math.cos(theta);
+        const sy = Math.sin(phi) * Math.sin(theta);
+        const sz = Math.cos(phi);
+
+        // Map to cube (cube mapping)
+        const absX = Math.abs(sx);
+        const absY = Math.abs(sy);
+        const absZ = Math.abs(sz);
+        const max = Math.max(absX, absY, absZ);
+
+        points.push({
+            x: (sx / max) * s,
+            y: (sy / max) * s,
+            z: (sz / max) * s,
+        });
+    }
+    return points;
+};
+
+export const CUBE_POINTS = scaleShape(
+    normalizeShape(generateCubePoints(150)),
+    0.75,
+);

src/components/onboarding/shapes/heart.ts

@@ -0,0 +1,35 @@
+import { N_POINTS } from './constants';
+import { type Point3D } from './types';
+import { fibonacciPoint, normalizeShape } from './utils';
+
+// Heart - starts from Fibonacci sphere, deforms into heart
+const generateHeartPoints = (scale: number): Point3D[] => {
+    const points: Point3D[] = [];
+    for (let i = 0; i < N_POINTS; i++) {
+        const { theta, phi } = fibonacciPoint(i, N_POINTS);
+
+        // Use same angular coordinates as sphere
+        const u = theta;
+        const v = phi;
+        const sinV = Math.sin(v);
+
+        // Heart surface with same angular correspondence
+        const hx = sinV * (15 * Math.sin(u) - 4 * Math.sin(3 * u));
+        const hz = 8 * Math.cos(v);
+        const hy =
+            sinV *
+            (15 * Math.cos(u) -
+                5 * Math.cos(2 * u) -
+                2 * Math.cos(3 * u) -
+                Math.cos(4 * u));
+
+        points.push({
+            x: hx * scale * 0.06,
+            y: -hy * scale * 0.06,
+            z: hz * scale * 0.06,
+        });
+    }
+    return points;
+};
+
+export const HEART_POINTS = normalizeShape(generateHeartPoints(120));

src/components/onboarding/shapes/index.ts

@@ -0,0 +1,28 @@
+export { type Point3D } from './types';
+export { N_POINTS } from './constants';
+
+import { N_POINTS } from './constants';
+import { STAR_POINTS } from './star';       // Welcome to Nuvio
+import { PLUGIN_POINTS } from './plugin';   // Powerful Addons  
+import { SEARCH_POINTS } from './search';   // Smart Discovery
+import { HEART_POINTS } from './heart';     // Your Library (favorites)
+
+// Array of all shapes - ordered to match onboarding slides
+export const ALL_SHAPES = [
+    STAR_POINTS,    // Slide 1: Welcome
+    PLUGIN_POINTS,  // Slide 2: Addons
+    SEARCH_POINTS,  // Slide 3: Discovery
+    HEART_POINTS,   // Slide 4: Library
+];
+
+export const POINTS_ARRAY = new Array(N_POINTS).fill(0);
+
+export const ALL_SHAPES_X = POINTS_ARRAY.map((_, pointIndex) =>
+    ALL_SHAPES.map(shape => shape[pointIndex].x),
+);
+export const ALL_SHAPES_Y = POINTS_ARRAY.map((_, pointIndex) =>
+    ALL_SHAPES.map(shape => shape[pointIndex].y),
+);
+export const ALL_SHAPES_Z = POINTS_ARRAY.map((_, pointIndex) =>
+    ALL_SHAPES.map(shape => shape[pointIndex].z),
+);

src/components/onboarding/shapes/plugin.ts

@@ -0,0 +1,96 @@
+import { N_POINTS } from './constants';
+import { type Point3D } from './types';
+import { normalizeShape, scaleShape } from './utils';
+
+// LEGO Brick shape - perfectly represents "Addons" or "Plugins"
+const generateLegoPoints = (): Point3D[] => {
+    const points: Point3D[] = [];
+
+    // Dimensions
+    const width = 160;
+    const depth = 80;
+    const height = 48;
+    const studRadius = 12;
+    const studHeight = 16;
+
+    // Distribute points: 70% body, 30% studs
+    const bodyPoints = Math.floor(N_POINTS * 0.7);
+    const studPoints = N_POINTS - bodyPoints;
+    const pointsPerStud = Math.floor(studPoints / 8); // 8 studs (2x4 brick)
+
+    // 1. Main Brick Body (Rectangular Prism)
+    for (let i = 0; i < bodyPoints; i++) {
+        const t1 = Math.random();
+        const t2 = Math.random();
+        const t3 = Math.random();
+
+        // Create density concentration on edges for better definition
+        const x = (Math.pow(t1, 0.5) * (Math.random() > 0.5 ? 1 : -1)) * width / 2;
+        const y = (Math.pow(t2, 0.5) * (Math.random() > 0.5 ? 1 : -1)) * height / 2;
+        const z = (Math.pow(t3, 0.5) * (Math.random() > 0.5 ? 1 : -1)) * depth / 2;
+
+        // Snapping to faces to make it look solid
+        const face = Math.floor(Math.random() * 6);
+        let px = x, py = y, pz = z;
+
+        if (face === 0) px = width / 2;
+        else if (face === 1) px = -width / 2;
+        else if (face === 2) py = height / 2;
+        else if (face === 3) py = -height / 2;
+        else if (face === 4) pz = depth / 2;
+        else if (face === 5) pz = -depth / 2;
+
+        // Add some random noise inside/surface
+        if (Math.random() > 0.8) {
+            points.push({ x: x, y: y, z: z });
+        } else {
+            points.push({ x: px, y: py, z: pz });
+        }
+    }
+
+    // 2. Studs (Cylinders on top)
+    // 2x4 Grid positions
+    const studPositions = [
+        { x: -width * 0.375, z: -depth * 0.25 }, { x: -width * 0.125, z: -depth * 0.25 },
+        { x: width * 0.125, z: -depth * 0.25 }, { x: width * 0.375, z: -depth * 0.25 },
+        { x: -width * 0.375, z: depth * 0.25 }, { x: -width * 0.125, z: depth * 0.25 },
+        { x: width * 0.125, z: depth * 0.25 }, { x: width * 0.375, z: depth * 0.25 },
+    ];
+
+    studPositions.forEach((pos, studIndex) => {
+        for (let j = 0; j < pointsPerStud; j++) {
+            const angle = Math.random() * Math.PI * 2;
+            const r = Math.sqrt(Math.random()) * studRadius;
+
+            // Top face of stud
+            if (Math.random() > 0.5) {
+                points.push({
+                    x: pos.x + r * Math.cos(angle),
+                    y: -height / 2 - studHeight, // Top
+                    z: pos.z + r * Math.sin(angle),
+                });
+            } else {
+                // Side of stud
+                const h = Math.random() * studHeight;
+                points.push({
+                    x: pos.x + studRadius * Math.cos(angle),
+                    y: -height / 2 - h,
+                    z: pos.z + studRadius * Math.sin(angle),
+                });
+            }
+        }
+    });
+
+    // FILL remaining points to prevent "undefined" errors
+    while (points.length < N_POINTS) {
+        points.push(points[points.length - 1] || { x: 0, y: 0, z: 0 });
+    }
+
+    // Slice to guarantee exact count
+    return points.slice(0, N_POINTS);
+};
+
+export const PLUGIN_POINTS = scaleShape(
+    normalizeShape(generateLegoPoints()),
+    0.4,
+);

src/components/onboarding/shapes/search.ts

@@ -0,0 +1,57 @@
+import { N_POINTS } from './constants';
+import { type Point3D } from './types';
+import { normalizeShape, scaleShape } from './utils';
+
+// Magnifying glass/search shape - for "Discovery" page
+const generateSearchPoints = (radius: number): Point3D[] => {
+    const points: Point3D[] = [];
+    const handleLength = radius * 0.8;
+    const handleWidth = radius * 0.15;
+
+    // Split points between ring and handle
+    const ringPoints = Math.floor(N_POINTS * 0.7);
+    const handlePoints = N_POINTS - ringPoints;
+
+    // Create the circular ring (lens)
+    for (let i = 0; i < ringPoints; i++) {
+        const t = i / ringPoints;
+        const mainAngle = t * Math.PI * 2;
+        const tubeAngle = (i * 17) % 20 / 20 * Math.PI * 2; // Distribute around tube
+
+        const tubeRadius = radius * 0.12;
+        const centerRadius = radius;
+
+        const cx = centerRadius * Math.cos(mainAngle);
+        const cy = centerRadius * Math.sin(mainAngle);
+
+        points.push({
+            x: cx + tubeRadius * Math.cos(tubeAngle) * Math.cos(mainAngle),
+            y: cy + tubeRadius * Math.cos(tubeAngle) * Math.sin(mainAngle),
+            z: tubeRadius * Math.sin(tubeAngle),
+        });
+    }
+
+    // Create the handle
+    for (let i = 0; i < handlePoints; i++) {
+        const t = i / handlePoints;
+        const handleAngle = (i * 13) % 12 / 12 * Math.PI * 2;
+
+        // Handle position (extends from bottom-right of ring)
+        const handleStart = radius * 0.7;
+        const hx = handleStart + t * handleLength;
+        const hy = handleStart + t * handleLength;
+
+        points.push({
+            x: hx + handleWidth * Math.cos(handleAngle) * 0.3,
+            y: hy + handleWidth * Math.cos(handleAngle) * 0.3,
+            z: handleWidth * Math.sin(handleAngle),
+        });
+    }
+
+    return points;
+};
+
+export const SEARCH_POINTS = scaleShape(
+    normalizeShape(generateSearchPoints(80)),
+    1.0,
+);

src/components/onboarding/shapes/sphere.ts

@@ -0,0 +1,19 @@
+import { N_POINTS } from './constants';
+import { type Point3D } from './types';
+import { fibonacciPoint, normalizeShape } from './utils';
+
+// Sphere
+const generateSpherePoints = (radius: number): Point3D[] => {
+    const points: Point3D[] = [];
+    for (let i = 0; i < N_POINTS; i++) {
+        const { theta, phi } = fibonacciPoint(i, N_POINTS);
+        points.push({
+            x: radius * Math.sin(phi) * Math.cos(theta),
+            y: radius * Math.sin(phi) * Math.sin(theta),
+            z: radius * Math.cos(phi),
+        });
+    }
+    return points;
+};
+
+export const SPHERE_POINTS = normalizeShape(generateSpherePoints(100));

src/components/onboarding/shapes/star.ts

@@ -0,0 +1,31 @@
+import { N_POINTS } from './constants';
+import { type Point3D } from './types';
+import { fibonacciPoint, normalizeShape, scaleShape } from './utils';
+
+// Star shape - for "Welcome" page
+const generateStarPoints = (outerRadius: number, innerRadius: number): Point3D[] => {
+    const points: Point3D[] = [];
+    const numPoints = 5; // 5-pointed star
+
+    for (let i = 0; i < N_POINTS; i++) {
+        const { theta, phi, t } = fibonacciPoint(i, N_POINTS);
+
+        // Create star cross-section
+        const angle = theta * numPoints;
+        const radiusFactor = 0.5 + 0.5 * Math.cos(angle);
+        const radius = innerRadius + (outerRadius - innerRadius) * radiusFactor;
+
+        const sinPhi = Math.sin(phi);
+        points.push({
+            x: radius * sinPhi * Math.cos(theta),
+            y: radius * sinPhi * Math.sin(theta),
+            z: radius * Math.cos(phi) * 0.3, // Flatten z for star shape
+        });
+    }
+    return points;
+};
+
+export const STAR_POINTS = scaleShape(
+    normalizeShape(generateStarPoints(100, 40)),
+    0.9,
+);

src/components/onboarding/shapes/torus.ts

@@ -0,0 +1,48 @@
+import { N_POINTS } from './constants';
+import { type Point3D } from './types';
+import { normalizeShape, scaleShape } from './utils';
+
+// Torus - uniform grid with same index correspondence
+const generateTorusPoints = (major: number, minor: number): Point3D[] => {
+    const points: Point3D[] = [];
+
+    // Calculate approximate grid dimensions
+    const ratio = major / minor;
+    const minorSegments = Math.round(Math.sqrt(N_POINTS / ratio));
+    const majorSegments = Math.round(N_POINTS / minorSegments);
+
+    let idx = 0;
+    for (let i = 0; i < majorSegments && idx < N_POINTS; i++) {
+        const u = (i / majorSegments) * Math.PI * 2;
+
+        for (let j = 0; j < minorSegments && idx < N_POINTS; j++) {
+            const v = (j / minorSegments) * Math.PI * 2;
+
+            points.push({
+                x: (major + minor * Math.cos(v)) * Math.cos(u),
+                y: (major + minor * Math.cos(v)) * Math.sin(u),
+                z: minor * Math.sin(v),
+            });
+            idx++;
+        }
+    }
+
+    // Fill missing points if necessary
+    while (points.length < N_POINTS) {
+        const t = points.length / N_POINTS;
+        const u = t * Math.PI * 2 * majorSegments;
+        const v = t * Math.PI * 2 * minorSegments;
+        points.push({
+            x: (major + minor * Math.cos(v)) * Math.cos(u),
+            y: (major + minor * Math.cos(v)) * Math.sin(u),
+            z: minor * Math.sin(v),
+        });
+    }
+
+    return points.slice(0, N_POINTS);
+};
+
+export const TORUS_POINTS = scaleShape(
+    normalizeShape(generateTorusPoints(50, 25)),
+    1.2,
+);

src/components/onboarding/shapes/types.ts

@@ -0,0 +1 @@
+export type Point3D = { x: number; y: number; z: number };

src/components/onboarding/shapes/utils.ts

@@ -0,0 +1,54 @@
+import { GOLDEN_RATIO, TARGET_HEIGHT } from './constants';
+import { type Point3D } from './types';
+
+// Generate Fibonacci points on unit sphere, then map to shape
+export const fibonacciPoint = (
+    i: number,
+    total: number,
+): { theta: number; phi: number; t: number } => {
+    const t = i / total;
+    const theta = (2 * Math.PI * i) / GOLDEN_RATIO;
+    const phi = Math.acos(1 - 2 * t);
+    return { theta, phi, t };
+};
+
+export const normalizeShape = (points: Point3D[]): Point3D[] => {
+    // Find min/max for each axis
+    let minX = Infinity,
+        maxX = -Infinity;
+    let minY = Infinity,
+        maxY = -Infinity;
+    let minZ = Infinity,
+        maxZ = -Infinity;
+
+    for (const p of points) {
+        minX = Math.min(minX, p.x);
+        maxX = Math.max(maxX, p.x);
+        minY = Math.min(minY, p.y);
+        maxY = Math.max(maxY, p.y);
+        minZ = Math.min(minZ, p.z);
+        maxZ = Math.max(maxZ, p.z);
+    }
+
+    // Calculate current dimensions
+    const currentHeight = maxY - minY;
+    const scale = TARGET_HEIGHT / currentHeight;
+
+    // Center and scale uniformly
+    const centerY = (minY + maxY) / 2;
+
+    return points.map(p => ({
+        x: (p.x - (minX + maxX) / 2) * scale,
+        y: (p.y - centerY) * scale,
+        z: (p.z - (minZ + maxZ) / 2) * scale,
+    }));
+};
+
+// Additional scale for single shape
+export const scaleShape = (points: Point3D[], factor: number): Point3D[] => {
+    return points.map(p => ({
+        x: p.x * factor,
+        y: p.y * factor,
+        z: p.z * factor,
+    }));
+};

src/components/player/AndroidVideoPlayer.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useMemo, useCallback, useState } from 'react';
-import { View, StyleSheet, Platform, Animated } from 'react-native';
+import { View, StyleSheet, Platform, Animated, ToastAndroid } from 'react-native';
 import { toast } from '@backpackapp-io/react-native-toast';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
@@ -33,6 +33,7 @@ import LoadingOverlay from './modals/LoadingOverlay';
 import PlayerControls from './controls/PlayerControls';
 import { AudioTrackModal } from './modals/AudioTrackModal';
 import { SubtitleModals } from './modals/SubtitleModals';
+import { SubtitleSyncModal } from './modals/SubtitleSyncModal';
 import SpeedModal from './modals/SpeedModal';
 import { SourcesModal } from './modals/SourcesModal';
 import { EpisodesModal } from './modals/EpisodesModal';
@@ -40,6 +41,10 @@ import { EpisodeStreamsModal } from './modals/EpisodeStreamsModal';
 import { ErrorModal } from './modals/ErrorModal';
 import { CustomSubtitles } from './subtitles/CustomSubtitles';
 import ParentalGuideOverlay from './overlays/ParentalGuideOverlay';
+import SkipIntroButton from './overlays/SkipIntroButton';
+import UpNextButton from './common/UpNextButton';
+import { CustomAlert } from '../CustomAlert';
+
 
 // Android-specific components
 import { VideoSurface } from './android/components/VideoSurface';
@@ -52,6 +57,8 @@ import { formatTime, isHlsStream, getHlsHeaders, defaultAndroidHeaders, parseSRT
 import { storageService } from '../../services/storageService';
 import stremioService from '../../services/stremioService';
 import { WyzieSubtitle, SubtitleCue } from './utils/playerTypes';
+import { findBestSubtitleTrack, findBestAudioTrack } from './utils/trackSelectionUtils';
+import { useTheme } from '../../contexts/ThemeContext';
 import axios from 'axios';
 
 const DEBUG_MODE = false;
@@ -60,6 +67,7 @@ const AndroidVideoPlayer: React.FC = () => {
   const navigation = useNavigation();
   const route = useRoute<RouteProp<RootStackParamList, 'PlayerAndroid'>>();
   const insets = useSafeAreaInsets();
+  const { currentTheme } = useTheme();
 
   const {
     uri, title = 'Episode Name', season, episode, episodeTitle, quality, year,
@@ -76,6 +84,7 @@ const AndroidVideoPlayer: React.FC = () => {
 
   const videoRef = useRef<any>(null);
   const mpvPlayerRef = useRef<MpvPlayerRef>(null);
+  const exoPlayerRef = useRef<any>(null);
   const pinchRef = useRef(null);
   const tracksHook = usePlayerTracks();
 
@@ -90,6 +99,24 @@ const AndroidVideoPlayer: React.FC = () => {
   // State to force unmount VideoSurface during stream transitions
   const [isTransitioningStream, setIsTransitioningStream] = useState(false);
 
+  // Dual video engine state: ExoPlayer primary, MPV fallback
+  // If videoPlayerEngine is 'mpv', always use MPV; otherwise use auto behavior
+  const shouldUseMpvOnly = settings.videoPlayerEngine === 'mpv';
+  const [useExoPlayer, setUseExoPlayer] = useState(!shouldUseMpvOnly);
+  const hasExoPlayerFailed = useRef(false);
+  const [showMpvSwitchAlert, setShowMpvSwitchAlert] = useState(false);
+
+
+  // Sync useExoPlayer with settings when videoPlayerEngine is set to 'mpv'
+  // Only run once on mount to avoid re-render loops
+  const hasAppliedEngineSettingRef = useRef(false);
+  useEffect(() => {
+    if (!hasAppliedEngineSettingRef.current && settings.videoPlayerEngine === 'mpv') {
+      hasAppliedEngineSettingRef.current = true;
+      setUseExoPlayer(false);
+    }
+  }, [settings.videoPlayerEngine]);
+
   // Subtitle addon state
   const [availableSubtitles, setAvailableSubtitles] = useState<WyzieSubtitle[]>([]);
   const [isLoadingSubtitleList, setIsLoadingSubtitleList] = useState(false);
@@ -97,6 +124,7 @@ const AndroidVideoPlayer: React.FC = () => {
   const [useCustomSubtitles, setUseCustomSubtitles] = useState(false);
   const [customSubtitles, setCustomSubtitles] = useState<SubtitleCue[]>([]);
   const [currentSubtitle, setCurrentSubtitle] = useState<string>('');
+  const [selectedExternalSubtitleId, setSelectedExternalSubtitleId] = useState<string | null>(null);
 
   // Subtitle customization state
   const [subtitleSize, setSubtitleSize] = useState(28);
@@ -113,6 +141,31 @@ const AndroidVideoPlayer: React.FC = () => {
   const [subtitleLineHeightMultiplier, setSubtitleLineHeightMultiplier] = useState(1.2);
   const [subtitleOffsetSec, setSubtitleOffsetSec] = useState(0);
 
+  // Subtitle sync modal state
+  const [showSyncModal, setShowSyncModal] = useState(false);
+
+  // Track auto-selection ref to prevent duplicate selections
+  const hasAutoSelectedTracks = useRef(false);
+
+  // Track previous video session to reset subtitle offset only when video actually changes
+  const previousVideoRef = useRef<{ uri?: string; episodeId?: string }>({});
+  
+  // Reset subtitle offset when starting a new video session
+  useEffect(() => {
+    const currentVideo = { uri, episodeId };
+    const previousVideo = previousVideoRef.current;
+    
+    // Only reset if this is actually a new video (uri or episodeId changed)
+    if (previousVideo.uri !== undefined && 
+        (previousVideo.uri !== currentVideo.uri || previousVideo.episodeId !== currentVideo.episodeId)) {
+      setSubtitleOffsetSec(0);
+    }
+    
+    // Update the ref for next comparison
+    previousVideoRef.current = currentVideo;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uri, episodeId]);
+
   const metadataResult = useMetadata({ id: id || 'placeholder', type: (type as any) });
   const { metadata, cast } = Boolean(id && type) ? (metadataResult as any) : { metadata: null, cast: [] };
   const hasLogo = metadata && metadata.logo;
@@ -129,7 +182,9 @@ const AndroidVideoPlayer: React.FC = () => {
     playerState.currentTime,
     playerState.duration,
     playerState.isSeeking,
-    playerState.isMounted
+    playerState.isMounted,
+    exoPlayerRef,
+    useExoPlayer
   );
 
   const traktAutosync = useTraktAutosync({
@@ -152,7 +207,8 @@ const AndroidVideoPlayer: React.FC = () => {
     playerState.duration,
     playerState.paused,
     traktAutosync,
-    controlsHook.seekToTime
+    controlsHook.seekToTime,
+    currentStreamProvider
   );
 
   const gestureControls = usePlayerGestureControls({
@@ -178,6 +234,33 @@ const AndroidVideoPlayer: React.FC = () => {
     }).start();
   }, [playerState.showControls]);
 
+  // Auto-hide controls after 3 seconds of inactivity
+  useEffect(() => {
+    // Clear any existing timeout
+    if (controlsTimeout.current) {
+      clearTimeout(controlsTimeout.current);
+      controlsTimeout.current = null;
+    }
+
+    // Only set timeout if controls are visible and video is playing
+    if (playerState.showControls && !playerState.paused) {
+      controlsTimeout.current = setTimeout(() => {
+        // Don't hide if user is dragging the seek bar
+        if (!playerState.isDragging.current) {
+          playerState.setShowControls(false);
+        }
+      }, 2000); // 2 seconds delay
+    }
+
+    // Cleanup on unmount or when dependencies change
+    return () => {
+      if (controlsTimeout.current) {
+        clearTimeout(controlsTimeout.current);
+        controlsTimeout.current = null;
+      }
+    };
+  }, [playerState.showControls, playerState.paused, playerState.isDragging]);
+
   useEffect(() => {
     openingAnimation.startOpeningAnimation();
   }, []);
@@ -256,7 +339,8 @@ const AndroidVideoPlayer: React.FC = () => {
 
     if (data.audioTracks) {
       const formatted = data.audioTracks.map((t: any, i: number) => ({
-        id: t.index !== undefined ? t.index : i,
+        // react-native-video selectedAudioTrack {type:'index'} uses 0-based list index.
+        id: i,
         name: t.title || t.name || `Track ${i + 1}`,
         language: t.language
       }));
@@ -264,7 +348,9 @@ const AndroidVideoPlayer: React.FC = () => {
     }
     if (data.textTracks) {
       const formatted = data.textTracks.map((t: any, i: number) => ({
-        id: t.index !== undefined ? t.index : i,
+        // react-native-video selectedTextTrack {type:'index'} uses 0-based list index.
+        // Using `t.index` can be non-unique/misaligned and breaks selection/rendering.
+        id: i,
         name: t.title || t.name || `Track ${i + 1}`,
         language: t.language
       }));
@@ -274,19 +360,75 @@ const AndroidVideoPlayer: React.FC = () => {
     playerState.setIsVideoLoaded(true);
     openingAnimation.completeOpeningAnimation();
 
+    // Auto-select audio track based on preferences
+    if (data.audioTracks && data.audioTracks.length > 0 && settings?.preferredAudioLanguage) {
+      const formatted = data.audioTracks.map((t: any, i: number) => ({
+        id: i,
+        name: t.title || t.name || `Track ${i + 1}`,
+        language: t.language
+      }));
+      const bestAudioTrack = findBestAudioTrack(formatted, settings.preferredAudioLanguage);
+      if (bestAudioTrack !== null) {
+        logger.debug(`[AndroidVideoPlayer] Auto-selecting audio track ${bestAudioTrack} for language: ${settings.preferredAudioLanguage}`);
+        tracksHook.setSelectedAudioTrack({ type: 'index', value: bestAudioTrack });
+      }
+    }
+
+    // Auto-select subtitle track based on preferences
+    // Only auto-select internal tracks here if preference is 'internal' or 'any'
+    // If preference is 'external', we wait for the useEffect to handle selection after external subs load
+    if (data.textTracks && data.textTracks.length > 0 && !hasAutoSelectedTracks.current && settings?.enableSubtitleAutoSelect) {
+      const sourcePreference = settings?.subtitleSourcePreference || 'internal';
+
+      // Only pre-select internal if preference is internal or any
+      if (sourcePreference === 'internal' || sourcePreference === 'any') {
+        const formatted = data.textTracks.map((t: any, i: number) => ({
+          id: i,
+          name: t.title || t.name || `Track ${i + 1}`,
+          language: t.language
+        }));
+        const subtitleSelection = findBestSubtitleTrack(
+          formatted,
+          [], // External subtitles not yet loaded
+          {
+            preferredSubtitleLanguage: settings?.preferredSubtitleLanguage || 'en',
+            subtitleSourcePreference: sourcePreference,
+            enableSubtitleAutoSelect: true
+          }
+        );
+
+        if (subtitleSelection.type === 'internal' && subtitleSelection.internalTrackId !== undefined) {
+          logger.debug(`[AndroidVideoPlayer] Auto-selecting internal subtitle track ${subtitleSelection.internalTrackId}`);
+          tracksHook.setSelectedTextTrack(subtitleSelection.internalTrackId);
+          hasAutoSelectedTracks.current = true;
+        }
+      }
+      // If preference is 'external', don't select anything here - useEffect will handle it
+    }
+
     // Handle Resume - check both initialPosition and initialSeekTargetRef
     const resumeTarget = watchProgress.initialPosition || watchProgress.initialSeekTargetRef?.current;
     if (resumeTarget && resumeTarget > 0 && !watchProgress.showResumeOverlay && videoDuration > 0) {
-      console.log('[AndroidVideoPlayer] Seeking to resume position:', resumeTarget, 'duration:', videoDuration);
-      // Use a small delay to ensure the player is ready, then seek directly
+      const seekPosition = Math.min(resumeTarget, videoDuration - 0.5);
+      console.log('[AndroidVideoPlayer] Seeking to resume position:', seekPosition, 'duration:', videoDuration, 'useExoPlayer:', useExoPlayer);
+
+      // Use a small delay to ensure the player is ready
+      // Directly use refs to avoid stale closure issues
       setTimeout(() => {
-        if (mpvPlayerRef.current) {
-          console.log('[AndroidVideoPlayer] Calling mpvPlayerRef.current.seek directly');
-          mpvPlayerRef.current.seek(Math.min(resumeTarget, videoDuration - 0.5));
+        console.log('[AndroidVideoPlayer] Executing resume seek to:', seekPosition, 'ExoPlayer available:', !!exoPlayerRef.current, 'MPV available:', !!mpvPlayerRef.current);
+
+        if (useExoPlayer && exoPlayerRef.current) {
+          console.log('[AndroidVideoPlayer] Seeking ExoPlayer to resume position:', seekPosition);
+          exoPlayerRef.current.seek(seekPosition);
+        } else if (mpvPlayerRef.current) {
+          console.log('[AndroidVideoPlayer] Seeking MPV to resume position:', seekPosition);
+          mpvPlayerRef.current.seek(seekPosition);
+        } else {
+          console.warn('[AndroidVideoPlayer] No player ref available for resume seek');
         }
-      }, 200);
+      }, 300);
     }
-  }, [id, type, episodeId, playerState.isMounted, watchProgress.initialPosition]);
+  }, [id, type, episodeId, playerState.isMounted, watchProgress.initialPosition, useExoPlayer]);
 
   const handleProgress = useCallback((data: any) => {
     if (playerState.isDragging.current || playerState.isSeeking.current || !playerState.isMounted.current || setupHook.isAppBackgrounded.current) return;
@@ -297,18 +439,60 @@ const AndroidVideoPlayer: React.FC = () => {
     }
   }, [playerState.currentTime, playerState.isDragging, playerState.isSeeking, setupHook.isAppBackgrounded]);
 
+  // Auto-select subtitles when both internal tracks and video are loaded
+  // This ensures we wait for internal tracks before falling back to external
+  useEffect(() => {
+    if (!playerState.isVideoLoaded || hasAutoSelectedTracks.current || !settings?.enableSubtitleAutoSelect) {
+      return;
+    }
+
+    const internalTracks = tracksHook.ksTextTracks;
+    const externalSubs = availableSubtitles;
+
+    // Wait a short delay to ensure tracks are fully populated
+    const timeoutId = setTimeout(() => {
+      if (hasAutoSelectedTracks.current) return;
+
+      const subtitleSelection = findBestSubtitleTrack(
+        internalTracks,
+        externalSubs,
+        {
+          preferredSubtitleLanguage: settings?.preferredSubtitleLanguage || 'en',
+          subtitleSourcePreference: settings?.subtitleSourcePreference || 'internal',
+          enableSubtitleAutoSelect: true
+        }
+      );
+
+      // Trust the findBestSubtitleTrack function's decision - it already implements priority logic
+      if (subtitleSelection.type === 'internal' && subtitleSelection.internalTrackId !== undefined) {
+        logger.debug(`[AndroidVideoPlayer] Auto-selecting internal subtitle track ${subtitleSelection.internalTrackId}`);
+        tracksHook.setSelectedTextTrack(subtitleSelection.internalTrackId);
+        hasAutoSelectedTracks.current = true;
+      } else if (subtitleSelection.type === 'external' && subtitleSelection.externalSubtitle) {
+        logger.debug(`[AndroidVideoPlayer] Auto-selecting external subtitle: ${subtitleSelection.externalSubtitle.display}`);
+        loadWyzieSubtitle(subtitleSelection.externalSubtitle);
+        hasAutoSelectedTracks.current = true;
+      }
+    }, 500); // Short delay to ensure tracks are populated
+
+    return () => clearTimeout(timeoutId);
+  }, [playerState.isVideoLoaded, tracksHook.ksTextTracks, availableSubtitles, settings]);
+
   // Sync custom subtitle text with current playback time
   useEffect(() => {
     if (!useCustomSubtitles || customSubtitles.length === 0) return;
 
-    const cueNow = customSubtitles.find(
-      cue => playerState.currentTime >= cue.start && playerState.currentTime <= cue.end
-    );
+    // Apply timing offset for custom/addon subtitles (ExoPlayer internal subtitles do not support offset)
+    const adjustedTime = playerState.currentTime + (subtitleOffsetSec || 0);
+    const cueNow = customSubtitles.find(cue => adjustedTime >= cue.start && adjustedTime <= cue.end);
     setCurrentSubtitle(cueNow ? cueNow.text : '');
-  }, [playerState.currentTime, useCustomSubtitles, customSubtitles]);
+  }, [playerState.currentTime, subtitleOffsetSec, useCustomSubtitles, customSubtitles]);
 
   const toggleControls = useCallback(() => {
-    playerState.setShowControls(prev => !prev);
+    playerState.setShowControls(prev => {
+      // If we're showing controls, the useEffect will handle the auto-hide timer
+      return !prev;
+    });
   }, []);
 
   const hideControls = useCallback(() => {
@@ -325,6 +509,44 @@ const AndroidVideoPlayer: React.FC = () => {
     else navigation.reset({ index: 0, routes: [{ name: 'Home' }] } as any);
   }, [navigation]);
 
+  // Handle codec errors from ExoPlayer - silently switch to MPV
+  const handleCodecError = useCallback(() => {
+    if (!hasExoPlayerFailed.current) {
+      hasExoPlayerFailed.current = true;
+      logger.warn('[AndroidVideoPlayer] ExoPlayer codec error detected, switching to MPV silently');
+      ToastAndroid.show('Switching to MPV due to playback issue', ToastAndroid.SHORT);
+      setUseExoPlayer(false);
+    }
+  }, []);
+
+  // Handle manual switch to MPV - for users experiencing black screen
+  const handleManualSwitchToMPV = useCallback(() => {
+    if (useExoPlayer && !hasExoPlayerFailed.current) {
+      setShowMpvSwitchAlert(true);
+    }
+  }, [useExoPlayer]);
+
+  // Confirm and execute the switch to MPV
+  const confirmSwitchToMPV = useCallback(() => {
+    hasExoPlayerFailed.current = true;
+    logger.info('[AndroidVideoPlayer] User confirmed switch to MPV');
+    ToastAndroid.show('Switching to MPV player...', ToastAndroid.SHORT);
+
+    // Store current playback position before switching
+    const currentPos = playerState.currentTime;
+
+    // Switch to MPV
+    setUseExoPlayer(false);
+
+    // Seek to current position after a brief delay to ensure MPV is loaded
+    setTimeout(() => {
+      if (mpvPlayerRef.current && currentPos > 0) {
+        mpvPlayerRef.current.seek(currentPos);
+      }
+    }, 500);
+  }, [playerState.currentTime]);
+
+
   const handleSelectStream = async (newStream: any) => {
     if (newStream.url === currentStreamUrl) {
       modals.setShowSourcesModal(false);
@@ -423,6 +645,7 @@ const AndroidVideoPlayer: React.FC = () => {
 
       setAvailableSubtitles(subs);
       logger.info(`[AndroidVideoPlayer] Fetched ${subs.length} addon subtitles`);
+      // Auto-selection is now handled by useEffect that waits for internal tracks
     } catch (e) {
       logger.error('[AndroidVideoPlayer] Error fetching addon subtitles', e);
     } finally {
@@ -450,6 +673,7 @@ const AndroidVideoPlayer: React.FC = () => {
       const parsedCues = parseSRT(srtContent);
       setCustomSubtitles(parsedCues);
       setUseCustomSubtitles(true);
+      setSelectedExternalSubtitleId(subtitle.id); // Track the selected external subtitle
 
       // Disable MPV's built-in subtitle track when using custom subtitles
       tracksHook.setSelectedTextTrack(-1);
@@ -457,8 +681,8 @@ const AndroidVideoPlayer: React.FC = () => {
         mpvPlayerRef.current.setSubtitleTrack(-1);
       }
 
-      // Set initial subtitle based on current time
-      const adjustedTime = playerState.currentTime;
+      // Set initial subtitle based on current time (+ any timing offset)
+      const adjustedTime = playerState.currentTime + (subtitleOffsetSec || 0);
       const cueNow = parsedCues.find(cue => adjustedTime >= cue.start && adjustedTime <= cue.end);
       setCurrentSubtitle(cueNow ? cueNow.text : '');
 
@@ -470,12 +694,13 @@ const AndroidVideoPlayer: React.FC = () => {
     } finally {
       setIsLoadingSubtitles(false);
     }
-  }, [modals, playerState.currentTime, tracksHook]);
+  }, [modals, playerState.currentTime, subtitleOffsetSec, tracksHook]);
 
   const disableCustomSubtitles = useCallback(() => {
     setUseCustomSubtitles(false);
     setCustomSubtitles([]);
     setCurrentSubtitle('');
+    setSelectedExternalSubtitleId(null); // Clear external selection
   }, []);
 
   const cycleResizeMode = useCallback(() => {
@@ -483,6 +708,13 @@ const AndroidVideoPlayer: React.FC = () => {
     else playerState.setResizeMode('contain');
   }, [playerState.resizeMode]);
 
+  // Memoize selectedTextTrack to prevent unnecessary re-renders
+  const memoizedSelectedTextTrack = useMemo(() => {
+    return tracksHook.selectedTextTrack === -1
+      ? { type: 'disabled' as const }
+      : { type: 'index' as const, value: tracksHook.selectedTextTrack };
+  }, [tracksHook.selectedTextTrack]);
+
   return (
     <View style={[styles.container, {
       width: playerState.screenDimensions.width,
@@ -564,11 +796,33 @@ const AndroidVideoPlayer: React.FC = () => {
               }
             }}
             mpvPlayerRef={mpvPlayerRef}
+            exoPlayerRef={exoPlayerRef}
             pinchRef={pinchRef}
             onPinchGestureEvent={() => { }}
             onPinchHandlerStateChange={() => { }}
             screenDimensions={playerState.screenDimensions}
-            useHardwareDecoding={settings.useHardwareDecoding}
+            decoderMode={settings.decoderMode}
+            gpuMode={settings.gpuMode}
+            // Dual video engine props
+            useExoPlayer={useExoPlayer}
+            onCodecError={handleCodecError}
+            selectedAudioTrack={tracksHook.selectedAudioTrack as any || undefined}
+            selectedTextTrack={memoizedSelectedTextTrack as any}
+            // Subtitle Styling - pass to MPV for built-in subtitle customization
+            // MPV uses different scaling than React Native, so we apply conversion factors:
+            // - Font size: MPV needs ~1.5x larger values (MPV's sub-font-size vs RN fontSize)
+            // - Border: MPV needs ~1.5x larger values
+            // - Position: MPV sub-pos uses 0=top, 100=bottom, >100=below screen
+            subtitleSize={Math.round(subtitleSize * 1.5)}
+            subtitleColor={subtitleTextColor}
+            subtitleBackgroundOpacity={subtitleBackground ? subtitleBgOpacity : 0}
+            subtitleBorderSize={subtitleOutline ? Math.round(subtitleOutlineWidth * 1.5) : 0}
+            subtitleBorderColor={subtitleOutlineColor}
+            subtitleShadowEnabled={subtitleTextShadow}
+            subtitlePosition={Math.max(50, 100 - Math.floor(subtitleBottomOffset * 0.3))} // Scale offset to MPV range
+            subtitleBottomOffset={subtitleBottomOffset}
+            subtitleDelay={subtitleOffsetSec}
+            subtitleAlignment={subtitleAlign}
           />
         )}
 
@@ -652,13 +906,16 @@ const AndroidVideoPlayer: React.FC = () => {
           }}
           buffered={playerState.buffered}
           formatTime={formatTime}
-          playerBackend={'MPV'}
+          playerBackend={useExoPlayer ? 'ExoPlayer' : 'MPV'}
+          onSwitchToMPV={handleManualSwitchToMPV}
+          useExoPlayer={useExoPlayer}
         />
 
         <SpeedActivatedOverlay
           visible={speedControl.showSpeedActivatedOverlay}
           opacity={speedControl.speedActivatedOverlayOpacity}
           speed={speedControl.holdToSpeedValue}
+          screenDimensions={playerState.screenDimensions}
         />
 
         <PauseOverlay
@@ -683,6 +940,43 @@ const AndroidVideoPlayer: React.FC = () => {
           episode={episode}
           shouldShow={playerState.isVideoLoaded && !playerState.showControls && !playerState.paused}
         />
+
+        {/* Skip Intro Button - Shows during intro section of TV episodes */}
+        <SkipIntroButton
+          imdbId={imdbId || (id?.startsWith('tt') ? id : undefined)}
+          type={type || 'movie'}
+          season={season}
+          episode={episode}
+          malId={(metadata as any)?.mal_id || (metadata as any)?.external_ids?.mal_id}
+          kitsuId={id?.startsWith('kitsu:') ? id.split(':')[1] : undefined}
+          currentTime={playerState.currentTime}
+          onSkip={(endTime) => controlsHook.seekToTime(endTime)}
+          controlsVisible={playerState.showControls}
+          controlsFixedOffset={100}
+        />
+
+        {/* Up Next Button - Shows near end of episodes */}
+        <UpNextButton
+          type={type || 'movie'}
+          nextEpisode={nextEpisodeHook.nextEpisode}
+          currentTime={playerState.currentTime}
+          duration={playerState.duration}
+          insets={insets}
+          isLoading={false}
+          nextLoadingProvider={null}
+          nextLoadingQuality={null}
+          nextLoadingTitle={null}
+          onPress={() => {
+            if (nextEpisodeHook.nextEpisode) {
+              logger.log(`[AndroidVideoPlayer] Opening streams for next episode: S${nextEpisodeHook.nextEpisode.season_number}E${nextEpisodeHook.nextEpisode.episode_number}`);
+              modals.setSelectedEpisodeForStreams(nextEpisodeHook.nextEpisode);
+              modals.setShowEpisodeStreamsModal(true);
+            }
+          }}
+          metadata={metadataResult?.metadata ? { poster: metadataResult.metadata.poster, id: metadataResult.metadata.id } : undefined}
+          controlsVisible={playerState.showControls}
+          controlsFixedOffset={100}
+        />
       </View>
 
       <AudioTrackModal
@@ -712,16 +1006,19 @@ const AndroidVideoPlayer: React.FC = () => {
         selectedTextTrack={tracksHook.computedSelectedTextTrack}
         useCustomSubtitles={useCustomSubtitles}
         isKsPlayerActive={true}
+        useExoPlayer={useExoPlayer}
         subtitleSize={subtitleSize}
         subtitleBackground={subtitleBackground}
         fetchAvailableSubtitles={fetchAvailableSubtitles}
         loadWyzieSubtitle={loadWyzieSubtitle}
         selectTextTrack={(trackId) => {
           tracksHook.setSelectedTextTrack(trackId);
-          // Actually tell MPV to switch the subtitle track
-          if (mpvPlayerRef.current) {
+          // For MPV, manually switch the subtitle track
+          if (!useExoPlayer && mpvPlayerRef.current) {
             mpvPlayerRef.current.setSubtitleTrack(trackId);
           }
+          // For ExoPlayer, the selectedTextTrack prop will be updated via memoizedSelectedTextTrack
+          // which triggers a re-render with the new track selection
           // Disable custom subtitles when selecting built-in track
           setUseCustomSubtitles(false);
           modals.setShowSubtitleModal(false);
@@ -752,6 +1049,19 @@ const AndroidVideoPlayer: React.FC = () => {
         setSubtitleLineHeightMultiplier={setSubtitleLineHeightMultiplier}
         subtitleOffsetSec={subtitleOffsetSec}
         setSubtitleOffsetSec={setSubtitleOffsetSec}
+        selectedExternalSubtitleId={selectedExternalSubtitleId}
+        onOpenSyncModal={() => setShowSyncModal(true)}
+      />
+
+      {/* Visual Subtitle Sync Modal */}
+      <SubtitleSyncModal
+        visible={showSyncModal}
+        onClose={() => setShowSyncModal(false)}
+        onConfirm={(offset) => setSubtitleOffsetSec(offset)}
+        currentOffset={subtitleOffsetSec}
+        currentTime={playerState.currentTime}
+        subtitles={customSubtitles}
+        primaryColor={currentTheme.colors.primary}
       />
 
       <SourcesModal
@@ -803,6 +1113,27 @@ const AndroidVideoPlayer: React.FC = () => {
         metadata={{ id: id, name: title }}
       />
 
+      {/* MPV Switch Confirmation Alert */}
+      <CustomAlert
+        visible={showMpvSwitchAlert}
+        title="Switch to MPV Player?"
+        message="This will switch from ExoPlayer to MPV player. Use this if you're facing playback issues that don't automatically switch to MPV. The switch cannot be undone during this playback session."
+        onClose={() => setShowMpvSwitchAlert(false)}
+        actions={[
+          {
+            label: 'Cancel',
+            onPress: () => setShowMpvSwitchAlert(false),
+          },
+          {
+            label: 'Switch to MPV',
+            onPress: () => {
+              setShowMpvSwitchAlert(false);
+              confirmSwitchToMPV();
+            },
+          },
+        ]}
+      />
+
     </View>
   );
 };

src/components/player/KSPlayerComponent.tsx

@@ -17,6 +17,9 @@ interface KSPlayerViewProps {
   usesExternalPlaybackWhileExternalScreenIsActive?: boolean;
   subtitleBottomOffset?: number;
   subtitleFontSize?: number;
+  subtitleTextColor?: string;
+  subtitleBackgroundColor?: string;
+  subtitleOutlineEnabled?: boolean;
   resizeMode?: 'contain' | 'cover' | 'stretch';
   onLoad?: (data: any) => void;
   onProgress?: (data: any) => void;
@@ -56,6 +59,9 @@ export interface KSPlayerProps {
   usesExternalPlaybackWhileExternalScreenIsActive?: boolean;
   subtitleBottomOffset?: number;
   subtitleFontSize?: number;
+  subtitleTextColor?: string;
+  subtitleBackgroundColor?: string;
+  subtitleOutlineEnabled?: boolean;
   resizeMode?: 'contain' | 'cover' | 'stretch';
   onLoad?: (data: any) => void;
   onProgress?: (data: any) => void;
@@ -120,11 +126,16 @@ const KSPlayer = forwardRef<KSPlayerRef, KSPlayerProps>((props, ref) => {
       }
     },
     setTextTrack: (trackId: number) => {
+      console.log('[KSPlayerComponent] setTextTrack called with trackId:', trackId);
       if (nativeRef.current) {
         const node = findNodeHandle(nativeRef.current);
+        console.log('[KSPlayerComponent] setTextTrack dispatching command to node:', node);
         // @ts-ignore legacy UIManager commands path for Paper
         const commandId = UIManager.getViewManagerConfig('KSPlayerView').Commands.setTextTrack;
+        console.log('[KSPlayerComponent] setTextTrack commandId:', commandId);
         UIManager.dispatchViewManagerCommand(node, commandId, [trackId]);
+      } else {
+        console.warn('[KSPlayerComponent] setTextTrack: nativeRef.current is null');
       }
     },
     getTracks: async () => {
@@ -199,6 +210,9 @@ const KSPlayer = forwardRef<KSPlayerRef, KSPlayerProps>((props, ref) => {
       usesExternalPlaybackWhileExternalScreenIsActive={props.usesExternalPlaybackWhileExternalScreenIsActive}
       subtitleBottomOffset={props.subtitleBottomOffset}
       subtitleFontSize={props.subtitleFontSize}
+      subtitleTextColor={props.subtitleTextColor}
+      subtitleBackgroundColor={props.subtitleBackgroundColor}
+      subtitleOutlineEnabled={props.subtitleOutlineEnabled}
       resizeMode={props.resizeMode}
       onLoad={(e: any) => props.onLoad?.(e?.nativeEvent ?? e)}
       onProgress={(e: any) => props.onProgress?.(e?.nativeEvent ?? e)}

src/components/player/KSPlayerCore.tsx

@@ -11,6 +11,7 @@ import { PlayerControls } from './controls/PlayerControls';
 import AudioTrackModal from './modals/AudioTrackModal';
 import SpeedModal from './modals/SpeedModal';
 import SubtitleModals from './modals/SubtitleModals';
+import { SubtitleSyncModal } from './modals/SubtitleSyncModal';
 import SourcesModal from './modals/SourcesModal';
 import EpisodesModal from './modals/EpisodesModal';
 import { EpisodeStreamsModal } from './modals/EpisodeStreamsModal';
@@ -18,12 +19,12 @@ import { ErrorModal } from './modals/ErrorModal';
 import CustomSubtitles from './subtitles/CustomSubtitles';
 import ResumeOverlay from './modals/ResumeOverlay';
 import ParentalGuideOverlay from './overlays/ParentalGuideOverlay';
+import SkipIntroButton from './overlays/SkipIntroButton';
 import { SpeedActivatedOverlay, PauseOverlay, GestureControls } from './components';
 
 // Platform-specific components
 import { KSPlayerSurface } from './ios/components/KSPlayerSurface';
 
-// Shared Hooks
 import {
   usePlayerState,
   usePlayerModals,
@@ -33,7 +34,8 @@ import {
   useCustomSubtitles,
   usePlayerControls,
   usePlayerSetup,
-  useWatchProgress
+  useWatchProgress,
+  useNextEpisode
 } from './hooks';
 
 // Platform-specific hooks
@@ -50,6 +52,9 @@ import { logger } from '../../utils/logger';
 import { formatTime } from './utils/playerUtils';
 import { WyzieSubtitle } from './utils/playerTypes';
 import { parseSRT } from './utils/subtitleParser';
+import { findBestSubtitleTrack, autoSelectAudioTrack, findBestAudioTrack } from './utils/trackSelectionUtils';
+import { useSettings } from '../../hooks/useSettings';
+import { useTheme } from '../../contexts/ThemeContext';
 
 // Player route params interface
 interface PlayerRouteParams {
@@ -129,6 +134,42 @@ const KSPlayerCore: React.FC = () => {
   const tracks = usePlayerTracks();
   const { ksPlayerRef, seek } = useKSPlayer();
   const customSubs = useCustomSubtitles();
+  const { settings } = useSettings();
+  const { currentTheme } = useTheme();
+
+  // Subtitle sync modal state
+  const [showSyncModal, setShowSyncModal] = useState(false);
+
+  // Track auto-selection refs to prevent duplicate selections
+  const hasAutoSelectedTracks = useRef(false);
+
+  // Track previous video session to reset subtitle offset only when video actually changes
+  const previousVideoRef = useRef<{ uri?: string; episodeId?: string }>({});
+
+  // Reset subtitle offset when starting a new video session
+  useEffect(() => {
+    const currentVideo = { uri, episodeId };
+    const previousVideo = previousVideoRef.current;
+
+    // Only reset if this is actually a new video (uri or episodeId changed)
+    if (previousVideo.uri !== undefined &&
+      (previousVideo.uri !== currentVideo.uri || previousVideo.episodeId !== currentVideo.episodeId)) {
+      customSubs.setSubtitleOffsetSec(0);
+    }
+
+    // Update the ref for next comparison
+    previousVideoRef.current = currentVideo;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uri, episodeId]);
+
+  // Next Episode Hook
+  const { nextEpisode, currentEpisodeDescription } = useNextEpisode({
+    type,
+    season,
+    episode,
+    groupedEpisodes: groupedEpisodes as any,
+    episodeId
+  });
 
   const controls = usePlayerControls({
     playerRef: ksPlayerRef,
@@ -257,19 +298,8 @@ const KSPlayerCore: React.FC = () => {
       }));
 
       customSubs.setAvailableSubtitles(subs);
-
-      if (autoSelectEnglish) {
-        const englishSubtitle = subs.find(sub =>
-          sub.language.includes('en') || sub.display.toLowerCase().includes('english')
-        );
-        if (englishSubtitle) {
-          loadWyzieSubtitle(englishSubtitle);
-          return;
-        }
-      }
-      if (!autoSelectEnglish) {
-        modals.setShowSubtitleLanguageModal(true);
-      }
+      // Auto-selection is now handled by useEffect that waits for internal tracks
+      // This ensures internal tracks are considered before falling back to external
     } catch (e) {
       logger.error('[VideoPlayer] Error fetching subtitles', e);
     } finally {
@@ -292,6 +322,7 @@ const KSPlayerCore: React.FC = () => {
       const parsedCues = parseSRT(srtContent);
       customSubs.setCustomSubtitles(parsedCues);
       customSubs.setUseCustomSubtitles(true);
+      customSubs.setSelectedExternalSubtitleId(subtitle.id); // Track the selected external subtitle
       tracks.selectTextTrack(-1);
 
       const adjustedTime = currentTime + (customSubs.subtitleOffsetSec || 0);
@@ -312,6 +343,45 @@ const KSPlayerCore: React.FC = () => {
     }
   }, [imdbId]);
 
+  // Auto-select subtitles when both internal tracks and video are loaded
+  // This ensures we wait for internal tracks before falling back to external
+  useEffect(() => {
+    if (!isVideoLoaded || hasAutoSelectedTracks.current || !settings?.enableSubtitleAutoSelect) {
+      return;
+    }
+
+    const internalTracks = tracks.ksTextTracks;
+    const externalSubs = customSubs.availableSubtitles;
+
+    // Wait a short delay to ensure tracks are fully populated
+    const timeoutId = setTimeout(() => {
+      if (hasAutoSelectedTracks.current) return;
+
+      const subtitleSelection = findBestSubtitleTrack(
+        internalTracks,
+        externalSubs,
+        {
+          preferredSubtitleLanguage: settings?.preferredSubtitleLanguage || 'en',
+          subtitleSourcePreference: settings?.subtitleSourcePreference || 'internal',
+          enableSubtitleAutoSelect: true
+        }
+      );
+
+      // Trust the findBestSubtitleTrack function's decision - it already implements priority logic
+      if (subtitleSelection.type === 'internal' && subtitleSelection.internalTrackId !== undefined) {
+        logger.debug(`[KSPlayerCore] Auto-selecting internal subtitle track ${subtitleSelection.internalTrackId}`);
+        tracks.selectTextTrack(subtitleSelection.internalTrackId);
+        hasAutoSelectedTracks.current = true;
+      } else if (subtitleSelection.type === 'external' && subtitleSelection.externalSubtitle) {
+        logger.debug(`[KSPlayerCore] Auto-selecting external subtitle: ${subtitleSelection.externalSubtitle.display}`);
+        loadWyzieSubtitle(subtitleSelection.externalSubtitle);
+        hasAutoSelectedTracks.current = true;
+      }
+    }, 500); // Short delay to ensure tracks are populated
+
+    return () => clearTimeout(timeoutId);
+  }, [isVideoLoaded, tracks.ksTextTracks, customSubs.availableSubtitles, settings]);
+
   // Sync custom subtitle text with current playback time
   useEffect(() => {
     if (!customSubs.useCustomSubtitles || customSubs.customSubtitles.length === 0) return;
@@ -337,6 +407,45 @@ const KSPlayerCore: React.FC = () => {
     setIsPlayerReady(true);
     openingAnim.completeOpeningAnimation();
 
+    // Auto-select audio track based on preferences
+    if (data.audioTracks && data.audioTracks.length > 0 && settings?.preferredAudioLanguage) {
+      const bestAudioTrack = findBestAudioTrack(data.audioTracks, settings.preferredAudioLanguage);
+      if (bestAudioTrack !== null) {
+        logger.debug(`[KSPlayerCore] Auto-selecting audio track ${bestAudioTrack} for language: ${settings.preferredAudioLanguage}`);
+        tracks.selectAudioTrack(bestAudioTrack);
+        if (ksPlayerRef.current) {
+          ksPlayerRef.current.setAudioTrack(bestAudioTrack);
+        }
+      }
+    }
+
+    // Auto-select subtitle track based on preferences
+    // Only auto-select internal tracks here if preference is 'internal' or 'any'
+    // If preference is 'external', we wait for the useEffect to handle selection after external subs load
+    if (data.textTracks && data.textTracks.length > 0 && !hasAutoSelectedTracks.current && settings?.enableSubtitleAutoSelect) {
+      const sourcePreference = settings?.subtitleSourcePreference || 'internal';
+
+      // Only pre-select internal if preference is internal or any
+      if (sourcePreference === 'internal' || sourcePreference === 'any') {
+        const subtitleSelection = findBestSubtitleTrack(
+          data.textTracks,
+          [], // External subtitles not yet loaded
+          {
+            preferredSubtitleLanguage: settings?.preferredSubtitleLanguage || 'en',
+            subtitleSourcePreference: sourcePreference,
+            enableSubtitleAutoSelect: true
+          }
+        );
+
+        if (subtitleSelection.type === 'internal' && subtitleSelection.internalTrackId !== undefined) {
+          logger.debug(`[KSPlayerCore] Auto-selecting internal subtitle track ${subtitleSelection.internalTrackId} on load`);
+          tracks.selectTextTrack(subtitleSelection.internalTrackId);
+          hasAutoSelectedTracks.current = true;
+        }
+      }
+      // If preference is 'external', don't select anything here - useEffect will handle it
+    }
+
     // Initial Seek
     const resumeTarget = routeInitialPosition || watchProgress.initialPosition || watchProgress.initialSeekTargetRef?.current;
     if (resumeTarget && resumeTarget > 0 && !watchProgress.showResumeOverlay && data.duration > 0) {
@@ -389,6 +498,27 @@ const KSPlayerCore: React.FC = () => {
     navigation.goBack();
   }, [navigation, currentTime, duration, traktAutosync]);
 
+  // Track selection handlers - update state, prop change triggers native update
+  const handleSelectTextTrack = useCallback((trackId: number) => {
+    console.log('[KSPlayerCore] handleSelectTextTrack called with trackId:', trackId);
+
+    // Disable custom subtitles when selecting a built-in track
+    // This ensures the textTrack prop is actually passed to the native player
+    if (trackId !== -1) {
+      customSubs.setUseCustomSubtitles(false);
+    }
+
+    // Just update state - the textTrack prop change will trigger native update
+    tracks.selectTextTrack(trackId);
+  }, [tracks, customSubs]);
+
+  const handleSelectAudioTrack = useCallback((trackId: number) => {
+    tracks.selectAudioTrack(trackId);
+    if (ksPlayerRef.current) {
+      ksPlayerRef.current.setAudioTrack(trackId);
+    }
+  }, [tracks, ksPlayerRef]);
+
   // Stream selection handler
   const handleSelectStream = async (newStream: any) => {
     if (newStream.url === uri) {
@@ -486,6 +616,10 @@ const KSPlayerCore: React.FC = () => {
       />
 
       {/* Video Surface & Pinch Zoom */}
+      {/*
+        For KSPlayer built-in subtitles (internal text tracks), we intentionally force background OFF.
+        Background styling is only supported/used for custom (external/addon) subtitles overlay.
+      */}
       <KSPlayerSurface
         ksPlayerRef={ksPlayerRef}
         uri={uri}
@@ -498,8 +632,8 @@ const KSPlayerCore: React.FC = () => {
         setZoomScale={setZoomScale}
         lastZoomScale={lastZoomScale}
         setLastZoomScale={setLastZoomScale}
-        audioTrack={tracks.selectedAudioTrack !== null ? tracks.selectedAudioTrack : undefined}
-        textTrack={customSubs.useCustomSubtitles ? undefined : (tracks.selectedTextTrack !== -1 ? tracks.selectedTextTrack : undefined)}
+        audioTrack={tracks.selectedAudioTrack ?? undefined}
+        textTrack={customSubs.useCustomSubtitles ? -1 : tracks.selectedTextTrack}
         onAudioTracks={(d) => tracks.setKsAudioTracks(d.audioTracks || [])}
         onTextTracks={(d) => tracks.setKsTextTracks(d.textTracks || [])}
         onLoad={onLoad}
@@ -525,6 +659,23 @@ const KSPlayerCore: React.FC = () => {
         screenWidth={screenDimensions.width}
         screenHeight={screenDimensions.height}
         customVideoStyles={{ width: '100%', height: '100%' }}
+        subtitleTextColor={customSubs.subtitleTextColor}
+        subtitleBackgroundColor={
+          tracks.selectedTextTrack !== null &&
+            tracks.selectedTextTrack >= 0 &&
+            !customSubs.useCustomSubtitles
+            ? 'rgba(0,0,0,0)'
+            : (customSubs.subtitleBackground ? `rgba(0,0,0,${customSubs.subtitleBgOpacity})` : 'transparent')
+        }
+        subtitleOutlineEnabled={
+          tracks.selectedTextTrack !== null &&
+            tracks.selectedTextTrack >= 0 &&
+            !customSubs.useCustomSubtitles
+            ? customSubs.subtitleOutline
+            : false
+        }
+        subtitleFontSize={customSubs.subtitleSize}
+        subtitleBottomOffset={customSubs.subtitleBottomOffset}
       />
 
       {/* Custom Subtitles Overlay */}
@@ -616,6 +767,7 @@ const KSPlayerCore: React.FC = () => {
         visible={speedControl.showSpeedActivatedOverlay}
         opacity={speedControl.speedActivatedOverlayOpacity}
         speed={speedControl.holdToSpeedValue}
+        screenDimensions={screenDimensions}
       />
 
       <ResumeOverlay
@@ -659,10 +811,24 @@ const KSPlayerCore: React.FC = () => {
         shouldShow={isVideoLoaded && !showControls && !paused}
       />
 
+      {/* Skip Intro Button - Shows during intro section of TV episodes */}
+      <SkipIntroButton
+        imdbId={imdbId || (id?.startsWith('tt') ? id : undefined)}
+        type={type}
+        season={season}
+        episode={episode}
+        malId={(metadata as any)?.mal_id || (metadata as any)?.external_ids?.mal_id}
+        kitsuId={id?.startsWith('kitsu:') ? id.split(':')[1] : undefined}
+        currentTime={currentTime}
+        onSkip={(endTime) => controls.seekToTime(endTime)}
+        controlsVisible={showControls}
+        controlsFixedOffset={126}
+      />
+
       {/* Up Next Button */}
       <UpNextButton
         type={type}
-        nextEpisode={null}
+        nextEpisode={nextEpisode}
         currentTime={currentTime}
         duration={duration}
         insets={insets}
@@ -670,7 +836,13 @@ const KSPlayerCore: React.FC = () => {
         nextLoadingProvider={null}
         nextLoadingQuality={null}
         nextLoadingTitle={null}
-        onPress={() => { }}
+        onPress={() => {
+          if (nextEpisode) {
+            logger.log(`[KSPlayerCore] Opening streams for next episode: S${nextEpisode.season_number}E${nextEpisode.episode_number}`);
+            modals.setSelectedEpisodeForStreams(nextEpisode);
+            modals.setShowEpisodeStreamsModal(true);
+          }
+        }}
         metadata={metadata ? { poster: metadata.poster, id: metadata.id } : undefined}
         controlsVisible={showControls}
         controlsFixedOffset={126}
@@ -682,7 +854,7 @@ const KSPlayerCore: React.FC = () => {
         setShowAudioModal={modals.setShowAudioModal}
         ksAudioTracks={tracks.ksAudioTracks}
         selectedAudioTrack={tracks.selectedAudioTrack}
-        selectAudioTrack={tracks.selectAudioTrack}
+        selectAudioTrack={handleSelectAudioTrack}
       />
 
       <ErrorModal
@@ -744,11 +916,25 @@ const KSPlayerCore: React.FC = () => {
         ksTextTracks={tracks.ksTextTracks}
         selectedTextTrack={tracks.selectedTextTrack !== null ? tracks.selectedTextTrack : -1}
         useCustomSubtitles={customSubs.useCustomSubtitles}
-        selectTextTrack={tracks.selectTextTrack}
+        selectTextTrack={handleSelectTextTrack}
         disableCustomSubtitles={() => {
           customSubs.setUseCustomSubtitles(false);
-          tracks.selectTextTrack(-1);
+          customSubs.setSelectedExternalSubtitleId(null); // Clear external selection
+          handleSelectTextTrack(-1);
         }}
+        selectedExternalSubtitleId={customSubs.selectedExternalSubtitleId}
+        onOpenSyncModal={() => setShowSyncModal(true)}
+      />
+
+      {/* Visual Subtitle Sync Modal */}
+      <SubtitleSyncModal
+        visible={showSyncModal}
+        onClose={() => setShowSyncModal(false)}
+        onConfirm={(offset) => customSubs.setSubtitleOffsetSec(offset)}
+        currentOffset={customSubs.subtitleOffsetSec}
+        currentTime={currentTime}
+        subtitles={customSubs.customSubtitles}
+        primaryColor={currentTheme.colors.primary}
       />
 
       <SourcesModal

src/components/player/android/MpvPlayer.tsx

@@ -25,7 +25,18 @@ export interface MpvPlayerProps {
     onEnd?: () => void;
     onError?: (error: { error: string }) => void;
     onTracksChanged?: (data: { audioTracks: any[]; subtitleTracks: any[] }) => void;
-    useHardwareDecoding?: boolean;
+    decoderMode?: 'auto' | 'sw' | 'hw' | 'hw+';
+    gpuMode?: 'gpu' | 'gpu-next';
+    // Subtitle Styling
+    subtitleSize?: number;
+    subtitleColor?: string;
+    subtitleBackgroundOpacity?: number;
+    subtitleBorderSize?: number;
+    subtitleBorderColor?: string;
+    subtitleShadowEnabled?: boolean;
+    subtitlePosition?: number;
+    subtitleDelay?: number;
+    subtitleAlignment?: 'left' | 'center' | 'right';
 }
 
 const MpvPlayer = forwardRef<MpvPlayerRef, MpvPlayerProps>((props, ref) => {
@@ -104,7 +115,18 @@ const MpvPlayer = forwardRef<MpvPlayerRef, MpvPlayerProps>((props, ref) => {
             onEnd={handleEnd}
             onError={handleError}
             onTracksChanged={handleTracksChanged}
-            useHardwareDecoding={props.useHardwareDecoding ?? false}
+            decoderMode={props.decoderMode ?? 'auto'}
+            gpuMode={props.gpuMode ?? 'gpu'}
+            // Subtitle Styling
+            subtitleSize={props.subtitleSize ?? 48}
+            subtitleColor={props.subtitleColor ?? '#FFFFFF'}
+            subtitleBackgroundOpacity={props.subtitleBackgroundOpacity ?? 0}
+            subtitleBorderSize={props.subtitleBorderSize ?? 3}
+            subtitleBorderColor={props.subtitleBorderColor ?? '#000000'}
+            subtitleShadowEnabled={props.subtitleShadowEnabled ?? true}
+            subtitlePosition={props.subtitlePosition ?? 100}
+            subtitleDelay={props.subtitleDelay ?? 0}
+            subtitleAlignment={props.subtitleAlignment ?? 'center'}
         />
     );
 });

src/components/player/android/components/VideoSurface.tsx

@@ -1,9 +1,35 @@
-import React, { useCallback, memo } from 'react';
+import React, { useCallback, useRef, forwardRef, useImperativeHandle } from 'react';
 import { View, TouchableWithoutFeedback, StyleSheet } from 'react-native';
 import { PinchGestureHandler } from 'react-native-gesture-handler';
+import Video, { VideoRef, SelectedTrack, SelectedVideoTrack, ResizeMode } from 'react-native-video';
 import MpvPlayer, { MpvPlayerRef } from '../MpvPlayer';
 import { styles } from '../../utils/playerStyles';
 import { ResizeModeType } from '../../utils/playerTypes';
+import { logger } from '../../../../utils/logger';
+
+// Codec error patterns that indicate we should fallback to MPV
+const CODEC_ERROR_PATTERNS = [
+    'exceeds_capabilities',
+    'no_exceeds_capabilities',
+    'decoder_exception',
+    'decoder.*error',
+    'codec.*error',
+    'unsupported.*codec',
+    'mediacodec.*exception',
+    'omx.*error',
+    'dolby.*vision',
+    'hevc.*error',
+    'no suitable decoder',
+    'decoder initialization failed',
+    'format.no_decoder',
+    'no_decoder',
+    'decoding_failed',
+    'error_code_decoding',
+    'exoplaybackexception',
+    'mediacodecvideodecoder',
+    'mediacodecvideodecoderexception',
+    'decoder failed',
+];
 
 interface VideoSurfaceProps {
     processedStreamUrl: string;
@@ -25,6 +51,7 @@ interface VideoSurfaceProps {
 
     // Refs
     mpvPlayerRef?: React.RefObject<MpvPlayerRef>;
+    exoPlayerRef?: React.RefObject<VideoRef>;
     pinchRef: any;
 
     // Handlers
@@ -32,9 +59,38 @@ interface VideoSurfaceProps {
     onPinchHandlerStateChange: any;
     screenDimensions: { width: number, height: number };
     onTracksChanged?: (data: { audioTracks: any[]; subtitleTracks: any[] }) => void;
-    useHardwareDecoding?: boolean;
+    selectedAudioTrack?: SelectedTrack;
+    selectedTextTrack?: SelectedTrack;
+    decoderMode?: 'auto' | 'sw' | 'hw' | 'hw+';
+    gpuMode?: 'gpu' | 'gpu-next';
+
+    // Dual Engine Props
+    useExoPlayer?: boolean;
+    onCodecError?: () => void;
+    onEngineChange?: (engine: 'exoplayer' | 'mpv') => void;
+
+    // Subtitle Styling
+    subtitleSize?: number;
+    subtitleColor?: string;
+    subtitleBackgroundOpacity?: number;
+    subtitleBorderSize?: number;
+    subtitleBorderColor?: string;
+    subtitleShadowEnabled?: boolean;
+    subtitlePosition?: number;
+    subtitleBottomOffset?: number;
+    subtitleDelay?: number;
+    subtitleAlignment?: 'left' | 'center' | 'right';
 }
 
+// Helper function to check if error is a codec error
+const isCodecError = (errorString: string): boolean => {
+    const lowerError = errorString.toLowerCase();
+    return CODEC_ERROR_PATTERNS.some(pattern => {
+        const regex = new RegExp(pattern, 'i');
+        return regex.test(lowerError);
+    });
+};
+
 export const VideoSurface: React.FC<VideoSurfaceProps> = ({
     processedStreamUrl,
     headers,
@@ -51,20 +107,38 @@ export const VideoSurface: React.FC<VideoSurfaceProps> = ({
     onError,
     onBuffer,
     mpvPlayerRef,
+    exoPlayerRef,
     pinchRef,
     onPinchGestureEvent,
     onPinchHandlerStateChange,
     screenDimensions,
     onTracksChanged,
-    useHardwareDecoding,
+    selectedAudioTrack,
+    selectedTextTrack,
+    decoderMode,
+    gpuMode,
+    // Dual Engine
+    useExoPlayer = true,
+    onCodecError,
+    onEngineChange,
+    // Subtitle Styling
+    subtitleSize,
+    subtitleColor,
+    subtitleBackgroundOpacity,
+    subtitleBorderSize,
+    subtitleBorderColor,
+    subtitleShadowEnabled,
+    subtitlePosition,
+    subtitleBottomOffset,
+    subtitleDelay,
+    subtitleAlignment,
 }) => {
     // Use the actual stream URL
     const streamUrl = currentStreamUrl || processedStreamUrl;
 
-    // Debug logging removed to prevent console spam
-
-    const handleLoad = (data: { duration: number; width: number; height: number }) => {
-        console.log('[VideoSurface] onLoad received:', data);
+    // ========== MPV Handlers ==========
+    const handleMpvLoad = (data: { duration: number; width: number; height: number }) => {
+        console.log('[VideoSurface] MPV onLoad received:', data);
         onLoad({
             duration: data.duration,
             naturalSize: {
@@ -74,15 +148,15 @@ export const VideoSurface: React.FC<VideoSurfaceProps> = ({
         });
     };
 
-    const handleProgress = (data: { currentTime: number; duration: number }) => {
+    const handleMpvProgress = (data: { currentTime: number; duration: number }) => {
         onProgress({
             currentTime: data.currentTime,
             playableDuration: data.currentTime,
         });
     };
 
-    const handleError = (error: { error: string }) => {
-        console.log('[VideoSurface] onError received:', error);
+    const handleMpvError = (error: { error: string }) => {
+        console.log('[VideoSurface] MPV onError received:', error);
         onError({
             error: {
                 errorString: error.error,
@@ -90,33 +164,231 @@ export const VideoSurface: React.FC<VideoSurfaceProps> = ({
         });
     };
 
-    const handleEnd = () => {
-        console.log('[VideoSurface] onEnd received');
+    const handleMpvEnd = () => {
+        console.log('[VideoSurface] MPV onEnd received');
         onEnd();
     };
 
+    // ========== ExoPlayer Handlers ==========
+    const handleExoLoad = (data: any) => {
+        console.log('[VideoSurface] ExoPlayer onLoad received:', data);
+        console.log('[VideoSurface] ExoPlayer textTracks raw:', JSON.stringify(data.textTracks, null, 2));
+
+        // Extract track information
+        // IMPORTANT:
+        // react-native-video expects selected*Track with { type: 'index', value: <0-based array index> }.
+        // Some RNVideo/Exo track objects expose `index`, but it is not guaranteed to be unique or
+        // aligned with the list index. Using it can cause only the first item to render/select.
+        const audioTracks = data.audioTracks?.map((t: any, i: number) => ({
+            id: i,
+            name: t.title || t.language || `Track ${i + 1}`,
+            language: t.language,
+        })) ?? [];
+
+        const subtitleTracks = data.textTracks?.map((t: any, i: number) => {
+            const track = {
+                id: i,
+                name: t.title || t.language || `Track ${i + 1}`,
+                language: t.language,
+            };
+            console.log('[VideoSurface] Mapped subtitle track:', track, 'original:', t);
+            return track;
+        }) ?? [];
+
+        if (onTracksChanged && (audioTracks.length > 0 || subtitleTracks.length > 0)) {
+            onTracksChanged({ audioTracks, subtitleTracks });
+        }
+
+        onLoad({
+            duration: data.duration,
+            naturalSize: data.naturalSize || { width: 1920, height: 1080 },
+            audioTracks: data.audioTracks,
+            textTracks: data.textTracks,
+        });
+    };
+
+    const handleExoProgress = (data: any) => {
+        onProgress({
+            currentTime: data.currentTime,
+            playableDuration: data.playableDuration || data.currentTime,
+        });
+    };
+
+    const handleExoError = (error: any) => {
+        console.log('[VideoSurface] ExoPlayer onError received:', JSON.stringify(error, null, 2));
+
+        // Extract error string - try multiple paths
+        let errorString = 'Unknown error';
+        const errorParts: string[] = [];
+
+        if (typeof error?.error === 'string') {
+            errorParts.push(error.error);
+        }
+        if (error?.error?.errorString) {
+            errorParts.push(error.error.errorString);
+        }
+        if (error?.error?.errorCode) {
+            errorParts.push(String(error.error.errorCode));
+        }
+        if (typeof error === 'string') {
+            errorParts.push(error);
+        }
+        if (error?.nativeStackAndroid) {
+            errorParts.push(error.nativeStackAndroid.join(' '));
+        }
+        if (error?.message) {
+            errorParts.push(error.message);
+        }
+
+        // Combine all error parts for comprehensive checking
+        errorString = errorParts.length > 0 ? errorParts.join(' ') : JSON.stringify(error);
+
+        console.log('[VideoSurface] Extracted error string:', errorString);
+        console.log('[VideoSurface] isCodecError result:', isCodecError(errorString));
+
+        // Check if this is a codec error that should trigger fallback
+        if (isCodecError(errorString)) {
+            logger.warn('[VideoSurface] ExoPlayer codec error detected, triggering MPV fallback:', errorString);
+            onCodecError?.();
+            return; // Don't propagate codec errors - we're falling back silently
+        }
+
+        // Non-codec errors should be propagated
+        onError({
+            error: {
+                errorString: errorString,
+            },
+        });
+    };
+
+    const handleExoBuffer = (data: any) => {
+        onBuffer({ isBuffering: data.isBuffering });
+    };
+
+    const handleExoEnd = () => {
+        console.log('[VideoSurface] ExoPlayer onEnd received');
+        onEnd();
+    };
+
+    const handleExoSeek = (data: any) => {
+        onSeek({ currentTime: data.currentTime });
+    };
+
+    // Map ResizeModeType to react-native-video ResizeMode
+    const getExoResizeMode = (): ResizeMode => {
+        switch (resizeMode) {
+            case 'cover':
+                return ResizeMode.COVER;
+            case 'stretch':
+                return ResizeMode.STRETCH;
+            case 'contain':
+            default:
+                return ResizeMode.CONTAIN;
+        }
+    };
+
+    const alphaHex = (opacity01: number) => {
+        const a = Math.max(0, Math.min(1, opacity01));
+        return Math.round(a * 255).toString(16).padStart(2, '0').toUpperCase();
+    };
+
     return (
         <View style={[styles.videoContainer, {
             width: screenDimensions.width,
             height: screenDimensions.height,
         }]}>
-            {/* MPV Player - rendered at the bottom of the z-order */}
-            <MpvPlayer
-                ref={mpvPlayerRef}
-                source={streamUrl}
-                headers={headers}
-                paused={paused}
-                volume={volume}
-                rate={playbackSpeed}
-                resizeMode={resizeMode === 'none' ? 'contain' : resizeMode}
-                style={localStyles.player}
-                onLoad={handleLoad}
-                onProgress={handleProgress}
-                onEnd={handleEnd}
-                onError={handleError}
-                onTracksChanged={onTracksChanged}
-                useHardwareDecoding={useHardwareDecoding}
-            />
+            {useExoPlayer ? (
+                /* ExoPlayer via react-native-video */
+                <Video
+                    ref={exoPlayerRef}
+                    source={{
+                        uri: streamUrl,
+                        headers: headers,
+                    }}
+                    paused={paused}
+                    volume={volume}
+                    rate={playbackSpeed}
+                    resizeMode={getExoResizeMode()}
+                    selectedAudioTrack={selectedAudioTrack}
+                    selectedTextTrack={selectedTextTrack}
+                    style={localStyles.player}
+                    onLoad={handleExoLoad}
+                    onProgress={handleExoProgress}
+                    onEnd={handleExoEnd}
+                    onError={handleExoError}
+                    onBuffer={handleExoBuffer}
+                    onSeek={handleExoSeek}
+                    progressUpdateInterval={500}
+                    playInBackground={false}
+                    playWhenInactive={false}
+                    ignoreSilentSwitch="ignore"
+                    automaticallyWaitsToMinimizeStalling={true}
+                    useTextureView={true}
+                    // Subtitle Styling for ExoPlayer
+                    // ExoPlayer (via our patched react-native-video) supports:
+                    // - fontSize, paddingTop/Bottom/Left/Right, opacity, subtitlesFollowVideo
+                    // - PLUS: textColor, backgroundColor, edgeType, edgeColor (outline/shadow)
+                    subtitleStyle={{
+                        // Convert MPV-scaled size back to UI size (AndroidVideoPlayer passes MPV-scaled values here)
+                        fontSize: subtitleSize ? Math.round(subtitleSize / 1.5) : 28,
+                        paddingTop: 0,
+                        // IMPORTANT:
+                        // Use the same unit as external subtitles (RN CustomSubtitles uses dp bottomOffset directly).
+                        // Using MPV's subtitlePosition mapping makes internal/external offsets feel inconsistent.
+                        paddingBottom: Math.max(0, Math.round(subtitleBottomOffset ?? 0)),
+                        paddingLeft: 16,
+                        paddingRight: 16,
+                        // Opacity controls entire subtitle view visibility
+                        // Always keep text visible (opacity 1), background control is limited in ExoPlayer
+                        opacity: 1,
+                        subtitlesFollowVideo: false,
+                        // Extended styling (requires our patched RNVideo on Android)
+                        textColor: subtitleColor || '#FFFFFFFF',
+                        // Android Color.parseColor doesn't accept rgba(...). Use #AARRGGBB.
+                        backgroundColor:
+                            subtitleBackgroundOpacity && subtitleBackgroundOpacity > 0
+                                ? `#${alphaHex(subtitleBackgroundOpacity)}000000`
+                                : '#00000000',
+                        edgeType:
+                            subtitleBorderSize && subtitleBorderSize > 0
+                                ? 'outline'
+                                : (subtitleShadowEnabled ? 'shadow' : 'none'),
+                        edgeColor:
+                            (subtitleBorderSize && subtitleBorderSize > 0 && subtitleBorderColor)
+                                ? subtitleBorderColor
+                                : (subtitleShadowEnabled ? '#FF000000' : 'transparent'),
+                    } as any}
+                />
+            ) : (
+                /* MPV Player fallback */
+                <MpvPlayer
+                    ref={mpvPlayerRef}
+                    source={streamUrl}
+                    headers={headers}
+                    paused={paused}
+                    volume={volume}
+                    rate={playbackSpeed}
+                    resizeMode={resizeMode === 'none' ? 'contain' : resizeMode}
+                    style={localStyles.player}
+                    onLoad={handleMpvLoad}
+                    onProgress={handleMpvProgress}
+                    onEnd={handleMpvEnd}
+                    onError={handleMpvError}
+                    onTracksChanged={onTracksChanged}
+                    decoderMode={decoderMode}
+                    gpuMode={gpuMode}
+                    // Subtitle Styling
+                    subtitleSize={subtitleSize}
+                    subtitleColor={subtitleColor}
+                    subtitleBackgroundOpacity={subtitleBackgroundOpacity}
+                    subtitleBorderSize={subtitleBorderSize}
+                    subtitleBorderColor={subtitleBorderColor}
+                    subtitleShadowEnabled={subtitleShadowEnabled}
+                    subtitlePosition={subtitlePosition}
+                    subtitleDelay={subtitleDelay}
+                    subtitleAlignment={subtitleAlignment}
+                />
+            )}
 
             {/* Gesture overlay - transparent, on top of the player */}
             <PinchGestureHandler

src/components/player/android/hooks/usePlayerControls.ts

@@ -1,5 +1,6 @@
 import { useRef, useCallback } from 'react';
 import { Platform } from 'react-native';
+import { VideoRef } from 'react-native-video';
 import { logger } from '../../../../utils/logger';
 
 const DEBUG_MODE = true; // Temporarily enable for debugging seek
@@ -12,7 +13,10 @@ export const usePlayerControls = (
     currentTime: number,
     duration: number,
     isSeeking: React.MutableRefObject<boolean>,
-    isMounted: React.MutableRefObject<boolean>
+    isMounted: React.MutableRefObject<boolean>,
+    // Dual engine support
+    exoPlayerRef?: React.RefObject<VideoRef>,
+    useExoPlayer?: boolean
 ) => {
     // iOS seeking helpers
     const iosWasPausedDuringSeekRef = useRef<boolean | null>(null);
@@ -28,12 +32,30 @@ export const usePlayerControls = (
             rawSeconds,
             timeInSeconds,
             hasMpvRef: !!mpvPlayerRef?.current,
+            hasExoRef: !!exoPlayerRef?.current,
+            useExoPlayer,
             duration,
             isSeeking: isSeeking.current
         });
 
-        // MPV Player
-        if (mpvPlayerRef.current && duration > 0) {
+        // ExoPlayer
+        if (useExoPlayer && exoPlayerRef?.current && duration > 0) {
+            console.log(`[usePlayerControls][ExoPlayer] Seeking to ${timeInSeconds}`);
+
+            isSeeking.current = true;
+            exoPlayerRef.current.seek(timeInSeconds);
+
+            // Reset seeking flag after a delay
+            setTimeout(() => {
+                if (isMounted.current) {
+                    isSeeking.current = false;
+                }
+            }, 500);
+            return;
+        }
+
+        // MPV Player (fallback or when useExoPlayer is false)
+        if (mpvPlayerRef?.current && duration > 0) {
             console.log(`[usePlayerControls][MPV] Seeking to ${timeInSeconds}`);
 
             isSeeking.current = true;
@@ -45,13 +67,16 @@ export const usePlayerControls = (
                     isSeeking.current = false;
                 }
             }, 500);
-        } else {
-            console.log('[usePlayerControls][MPV] Cannot seek - ref or duration invalid:', {
-                hasRef: !!mpvPlayerRef?.current,
-                duration
-            });
+            return;
         }
-    }, [duration, paused, setPaused, mpvPlayerRef, isSeeking, isMounted]);
+
+        console.log('[usePlayerControls] Cannot seek - no valid ref:', {
+            hasExoRef: !!exoPlayerRef?.current,
+            hasMpvRef: !!mpvPlayerRef?.current,
+            useExoPlayer,
+            duration
+        });
+    }, [duration, paused, setPaused, mpvPlayerRef, exoPlayerRef, useExoPlayer, isSeeking, isMounted]);
 
     const skip = useCallback((seconds: number) => {
         console.log('[usePlayerControls] skip called:', { seconds, currentTime, newTime: currentTime + seconds });

src/components/player/cards/EpisodeCard.tsx

@@ -28,7 +28,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({
 }) => {
   const { width } = Dimensions.get('window');
   const isTablet = width >= 768;
-  
+
   // Get episode image
   let episodeImage = EPISODE_PLACEHOLDER;
   if (episode.still_path) {
@@ -42,11 +42,11 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({
   } else if (metadata?.poster) {
     episodeImage = metadata.poster;
   }
-  
+
   const episodeNumber = typeof episode.episode_number === 'number' ? episode.episode_number.toString() : '';
   const seasonNumber = typeof episode.season_number === 'number' ? episode.season_number.toString() : '';
   const episodeString = seasonNumber && episodeNumber ? `S${seasonNumber.padStart(2, '0')}E${episodeNumber.padStart(2, '0')}` : '';
-  
+
   // Get episode progress
   const episodeId = episode.stremioId || `${metadata?.id}:${episode.season_number}:${episode.episode_number}`;
   const tmdbOverride = tmdbEpisodeOverrides?.[`${metadata?.id}:${episode.season_number}:${episode.episode_number}`];
@@ -60,7 +60,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({
   const progress = episodeProgress?.[episodeId];
   const progressPercent = progress ? (progress.currentTime / progress.duration) * 100 : 0;
   const showProgress = progress && progressPercent < 85;
-  
+
   const formatRuntime = (runtime: number) => {
     if (!runtime) return null;
     const hours = Math.floor(runtime / 60);
@@ -70,7 +70,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({
     }
     return `${minutes}m`;
   };
-  
+
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
     return date.toLocaleDateString('en-US', {
@@ -106,11 +106,11 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({
         </View>
         {showProgress && (
           <View style={styles.progressBarContainer}>
-            <View 
+            <View
               style={[
                 styles.progressBar,
                 { width: `${progressPercent}%`, backgroundColor: currentTheme.colors.primary }
-              ]} 
+              ]}
             />
           </View>
         )}

src/components/player/common/UpNextButton.tsx

@@ -105,7 +105,10 @@ const UpNextButton: React.FC<UpNextButtonProps> = ({
 
   // Animate vertical offset based on controls visibility
   useEffect(() => {
-    const target = controlsVisible ? -Math.max(0, controlsFixedOffset - 8) : 0;
+    // Android needs more offset to clear the slider
+    const androidOffset = controlsFixedOffset - 8;
+    const iosOffset = controlsFixedOffset / 2;
+    const target = controlsVisible ? -(Platform.OS === 'android' ? androidOffset : iosOffset) : 0;
     Animated.timing(translateY, {
       toValue: target,
       duration: 220,

src/components/player/components/SpeedActivatedOverlay.tsx

@@ -1,35 +1,57 @@
-/**
- * Shared Speed Activated Overlay Component
- * Used by both Android (VLC) and iOS (KSPlayer) players
- */
 import React from 'react';
 import { View, Text, Animated } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
-import { styles } from '../utils/playerStyles';
 
 interface SpeedActivatedOverlayProps {
     visible: boolean;
-    opacity: Animated.Value;
+    opacity: Animated.Value | number;
     speed: number;
+    screenDimensions: { width: number; height: number };
 }
 
 export const SpeedActivatedOverlay: React.FC<SpeedActivatedOverlayProps> = ({
     visible,
     opacity,
-    speed
+    speed,
+    screenDimensions
 }) => {
-    if (!visible) return null;
+    // Safety check to prevent the 'height' of undefined error
+    if (!visible || !screenDimensions) return null;
 
     return (
         <Animated.View
-            style={[
-                styles.speedActivatedOverlay,
-                { opacity: opacity }
-            ]}
+            style={{
+                position: 'absolute',
+                top: screenDimensions.height * 0.06,
+                left: 0,
+                right: 0,
+                alignItems: 'center',
+                opacity: opacity,
+                zIndex: 1000,
+            }}
         >
-            <View style={styles.speedActivatedContainer}>
-                <MaterialIcons name="fast-forward" size={32} color="#FFFFFF" />
-                <Text style={styles.speedActivatedText}>{speed}x Speed</Text>
+            <View style={{
+                flexDirection: 'row',
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                borderRadius: 35,
+                paddingHorizontal: 16,
+                paddingVertical: 10,
+                alignItems: 'center',
+                elevation: 5,
+            }}>
+                <MaterialIcons
+                    name="fast-forward"
+                    size={20}
+                    color="white"
+                    style={{ marginRight: 6 }}
+                />
+                <Text style={{
+                    color: 'white',
+                    fontSize: 15,
+                    fontWeight: '600',
+                }}>
+                    {speed}x
+                </Text>
             </View>
         </Animated.View>
     );

src/components/player/controls/PlayerControls.tsx

@@ -4,6 +4,7 @@ import { Ionicons } from '@expo/vector-icons';
 import Feather from 'react-native-vector-icons/Feather';
 import { LinearGradient } from 'expo-linear-gradient';
 import Slider from '@react-native-community/slider';
+import { useTranslation } from 'react-i18next';
 import { styles } from '../utils/playerStyles'; // Updated styles
 import { getTrackDisplayName } from '../utils/playerUtils';
 import { useTheme } from '../../../contexts/ThemeContext';
@@ -24,7 +25,7 @@ interface PlayerControlsProps {
   duration: number;
   zoomScale: number;
   currentResizeMode?: string;
-  ksAudioTracks: Array<{id: number, name: string, language?: string}>;
+  ksAudioTracks: Array<{ id: number, name: string, language?: string }>;
   selectedAudioTrack: number | null;
   availableStreams?: { [providerId: string]: { streams: any[]; addonName: string } };
   togglePlayback: () => void;
@@ -50,6 +51,9 @@ interface PlayerControlsProps {
   isAirPlayActive?: boolean;
   allowsAirPlay?: boolean;
   onAirPlayPress?: () => void;
+  // MPV Switch (Android only)
+  onSwitchToMPV?: () => void;
+  useExoPlayer?: boolean;
 }
 
 export const PlayerControls: React.FC<PlayerControlsProps> = ({
@@ -92,8 +96,11 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
   isAirPlayActive,
   allowsAirPlay,
   onAirPlayPress,
+  onSwitchToMPV,
+  useExoPlayer,
 }) => {
   const { currentTheme } = useTheme();
+  const { t } = useTranslation();
 
 
   /* Responsive Spacing */
@@ -110,6 +117,13 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
   /* Animations - State & Refs */
   const [showBackwardSign, setShowBackwardSign] = React.useState(false);
   const [showForwardSign, setShowForwardSign] = React.useState(false);
+  const [previewTime, setPreviewTime] = React.useState(currentTime);
+  const isSlidingRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!isSlidingRef.current) {
+      setPreviewTime(currentTime);
+    }
+  }, [currentTime]);
 
   /* Separate Animations for Each Button */
   const backwardPressAnim = React.useRef(new Animated.Value(0)).current;
@@ -131,7 +145,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
   /* Handle Seek with Animation */
   const handleSeekWithAnimation = (seconds: number) => {
     const isForward = seconds > 0;
-    
+
     if (isForward) {
       setShowForwardSign(true);
     } else {
@@ -275,10 +289,22 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
           }}
           minimumValue={0}
           maximumValue={duration || 1}
-          value={currentTime}
-          onValueChange={onSliderValueChange}
-          onSlidingStart={onSlidingStart}
-          onSlidingComplete={onSlidingComplete}
+
+          value={previewTime}
+
+          onValueChange={(v) => setPreviewTime(v)}
+
+          onSlidingStart={() => {
+            isSlidingRef.current = true;
+            onSlidingStart();
+          }}
+
+          onSlidingComplete={(v) => {
+            isSlidingRef.current = false;
+            setPreviewTime(v);
+            onSlidingComplete(v);
+          }}
+
           minimumTrackTintColor={currentTheme.colors.primary}
           maximumTrackTintColor={currentTheme.colors.mediumEmphasis}
           thumbTintColor={Platform.OS === 'android' ? currentTheme.colors.white : undefined}
@@ -286,7 +312,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
         />
         <View style={[styles.timeDisplay, { paddingHorizontal: 14 }]}>
           <View style={styles.timeContainer}>
-            <Text style={styles.duration}>{formatTime(currentTime)}</Text>
+            <Text style={styles.duration}>{formatTime(previewTime)}</Text>
           </View>
           <View style={styles.timeContainer}>
             <Text style={styles.duration}>{formatTime(duration)}</Text>
@@ -314,7 +340,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
               {/* Show year and provider (quality chip removed) */}
               <View style={styles.metadataRow}>
                 {year && <Text style={styles.metadataText}>{year}</Text>}
-                {streamName && <Text style={styles.providerText}>via {streamName}</Text>}
+                {streamName && <Text style={styles.providerText}>{t('player_ui.via', { name: streamName })}</Text>}
               </View>
               {playerBackend && (
                 <View style={styles.metadataRow}>
@@ -336,6 +362,19 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
                   />
                 </TouchableOpacity>
               )}
+              {/* Switch to MPV Button - Android only, when using ExoPlayer */}
+              {Platform.OS === 'android' && onSwitchToMPV && useExoPlayer && (
+                <TouchableOpacity
+                  style={{ padding: 8 }}
+                  onPress={onSwitchToMPV}
+                >
+                  <Ionicons
+                    name="swap-horizontal"
+                    size={closeIconSize}
+                    color="white"
+                  />
+                </TouchableOpacity>
+              )}
               <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
                 <Ionicons name="close" size={closeIconSize} color="white" />
               </TouchableOpacity>
@@ -343,34 +382,35 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
           </View>
         </LinearGradient>
 
-        
+
         {/* Center Controls - CloudStream Style */}
-        <View style={[styles.controls, { 
-          transform: [{ translateY: -(playButtonSize / 2) }] 
+        <View style={[styles.controls, {
+          transform: [{ translateY: -(playButtonSize / 2) }]
         }]}>
-          
+
           {/* Backward Seek Button (-10s) */}
-          <TouchableOpacity 
-            onPress={() => handleSeekWithAnimation(-10)} 
+          <TouchableOpacity
+            onPress={() => handleSeekWithAnimation(-10)}
             activeOpacity={0.7}
           >
             <Animated.View style={[
               styles.seekButtonContainer,
-              { 
+              {
                 width: seekButtonSize,
                 height: seekButtonSize,
-                transform: [{ scale: backwardScaleAnim }] 
+                transform: [{ scale: backwardScaleAnim }]
               }
             ]}>
-              <Ionicons 
-                name="reload-outline" 
-                size={seekIconSize} 
-                color="white" 
-                style={{ transform: [{ scaleX: -1 }] }} 
-              />
+              <View style={{ transform: [{ scaleX: -1 }] }}>
+                <Ionicons
+                  name="reload-outline"
+                  size={seekIconSize}
+                  color="white"
+                />
+              </View>
               <Animated.View style={[
                 styles.buttonCircle,
-                { 
+                {
                   opacity: backwardPressAnim,
                   width: seekButtonSize * 0.6,
                   height: seekButtonSize * 0.6,
@@ -383,65 +423,65 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
               }]}>
                 <Animated.Text style={[
                   styles.seekNumber,
-                  { 
+                  {
                     fontSize: seekNumberSize,
                     marginLeft: 7,
-                    transform: [{ translateX: backwardSlideAnim }] 
+                    transform: [{ translateX: backwardSlideAnim }]
                   }
                 ]}>
                   {showBackwardSign ? '-10' : '10'}
                 </Animated.Text>
               </View>
-              </Animated.View>
-              <Animated.View style={[
-                styles.arcContainer,
+            </Animated.View>
+            <Animated.View style={[
+              styles.arcContainer,
+              {
+                width: seekButtonSize,
+                height: seekButtonSize,
+                opacity: backwardArcOpacity,
+                transform: [{
+                  rotate: backwardArcRotation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: ['90deg', '-90deg']
+                  })
+                }]
+              }
+            ]}>
+              <View style={[
+                styles.arcLeft,
                 {
                   width: seekButtonSize,
                   height: seekButtonSize,
-                  opacity: backwardArcOpacity,
-                  transform: [{
-                    rotate: backwardArcRotation.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: ['90deg', '-90deg']
-                    })
-                  }]
+                  borderRadius: seekButtonSize / 2,
+                  borderWidth: arcBorderWidth,
                 }
-              ]}>
-                <View style={[
-                  styles.arcLeft,
-                  {
-                    width: seekButtonSize,
-                    height: seekButtonSize,
-                    borderRadius: seekButtonSize / 2,
-                    borderWidth: arcBorderWidth,
-                  }
-                ]} />
-              </Animated.View>
+              ]} />
+            </Animated.View>
           </TouchableOpacity>
 
           {/* Play/Pause Button */}
-          <TouchableOpacity 
-            onPress={handlePlayPauseWithAnimation} 
+          <TouchableOpacity
+            onPress={handlePlayPauseWithAnimation}
             activeOpacity={0.7}
             style={{ marginHorizontal: buttonSpacing }}
           >
             <View style={[styles.playButtonCircle, { width: playButtonSize, height: playButtonSize }]}>
               <Animated.View style={[
                 styles.playPressCircle,
-                { 
+                {
                   opacity: playPressAnim,
                   width: playButtonSize * 0.85,
                   height: playButtonSize * 0.85,
                   borderRadius: (playButtonSize * 0.85) / 2,
                 }
               ]} />
-              <Animated.View style={{ 
+              <Animated.View style={{
                 transform: [{ scale: playIconScale }],
-                opacity: playIconOpacity 
+                opacity: playIconOpacity
               }}>
-                <Ionicons 
-                  name={paused ? "play" : "pause"} 
-                  size={playIconSizeCalculated} 
+                <Ionicons
+                  name={paused ? "play" : "pause"}
+                  size={playIconSizeCalculated}
                   color="#FFFFFF"
                 />
               </Animated.View>
@@ -449,26 +489,26 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
           </TouchableOpacity>
 
           {/* Forward Seek Button (+10s) */}
-            <TouchableOpacity 
-              onPress={() => handleSeekWithAnimation(10)} 
-              activeOpacity={0.7}
-            >
-              <Animated.View style={[
-                styles.seekButtonContainer,
-                { 
-                  width: seekButtonSize,
-                  height: seekButtonSize,
-                  transform: [{ scale: forwardScaleAnim }] 
-                }
-              ]}>
-                <Ionicons 
-                  name="reload-outline" 
-                  size={seekIconSize} 
-                  color="white" 
-                />
+          <TouchableOpacity
+            onPress={() => handleSeekWithAnimation(10)}
+            activeOpacity={0.7}
+          >
+            <Animated.View style={[
+              styles.seekButtonContainer,
+              {
+                width: seekButtonSize,
+                height: seekButtonSize,
+                transform: [{ scale: forwardScaleAnim }]
+              }
+            ]}>
+              <Ionicons
+                name="reload-outline"
+                size={seekIconSize}
+                color="white"
+              />
               <Animated.View style={[
                 styles.buttonCircle,
-                { 
+                {
                   opacity: forwardPressAnim,
                   width: seekButtonSize * 0.6,
                   height: seekButtonSize * 0.6,
@@ -481,9 +521,9 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
               }]}>
                 <Animated.Text style={[
                   styles.seekNumber,
-                  { 
+                  {
                     fontSize: seekNumberSize,
-                    transform: [{ translateX: forwardSlideAnim }] 
+                    transform: [{ translateX: forwardSlideAnim }]
                   }
                 ]}>
                   {showForwardSign ? '+10' : '10'}
@@ -566,10 +606,10 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
                 onPress={() => setShowAudioModal(true)}
                 disabled={ksAudioTracks.length <= 1}
               >
-                <Ionicons 
-                  name="musical-notes-outline" 
-                  size={24} 
-                  color={ksAudioTracks.length <= 1 ? 'grey' : 'white'} 
+                <Ionicons
+                  name="musical-notes-outline"
+                  size={24}
+                  color={ksAudioTracks.length <= 1 ? 'grey' : 'white'}
                 />
               </TouchableOpacity>
 
@@ -590,4 +630,4 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
   );
 };
 
-export default PlayerControls;
+export default PlayerControls;

src/components/player/hooks/useCustomSubtitles.ts

@@ -18,6 +18,7 @@ export const useCustomSubtitles = () => {
     const [currentFormattedSegments, setCurrentFormattedSegments] = useState<SubtitleSegment[][]>([]);
     const [availableSubtitles, setAvailableSubtitles] = useState<WyzieSubtitle[]>([]);
     const [useCustomSubtitles, setUseCustomSubtitles] = useState<boolean>(false);
+    const [selectedExternalSubtitleId, setSelectedExternalSubtitleId] = useState<string | null>(null);
 
     // Loading State
     const [isLoadingSubtitles, setIsLoadingSubtitles] = useState<boolean>(false);
@@ -91,6 +92,7 @@ export const useCustomSubtitles = () => {
         currentFormattedSegments, setCurrentFormattedSegments,
         availableSubtitles, setAvailableSubtitles,
         useCustomSubtitles, setUseCustomSubtitles,
+        selectedExternalSubtitleId, setSelectedExternalSubtitleId,
         isLoadingSubtitles, setIsLoadingSubtitles,
         isLoadingSubtitleList, setIsLoadingSubtitleList,
         subtitleSize, setSubtitleSize,

src/components/player/hooks/useWatchProgress.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
 import { storageService } from '../../../services/storageService';
 import { logger } from '../../../utils/logger';
 import { useSettings } from '../../../hooks/useSettings';
@@ -11,7 +12,8 @@ export const useWatchProgress = (
     duration: number,
     paused: boolean,
     traktAutosync: any,
-    seekToTime: (time: number) => void
+    seekToTime: (time: number) => void,
+    addonId?: string
 ) => {
     const [resumePosition, setResumePosition] = useState<number | null>(null);
     const [savedDuration, setSavedDuration] = useState<number | null>(null);
@@ -34,6 +36,44 @@ export const useWatchProgress = (
         durationRef.current = duration;
     }, [duration]);
 
+    // Keep latest traktAutosync ref to avoid dependency cycles in listeners
+    const traktAutosyncRef = useRef(traktAutosync);
+    useEffect(() => {
+        traktAutosyncRef.current = traktAutosync;
+    }, [traktAutosync]);
+
+    // AppState Listener for background save
+    useEffect(() => {
+        const subscription = AppState.addEventListener('change', async (nextAppState) => {
+            if (nextAppState.match(/inactive|background/)) {
+                if (id && type && durationRef.current > 0) {
+                    logger.log('[useWatchProgress] App backgrounded, saving progress');
+
+                    // Local save
+                    const progress = {
+                        currentTime: currentTimeRef.current,
+                        duration: durationRef.current,
+                        lastUpdated: Date.now(),
+                        addonId: addonId
+                    };
+                    try {
+                        await storageService.setWatchProgress(id, type, progress, episodeId);
+
+                        // Trakt sync (end session)
+                        // Use 'user_close' to force immediate sync
+                        await traktAutosyncRef.current.handlePlaybackEnd(currentTimeRef.current, durationRef.current, 'user_close');
+                    } catch (error) {
+                        logger.error('[useWatchProgress] Error saving background progress:', error);
+                    }
+                }
+            }
+        });
+
+        return () => {
+            subscription.remove();
+        };
+    }, [id, type, episodeId, addonId]);
+
     // Load Watch Progress
     useEffect(() => {
         const loadWatchProgress = async () => {
@@ -74,7 +114,8 @@ export const useWatchProgress = (
             const progress = {
                 currentTime: currentTimeRef.current,
                 duration: durationRef.current,
-                lastUpdated: Date.now()
+                lastUpdated: Date.now(),
+                addonId: addonId
             };
             try {
                 await storageService.setWatchProgress(id, type, progress, episodeId);

src/components/player/ios/components/KSPlayerSurface.tsx

@@ -36,6 +36,13 @@ interface KSPlayerSurfaceProps {
     screenWidth: number;
     screenHeight: number;
     customVideoStyles: any;
+
+    // Subtitle styling
+    subtitleTextColor?: string;
+    subtitleBackgroundColor?: string;
+    subtitleFontSize?: number;
+    subtitleBottomOffset?: number;
+    subtitleOutlineEnabled?: boolean;
 }
 
 export const KSPlayerSurface: React.FC<KSPlayerSurfaceProps> = ({
@@ -64,7 +71,12 @@ export const KSPlayerSurface: React.FC<KSPlayerSurfaceProps> = ({
     onPlaybackResume,
     screenWidth,
     screenHeight,
-    customVideoStyles
+    customVideoStyles,
+    subtitleTextColor,
+    subtitleBackgroundColor,
+    subtitleFontSize,
+    subtitleBottomOffset,
+    subtitleOutlineEnabled
 }) => {
     const pinchRef = useRef<PinchGestureHandler>(null);
 
@@ -87,6 +99,11 @@ export const KSPlayerSurface: React.FC<KSPlayerSurfaceProps> = ({
         headers
     };
 
+    // Debug: log textTrack prop changes
+    React.useEffect(() => {
+        console.log('[KSPlayerSurface] textTrack prop changed to:', textTrack);
+    }, [textTrack]);
+
     // Handle buffering - KSPlayerComponent uses onBuffering callback
     const handleBuffering = (data: any) => {
         onBuffer(data?.isBuffering ?? false);
@@ -127,6 +144,11 @@ export const KSPlayerSurface: React.FC<KSPlayerSurfaceProps> = ({
                     resizeMode={resizeMode}
                     audioTrack={audioTrack}
                     textTrack={textTrack}
+                    subtitleTextColor={subtitleTextColor}
+                    subtitleBackgroundColor={subtitleBackgroundColor}
+                    subtitleFontSize={subtitleFontSize}
+                    subtitleBottomOffset={subtitleBottomOffset}
+                    subtitleOutlineEnabled={subtitleOutlineEnabled}
                     onLoad={handleLoad}
                     onProgress={onProgress}
                     onBuffering={handleBuffering}

src/components/player/modals/AudioTrackModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, ScrollView, useWindowDimensions, StyleSheet, Platform } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
+import { useTranslation } from 'react-i18next';
 import Animated, {
   FadeIn,
   FadeOut,
@@ -13,7 +14,7 @@ import { logger } from '../../../utils/logger';
 interface AudioTrackModalProps {
   showAudioModal: boolean;
   setShowAudioModal: (show: boolean) => void;
-  ksAudioTracks: Array<{id: number, name: string, language?: string}>;
+  ksAudioTracks: Array<{ id: number, name: string, language?: string }>;
   selectedAudioTrack: number | null;
   selectAudioTrack: (trackId: number) => void;
 }
@@ -25,6 +26,7 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
   selectedAudioTrack,
   selectAudioTrack,
 }) => {
+  const { t } = useTranslation();
   const { width, height } = useWindowDimensions();
 
   // Size constants matching SubtitleModal aesthetics
@@ -36,7 +38,7 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
   if (!showAudioModal) return null;
 
   return (
-    <View style={StyleSheet.absoluteFill} zIndex={9999}>
+    <View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
       {/* Backdrop matching SubtitleModal */}
       <TouchableOpacity
         style={StyleSheet.absoluteFill}
@@ -67,7 +69,7 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
         >
           {/* Header with shared aesthetics */}
           <View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
-            <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Audio Tracks</Text>
+            <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>{t('player_ui.audio_tracks')}</Text>
           </View>
 
           <ScrollView
@@ -111,7 +113,7 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
               {ksAudioTracks.length === 0 && (
                 <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
                   <MaterialIcons name="volume-off" size={32} color="white" />
-                  <Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text>
+                  <Text style={{ color: 'white', marginTop: 10 }}>{t('player_ui.no_audio_tracks')}</Text>
                 </View>
               )}
             </View>

src/components/player/modals/EpisodeStreamsModal.tsx

@@ -7,6 +7,7 @@ import Animated, {
   SlideInRight,
   SlideOutRight,
 } from 'react-native-reanimated';
+import { useTranslation } from 'react-i18next';
 import { Episode } from '../../../types/metadata';
 import { Stream } from '../../../types/streams';
 import { stremioService } from '../../../services/stremioService';
@@ -20,7 +21,7 @@ interface EpisodeStreamsModalProps {
   metadata?: { id?: string; name?: string };
 }
 
-const QualityBadge = ({ quality }: { quality: string | null }) => {
+const QualityBadge = ({ quality }: { quality: string | null | undefined }) => {
   if (!quality) return null;
 
   const qualityNum = parseInt(quality);
@@ -58,6 +59,7 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
   onSelectStream,
   metadata,
 }) => {
+  const { t } = useTranslation();
   const { width } = useWindowDimensions();
   const MENU_WIDTH = Math.min(width * 0.85, 400);
 
@@ -140,7 +142,7 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
   const sortedProviders = Object.entries(availableStreams);
 
   return (
-    <View style={StyleSheet.absoluteFill} zIndex={10000}>
+    <View style={[StyleSheet.absoluteFill, { zIndex: 10000 }]}>
       {/* Backdrop */}
       <TouchableOpacity
         style={StyleSheet.absoluteFill}
@@ -177,7 +179,7 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
           <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
             <View style={{ flex: 1, marginRight: 10 }}>
               <Text style={{ color: 'white', fontSize: 20, fontWeight: '700' }} numberOfLines={1}>
-                {episode?.name || 'Sources'}
+                {episode?.name || t('player_ui.sources')}
               </Text>
               {episode && (
                 <Text style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, marginTop: 4 }}>
@@ -195,7 +197,7 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
           {isLoading && sortedProviders.length === 0 && (
             <View style={{ padding: 40, alignItems: 'center' }}>
               <ActivityIndicator color="white" />
-              <Text style={{ color: 'white', marginTop: 15, opacity: 0.6 }}>Finding sources...</Text>
+              <Text style={{ color: 'white', marginTop: 15, opacity: 0.6 }}>{t('player_ui.finding_sources')}</Text>
             </View>
           )}
 
@@ -237,7 +239,7 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
                         <View style={{ flex: 1 }}>
                           <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}>
                             <Text style={{ color: 'white', fontWeight: '700', fontSize: 14, flex: 1 }} numberOfLines={1}>
-                              {stream.name || 'Unknown Source'}
+                              {stream.name || t('player_ui.unknown_source')}
                             </Text>
                             <QualityBadge quality={quality} />
                           </View>
@@ -258,14 +260,14 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
           {!isLoading && sortedProviders.length === 0 && (
             <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
               <MaterialIcons name="cloud-off" size={48} color="white" />
-              <Text style={{ color: 'white', marginTop: 16, textAlign: 'center', fontWeight: '600' }}>No sources found</Text>
+              <Text style={{ color: 'white', marginTop: 16, textAlign: 'center', fontWeight: '600' }}>{t('player_ui.no_sources_found')}</Text>
             </View>
           )}
 
           {hasErrors.length > 0 && (
-             <View style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', borderRadius: 12, padding: 12, marginTop: 10 }}>
-                <Text style={{ color: '#EF4444', fontSize: 11 }}>Sources might be limited due to provider errors.</Text>
-             </View>
+            <View style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', borderRadius: 12, padding: 12, marginTop: 10 }}>
+              <Text style={{ color: '#EF4444', fontSize: 11 }}>{t('player_ui.sources_limited')}</Text>
+            </View>
           )}
         </ScrollView>
       </Animated.View>

src/components/player/modals/EpisodesModal.tsx

@@ -7,6 +7,7 @@ import Animated, {
   SlideInRight,
   SlideOutRight,
 } from 'react-native-reanimated';
+import { useTranslation } from 'react-i18next';
 import { Episode } from '../../../types/metadata';
 import { EpisodeCard } from '../cards/EpisodeCard';
 import { storageService } from '../../../services/storageService';
@@ -32,6 +33,7 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
   onSelectEpisode,
   tmdbEpisodeOverrides
 }) => {
+  const { t } = useTranslation();
   const { width } = useWindowDimensions();
   const [selectedSeason, setSelectedSeason] = useState<number>(currentEpisode?.season || 1);
   const [episodeProgress, setEpisodeProgress] = useState<{ [key: string]: any }>({});
@@ -117,7 +119,7 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
       >
         <View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 20, paddingHorizontal: 20 }}>
           <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
-            <Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Episodes</Text>
+            <Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>{t('player_ui.episodes')}</Text>
           </View>
 
           <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 15, gap: 8 }}>
@@ -143,7 +145,7 @@ export const EpisodesModal: React.FC<EpisodesModalProps> = ({
                     color: selectedSeason === season ? 'black' : 'white',
                     fontWeight: selectedSeason === season ? '700' : '500'
                   }}>
-                    {season === 0 ? 'Specials' : `Season ${season}`}
+                    {season === 0 ? t('player_ui.specials') : t('player_ui.season', { season })}
                   </Text>
                 </TouchableOpacity>
               ))}

src/components/player/modals/ErrorModal.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import * as ExpoClipboard from 'expo-clipboard';
 import { View, Text, TouchableOpacity, StyleSheet, useWindowDimensions } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
+import { useTranslation } from 'react-i18next';
 import Animated, {
     FadeIn,
     FadeOut,
@@ -22,6 +23,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = ({
     errorDetails,
     onDismiss,
 }) => {
+    const { t } = useTranslation();
     const [copied, setCopied] = React.useState(false);
     const { width } = useWindowDimensions();
     const MODAL_WIDTH = Math.min(width * 0.8, 400);
@@ -79,7 +81,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = ({
                     marginBottom: 8,
                     textAlign: 'center'
                 }}>
-                    Playback Error
+                    {t('player_ui.playback_error')}
                 </Text>
 
                 <Text
@@ -93,7 +95,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = ({
                         lineHeight: 22
                     }}
                 >
-                    {errorDetails || 'An unknown error occurred during playback.'}
+                    {errorDetails || t('player_ui.unknown_error')}
                 </Text>
 
                 <TouchableOpacity
@@ -114,7 +116,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = ({
                         style={{ marginRight: 6 }}
                     />
                     <Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13, fontWeight: '500' }}>
-                        {copied ? 'Copied to clipboard' : 'Copy error details'}
+                        {copied ? t('player_ui.copied_to_clipboard') : t('player_ui.copy_error')}
                     </Text>
                 </TouchableOpacity>
 
@@ -135,7 +137,7 @@ export const ErrorModal: React.FC<ErrorModalProps> = ({
                         fontSize: 16,
                         fontWeight: '700'
                     }}>
-                        Dismiss
+                        {t('player_ui.dismiss')}
                     </Text>
                 </TouchableOpacity>
             </Animated.View>

src/components/player/modals/ResumeOverlay.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
+import { useTranslation } from 'react-i18next';
 import { styles } from '../utils/playerStyles';
 import { formatTime } from '../utils/playerUtils';
 import { logger } from '../../../utils/logger';
@@ -27,6 +28,7 @@ export const ResumeOverlay: React.FC<ResumeOverlayProps> = ({
   handleResume,
   handleStartFromBeginning,
 }) => {
+  const { t } = useTranslation();
   useEffect(() => {
     // Removed excessive logging for props changes
   }, [showResumeOverlay, resumePosition, duration, title]);
@@ -35,9 +37,9 @@ export const ResumeOverlay: React.FC<ResumeOverlayProps> = ({
     // Removed excessive logging for overlay visibility
     return null;
   }
-  
+
   // Removed excessive logging for overlay rendering
-  
+
   return (
     <View style={styles.resumeOverlay}>
       <LinearGradient
@@ -49,18 +51,18 @@ export const ResumeOverlay: React.FC<ResumeOverlayProps> = ({
             <Ionicons name="play-circle" size={40} color="#E50914" />
           </View>
           <View style={styles.resumeTextContainer}>
-            <Text style={styles.resumeTitle}>Continue Watching</Text>
+            <Text style={styles.resumeTitle}>{t('player_ui.continue_watching')}</Text>
             <Text style={styles.resumeInfo}>
               {title}
               {season && episode && ` • S${season}E${episode}`}
             </Text>
             <View style={styles.resumeProgressContainer}>
               <View style={styles.resumeProgressBar}>
-                <View 
+                <View
                   style={[
-                    styles.resumeProgressFill, 
+                    styles.resumeProgressFill,
                     { width: `${duration > 0 ? (resumePosition / duration) * 100 : 0}%` }
-                  ]} 
+                  ]}
                 />
               </View>
               <Text style={styles.resumeTimeText}>
@@ -71,19 +73,19 @@ export const ResumeOverlay: React.FC<ResumeOverlayProps> = ({
         </View>
 
         <View style={styles.resumeButtons}>
-          <TouchableOpacity 
-            style={styles.resumeButton} 
+          <TouchableOpacity
+            style={styles.resumeButton}
             onPress={handleStartFromBeginning}
           >
             <Ionicons name="refresh" size={16} color="white" style={styles.buttonIcon} />
-            <Text style={styles.resumeButtonText}>Start Over</Text>
+            <Text style={styles.resumeButtonText}>{t('player_ui.start_over')}</Text>
           </TouchableOpacity>
-          <TouchableOpacity 
-            style={[styles.resumeButton, styles.resumeFromButton]} 
+          <TouchableOpacity
+            style={[styles.resumeButton, styles.resumeFromButton]}
             onPress={handleResume}
           >
             <Ionicons name="play" size={16} color="white" style={styles.buttonIcon} />
-            <Text style={styles.resumeButtonText}>Resume</Text>
+            <Text style={styles.resumeButtonText}>{t('player_ui.resume')}</Text>
           </TouchableOpacity>
         </View>
       </LinearGradient>

src/components/player/modals/SourcesModal.tsx

@@ -7,6 +7,7 @@ import Animated, {
   SlideInRight,
   SlideOutRight,
 } from 'react-native-reanimated';
+import { useTranslation } from 'react-i18next';
 import { Stream } from '../../../types/streams';
 
 interface SourcesModalProps {
@@ -18,7 +19,7 @@ interface SourcesModalProps {
   isChangingSource?: boolean;
 }
 
-const QualityBadge = ({ quality }: { quality: string | null }) => {
+const QualityBadge = ({ quality }: { quality: string | null | undefined }) => {
   if (!quality) return null;
 
   const qualityNum = parseInt(quality);
@@ -57,6 +58,7 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
   onSelectStream,
   isChangingSource = false,
 }) => {
+  const { t } = useTranslation();
   const { width } = useWindowDimensions();
   const MENU_WIDTH = Math.min(width * 0.85, 400);
 
@@ -85,7 +87,7 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
   };
 
   return (
-    <View style={StyleSheet.absoluteFill} zIndex={10000}>
+    <View style={[StyleSheet.absoluteFill, { zIndex: 10000 }]}>
       {/* Backdrop */}
       <TouchableOpacity
         style={StyleSheet.absoluteFill}
@@ -123,7 +125,7 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
           alignItems: 'center'
         }}>
           <Text style={{ color: 'white', fontSize: 20, fontWeight: '700' }}>
-            Change Source
+            {t('player_ui.change_source')}
           </Text>
         </View>
 
@@ -142,7 +144,7 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
             }}>
               <ActivityIndicator size="small" color="#22C55E" />
               <Text style={{ color: '#22C55E', fontSize: 14, fontWeight: '600', marginLeft: 10 }}>
-                Switching source...
+                {t('player_ui.switching_source')}
               </Text>
             </View>
           )}
@@ -191,7 +193,7 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
                                 fontSize: 14,
                                 flex: 1,
                               }} numberOfLines={1}>
-                                {stream.title || stream.name || `Stream ${index + 1}`}
+                                {stream.title || stream.name || t('player_ui.stream', { number: index + 1 })}
                               </Text>
                               <QualityBadge quality={quality} />
                             </View>
@@ -237,7 +239,7 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
             <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
               <MaterialIcons name="cloud-off" size={48} color="white" />
               <Text style={{ color: 'white', marginTop: 16, textAlign: 'center', fontWeight: '600' }}>
-                No sources found
+                {t('player_ui.no_sources_found')}
               </Text>
             </View>
           )}

src/components/player/modals/SpeedModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, useWindowDimensions, StyleSheet } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
+import { useTranslation } from 'react-i18next';
 import Animated, {
   FadeIn,
   FadeOut,
@@ -55,6 +56,7 @@ const SpeedModal: React.FC<SpeedModalProps> = ({
   holdToSpeedValue,
   setHoldToSpeedValue,
 }) => {
+  const { t } = useTranslation();
   const { width } = useWindowDimensions();
   const speedPresets = [0.5, 1.0, 1.25, 1.5, 2.0, 2.5];
   const holdSpeedOptions = [1.0, 2.0, 3.0];
@@ -62,7 +64,7 @@ const SpeedModal: React.FC<SpeedModalProps> = ({
   if (!showSpeedModal) return null;
 
   return (
-    <View style={StyleSheet.absoluteFill} zIndex={9999}>
+    <View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
       <TouchableOpacity
         style={StyleSheet.absoluteFill}
         activeOpacity={1}
@@ -85,7 +87,7 @@ const SpeedModal: React.FC<SpeedModalProps> = ({
           }}
         >
           <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20, alignItems: 'center' }}>
-            <Text style={{ color: 'white', fontSize: 16, fontWeight: '600'}}>Playback Speed</Text>
+            <Text style={{ color: 'white', fontSize: 16, fontWeight: '600' }}>{t('player_ui.playback_speed')}</Text>
           </View>
 
           {/* Speed Selection Row */}
@@ -108,7 +110,7 @@ const SpeedModal: React.FC<SpeedModalProps> = ({
               onPress={() => setHoldToSpeedEnabled(!holdToSpeedEnabled)}
               style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: holdToSpeedEnabled ? 15 : 0 }}
             >
-              <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14 }}>On Hold</Text>
+              <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14 }}>{t('player_ui.on_hold')}</Text>
               <View style={{
                 width: 34, height: 18, borderRadius: 10,
                 backgroundColor: holdToSpeedEnabled ? 'white' : 'rgba(255,255,255,0.2)',

src/components/player/modals/SubtitleModals.tsx

@@ -9,6 +9,7 @@ import Animated, {
   useAnimatedStyle,
   withTiming,
 } from 'react-native-reanimated';
+import { useTranslation } from 'react-i18next';
 import { WyzieSubtitle, SubtitleCue } from '../utils/playerTypes';
 import { getTrackDisplayName, formatLanguage } from '../utils/playerUtils';
 
@@ -21,16 +22,19 @@ interface SubtitleModalsProps {
   isLoadingSubtitles: boolean;
   customSubtitles: SubtitleCue[];
   availableSubtitles: WyzieSubtitle[];
-  ksTextTracks: Array<{id: number, name: string, language?: string}>;
+  ksTextTracks: Array<{ id: number, name: string, language?: string }>;
   selectedTextTrack: number;
   useCustomSubtitles: boolean;
   isKsPlayerActive?: boolean;
+  // Whether ExoPlayer is being used (limits subtitle styling options)
+  useExoPlayer?: boolean;
   subtitleSize: number;
   subtitleBackground: boolean;
   fetchAvailableSubtitles: () => void;
   loadWyzieSubtitle: (subtitle: WyzieSubtitle) => void;
   selectTextTrack: (trackId: number) => void;
   disableCustomSubtitles: () => void;
+  setSubtitlesAutoSelect?: (autoSelect: boolean) => void;
   increaseSubtitleSize: () => void;
   decreaseSubtitleSize: () => void;
   toggleSubtitleBackground: () => void;
@@ -56,6 +60,8 @@ interface SubtitleModalsProps {
   setSubtitleLineHeightMultiplier: (n: number) => void;
   subtitleOffsetSec: number;
   setSubtitleOffsetSec: (n: number) => void;
+  selectedExternalSubtitleId?: string | null; // ID of currently selected external/addon subtitle
+  onOpenSyncModal?: () => void; // Callback to open the visual sync modal
 }
 
 const MorphingTab = ({ label, isSelected, onPress }: any) => {
@@ -81,19 +87,31 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
   subtitleSize, subtitleBackground, fetchAvailableSubtitles,
   loadWyzieSubtitle, selectTextTrack, increaseSubtitleSize,
   decreaseSubtitleSize, toggleSubtitleBackground, subtitleTextColor, setSubtitleTextColor,
+  useExoPlayer = false,
   subtitleBgOpacity, setSubtitleBgOpacity, subtitleTextShadow, setSubtitleTextShadow,
   subtitleOutline, setSubtitleOutline, subtitleOutlineColor, setSubtitleOutlineColor,
   subtitleOutlineWidth, setSubtitleOutlineWidth, subtitleAlign, setSubtitleAlign,
   subtitleBottomOffset, setSubtitleBottomOffset, subtitleLetterSpacing, setSubtitleLetterSpacing,
   subtitleLineHeightMultiplier, setSubtitleLineHeightMultiplier, subtitleOffsetSec, setSubtitleOffsetSec,
+  setSubtitlesAutoSelect,
+  selectedExternalSubtitleId,
+  onOpenSyncModal,
 }) => {
+  const { t } = useTranslation();
   const { width, height } = useWindowDimensions();
   const isIos = Platform.OS === 'ios';
   const isLandscape = width > height;
-  const [selectedOnlineSubtitleId, setSelectedOnlineSubtitleId] = React.useState<string | null>(null);
+  // Use prop value if provided (for auto-selected subtitles), otherwise use local state
+  const [localSelectedId, setLocalSelectedId] = React.useState<string | null>(null);
+  const selectedOnlineSubtitleId = selectedExternalSubtitleId ?? localSelectedId;
+  const setSelectedOnlineSubtitleId = setLocalSelectedId;
   const [activeTab, setActiveTab] = React.useState<'built-in' | 'addon' | 'appearance'>('built-in');
 
   const isCompact = width < 360 || height < 640;
+  // Internal subtitle is active when a built-in track is selected AND not using custom/addon subtitles
+  const isUsingInternalSubtitle = selectedTextTrack >= 0 && !useCustomSubtitles;
+  // ExoPlayer internal subtitles have limited styling support
+  const isExoPlayerInternal = useExoPlayer && isUsingInternalSubtitle;
   const sectionPad = isCompact ? 12 : 16;
   const chipPadH = isCompact ? 8 : 12;
   const chipPadV = isCompact ? 6 : 8;
@@ -104,7 +122,9 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
   const menuMaxHeight = height * 0.95;
 
   React.useEffect(() => {
-    if (showSubtitleModal && !isLoadingSubtitleList && availableSubtitles.length === 0) fetchAvailableSubtitles();
+    if (showSubtitleModal && !isLoadingSubtitleList && availableSubtitles.length === 0) {
+      fetchAvailableSubtitles();
+    }
   }, [showSubtitleModal]);
 
   const handleClose = () => setShowSubtitleModal(false);
@@ -112,7 +132,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
   if (!showSubtitleModal) return null;
 
   return (
-    <View style={StyleSheet.absoluteFill} zIndex={9999}>
+    <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)' }} />
@@ -135,14 +155,14 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
         >
           {/* Header */}
           <View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
-            <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Subtitles</Text>
+            <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>{t('player_ui.subtitles')}</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')} />
+            <MorphingTab label={t('player_ui.built_in')} isSelected={activeTab === 'built-in'} onPress={() => setActiveTab('built-in')} />
+            <MorphingTab label={t('player_ui.addons')} isSelected={activeTab === 'addon'} onPress={() => setActiveTab('addon')} />
+            <MorphingTab label={t('player_ui.style')} isSelected={activeTab === 'appearance'} onPress={() => setActiveTab('appearance')} />
           </View>
 
           <ScrollView showsVerticalScrollIndicator={false}>
@@ -150,15 +170,25 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
               {activeTab === 'built-in' && (
                 <View style={{ gap: 8 }}>
                   <TouchableOpacity
-                    onPress={() => { selectTextTrack(-1); setSelectedOnlineSubtitleId(null); }}
+                    onPress={() => {
+                      selectTextTrack(-1);
+                      setSelectedOnlineSubtitleId(null);
+                      // Disable auto-select for future playback sessions
+                      setSubtitlesAutoSelect?.(false);
+                    }}
                     style={{ padding: 10, borderRadius: 12, backgroundColor: selectedTextTrack === -1 ? 'white' : 'rgba(242, 184, 181)' }}
                   >
-                    <Text style={{ color: selectedTextTrack === -1 ? 'black' : 'rgba(96, 20, 16)', fontWeight: '600' }}>None</Text>
+                    <Text style={{ color: selectedTextTrack === -1 ? 'black' : 'rgba(96, 20, 16)', fontWeight: '600' }}>{t('player_ui.none')}</Text>
                   </TouchableOpacity>
                   {ksTextTracks.map((track) => (
                     <TouchableOpacity
                       key={track.id}
-                      onPress={() => { selectTextTrack(track.id); setSelectedOnlineSubtitleId(null); }}
+                      onPress={() => {
+                        selectTextTrack(track.id);
+                        setSelectedOnlineSubtitleId(null);
+                        // Enable auto-select for future playback sessions when user selects a subtitle
+                        setSubtitlesAutoSelect?.(true);
+                      }}
                       style={{ padding: 10, borderRadius: 12, backgroundColor: selectedTextTrack === track.id ? 'white' : 'rgba(255,255,255,0.05)', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
                     >
                       <Text style={{ color: selectedTextTrack === track.id ? 'black' : 'white' }}>{getTrackDisplayName(track)}</Text>
@@ -173,14 +203,19 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                   {availableSubtitles.length === 0 ? (
                     <TouchableOpacity onPress={fetchAvailableSubtitles} style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
                       <MaterialIcons name="cloud-download" size={32} color="white" />
-                      <Text style={{ color: 'white', marginTop: 10 }}>Search Online Subtitles</Text>
+                      <Text style={{ color: 'white', marginTop: 10 }}>{t('player_ui.search_online_subtitles')}</Text>
                     </TouchableOpacity>
                   ) : (
                     availableSubtitles.map((sub) => (
                       <TouchableOpacity
                         key={sub.id}
-                        onPress={() => { setSelectedOnlineSubtitleId(sub.id); loadWyzieSubtitle(sub); }}
-                        style={{ padding: 5,paddingLeft: 8, paddingRight: 10, borderRadius: 12, backgroundColor: selectedOnlineSubtitleId === sub.id ? 'white' : 'rgba(255,255,255,0.05)', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', textAlignVertical: 'center' }}
+                        onPress={() => {
+                          setSelectedOnlineSubtitleId(sub.id);
+                          loadWyzieSubtitle(sub);
+                          // Enable auto-select for future playback sessions when user selects a subtitle
+                          setSubtitlesAutoSelect?.(true);
+                        }}
+                        style={{ padding: 5, paddingLeft: 8, paddingRight: 10, borderRadius: 12, backgroundColor: selectedOnlineSubtitleId === sub.id ? 'white' : 'rgba(255,255,255,0.05)', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
                       >
                         <View>
                           <Text style={{ marginLeft: 5, color: selectedOnlineSubtitleId === sub.id ? 'black' : 'white', fontWeight: '600' }}>{sub.display}</Text>
@@ -199,12 +234,13 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                   <View style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 16, padding: sectionPad }}>
                     <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 8 }}>
                       <MaterialIcons name="visibility" size={16} color="rgba(255,255,255,0.7)" />
-                      <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>Preview</Text>
+                      <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>{t('player_ui.preview')}</Text>
                     </View>
                     <View style={{ height: previewHeight, justifyContent: 'flex-end' }}>
                       <View style={{ alignItems: subtitleAlign === 'center' ? 'center' : subtitleAlign === 'left' ? 'flex-start' : 'flex-end', marginBottom: Math.min(80, subtitleBottomOffset) }}>
                         <View style={{
-                          backgroundColor: subtitleBackground ? `rgba(0,0,0,${subtitleBgOpacity})` : 'transparent',
+                          // Built-in (KSPlayer internal) subtitles: force background off in UI preview.
+                          backgroundColor: isUsingInternalSubtitle ? 'transparent' : (subtitleBackground ? `rgba(0,0,0,${subtitleBgOpacity})` : 'transparent'),
                           borderRadius: 8,
                           paddingHorizontal: isCompact ? 10 : 12,
                           paddingVertical: isCompact ? 6 : 8,
@@ -226,61 +262,63 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                     </View>
                   </View>
 
-                  {/* Quick Presets */}
-                  <View style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 16, padding: sectionPad }}>
-                    <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
-                      <MaterialIcons name="star" size={16} color="rgba(255,255,255,0.7)" />
-                      <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>Quick Presets</Text>
+                  {/* Quick Presets - only for CustomSubtitles overlay */}
+                  {!isUsingInternalSubtitle && (
+                    <View style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 16, padding: sectionPad }}>
+                      <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
+                        <MaterialIcons name="star" size={16} color="rgba(255,255,255,0.7)" />
+                        <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>{t('player_ui.quick_presets')}</Text>
+                      </View>
+                      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+                        <TouchableOpacity
+                          onPress={() => {
+                            setSubtitleTextColor('#FFFFFF'); setSubtitleBgOpacity(0.7); 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)' }}
+                        >
+                          <Text style={{ color: '#fff', fontWeight: '600', fontSize: isCompact ? 11 : 12 }}>{t('player_ui.default')}</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                          onPress={() => {
+                            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)' }}
+                        >
+                          <Text style={{ color: '#FFD700', fontWeight: '700', fontSize: isCompact ? 11 : 12 }}>{t('player_ui.yellow')}</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                          onPress={() => {
+                            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)' }}
+                        >
+                          <Text style={{ color: '#22C55E', fontWeight: '700', fontSize: isCompact ? 11 : 12 }}>{t('player_ui.high_contrast')}</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                          onPress={() => {
+                            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)' }}
+                        >
+                          <Text style={{ color: '#3B82F6', fontWeight: '700', fontSize: isCompact ? 11 : 12 }}>{t('player_ui.large')}</Text>
+                        </TouchableOpacity>
+                      </View>
                     </View>
-                    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
-                      <TouchableOpacity
-                        onPress={() => {
-                          setSubtitleTextColor('#FFFFFF'); setSubtitleBgOpacity(0.7); 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)' }}
-                      >
-                        <Text style={{ color: '#fff', fontWeight: '600', fontSize: isCompact ? 11 : 12 }}>Default</Text>
-                      </TouchableOpacity>
-                      <TouchableOpacity
-                        onPress={() => {
-                          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)' }}
-                      >
-                        <Text style={{ color: '#FFD700', fontWeight: '700', fontSize: isCompact ? 11 : 12 }}>Yellow</Text>
-                      </TouchableOpacity>
-                      <TouchableOpacity
-                        onPress={() => {
-                          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)' }}
-                      >
-                        <Text style={{ color: '#22C55E', fontWeight: '700', fontSize: isCompact ? 11 : 12 }}>High Contrast</Text>
-                      </TouchableOpacity>
-                      <TouchableOpacity
-                        onPress={() => {
-                          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)' }}
-                      >
-                        <Text style={{ color: '#3B82F6', fontWeight: '700', fontSize: isCompact ? 11 : 12 }}>Large</Text>
-                      </TouchableOpacity>
-                    </View>
-                  </View>
+                  )}
 
                   {/* Core controls */}
                   <View style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 16, padding: sectionPad, gap: isCompact ? 10 : 14 }}>
                     <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 2 }}>
                       <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>
+                      <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>{t('player_ui.core')}</Text>
                     </View>
                     <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)" />
-                        <Text style={{ color: '#fff', fontWeight: '600', marginLeft: 8 }}>Font Size</Text>
+                        <Text style={{ color: '#fff', fontWeight: '600', marginLeft: 8 }}>{t('player_ui.font_size')}</Text>
                       </View>
                       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                         <TouchableOpacity onPress={decreaseSubtitleSize} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', justifyContent: 'center', alignItems: 'center' }}>
@@ -294,30 +332,34 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                         </TouchableOpacity>
                       </View>
                     </View>
-                    <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>
+                    {/* Background is only for CustomSubtitles (external/addon). Built-in subtitles force background OFF. */}
+                    {!isUsingInternalSubtitle && (
+                      <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 }}>{t('player_ui.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 }}
+                          onPress={toggleSubtitleBackground}
+                        >
+                          <View style={{ width: 24, height: 24, backgroundColor: subtitleBackground ? 'black' : 'white', borderRadius: 12 }} />
+                        </TouchableOpacity>
                       </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 }}
-                        onPress={toggleSubtitleBackground}
-                      >
-                        <View style={{ width: 24, height: 24, backgroundColor: subtitleBackground ? 'black' : 'white', borderRadius: 12 }} />
-                      </TouchableOpacity>
-                    </View>
+                    )}
                   </View>
 
                   {/* Advanced controls */}
                   <View style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 16, padding: sectionPad, gap: isCompact ? 10 : 14 }}>
                     <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                       <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>
+                      <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginLeft: 6, fontWeight: '600' }}>{isUsingInternalSubtitle ? t('player_ui.position') : t('player_ui.advanced')}</Text>
                     </View>
+                    {/* Text Color - supported for MPV built-in, and for CustomSubtitles */}
                     <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)" />
-                        <Text style={{ color: 'white', marginLeft: 8, fontWeight: '600' }}>Text Color</Text>
+                        <Text style={{ color: 'white', marginLeft: 8, fontWeight: '600' }}>{t('player_ui.text_color')}</Text>
                       </View>
                       <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, justifyContent: 'flex-end' }}>
                         {['#FFFFFF', '#FFD700', '#00E5FF', '#FF5C5C', '#00FF88', '#9b59b6', '#f97316'].map(c => (
@@ -325,18 +367,22 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                         ))}
                       </View>
                     </View>
-                    <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)' }}>
-                            <MaterialIcons name={a.icon as any} size={18} color="#FFFFFF" />
-                          </TouchableOpacity>
-                        ))}
+
+                    {/* Align - only supported for CustomSubtitles overlay */}
+                    {!isUsingInternalSubtitle && (
+                      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.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)' }}>
+                              <MaterialIcons name={a.icon as any} size={18} color="#FFFFFF" />
+                            </TouchableOpacity>
+                          ))}
+                        </View>
                       </View>
-                    </View>
+                    )}
                     <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                      <Text style={{ color: 'white', fontWeight: '600' }}>Bottom Offset</Text>
+                      <Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.bottom_offset')}</Text>
                       <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
                         <TouchableOpacity onPress={() => setSubtitleBottomOffset(Math.max(0, subtitleBottomOffset - 5))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
                           <MaterialIcons name="keyboard-arrow-down" color="#fff" size={20} />
@@ -349,95 +395,144 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                         </TouchableOpacity>
                       </View>
                     </View>
-                    <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' }}>
-                        <TouchableOpacity onPress={() => setSubtitleBgOpacity(Math.max(0, +(subtitleBgOpacity - 0.1).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
-                          <MaterialIcons name="remove" color="#fff" size={18} />
-                        </TouchableOpacity>
-                        <View style={{ minWidth: 48, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
-                          <Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleBgOpacity.toFixed(1)}</Text>
-                        </View>
-                        <TouchableOpacity onPress={() => setSubtitleBgOpacity(Math.min(1, +(subtitleBgOpacity + 0.1).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
-                          <MaterialIcons name="add" color="#fff" size={18} />
-                        </TouchableOpacity>
-                      </View>
-                    </View>
-                    <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>
-                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                      <Text style={{ color: 'white' }}>Outline Color</Text>
-                      <View style={{ flexDirection: 'row', gap: 8 }}>
-                        {['#000000', '#FFFFFF', '#00E5FF', '#FF5C5C'].map(c => (
-                          <TouchableOpacity key={c} onPress={() => setSubtitleOutlineColor(c)} style={{ width: 22, height: 22, borderRadius: 11, backgroundColor: c, borderWidth: 2, borderColor: subtitleOutlineColor === c ? '#fff' : 'rgba(255,255,255,0.3)' }} />
-                        ))}
-                      </View>
-                    </View>
-                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                      <Text style={{ color: 'white' }}>Outline Width</Text>
-                      <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-                        <TouchableOpacity onPress={() => setSubtitleOutlineWidth(Math.max(0, subtitleOutlineWidth - 1))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
-                          <MaterialIcons name="remove" color="#fff" size={18} />
-                        </TouchableOpacity>
-                        <View style={{ minWidth: 42, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
-                          <Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleOutlineWidth}</Text>
-                        </View>
-                        <TouchableOpacity onPress={() => setSubtitleOutlineWidth(subtitleOutlineWidth + 1)} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
-                          <MaterialIcons name="add" color="#fff" size={18} />
-                        </TouchableOpacity>
-                      </View>
-                    </View>
-                    <View style={{ flexDirection: isCompact ? 'column' : 'row', justifyContent: 'space-between', gap: 12 }}>
-                      <View style={{ flex: 1 }}>
-                        <Text style={{ color: 'white', fontWeight: '600' }}>Letter Spacing</Text>
-                        <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center', justifyContent: 'space-between' }}>
-                          <TouchableOpacity onPress={() => setSubtitleLetterSpacing(Math.max(0, +(subtitleLetterSpacing - 0.5).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
-                            <MaterialIcons name="remove" color="#fff" size={18} />
-                          </TouchableOpacity>
-                          <View style={{ minWidth: 48, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
-                            <Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleLetterSpacing.toFixed(1)}</Text>
-                          </View>
-                          <TouchableOpacity onPress={() => setSubtitleLetterSpacing(+(subtitleLetterSpacing + 0.5).toFixed(1))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
-                            <MaterialIcons name="add" color="#fff" size={18} />
-                          </TouchableOpacity>
-                        </View>
-                      </View>
-                      <View style={{ flex: 1 }}>
-                        <Text style={{ color: 'white', fontWeight: '600' }}>Line Height</Text>
-                        <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center', justifyContent: 'space-between' }}>
-                          <TouchableOpacity onPress={() => setSubtitleLineHeightMultiplier(Math.max(1, +(subtitleLineHeightMultiplier - 0.1).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
-                            <MaterialIcons name="remove" color="#fff" size={18} />
-                          </TouchableOpacity>
-                          <View style={{ minWidth: 48, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
-                            <Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleLineHeightMultiplier.toFixed(1)}</Text>
-                          </View>
-                          <TouchableOpacity onPress={() => setSubtitleLineHeightMultiplier(+(subtitleLineHeightMultiplier + 0.1).toFixed(1))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
-                            <MaterialIcons name="add" color="#fff" size={18} />
-                          </TouchableOpacity>
-                        </View>
-                      </View>
-                    </View>
-                    <View style={{ marginTop: 4 }}>
+                    {/* Background Opacity (CustomSubtitles only) */}
+                    {!isUsingInternalSubtitle && (
                       <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                        <Text style={{ color: 'white', fontWeight: '600' }}>Timing Offset (s)</Text>
+                        <Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.background_opacity')}</Text>
                         <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-                          <TouchableOpacity onPress={() => setSubtitleOffsetSec(+(subtitleOffsetSec - 0.1).toFixed(1))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
+                          <TouchableOpacity onPress={() => setSubtitleBgOpacity(Math.max(0, +(subtitleBgOpacity - 0.1).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
                             <MaterialIcons name="remove" color="#fff" size={18} />
                           </TouchableOpacity>
-                          <View style={{ minWidth: 60, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
-                            <Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleOffsetSec.toFixed(1)}</Text>
+                          <View style={{ minWidth: 48, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
+                            <Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleBgOpacity.toFixed(1)}</Text>
                           </View>
-                          <TouchableOpacity onPress={() => setSubtitleOffsetSec(+(subtitleOffsetSec + 0.1).toFixed(1))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
+                          <TouchableOpacity onPress={() => setSubtitleBgOpacity(Math.min(1, +(subtitleBgOpacity + 0.1).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
                             <MaterialIcons name="add" color="#fff" size={18} />
                           </TouchableOpacity>
                         </View>
                       </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>
+                    )}
+                    {!isUsingInternalSubtitle && (
+                      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.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 ? t('player_ui.on') : t('player_ui.off')}</Text>
+                        </TouchableOpacity>
+                      </View>
+                    )}
+                    {/* Outline controls (now supported for ExoPlayer internal via native patch) */}
+                    {isUsingInternalSubtitle ? (
+                      // KSPlayer built-in subtitles: only expose an Outline on/off toggle (no width control).
+                      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.outline')}</Text>
+                        <TouchableOpacity
+                          onPress={() => setSubtitleOutline(!subtitleOutline)}
+                          style={{ paddingHorizontal: 10, paddingVertical: 8, borderRadius: 10, backgroundColor: subtitleOutline ? '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' }}>{subtitleOutline ? t('player_ui.on') : t('player_ui.off')}</Text>
+                        </TouchableOpacity>
+                      </View>
+                    ) : (
+                      <>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                          <Text style={{ color: 'white' }}>{t('player_ui.outline_color')}</Text>
+                          <View style={{ flexDirection: 'row', gap: 8 }}>
+                            {['#000000', '#FFFFFF', '#00E5FF', '#FF5C5C'].map(c => (
+                              <TouchableOpacity key={c} onPress={() => setSubtitleOutlineColor(c)} style={{ width: 22, height: 22, borderRadius: 11, backgroundColor: c, borderWidth: 2, borderColor: subtitleOutlineColor === c ? '#fff' : 'rgba(255,255,255,0.3)' }} />
+                            ))}
+                          </View>
+                        </View>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                          <Text style={{ color: 'white' }}>{t('player_ui.outline_width')}</Text>
+                          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+                            <TouchableOpacity onPress={() => setSubtitleOutlineWidth(Math.max(0, subtitleOutlineWidth - 1))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
+                              <MaterialIcons name="remove" color="#fff" size={18} />
+                            </TouchableOpacity>
+                            <View style={{ minWidth: 42, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
+                              <Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleOutlineWidth}</Text>
+                            </View>
+                            <TouchableOpacity onPress={() => setSubtitleOutlineWidth(subtitleOutlineWidth + 1)} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
+                              <MaterialIcons name="add" color="#fff" size={18} />
+                            </TouchableOpacity>
+                          </View>
+                        </View>
+                      </>
+                    )}
+                    {!isUsingInternalSubtitle && (
+                      <View style={{ flexDirection: isCompact ? 'column' : 'row', justifyContent: 'space-between', gap: 12 }}>
+                        <View style={{ flex: 1 }}>
+                          <Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.letter_spacing')}</Text>
+                          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center', justifyContent: 'space-between' }}>
+                            <TouchableOpacity onPress={() => setSubtitleLetterSpacing(Math.max(0, +(subtitleLetterSpacing - 0.5).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
+                              <MaterialIcons name="remove" color="#fff" size={18} />
+                            </TouchableOpacity>
+                            <View style={{ minWidth: 48, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
+                              <Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleLetterSpacing.toFixed(1)}</Text>
+                            </View>
+                            <TouchableOpacity onPress={() => setSubtitleLetterSpacing(+(subtitleLetterSpacing + 0.5).toFixed(1))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
+                              <MaterialIcons name="add" color="#fff" size={18} />
+                            </TouchableOpacity>
+                          </View>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                          <Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.line_height')}</Text>
+                          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center', justifyContent: 'space-between' }}>
+                            <TouchableOpacity onPress={() => setSubtitleLineHeightMultiplier(Math.max(1, +(subtitleLineHeightMultiplier - 0.1).toFixed(1)))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
+                              <MaterialIcons name="remove" color="#fff" size={18} />
+                            </TouchableOpacity>
+                            <View style={{ minWidth: 48, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
+                              <Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleLineHeightMultiplier.toFixed(1)}</Text>
+                            </View>
+                            <TouchableOpacity onPress={() => setSubtitleLineHeightMultiplier(+(subtitleLineHeightMultiplier + 0.1).toFixed(1))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
+                              <MaterialIcons name="add" color="#fff" size={18} />
+                            </TouchableOpacity>
+                          </View>
+                        </View>
+                      </View>
+                    )}
+                    {/* Timing Offset - Not supported on ExoPlayer internal subtitles */}
+                    {!isExoPlayerInternal && (
+                      <View style={{ marginTop: 4 }}>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                          <Text style={{ color: 'white', fontWeight: '600' }}>{t('player_ui.timing_offset')}</Text>
+                          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+                            <TouchableOpacity onPress={() => setSubtitleOffsetSec(+(subtitleOffsetSec - 0.1).toFixed(1))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
+                              <MaterialIcons name="remove" color="#fff" size={18} />
+                            </TouchableOpacity>
+                            <View style={{ minWidth: 60, paddingHorizontal: 6, paddingVertical: 4, borderRadius: 10, backgroundColor: 'rgba(255,255,255,0.12)' }}>
+                              <Text style={{ color: 'white', textAlign: 'center', fontWeight: '700' }}>{subtitleOffsetSec.toFixed(1)}</Text>
+                            </View>
+                            <TouchableOpacity onPress={() => setSubtitleOffsetSec(+(subtitleOffsetSec + 0.1).toFixed(1))} style={{ width: controlBtn.size, height: controlBtn.size, borderRadius: controlBtn.radius, backgroundColor: 'rgba(255,255,255,0.18)', alignItems: 'center', justifyContent: 'center' }}>
+                              <MaterialIcons name="add" color="#fff" size={18} />
+                            </TouchableOpacity>
+                          </View>
+                        </View>
+                        {/* Visual Sync Button */}
+                        {onOpenSyncModal && (
+                          <TouchableOpacity
+                            onPress={() => {
+                              setShowSubtitleModal(false);
+                              setTimeout(() => onOpenSyncModal(), 100);
+                            }}
+                            style={{
+                              marginTop: 12,
+                              flexDirection: 'row',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              padding: 12,
+                              borderRadius: 10,
+                              backgroundColor: 'rgba(255,255,255,0.08)',
+                              borderWidth: 1,
+                              borderColor: 'rgba(255,255,255,0.15)',
+                            }}
+                          >
+                            <MaterialIcons name="sync" color="#fff" size={18} style={{ marginRight: 8 }} />
+                            <Text style={{ color: '#fff', fontWeight: '600', fontSize: 14 }}>{t('player_ui.visual_sync')}</Text>
+                          </TouchableOpacity>
+                        )}
+                        <Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 11, marginTop: 6 }}>{t('player_ui.timing_hint')}</Text>
+                      </View>
+                    )}
                     <View style={{ alignItems: 'flex-end', marginTop: 8 }}>
                       <TouchableOpacity
                         onPress={() => {
@@ -448,7 +543,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                         }}
                         style={{ paddingHorizontal: chipPadH, paddingVertical: chipPadV, borderRadius: 8, backgroundColor: 'rgba(255,255,255,0.1)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)' }}
                       >
-                        <Text style={{ color: '#fff', fontWeight: '600', fontSize: isCompact ? 12 : 14 }}>Reset to defaults</Text>
+                        <Text style={{ color: '#fff', fontWeight: '600', fontSize: isCompact ? 12 : 14 }}>{t('player_ui.reset_defaults')}</Text>
                       </TouchableOpacity>
                     </View>
                   </View>