Merge branch 'develop' into sync-subtitle/audio-data

.github/ISSUE_TEMPLATE/issue_report.yml

@@ -75,13 +75,10 @@ body:
     id: version
     attributes:
       label: Streamyfin Version
-      description: What version of Streamyfin are you running? On a TestFlight or development build, choose "TestFlight/Development build" and include the exact version string shown in the app's Settings.
+      description: What version of Streamyfin are you using?
       options:
         - 0.54.1
         - 0.51.0
-        - 0.47.1
-        - 0.30.2
-        - 0.28.0
         - Older
         - TestFlight/Development build
     validations:

.github/actions/refresh-pr-comment/action.yml

@@ -1,21 +0,0 @@
-name: Refresh PR build comment
-description: >-
-  Nudge artifact-comment.yml (via workflow_dispatch) so the PR build-status
-  comment reflects live per-platform progress as each build job finishes.
-
-runs:
-  using: composite
-  steps:
-    # workflow_dispatch fires even when triggered by the GITHUB_TOKEN, and
-    # artifact-comment's concurrency group collapses simultaneous nudges, so
-    # this can't spam the comment. Skipped on forks (their read-only token
-    # cannot dispatch). github.token is used because composite actions cannot
-    # read the secrets context.
-    - if: always() && github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository
-      continue-on-error: true
-      shell: bash
-      env:
-        GH_TOKEN: ${{ github.token }}
-        HEAD_REF: ${{ github.head_ref }}
-        REPO: ${{ github.repository }}
-      run: gh workflow run artifact-comment.yml --ref "$HEAD_REF" -R "$REPO"

.github/copilot-instructions.md

@@ -42,7 +42,7 @@ and provides seamless media streaming with offline capabilities and Chromecast s
 
 ## Coding Standards
 
-- Use TypeScript for ALL files (no .js files). Tooling-required exceptions: `babel.config.js`, `metro.config.js`, `react-native.config.js`, `tailwind.config.js` (their loaders cannot parse TypeScript)
+- Use TypeScript for ALL files (no .js files)
 - Use descriptive English names for variables, functions, and components
 - Prefer functional React components with hooks
 - Use Jotai atoms for global state management

.github/renovate.json

@@ -30,17 +30,9 @@
       "customType": "regex",
       "managerFilePatterns": ["/\\.ya?ml$/"],
       "matchStrings": [
-        "# renovate: datasource=(?<datasource>\\S+) depName=(?<depName>\\S+)(?: versioning=(?<versioning>\\S+))?\\s+[A-Za-z0-9._-]+:\\s*[\"']?(?<currentValue>[^\"'\\s]+)"
+        "# renovate: datasource=(?<datasource>\\S+) depName=(?<depName>\\S+)(?: versioning=(?<versioning>\\S+))?\\s+xcode-version:\\s*[\"']?(?<currentValue>[^\"'\\s]+)"
       ],
       "versioningTemplate": "{{#if versioning}}{{{versioning}}}{{else}}loose{{/if}}"
-    },
-    {
-      "customType": "regex",
-      "description": "Track the Bun version pinned in eas.json build profiles (strict JSON can't hold inline annotations)",
-      "managerFilePatterns": ["/(^|/)eas\\.json$/"],
-      "matchStrings": ["\"bun\"\\s*:\\s*\"(?<currentValue>[^\"]+)\""],
-      "datasourceTemplate": "npm",
-      "depNameTemplate": "bun"
     }
   ],
   "customDatasources": {

.github/workflows/artifact-comment.yml

@@ -18,7 +18,7 @@ jobs:
   comment-artifacts:
     if: github.event_name == 'workflow_dispatch' || github.event_name == 'pull_request' || (github.event_name == 'workflow_run' && github.event.workflow_run.event == 'pull_request')
     name: 📦 Post Build Artifacts
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-latest
     permissions:
       contents: read
       pull-requests: write
@@ -144,7 +144,7 @@ jobs:
               )
               .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
 
-            console.log(`Found ${buildRuns.length} build workflow runs for this commit`);
+            console.log(`Found ${buildRuns.length} non-cancelled build workflow runs for this commit`);
 
             // Log current status of each build for debugging
             buildRuns.forEach(run => {
@@ -184,35 +184,21 @@ jobs:
             const latestAndroidRun = findBestRun('Android APK Build');
             const latestIOSRun = findBestRun('iOS IPA Build');
 
-            // Map our build targets to their job display names. Exact name is
-            // tried first so a signed target never collides with its
-            // "(Unsigned)" sibling (whose name contains the signed name).
-            const jobMappings = {
-              'Android Phone': ['🤖 Build Android APK (Phone)'],
-              'Android TV': ['🤖 Build Android APK (TV)'],
-              'iOS': ['🍎 Build iOS IPA (Phone)'],
-              'iOS Unsigned': ['🍎 Build iOS IPA (Phone - Unsigned)'],
-              'tvOS': ['🍎 Build tvOS IPA'],
-              'tvOS Unsigned': ['🍎 Build tvOS IPA (Unsigned)']
-            };
-
-            // Prefer an exact name match over a substring match so
-            // '...(Phone)' doesn't swallow '...(Phone - Unsigned)'.
-            const findJobForTarget = (jobs, jobNames) =>
-              jobs.find(j => jobNames.some(name => j.name === name)) ||
-              jobs.find(j => jobNames.some(name => j.name.includes(name)));
-
-            // Format a millisecond duration as "Xm Ys".
-            const fmtDuration = (ms) => {
-              const min = Math.floor(ms / 60000);
-              const sec = Math.floor((ms % 60000) / 1000);
-              return `${min}m ${sec}s`;
-            };
-
             // For the consolidated workflow, get individual job statuses
             if (latestAppsRun) {
               console.log(`Getting individual job statuses for run ${latestAppsRun.id} (status: ${latestAppsRun.status}, conclusion: ${latestAppsRun.conclusion || 'none'})`);
               
+              // Map job names to our build targets. Declared outside the try so
+              // the catch fallback can reuse the same keys.
+              const jobMappings = {
+                'Android Phone': ['🤖 Build Android APK (Phone)', 'build-android-phone'],
+                'Android TV': ['🤖 Build Android APK (TV)', 'build-android-tv'],
+                'iOS': ['🍎 Build iOS IPA (Phone)', 'build-ios-phone'],
+                'iOS Unsigned': ['🍎 Build iOS IPA (Phone - Unsigned)', 'build-ios-phone-unsigned'],
+                'tvOS': ['🍎 Build tvOS IPA', 'build-ios-tv'],
+                'tvOS Unsigned': ['🍎 Build tvOS IPA (Unsigned)', 'build-ios-tv-unsigned']
+              };
+
               try {
                 // Get all jobs for this workflow run
                 const { data: jobs } = await github.rest.actions.listJobsForWorkflowRun({
@@ -243,8 +229,10 @@ jobs:
                 
                 // Create individual status for each job
                 for (const [platform, jobNames] of Object.entries(jobMappings)) {
-                  const job = findJobForTarget(jobs.jobs, jobNames);
+                  const job = jobs.jobs.find(j => 
-
+                    jobNames.some(name => j.name.includes(name) || j.name === name)
+                  );
+                  
                   if (job) {
                     buildStatuses[platform] = {
                       name: job.name,
@@ -370,43 +358,6 @@ jobs:
               console.log(`- Artifact: ${artifact.name} (from run ${artifact.workflow_run.id})`);
             });
 
-            // Pull per-job durations from the latest successful develop build so
-            // in-progress / queued targets can show a realistic ETA instead of
-            // an open-ended spinner. Best-effort: any failure just drops the ETA.
-            let referenceDurations = {};
-            try {
-              const { data: devRuns } = await github.rest.actions.listWorkflowRuns({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                workflow_id: 'build-apps.yml',
-                branch: 'develop',
-                status: 'success',
-                per_page: 1
-              });
-
-              if (devRuns.workflow_runs.length > 0) {
-                const refRun = devRuns.workflow_runs[0];
-                const { data: refJobs } = await github.rest.actions.listJobsForWorkflowRun({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  run_id: refRun.id
-                });
-
-                for (const [platform, jobNames] of Object.entries(jobMappings)) {
-                  const job = findJobForTarget(refJobs.jobs, jobNames);
-                  if (job && job.conclusion === 'success' && job.started_at && job.completed_at) {
-                    referenceDurations[platform] = new Date(job.completed_at) - new Date(job.started_at);
-                  }
-                }
-                console.log(`Reference durations from develop run ${refRun.id}:`,
-                  Object.fromEntries(Object.entries(referenceDurations).map(([k, v]) => [k, fmtDuration(v)])));
-              } else {
-                console.log('No successful develop build found for ETA reference');
-              }
-            } catch (error) {
-              console.log('Failed to fetch develop reference durations:', error.message);
-            }
-
             // Build comment body with progressive status for individual builds
             let commentBody = `## 🔧 Build Status for PR #${pr.number}\n\n`;
             commentBody += `🔗 **Commit**: [\`${targetCommitSha.substring(0, 7)}\`](https://github.com/${context.repo.owner}/${context.repo.repo}/commit/${targetCommitSha})\n\n`;            // Progressive build status and downloads table
@@ -418,9 +369,9 @@ jobs:
             const buildTargets = [
               { name: 'Android Phone', platform: '🤖', device: '📱 Phone', statusKey: 'Android Phone', artifactPattern: /android.*phone/i },
               { name: 'Android TV', platform: '🤖', device: '📺 TV', statusKey: 'Android TV', artifactPattern: /android.*tv/i },
-              { name: 'iOS', platform: '🍎', device: '📱 Phone', statusKey: 'iOS', artifactPattern: /^(?!.*unsigned).*ios.*phone.*ipa/i },
+              { name: 'iOS', platform: '🍎', device: '📱 Phone', statusKey: 'iOS', artifactPattern: /ios.*phone.*ipa(?!.*unsigned)/i },
               { name: 'iOS Unsigned', platform: '🍎', device: '📱 Phone Unsigned', statusKey: 'iOS Unsigned', artifactPattern: /ios.*phone.*unsigned/i },
-              { name: 'tvOS', platform: '🍎', device: '📺 TV', statusKey: 'tvOS', artifactPattern: /^(?!.*unsigned).*ios.*tv.*ipa/i },
+              { name: 'tvOS', platform: '🍎', device: '📺 TV', statusKey: 'tvOS', artifactPattern: /ios.*tv.*ipa(?!.*unsigned)/i },
               { name: 'tvOS Unsigned', platform: '🍎', device: '📺 TV Unsigned', statusKey: 'tvOS Unsigned', artifactPattern: /ios.*tv.*unsigned/i }
             ];
 
@@ -436,12 +387,11 @@ jobs:
               let status = '⏳ Pending';
               let downloadLink = '*Waiting for build...*';
 
-              // Signed tvOS stays disabled until EAS has tvOS provisioning
+              // tvOS builds are temporarily disabled until feat/tv-interface
-              // profiles (app + TopShelf targets); non-interactive builds can't
+              // is merged - show them as disabled instead of stuck pending.
-              // create them. Unsigned tvOS builds, so it flows through normally.
+              if (target.name === 'tvOS' || target.name === 'tvOS Unsigned') {
-              if (target.name === 'tvOS') {
                 status = '💤 Disabled';
-                downloadLink = '*Disabled — signed tvOS needs EAS provisioning profiles*';
+                downloadLink = '*Disabled until feat/tv-interface is merged*';
               } else if (matchingStatus) {
                 if (matchingStatus.conclusion === 'success' && matchingArtifact) {
                   status = '✅ Complete';
@@ -456,9 +406,11 @@ jobs:
                   let durationInfo = '';
                   if (matchingStatus.started_at && matchingStatus.completed_at) {
                     const durationMs = new Date(matchingStatus.completed_at) - new Date(matchingStatus.started_at);
-                    durationInfo = ` - ${fmtDuration(durationMs)}`;
+                    const durationMin = Math.floor(durationMs / 60000);
+                    const durationSec = Math.floor((durationMs % 60000) / 1000);
+                    durationInfo = ` - ${durationMin}m ${durationSec}s`;
                   }
-
+                  
                   downloadLink = `[📥 Download ${fileType}](${directLink}) ${sizeInfo}${durationInfo}`;
                 } else if (matchingStatus.conclusion === 'failure') {
                   status = `❌ [Failed](${matchingStatus.url})`;
@@ -468,16 +420,10 @@ jobs:
                   downloadLink = '*Build cancelled*';
                 } else if (matchingStatus.status === 'in_progress') {
                   status = `🔄 [Building...](${matchingStatus.url})`;
-                  const ref = referenceDurations[target.statusKey];
+                  downloadLink = '*Build in progress...*';
-                  downloadLink = ref
-                    ? `*Building… ~${fmtDuration(ref)} (avg on develop)*`
-                    : '*Build in progress...*';
                 } else if (matchingStatus.status === 'queued') {
                   status = `⏳ [Queued](${matchingStatus.url})`;
-                  const ref = referenceDurations[target.statusKey];
+                  downloadLink = '*Waiting to start...*';
-                  downloadLink = ref
-                    ? `*Waiting to start… ~${fmtDuration(ref)} once running (avg on develop)*`
-                    : '*Waiting to start...*';
                 } else if (matchingStatus.status === 'completed' && !matchingStatus.conclusion) {
                   // Workflow completed but conclusion not yet available (rare edge case)
                   status = `🔄 [Finishing...](${matchingStatus.url})`;
@@ -498,22 +444,7 @@ jobs:
 
             commentBody += `\n`;
 
-            // Static rundown of the build optimisations + what each artifact
+            // Show installation instructions if we have any artifacts
-            // installs on. Always shown (even mid-build) so testers know what
-            // to expect before downloads are ready.
-            commentBody += `<details>\n`;
-            commentBody += `<summary>📦 Build details &amp; device compatibility</summary>\n\n`;
-            commentBody += `These CI builds are trimmed for size and speed. What that means for installing them:\n\n`;
-            commentBody += `| Artifact | Architectures | Installs on |\n`;
-            commentBody += `|---|---|---|\n`;
-            commentBody += `| 🤖 Android Phone APK | \`arm64-v8a\` | Every 64-bit Android phone (all since ~2017). **Not** an x86_64 emulator or a 32-bit device. |\n`;
-            commentBody += `| 📺 Android TV APK | \`arm64-v8a\` + \`armeabi-v7a\` | Modern boxes **and** older / cheap 32-bit Android TV sticks. No x86_64. |\n`;
-            commentBody += `| 🍎 iOS / tvOS IPA | \`arm64\` | iPhone / Apple TV (all current devices). |\n\n`;
-            commentBody += `**Why no x86_64?** That slice only runs on Android emulators / Chromebooks, never a real phone or TV box — dropping it shrinks the APK and speeds up the build. Local \`bun run android\` is unaffected (it still builds x86_64 from \`app.json\`).\n\n`;
-            commentBody += `**Runners:** Android on \`ubuntu-26.04\`; iOS / tvOS on Apple Silicon (\`macos-26\`). The size/speed win comes from the ABI trim above, not the runner.\n`;
-            commentBody += `</details>\n\n`;
-
-            // Installation instructions only matter once something is downloadable.
             if (allArtifacts.length > 0) {
               commentBody += `### 🔧 Installation Instructions\n\n`;
               commentBody += `- **Android APK**: Download and install directly on your device (enable "Install from unknown sources")\n`;

.github/workflows/build-apps.yml

@@ -11,7 +11,7 @@ on:
   push:
     branches: [develop, master]
 
-# Exposed to `expo prebuild` (app.config.ts → extra.build) so Settings can show the
+# Exposed to `expo prebuild` (app.config.js → extra.build) so Settings can show the
 # branch + commit + Actions run a CI build was made from. EAS cloud builds use
 # EAS_BUILD_* instead. The run number maps a sideloaded build back to its Actions
 # run (artifacts + logs) without needing Expo access.
@@ -23,90 +23,74 @@ env:
 jobs:
   build-android-phone:
     if: (!contains(github.event.head_commit.message, '[skip ci]'))
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     name: 🤖 Build Android APK (Phone)
     permissions:
       contents: read
-      actions: write # dispatch artifact-comment.yml to refresh the PR comment
 
     steps:
-      - parallel:
+      - name: 🗑️ Free Disk Space
-          - name: 🗑️ Free Disk Space
+        uses: BRAINSia/free-disk-space@7048ffbf50819342ac964ef3998a51c2564a8a75 # v2.1.3
-            uses: BRAINSia/free-disk-space@7048ffbf50819342ac964ef3998a51c2564a8a75 # v2.1.3
+        with:
-            with:
+          tool-cache: false
-              tool-cache: false
+          mandb: true
-              mandb: true
+          android: false
-              android: false
+          dotnet: true
-              dotnet: true
+          haskell: true
-              haskell: true
+          large-packages: true
-              large-packages: false
+          docker-images: true
-              docker-images: true
+          swap-storage: false
-              swap-storage: false
 
-          - name: 📥 Checkout code
+      - name: 📥 Checkout code
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            with:
+        with:
-              ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-              fetch-depth: 0
+          fetch-depth: 0
-              submodules: recursive
+          submodules: recursive
-              show-progress: false
+          show-progress: false
 
-          - name: 🍞 Setup Bun
+      - name: 🍞 Setup Bun
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-            with:
+        with:
-              # renovate: datasource=npm depName=bun
+          bun-version: latest
-              bun-version: "1.3.14"
 
-          - name: ☕ Set up JDK 17
+      - name: 💾 Cache Bun dependencies
-            # ubuntu-26.04 defaults to JDK 25, which breaks the RN/AGP native build
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-            # (Kotlin falls back to JVM_23, the foojay toolchain + CMake configure
+        with:
-            # fail). Pin Temurin 17 for a deterministic Android build.
+          path: ~/.bun/install/cache
-            uses: actions/setup-java@ad2b38190b15e4d6bdf0c97fb4fca8412226d287 # v5.3.0
+          key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
-            with:
+          restore-keys: |
-              distribution: temurin
+            ${{ runner.os }}-${{ runner.arch }}-bun-develop
-              java-version: "17"
+            ${{ runner.os }}-bun-develop
-
-      - parallel:
-          - name: 💾 Cache Bun dependencies
-            uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
-            with:
-              path: ~/.bun/install/cache
-              key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
-              restore-keys: |
-                ${{ runner.os }}-${{ runner.arch }}-bun-
-
-          - name: 💾 Cache Gradle global
-            uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
-            with:
-              path: |
-                ~/.gradle/caches/modules-2
-                ~/.gradle/wrapper
-              key: ${{ runner.os }}-${{ runner.arch }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
-              restore-keys: |
-                ${{ runner.os }}-${{ runner.arch }}-gradle-
 
       - name: 📦 Install dependencies and reload submodules
         run: |
           bun install --frozen-lockfile
           bun run submodule-reload
 
+      - name: 💾 Cache Gradle global
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: |
+            ~/.gradle/caches
+            ~/.gradle/wrapper
+          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
+          restore-keys: |
+            ${{ runner.os }}-gradle-
+
       - name: 🛠️ Generate project files
         run: bun run prebuild
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: android/.gradle
-          key: ${{ runner.os }}-${{ runner.arch }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
+          key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
-          restore-keys: ${{ runner.os }}-${{ runner.arch }}-android-gradle-develop
+          restore-keys: ${{ runner.os }}-android-gradle-develop
 
       - name: 🚀 Build APK
         env:
           EXPO_TV: 0
-          # CI artifact ships arm64 only (phones; emulators/Chromebooks not a
-          # sideload target). Overrides app.json buildArchs for this build only,
-          # so local `bun run android` (x86_64 emulator) is unaffected.
-          ORG_GRADLE_PROJECT_reactNativeArchitectures: arm64-v8a
         run: bun run build:android:local
 
       - name: 📅 Set date tag
@@ -120,94 +104,76 @@ jobs:
             android/app/build/outputs/apk/release/*.apk
           retention-days: 7
 
-      - name: 🔄 Refresh PR build comment
-        uses: ./.github/actions/refresh-pr-comment
-
   build-android-tv:
     if: (!contains(github.event.head_commit.message, '[skip ci]'))
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     name: 🤖 Build Android APK (TV)
     permissions:
       contents: read
-      actions: write # dispatch artifact-comment.yml to refresh the PR comment
 
     steps:
-      - parallel:
+      - name: 🗑️ Free Disk Space
-          - name: 🗑️ Free Disk Space
+        uses: BRAINSia/free-disk-space@7048ffbf50819342ac964ef3998a51c2564a8a75 # v2.1.3
-            uses: BRAINSia/free-disk-space@7048ffbf50819342ac964ef3998a51c2564a8a75 # v2.1.3
+        with:
-            with:
+          tool-cache: false
-              tool-cache: false
+          mandb: true
-              mandb: true
+          android: false
-              android: false
+          dotnet: true
-              dotnet: true
+          haskell: true
-              haskell: true
+          large-packages: true
-              large-packages: false
+          docker-images: true
-              docker-images: true
+          swap-storage: false
-              swap-storage: false
 
-          - name: 📥 Checkout code
+      - name: 📥 Checkout code
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            with:
+        with:
-              ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-              fetch-depth: 0
+          fetch-depth: 0
-              submodules: recursive
+          submodules: recursive
-              show-progress: false
+          show-progress: false
 
-          - name: 🍞 Setup Bun
+      - name: 🍞 Setup Bun
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-            with:
+        with:
-              # renovate: datasource=npm depName=bun
+          bun-version: latest
-              bun-version: "1.3.14"
 
-          - name: ☕ Set up JDK 17
+      - name: 💾 Cache Bun dependencies
-            # ubuntu-26.04 defaults to JDK 25, which breaks the RN/AGP native build
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-            # (Kotlin falls back to JVM_23, the foojay toolchain + CMake configure
+        with:
-            # fail). Pin Temurin 17 for a deterministic Android build.
+          path: ~/.bun/install/cache
-            uses: actions/setup-java@ad2b38190b15e4d6bdf0c97fb4fca8412226d287 # v5.3.0
+          key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
-            with:
+          restore-keys: |
-              distribution: temurin
+            ${{ runner.os }}-${{ runner.arch }}-bun-develop
-              java-version: "17"
+            ${{ runner.os }}-bun-develop
-
-      - parallel:
-          - name: 💾 Cache Bun dependencies
-            uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
-            with:
-              path: ~/.bun/install/cache
-              key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
-              restore-keys: |
-                ${{ runner.os }}-${{ runner.arch }}-bun-
-
-          - name: 💾 Cache Gradle global
-            uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
-            with:
-              path: |
-                ~/.gradle/caches/modules-2
-                ~/.gradle/wrapper
-              key: ${{ runner.os }}-${{ runner.arch }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
-              restore-keys: |
-                ${{ runner.os }}-${{ runner.arch }}-gradle-
 
       - name: 📦 Install dependencies and reload submodules
         run: |
           bun install --frozen-lockfile
           bun run submodule-reload
 
+      - name: 💾 Cache Gradle global
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: |
+            ~/.gradle/caches
+            ~/.gradle/wrapper
+          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
+          restore-keys: |
+            ${{ runner.os }}-gradle-
+
       - name: 🛠️ Generate project files
         run: bun run prebuild:tv
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: android/.gradle
-          key: ${{ runner.os }}-${{ runner.arch }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
+          key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
-          restore-keys: ${{ runner.os }}-${{ runner.arch }}-android-gradle-develop
+          restore-keys: ${{ runner.os }}-android-gradle-develop
 
       - name: 🚀 Build APK
         env:
           EXPO_TV: 1
-          # TV artifact keeps armeabi-v7a too: many older/cheap Android TV boxes
-          # and sticks are still 32-bit ARM. Drops only x86_64. CI build only.
-          ORG_GRADLE_PROJECT_reactNativeArchitectures: arm64-v8a,armeabi-v7a
         run: bun run build:android:local
 
       - name: 📅 Set date tag
@@ -221,53 +187,34 @@ jobs:
             android/app/build/outputs/apk/release/*.apk
           retention-days: 7
 
-      - name: 🔄 Refresh PR build comment
-        uses: ./.github/actions/refresh-pr-comment
-
   build-ios-phone:
     if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
     runs-on: macos-26
     name: 🍎 Build iOS IPA (Phone)
     permissions:
       contents: read
-      actions: write # dispatch artifact-comment.yml to refresh the PR comment
 
     steps:
-      - parallel:
+      - name: 📥 Checkout code
-          - name: 📥 Checkout code
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
-            with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-              ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          fetch-depth: 0
-              fetch-depth: 0
+          submodules: recursive
-              submodules: recursive
+          show-progress: false
-              show-progress: false
 
-          - name: 🍞 Setup Bun
+      - name: 🍞 Setup Bun
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-            with:
+        with:
-              # renovate: datasource=npm depName=bun
+          bun-version: latest
-              bun-version: "1.3.14"
-
-          - name: 🔧 Setup Xcode
-            uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
-            with:
-              # renovate: datasource=custom.xcode depName=xcode versioning=loose
-              xcode-version: "26.6"
-
-          - name: 🏗️ Setup EAS
-            uses: expo/expo-github-action@eab7a230208c952974db8c3245cfd78402c7b385 # main
-            with:
-              eas-version: latest
-              token: ${{ secrets.EXPO_TOKEN }}
-              eas-cache: true
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
-          key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
           restore-keys: |
-            ${{ runner.os }}-${{ runner.arch }}-bun-
+            ${{ runner.os }}-bun-cache
 
       - name: 📦 Install dependencies and reload submodules
         run: |
@@ -277,6 +224,19 @@ jobs:
       - name: 🛠️ Generate project files
         run: bun run prebuild
 
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
+        with:
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
+          xcode-version: "26.5"
+
+      - name: 🏗️ Setup EAS
+        uses: expo/expo-github-action@eab7a230208c952974db8c3245cfd78402c7b385 # main
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+          eas-cache: true
+
       - name: 🚀 Build iOS app
         env:
           EXPO_TV: 0
@@ -294,46 +254,34 @@ jobs:
           path: build-*.ipa
           retention-days: 7
 
-      - name: 🔄 Refresh PR build comment
-        uses: ./.github/actions/refresh-pr-comment
-
   build-ios-phone-unsigned:
     if: (!contains(github.event.head_commit.message, '[skip ci]'))
     runs-on: macos-26
     name: 🍎 Build iOS IPA (Phone - Unsigned)
     permissions:
       contents: read
-      actions: write # dispatch artifact-comment.yml to refresh the PR comment
 
     steps:
-      - parallel:
+      - name: 📥 Checkout code
-          - name: 📥 Checkout code
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
-            with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-              ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          fetch-depth: 0
-              fetch-depth: 0
+          submodules: recursive
-              submodules: recursive
+          show-progress: false
-              show-progress: false
 
-          - name: 🍞 Setup Bun
+      - name: 🍞 Setup Bun
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-            with:
+        with:
-              # renovate: datasource=npm depName=bun
+          bun-version: latest
-              bun-version: "1.3.14"
-
-          - name: 🔧 Setup Xcode
-            uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
-            with:
-              # renovate: datasource=custom.xcode depName=xcode versioning=loose
-              xcode-version: "26.6"
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
-          key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
           restore-keys: |
-            ${{ runner.os }}-${{ runner.arch }}-bun-
+            ${{ runner.os }}-bun-cache
 
       - name: 📦 Install dependencies and reload submodules
         run: |
@@ -343,6 +291,12 @@ jobs:
       - name: 🛠️ Generate project files
         run: bun run prebuild
 
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
+        with:
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
+          xcode-version: "26.5"
+
       - name: 🚀 Build iOS app
         env:
           EXPO_TV: 0
@@ -358,57 +312,36 @@ jobs:
           path: build/*.ipa
           retention-days: 7
 
-      - name: 🔄 Refresh PR build comment
-        uses: ./.github/actions/refresh-pr-comment
-
   build-ios-tv:
-    # Disabled: EAS has no provisioning profiles / distribution cert for the tvOS
+    # Temporarily disabled until feat/tv-interface is merged (TV UI not ready).
-    # targets (app + StreamyfinTopShelf extension), so non-interactive signed
+    # Re-enable by removing the `false &&` prefix below.
-    # builds fail. Set up tvOS credentials in EAS (`eas credentials`), then remove
-    # the `false &&` prefix below. Unsigned tvOS builds run (see job below).
     if: false && (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
     runs-on: macos-26
     name: 🍎 Build tvOS IPA
     permissions:
       contents: read
-      actions: write # dispatch artifact-comment.yml to refresh the PR comment
 
     steps:
-      - parallel:
+      - name: 📥 Checkout code
-          - name: 📥 Checkout code
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
-            with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-              ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          fetch-depth: 0
-              fetch-depth: 0
+          submodules: recursive
-              submodules: recursive
+          show-progress: false
-              show-progress: false
 
-          - name: 🍞 Setup Bun
+      - name: 🍞 Setup Bun
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-            with:
+        with:
-              # renovate: datasource=npm depName=bun
+          bun-version: latest
-              bun-version: "1.3.14"
-
-          - name: 🔧 Setup Xcode
-            uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
-            with:
-              # renovate: datasource=custom.xcode depName=xcode versioning=loose
-              xcode-version: "26.6"
-
-          - name: 🏗️ Setup EAS
-            uses: expo/expo-github-action@eab7a230208c952974db8c3245cfd78402c7b385 # main
-            with:
-              eas-version: latest
-              token: ${{ secrets.EXPO_TOKEN }}
-              eas-cache: true
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
-          key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
           restore-keys: |
-            ${{ runner.os }}-${{ runner.arch }}-bun-
+            ${{ runner.os }}-bun-cache
 
       - name: 📦 Install dependencies and reload submodules
         run: |
@@ -418,6 +351,19 @@ jobs:
       - name: 🛠️ Generate project files
         run: bun run prebuild:tv
 
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
+        with:
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
+          xcode-version: "26.5"
+
+      - name: 🏗️ Setup EAS
+        uses: expo/expo-github-action@eab7a230208c952974db8c3245cfd78402c7b385 # main
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+          eas-cache: true
+
       - name: 🚀 Build iOS app
         env:
           EXPO_TV: 1
@@ -442,37 +388,28 @@ jobs:
     name: 🍎 Build tvOS IPA (Unsigned)
     permissions:
       contents: read
-      actions: write # dispatch artifact-comment.yml to refresh the PR comment
 
     steps:
-      - parallel:
+      - name: 📥 Checkout code
-          - name: 📥 Checkout code
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
-            with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-              ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          fetch-depth: 0
-              fetch-depth: 0
+          submodules: recursive
-              submodules: recursive
+          show-progress: false
-              show-progress: false
 
-          - name: 🍞 Setup Bun
+      - name: 🍞 Setup Bun
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-            with:
+        with:
-              # renovate: datasource=npm depName=bun
+          bun-version: latest
-              bun-version: "1.3.14"
-
-          - name: 🔧 Setup Xcode
-            uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
-            with:
-              # renovate: datasource=custom.xcode depName=xcode versioning=loose
-              xcode-version: "26.6"
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
-          key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
           restore-keys: |
-            ${{ runner.os }}-${{ runner.arch }}-bun-
+            ${{ runner.os }}-bun-cache
 
       - name: 📦 Install dependencies and reload submodules
         run: |
@@ -482,6 +419,12 @@ jobs:
       - name: 🛠️ Generate project files
         run: bun run prebuild:tv
 
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
+        with:
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
+          xcode-version: "26.5"
+
       - name: 🚀 Build iOS app
         env:
           EXPO_TV: 1
@@ -496,6 +439,3 @@ jobs:
           name: streamyfin-ios-tv-unsigned-ipa-${{ env.DATE_TAG }}
           path: build/*.ipa
           retention-days: 7
-
-      - name: 🔄 Refresh PR build comment
-        uses: ./.github/actions/refresh-pr-comment

.github/workflows/check-lockfile.yml

@@ -13,33 +13,30 @@ concurrency:
 jobs:
   check-lockfile:
     name: 🔍 Check bun.lock and package.json consistency
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     permissions:
       contents: read
 
     steps:
-      - parallel:
+      - name: 📥 Checkout repository
-          - name: 📥 Checkout repository
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
-            with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-              ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          show-progress: false
-              show-progress: false
+          submodules: recursive
-              submodules: recursive
+          fetch-depth: 0
 
-          - name: 🍞 Setup Bun
+      - name: 🍞 Setup Bun
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-            with:
+        with:
-              # renovate: datasource=npm depName=bun
+          bun-version: latest
-              bun-version: "1.3.14"
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: |
             ~/.bun/install/cache
-          key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
+          key: ${{ runner.os }}-bun-${{ hashFiles('bun.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-${{ runner.arch }}-bun-
 
       - name: 🛡️ Verify lockfile consistency
         run: |

.github/workflows/ci-codeql.yml

@@ -8,14 +8,11 @@ on:
   schedule:
     - cron: '24 2 * * *'
 
-concurrency:
-  group: codeql-${{ github.ref }}
-  cancel-in-progress: true
 
 jobs:
   analyze:
     name: 🔎 Analyze with CodeQL
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     permissions:
       contents: read
       security-events: write
@@ -27,7 +24,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
 
       - name: 🏁 Initialize CodeQL
         uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2

.github/workflows/conflict.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   label:
     name: 🏷️ Labeling Merge Conflicts
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     if: ${{ github.repository == 'streamyfin/streamyfin' }}
     permissions:
       contents: read

.github/workflows/crowdin.yml

@@ -19,16 +19,16 @@ permissions:
 
 jobs:
   sync-translations:
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-latest
 
     steps:
       - name: 📥 Checkout Repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           fetch-depth: 0
 
       - name: 🌐 Sync Translations with Crowdin
-        uses: crowdin/github-action@52aa776766211d83d975df51f3b9c53c2f8ba35f # v2.16.3
+        uses: crowdin/github-action@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
         with:
           upload_sources: true
           upload_translations: true

.github/workflows/detect-duplicate.yml

@@ -15,23 +15,21 @@ jobs:
   detect:
     name: 🔍 Find similar issues
     if: github.actor != 'github-actions[bot]'
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     permissions:
       issues: write
       contents: read
     steps:
-      - parallel:
+      - name: 📥 Checkout repository
-          - name: 📥 Checkout repository
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
 
-          - name: 🍞 Setup Bun
+      - name: 🍞 Setup Bun
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-            with:
+        with:
-              # renovate: datasource=npm depName=bun
+          bun-version: latest
-              bun-version: "1.3.14"
 
       - name: 🔍 Detect duplicate issues
-        run: bun scripts/detect-duplicate-issue.ts
+        run: bun scripts/detect-duplicate-issue.mjs
         env:
           GH_TOKEN: ${{ github.token }}
           GITHUB_REPOSITORY: ${{ github.repository }}

.github/workflows/linting.yml

@@ -2,7 +2,7 @@ name: 🚦 Security & Quality Gate
 
 on:
   pull_request:
-    types: [opened, synchronize, reopened]
+    types: [opened, edited, synchronize, reopened]
     branches: [develop, master]
   workflow_dispatch:
   push:
@@ -11,19 +11,47 @@ on:
 permissions:
   contents: read
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 jobs:
+  validate_pr_title:
+    name: "📝 Validate PR Title"
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-24.04
+    permissions:
+      pull-requests: write
+      contents: read
+    steps:
+      - uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
+        id: lint_pr_title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: marocchino/sticky-pull-request-comment@0ea0beb66eb9baf113663a64ec522f60e49231c0 # v3.0.4
+        if: always() && (steps.lint_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Hey there and thank you for opening this pull request! 👋🏼
+            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/).
+
+            **Error details:**
+            ```
+            ${{ steps.lint_pr_title.outputs.error_message }}
+            ```
+
+      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
+        uses: marocchino/sticky-pull-request-comment@0ea0beb66eb9baf113663a64ec522f60e49231c0 # v3.0.4
+        with:
+          header: pr-title-lint-error
+          delete: true
+
   dependency-review:
     name: 🔍 Vulnerable Dependencies
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     permissions:
       contents: read
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -37,41 +65,30 @@ jobs:
 
   expo-doctor:
     name: 🚑 Expo Doctor Check
-    runs-on: ubuntu-26.04
+    if: false
+    runs-on: ubuntu-24.04
     steps:
-      - parallel:
+      - name: 🛒 Checkout repository
-          - name: 🛒 Checkout repository
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-            with:
-              ref: ${{ github.event.pull_request.head.sha || github.sha }}
-              submodules: recursive
-
-          - name: 🍞 Setup Bun
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-            with:
-              # renovate: datasource=npm depName=bun
-              bun-version: "1.3.14"
-
-      - name: 💾 Cache Bun dependencies
-        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
-          path: ~/.bun/install/cache
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-          key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
+          submodules: recursive
-          restore-keys: |
+          fetch-depth: 0
-            ${{ runner.os }}-${{ runner.arch }}-bun-
+
+      - name: 🍞 Setup Bun
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: latest
 
       - name: 📦 Install dependencies (bun)
         run: bun install --frozen-lockfile
 
       - name: 🚑 Run Expo Doctor
-        # Re-enabled but non-blocking: surfaces doctor warnings in the logs
-        # without failing the gate (some checks are known-noisy for this setup).
-        continue-on-error: true
         run: bun expo-doctor
 
   code_quality:
     name: "🔍 Lint & Test (${{ matrix.command }})"
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     strategy:
       fail-fast: false
       matrix:
@@ -83,26 +100,22 @@ jobs:
           - "i18n:check"
 
     steps:
-      - parallel:
+      - name: "📥 Checkout PR code"
-          - name: "📥 Checkout PR code"
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-            with:
-              ref: ${{ github.event.pull_request.head.sha || github.sha }}
-              submodules: recursive
-
-          - name: "🍞 Setup Bun"
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-            with:
-              # renovate: datasource=npm depName=bun
-              bun-version: "1.3.14"
-
-      - name: 💾 Cache Bun dependencies
-        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
         with:
-          path: ~/.bun/install/cache
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-          key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
+          submodules: recursive
-          restore-keys: |
+          fetch-depth: 0
-            ${{ runner.os }}-${{ runner.arch }}-bun-
+
+      - name: "🟢 Setup Node.js"
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version: '24.x'
+
+      - name: "🍞 Setup Bun"
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: latest
 
       - name: "📦 Install dependencies"
         run: bun install --frozen-lockfile

.github/workflows/notification.yml

@@ -12,7 +12,7 @@ on:
 
 jobs:
   notify:
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     if: github.event_name == 'pull_request'
     steps:
       - name: 🛎️ Notify Discord
@@ -29,7 +29,7 @@ jobs:
             🔗 ${{ github.event.pull_request.html_url }}
 
   notify-on-failure:
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     if: github.event_name == 'workflow_run' && github.event.workflow_run.conclusion == 'failure'
     steps:
       - name: 🚨 Notify Discord on Failure

.github/workflows/pr-title-comment.yml

@@ -1,81 +0,0 @@
-name: 📝 PR Title Comment
-
-# Posts / updates / deletes the PR-title lint sticky comment with a write token,
-# so it works on FORK PRs too (the pull_request-triggered pr-title.yml only has a
-# read-only token on forks). workflow_run runs from the base branch with the base
-# repo's token. This is comment-only — the required check stays pr-title.yml.
-on:
-  workflow_run:
-    workflows: ["📝 PR Title"]
-    types: [completed]
-
-permissions:
-  contents: read
-  actions: read # download the artifact from the triggering run
-  pull-requests: write # post/update/delete the sticky comment
-
-concurrency:
-  group: pr-title-comment-${{ github.event.workflow_run.id }}
-  cancel-in-progress: true
-
-jobs:
-  comment:
-    # Only run when the lint run actually produced a result artifact: a run
-    # cancelled by concurrency (rapid pushes to the same PR) completes with
-    # conclusion "cancelled" before uploading it, and would fail the download.
-    if: >
-      github.event.workflow_run.event == 'pull_request' &&
-      contains(fromJSON('["success", "failure"]'), github.event.workflow_run.conclusion)
-    runs-on: ubuntu-26.04
-    steps:
-      - name: ⬇️ Download lint result
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh run download "${{ github.event.workflow_run.id }}" \
-            --repo "${{ github.repository }}" \
-            --name pr-title-result \
-            --dir result
-
-      - name: 🔎 Read result
-        id: result
-        run: |
-          echo "number=$(cat result/number)" >> "$GITHUB_OUTPUT"
-          if [ -s result/error ]; then
-            echo "has_error=true" >> "$GITHUB_OUTPUT"
-          else
-            echo "has_error=false" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: 📥 Load error message
-        if: steps.result.outputs.has_error == 'true'
-        run: |
-          {
-            echo "LINT_ERROR<<PR_TITLE_ERR_EOF"
-            cat result/error
-            echo
-            echo "PR_TITLE_ERR_EOF"
-          } >> "$GITHUB_ENV"
-
-      - name: 💬 Post title error
-        if: steps.result.outputs.has_error == 'true'
-        uses: marocchino/sticky-pull-request-comment@0ea0beb66eb9baf113663a64ec522f60e49231c0 # v3.0.4
-        with:
-          number: ${{ steps.result.outputs.number }}
-          header: pr-title-lint-error
-          message: |
-            Hey there and thank you for opening this pull request! 👋🏼
-            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/).
-
-            **Error details:**
-            ```
-            ${{ env.LINT_ERROR }}
-            ```
-
-      - name: 🧹 Clear title error
-        if: steps.result.outputs.has_error == 'false'
-        uses: marocchino/sticky-pull-request-comment@0ea0beb66eb9baf113663a64ec522f60e49231c0 # v3.0.4
-        with:
-          number: ${{ steps.result.outputs.number }}
-          header: pr-title-lint-error
-          delete: true

.github/workflows/pr-title.yml

@@ -1,42 +0,0 @@
-name: 📝 PR Title
-
-on:
-  pull_request:
-    types: [opened, edited, synchronize, reopened]
-    branches: [develop, master]
-
-permissions:
-  contents: read
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
-  cancel-in-progress: true
-
-jobs:
-  validate_pr_title:
-    name: "📝 Validate PR Title"
-    runs-on: ubuntu-26.04
-    steps:
-      - uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
-        id: lint_pr_title
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      # Fork PRs only get a read-only GITHUB_TOKEN here, so the sticky comment
-      # is posted from the privileged pr-title-comment.yml (workflow_run). Hand
-      # off the result (PR number + lint error) as an artifact for it to read.
-      - if: always()
-        env:
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          LINT_ERROR: ${{ steps.lint_pr_title.outputs.error_message }}
-        run: |
-          mkdir -p pr-title-result
-          printf '%s' "$PR_NUMBER" > pr-title-result/number
-          printf '%s' "$LINT_ERROR" > pr-title-result/error
-
-      - if: always()
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-        with:
-          name: pr-title-result
-          path: pr-title-result/
-          retention-days: 1

.github/workflows/release.yml

@@ -13,8 +13,6 @@ name: 🚀 Release (EAS build + submit)
 concurrency:
   group: release-${{ github.ref }}
   cancel-in-progress: false
-  # Queue successive releases in order instead of dropping the extra pending run.
-  queue: max
 
 on:
   push:
@@ -24,9 +22,8 @@ on:
 jobs:
   approve:
     name: 🔐 Approve release
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     environment: production
-    permissions: {}
     steps:
       - name: ✅ Release approved
         run: echo "Release approved for ${{ github.sha }}"
@@ -34,7 +31,7 @@ jobs:
   build:
     name: 🚀 ${{ matrix.name }}
     needs: approve
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     permissions:
       contents: read
     strategy:
@@ -65,40 +62,38 @@ jobs:
             artifact_name: streamyfin-android-tv-apk
 
     steps:
-      - parallel:
+      - name: 📥 Checkout code
-          - name: 📥 Checkout code
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
-            with:
+          fetch-depth: 0
-              fetch-depth: 0
+          submodules: recursive
-              submodules: recursive
+          show-progress: false
-              show-progress: false
 
-          - name: 🍞 Setup Bun
+      - name: 🍞 Setup Bun
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-            with:
+        with:
-              # renovate: datasource=npm depName=bun
+          bun-version: latest
-              bun-version: "1.3.14"
-
-          - name: 🏗️ Setup EAS
-            uses: expo/expo-github-action@eab7a230208c952974db8c3245cfd78402c7b385 # main
-            with:
-              eas-version: latest
-              token: ${{ secrets.EXPO_TOKEN }}
-              eas-cache: true
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
-          key: ${{ runner.os }}-${{ runner.arch }}-bun-${{ hashFiles('bun.lock') }}
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
           restore-keys: |
-            ${{ runner.os }}-${{ runner.arch }}-bun-
+            ${{ runner.os }}-bun-cache
 
       - name: 📦 Install dependencies and reload submodules
         run: |
           bun install --frozen-lockfile
           bun run submodule-reload
 
+      - name: 🏗️ Setup EAS
+        uses: expo/expo-github-action@eab7a230208c952974db8c3245cfd78402c7b385 # main
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+          eas-cache: true
+
       # tvOS uses credentialsSource: local — restore the gitignored
       # credentials.json + cert + provisioning profiles from secrets.
       - name: 🔐 Restore tvOS signing credentials
@@ -181,13 +176,13 @@ jobs:
     name: 📦 Draft GitHub Release
     needs: build
     if: ${{ !cancelled() }}
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     permissions:
       contents: write
       actions: read # required for `gh run download` to list/fetch this run's artifacts
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
         with:
           fetch-depth: 0
           show-progress: false

.github/workflows/trivy-scan.yml

@@ -21,17 +21,27 @@ concurrency:
 jobs:
   trivy:
     name: 🔎 Filesystem scan
-    runs-on: ubuntu-26.04
+    runs-on: ubuntu-24.04
     permissions:
       contents: read
       security-events: write # upload SARIF to code scanning
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+
+      # Rotate the DB cache weekly (matches the scheduled scan): cache hits within the week
+      # instead of a fresh immutable entry per run, still refreshing the DB every week.
+      - name: 🗓️ Compute weekly Trivy cache key
+        id: trivy-cache-key
+        run: echo "value=trivy-db-${{ runner.os }}-$(date -u +%G-%V)" >> "$GITHUB_OUTPUT"
+
+      - name: 💾 Cache Trivy vulnerability DB
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ~/.cache/trivy
+          key: ${{ steps.trivy-cache-key.outputs.value }}
+          restore-keys: trivy-db-${{ runner.os }}-
 
-      # Trivy's own action caches the vulnerability DB + binary internally
-      # (cache-trivy-* / trivy-binary-* entries), so no manual ~/.cache/trivy
-      # step is needed — it only duplicated the cache.
       - name: 🔎 Run Trivy filesystem scan
         uses: aquasecurity/trivy-action@ed142fd0673e97e23eac54620cfb913e5ce36c25 # v0.36.0
         with:

.github/workflows/update-issue-form.yml

@@ -1,104 +1,67 @@
-name: 🐛 Update Issue Form Versions
+name: 🐛 Update Bug Report Template
 
 on:
   release:
-    # Only full releases populate the dropdown (no drafts/prereleases).
+    types: [published]  # Run on every published release on any branch
-    types: [released]
-  schedule:
-    - cron: "0 3 * * 1" # Weekly safety net (Mondays 03:00 UTC) in case a release event was missed
-  workflow_dispatch:
 
-# Fixed group so a release event and the weekly cron can't race on the same
-# ci/update-issue-form branch — runs queue instead of force-pushing over each other.
 concurrency:
-  group: update-issue-form
+   group: update-issue-form-${{ github.event.release.tag_name || github.run_id }}
-  cancel-in-progress: false
+   cancel-in-progress: true
-
-permissions:
-  contents: read
 
 jobs:
-  update-issue-form:
+  update-bug-report:
-    name: 🔢 Populate version dropdown
-    runs-on: ubuntu-26.04
     permissions:
       contents: write
       pull-requests: write
+      issues: write
+    runs-on: ubuntu-24.04
+
     steps:
-      - parallel:
+      - name: 📥 Checkout repository
-          - name: 📥 Checkout repository
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-            uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-            with:
-              # On `release` events GITHUB_SHA is the tagged commit — without this the
-              # script would regenerate the form from the tag's (stale) copy and the bot
-              # PR would revert any form edits made on develop since that release.
-              ref: develop
 
-          - name: 🍞 Setup Bun
+      - name: "🟢 Setup Node.js"
-            uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-            with:
+        with:
-              # renovate: datasource=npm depName=bun
+          node-version: '24.x'
-              bun-version: "1.3.14"
+          cache: 'npm'
 
-      - name: 🔢 Populate version dropdown from GitHub releases
+      - name: 🔍 Extract minor version from app.json
-        id: populate
+        id: minor
-        run: bun scripts/update-issue-form.mjs
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # main
-        env:
+        with:
-          GH_TOKEN: ${{ github.token }}
+          result-encoding: string
-          GITHUB_REPOSITORY: ${{ github.repository }}
+          script: |
+            const fs = require('fs-extra');
+            const semver = require('semver');
+            const content = fs.readJsonSync('./app.json');
+            const version = content.expo.version;
+            const minorVersion = semver.minor(version);
+            return minorVersion.toString();
 
-      - name: 📬 Create pull request
+      - name: 📝 Update bug report version
-        id: cpr
+        uses: ShaMan123/gha-populate-form-version@be012141ca560dbb92156e3fe098c46035f6260d #v2.0.5
+        with:
+          semver: '^0.${{ steps.minor.outputs.result }}.0'
+          dry_run: no-push
+
+      - name: ⚙️ Update bug report node version dropdown
+        uses: ShaMan123/gha-populate-form-version@be012141ca560dbb92156e3fe098c46035f6260d #v2.0.5
+        with:
+          dropdown: _node_version
+          package: node
+          semver: '>=24.0.0'
+          dry_run: no-push
+
+      - name: 📬 Commit and create pull request
         uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
         with:
-          add-paths: .github/ISSUE_TEMPLATE/issue_report.yml
+          add-paths: .github/ISSUE_TEMPLATE/bug_report.yml
-          branch: ci/update-issue-form
+          branch: ci-update-bug-report
           base: develop
           delete-branch: true
           labels: ⚙️ ci, 🤖 github-actions
-          commit-message: "chore: update issue form version dropdown"
+          title: 'chore(): Update bug report template to match release version'
-          title: "chore: update issue form version dropdown"
-          # Follows .github/pull_request_template.md so the bot PR isn't flagged by PR validation.
           body: |
-            # 📦 Pull Request
+            Automated update to `.github/ISSUE_TEMPLATE/bug_report.yml`
-
+            Triggered by workflow run [${{ github.run_id }}](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})
-            ## 📝 Description
-
-            Automated update of the **Streamyfin Version** dropdown in `.github/ISSUE_TEMPLATE/issue_report.yml`, populated from the latest published GitHub releases by `scripts/update-issue-form.mjs`.
-
-            **Version dropdown now lists:** ${{ steps.populate.outputs.versions }}
-
-            Triggered by `${{ github.event_name }}`${{ github.event.release.tag_name && format(' — release {0}', github.event.release.tag_name) || '' }} · [run ${{ github.run_id }}](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}).
-
-            ## 🏷️ Ticket / Issue
-
-            N/A — automated maintenance.
-
-            ### 🖼️ Screenshots / GIFs (if UI)
-
-            N/A — issue-template metadata only, no app UI.
-
-            ## ✅ Checklist
-
-            - [x] I’ve read the [contribution guidelines](CONTRIBUTING.md)
-            - [x] Verified that changes behave as expected for all platforms
-            - [x] Code passes lint/formatting and type checks (`tsc`/`biome`)
-            - [x] No secrets, hardcoded credentials, or private config files are included
-            - [x] I've declared if AI was used to assist with this PR (by uncommenting the line at the bottom, or not)
-
-            ## 🔍 Testing Instructions
-
-            N/A — generated by CI from published releases; review the dropdown diff in `issue_report.yml`.
-
-      - name: 🔀 Enable auto-merge
-        if: steps.cpr.outputs.pull-request-operation == 'created'
-        env:
-          GH_TOKEN: ${{ github.token }}
-        # Known limitation: PRs created with GITHUB_TOKEN don't trigger CI workflows
-        # (GitHub anti-recursion), so the required checks stay "Expected" until a
-        # maintainer kicks them (close/reopen the PR, or push an empty commit).
-        # Auto-merge is still worth enabling: once checks run and reviews land,
-        # the PR merges itself.
-        run: |
-          gh pr merge --squash --auto "${{ steps.cpr.outputs.pull-request-number }}" \
-            || echo "::warning::Could not enable auto-merge — enable 'Allow auto-merge' in repo settings (and branch protection); merge the PR manually for now."

.gitignore

@@ -12,6 +12,10 @@ web-build/
 # Platform-specific Build Directories
 /ios
 /android
+/iostv
+/iosmobile
+/androidmobile
+/androidtv
 
 # Gradle caches (top-level + per-module native projects)
 **/.gradle/

CLAUDE.md

@@ -152,7 +152,7 @@ import { apiAtom } from "@/providers/JellyfinProvider";
 
 ## Coding Standards
 
-- Use TypeScript for all files (no .js). Tooling-required exceptions: `babel.config.js`, `metro.config.js`, `react-native.config.js`, `tailwind.config.js` (their loaders cannot parse TypeScript)
+- Use TypeScript for all files (no .js)
 - Use functional React components with hooks
 - Use Jotai atoms for global state, React Query for server state
 - Follow BiomeJS formatting rules (2-space indent, semicolons, LF line endings)

GLOBAL_MODAL_GUIDE.md

@@ -143,6 +143,14 @@ interface ModalOptions {
 }
 ```
 
+## Examples
+
+See `components/ExampleGlobalModalUsage.tsx` for comprehensive examples including:
+- Simple content modal
+- Modal with custom snap points
+- Complex component in modal
+- Success/error modals triggered from functions
+
 ## Default Styling
 
 The modal uses these default styles (can be overridden via options):

README.md

@@ -73,7 +73,7 @@ Thanks to [@Alexk2309](https://github.com/Alexk2309) for the hard work building
 
 ## 🛣️ Roadmap
 
-Check out our [Roadmap](https://github.com/orgs/streamyfin/projects/3/views/1) to see what we're working on next, we are always open to feedback and suggestions. Please let us know if you have any ideas or feature requests.
+Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) To see what we're working on next, we are always open to feedback and suggestions. Please let us know if you have any ideas or feature requests.
 
 ## 📥 Download Streamyfin
 

app.config.js

@@ -1,13 +1,9 @@
-// Registers the tsx require hook so the TypeScript config plugins referenced
+const { execFileSync } = require("node:child_process");
-// from app.json ("./plugins/*.ts") can be loaded by Node during config evaluation.
-import "tsx/cjs";
-import { execFileSync } from "node:child_process";
-import type { ConfigContext, ExpoConfig } from "expo/config";
 
 // Build metadata, injected into `extra.build` and read at runtime via
 // expo-constants (see utils/version.ts). Sources in priority order:
 // EAS cloud build → GitHub Actions → explicit EXPO_PUBLIC_* → local git → null.
-const git = (args: string[]): string | null => {
+const git = (args) => {
   try {
     return execFileSync("git", args, { stdio: ["ignore", "pipe", "ignore"] })
       .toString()
@@ -46,16 +42,16 @@ const buildMeta = {
   builtAt: new Date().toISOString(),
 };
 
-export default ({ config }: ConfigContext): ExpoConfig => {
+module.exports = ({ config }) => {
   if (process.env.EXPO_TV !== "1") {
-    config.plugins?.push("expo-background-task");
+    config.plugins.push("expo-background-task");
 
-    config.plugins?.push([
+    config.plugins.push([
       "react-native-google-cast",
       { useDefaultExpandedMediaControls: true },
     ]);
 
-    config.plugins?.push([
+    config.plugins.push([
       "expo-camera",
       {
         cameraPermission:
@@ -65,7 +61,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
   }
 
   // Only override googleServicesFile if env var is set
-  const androidConfig: { googleServicesFile?: string } = {};
+  const androidConfig = {};
   if (process.env.GOOGLE_SERVICES_JSON) {
     androidConfig.googleServicesFile = process.env.GOOGLE_SERVICES_JSON;
   }
@@ -75,5 +71,5 @@ export default ({ config }: ConfigContext): ExpoConfig => {
   return {
     ...(Object.keys(androidConfig).length > 0 && { android: androidConfig }),
     ...config,
-  } as ExpoConfig;
+  };
 };

app.json

@@ -71,8 +71,8 @@
       ],
       "expo-router",
       "expo-font",
-      "./plugins/withExcludeMedia3Dash.ts",
+      "./plugins/withExcludeMedia3Dash.js",
-      "./plugins/withTVUserManagement.ts",
+      "./plugins/withTVUserManagement.js",
       [
         "expo-build-properties",
         {
@@ -107,9 +107,6 @@
       ],
       "expo-localization",
       "expo-asset",
-      "expo-audio",
-      "expo-image",
-      "expo-sharing",
       [
         "react-native-edge-to-edge",
         {
@@ -134,17 +131,17 @@
         }
       ],
       "expo-web-browser",
-      ["./plugins/with-runtime-framework-headers.ts"],
+      ["./plugins/with-runtime-framework-headers.js"],
-      ["./plugins/withChangeNativeAndroidTextToWhite.ts"],
+      ["./plugins/withChangeNativeAndroidTextToWhite.js"],
-      ["./plugins/withAndroidAlertColors.ts"],
+      ["./plugins/withAndroidAlertColors.js"],
-      ["./plugins/withAndroidManifest.ts"],
+      ["./plugins/withAndroidManifest.js"],
-      ["./plugins/withTrustLocalCerts.ts"],
+      ["./plugins/withTrustLocalCerts.js"],
-      ["./plugins/withGradleProperties.ts"],
+      ["./plugins/withGradleProperties.js"],
-      ["./plugins/withTVOSAppIcon.ts"],
+      ["./plugins/withTVOSAppIcon.js"],
-      ["./plugins/withTVOSTopShelf.ts"],
+      ["./plugins/withTVOSTopShelf.js"],
-      ["./plugins/withTVXcodeEnv.ts"],
+      ["./plugins/withTVXcodeEnv.js"],
       [
-        "./plugins/withGitPod.ts",
+        "./plugins/withGitPod.js",
         {
           "podName": "MPVKit",
           "podspecUrl": "https://raw.githubusercontent.com/mpv-ios/MPVKit/0.41.0-av/MPVKit.podspec"

app/(auth)/(tabs)/(home)/settings.tv.tsx

@@ -324,44 +324,32 @@ export default function SettingsTV() {
   // MPV alignment options
   const alignXOptions: TVOptionItem<string>[] = useMemo(
     () => [
+      { label: "Left", value: "left", selected: currentAlignX === "left" },
       {
-        label: t("home.settings.subtitles.align.left"),
+        label: "Center",
-        value: "left",
-        selected: currentAlignX === "left",
-      },
-      {
-        label: t("home.settings.subtitles.align.center"),
         value: "center",
         selected: currentAlignX === "center",
       },
-      {
+      { label: "Right", value: "right", selected: currentAlignX === "right" },
-        label: t("home.settings.subtitles.align.right"),
-        value: "right",
-        selected: currentAlignX === "right",
-      },
     ],
-    [currentAlignX, t],
+    [currentAlignX],
   );
 
   const alignYOptions: TVOptionItem<string>[] = useMemo(
     () => [
+      { label: "Top", value: "top", selected: currentAlignY === "top" },
       {
-        label: t("home.settings.subtitles.align.top"),
+        label: "Center",
-        value: "top",
-        selected: currentAlignY === "top",
-      },
-      {
-        label: t("home.settings.subtitles.align.center"),
         value: "center",
         selected: currentAlignY === "center",
       },
       {
-        label: t("home.settings.subtitles.align.bottom"),
+        label: "Bottom",
         value: "bottom",
         selected: currentAlignY === "bottom",
       },
     ],
-    [currentAlignY, t],
+    [currentAlignY],
   );
 
   // Cache mode options
@@ -511,13 +499,13 @@ export default function SettingsTV() {
 
   const alignXLabel = useMemo(() => {
     const option = alignXOptions.find((o) => o.selected);
-    return option?.label || t("home.settings.subtitles.align.center");
+    return option?.label || "Center";
-  }, [alignXOptions, t]);
+  }, [alignXOptions]);
 
   const alignYLabel = useMemo(() => {
     const option = alignYOptions.find((o) => o.selected);
-    return option?.label || t("home.settings.subtitles.align.bottom");
+    return option?.label || "Bottom";
-  }, [alignYOptions, t]);
+  }, [alignYOptions]);
 
   const typographyScaleLabel = useMemo(() => {
     const option = typographyScaleOptions.find((o) => o.selected);
@@ -657,7 +645,7 @@ export default function SettingsTV() {
             formatValue={(v) => `${v.toFixed(1)}x`}
           />
           <TVSettingsStepper
-            label={t("home.settings.subtitles.mpv_subtitle_margin_y")}
+            label='Vertical Margin'
             value={settings.mpvSubtitleMarginY ?? 0}
             onDecrease={() => {
               const newValue = Math.max(
@@ -675,11 +663,11 @@ export default function SettingsTV() {
             }}
           />
           <TVSettingsOptionButton
-            label={t("home.settings.subtitles.mpv_subtitle_align_x")}
+            label='Horizontal Alignment'
             value={alignXLabel}
             onPress={() =>
               showOptions({
-                title: t("home.settings.subtitles.mpv_subtitle_align_x"),
+                title: "Horizontal Alignment",
                 options: alignXOptions,
                 onSelect: (value) =>
                   updateSettings({
@@ -689,11 +677,11 @@ export default function SettingsTV() {
             }
           />
           <TVSettingsOptionButton
-            label={t("home.settings.subtitles.mpv_subtitle_align_y")}
+            label='Vertical Alignment'
             value={alignYLabel}
             onPress={() =>
               showOptions({
-                title: t("home.settings.subtitles.mpv_subtitle_align_y"),
+                title: "Vertical Alignment",
                 options: alignYOptions,
                 onSelect: (value) =>
                   updateSettings({

app/(auth)/(tabs)/(home)/settings/appearance/hide-libraries/page.tsx

@@ -71,7 +71,7 @@ export default function AppearanceHideLibrariesPage() {
           ))}
         </ListGroup>
         <Text className='px-4 text-xs text-neutral-500 mt-1'>
-          {t("home.settings.other.select_libraries_you_want_to_hide")}
+          {t("home.settings.other.select_liraries_you_want_to_hide")}
         </Text>
       </DisabledSetting>
     </ScrollView>

app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx

@@ -60,7 +60,7 @@ export default function HideLibrariesPage() {
         ))}
       </ListGroup>
       <Text className='px-4 text-xs text-neutral-500 mt-1'>
-        {t("home.settings.other.select_libraries_you_want_to_hide")}
+        {t("home.settings.other.select_liraries_you_want_to_hide")}
       </Text>
     </DisabledSetting>
   );

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -12,16 +12,11 @@ import {
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import {
+import { useLocalSearchParams, useNavigation } from "expo-router";
-  useFocusEffect,
-  useLocalSearchParams,
-  useNavigation,
-} from "expo-router";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
-  BackHandler,
   FlatList,
   Platform,
   ScrollView,
@@ -85,9 +80,8 @@ const Page = () => {
     sortBy?: string;
     sortOrder?: string;
     filterBy?: string;
-    fromSeeAll?: string;
   };
-  const { libraryId, fromSeeAll } = searchParams;
+  const { libraryId } = searchParams;
 
   const typography = useScaledTVTypography();
   const posterSizes = useScaledTVPosterSizes();
@@ -118,22 +112,6 @@ const Page = () => {
   const { t } = useTranslation();
   const router = useRouter();
   const { showOptions } = useTVOptionModal();
-
-  // When this library detail was opened from the home "See All" button, its
-  // libraries stack is just [detail], so the default TV Back would exit to home.
-  // Intercept Back (scoped to while this screen is focused via useFocusEffect) and
-  // route to the library list instead, so the user can switch libraries. Normal
-  // entries from the list keep their native pop-to-list behavior.
-  useFocusEffect(
-    useCallback(() => {
-      if (!Platform.isTV || fromSeeAll !== "true") return;
-      const sub = BackHandler.addEventListener("hardwareBackPress", () => {
-        router.replace("/(auth)/(tabs)/(libraries)");
-        return true;
-      });
-      return () => sub.remove();
-    }, [fromSeeAll, router]),
-  );
   const { showItemActions } = useTVItemActionModal();
 
   // TV Filter queries
@@ -291,23 +269,6 @@ const Page = () => {
     });
   }, [library]);
 
-  // If this See-All detail was deep-linked on top of the libraries index, collapse
-  // the libraries stack to just this screen. Otherwise the stack is [index, detail],
-  // which the native bottom tab reliably auto-pops back to the index (the detail
-  // "bounces" to the library list ~0.5s after opening). With [detail] alone it stays
-  // put, and Back is handled explicitly by the fromSeeAll interceptor above.
-  const didCollapseRef = useRef(false);
-  useEffect(() => {
-    if (!Platform.isTV || fromSeeAll !== "true" || didCollapseRef.current)
-      return;
-    const state = navigation.getState();
-    if (state?.routes && state.routes.length > 1) {
-      didCollapseRef.current = true;
-      const top = state.routes[state.routes.length - 1];
-      navigation.reset({ index: 0, routes: [top] } as any);
-    }
-  }, [navigation, fromSeeAll]);
-
   const fetchItems = useCallback(
     async ({
       pageParam,

app/(auth)/(tabs)/(libraries)/music/[libraryId]/artists.tsx

@@ -89,7 +89,7 @@ export default function ArtistsScreen() {
     return (
       <View className='flex-1 justify-center items-center bg-black px-6'>
         <Text className='text-neutral-500 text-center'>
-          {t("music.missing_library_id")}
+          Missing music library id.
         </Text>
       </View>
     );

app/(auth)/(tabs)/(libraries)/music/[libraryId]/playlists.tsx

@@ -122,7 +122,7 @@ export default function PlaylistsScreen() {
     return (
       <View className='flex-1 justify-center items-center bg-black px-6'>
         <Text className='text-neutral-500 text-center'>
-          {t("music.missing_library_id")}
+          Missing music library id.
         </Text>
       </View>
     );

app/(auth)/(tabs)/(libraries)/music/[libraryId]/suggestions.tsx

@@ -226,7 +226,7 @@ export default function SuggestionsScreen() {
     return (
       <View className='flex-1 justify-center items-center bg-black px-6'>
         <Text className='text-neutral-500 text-center'>
-          {t("music.missing_library_id")}
+          Missing music library id.
         </Text>
       </View>
     );

app/(auth)/(tabs)/(search)/index.tsx

@@ -305,8 +305,6 @@ export default function SearchPage() {
         },
         hideWhenScrolling: false,
         autoFocus: false,
-        // Android: color of the user-typed text (was dark and unreadable on the dark header)
-        textColor: "#fff",
         // Android: placeholder and icon color
         hintTextColor: "#fff",
         headerIconColor: "#fff",

app/(auth)/(tabs)/_layout.tsx

@@ -3,24 +3,16 @@ import {
   type NativeBottomTabNavigationEventMap,
   type NativeBottomTabNavigationOptions,
 } from "@bottom-tabs/react-navigation";
-import { Stack, useSegments, withLayoutContext } from "expo-router";
+import { withLayoutContext } from "expo-router";
 import type {
   ParamListBase,
   TabNavigationState,
 } from "expo-router/react-navigation";
-import { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
-import type { TVNavBarTab } from "@/components/tv/TVNavBar";
-import { TVNavBar } from "@/components/tv/TVNavBar";
 import { Colors } from "@/constants/Colors";
-import useRouter from "@/hooks/useAppRouter";
+import { useTVHomeBackHandler } from "@/hooks/useTVBackHandler";
-import {
-  isTabRoute,
-  useTVHomeBackHandler,
-  useTVTabRootBackHandler,
-} from "@/hooks/useTVBackHandler";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
 
@@ -41,108 +33,13 @@ export const NativeTabs = withLayoutContext<
   NativeBottomTabNavigationEventMap
 >(Navigator);
 
-const IS_ANDROID_TV = Platform.isTV && Platform.OS === "android";
-
-function TVTabLayout() {
-  const { settings } = useSettings();
-  const { t } = useTranslation();
-  const segments = useSegments();
-  const router = useRouter();
-
-  const currentTab = segments.find(isTabRoute);
-  const lastSegment = segments[segments.length - 1] ?? "";
-  const atTabRoot = isTabRoute(lastSegment) || lastSegment === "index";
-
-  const tabs: TVNavBarTab[] = useMemo(
-    () =>
-      [
-        { key: "(home)", label: t("tabs.home") },
-        { key: "(search)", label: t("tabs.search") },
-        { key: "(favorites)", label: t("tabs.favorites") },
-        !settings?.streamyStatsServerUrl || settings?.hideWatchlistsTab
-          ? null
-          : { key: "(watchlists)", label: t("watchlists.title") },
-        { key: "(libraries)", label: t("tabs.library") },
-        !settings?.showCustomMenuLinks
-          ? null
-          : { key: "(custom-links)", label: t("tabs.custom_links") },
-        { key: "(settings)", label: t("tabs.settings") },
-      ].filter((tab): tab is TVNavBarTab => tab !== null),
-    [
-      settings?.streamyStatsServerUrl,
-      settings?.hideWatchlistsTab,
-      settings?.showCustomMenuLinks,
-      t,
-    ],
-  );
-
-  const activeTabKey = currentTab ?? "(home)";
-
-  const visibleKeys = useMemo(
-    () => new Set(tabs.map((tab) => tab.key)),
-    [tabs],
-  );
-
-  const handleTabChange = useCallback(
-    (key: string) => {
-      if (key === currentTab) return;
-
-      if (key === "(home)") eventBus.emit("scrollToTop");
-      if (key === "(search)") eventBus.emit("searchTabPressed");
-
-      router.replace(`/(auth)/(tabs)/${key}`);
-    },
-    [currentTab, router],
-  );
-
-  const navigateHome = useCallback(() => {
-    router.replace("/(auth)/(tabs)/(home)");
-  }, [router]);
-  useTVTabRootBackHandler(navigateHome, atTabRoot, currentTab);
-
-  // If current tab is no longer visible (setting changed), navigate to home
-  useEffect(() => {
-    if (!visibleKeys.has(activeTabKey) && activeTabKey !== "(home)") {
-      router.replace("/(auth)/(tabs)/(home)");
-    }
-  }, [visibleKeys, activeTabKey, router]);
-
-  return (
-    <View style={{ flex: 1 }}>
-      <SystemBars hidden={false} style='light' />
-      <Stack
-        screenOptions={{ headerShown: false, animation: "none" }}
-        initialRouteName='(home)'
-      >
-        <Stack.Screen name='index' redirect />
-      </Stack>
-      <TVNavBar
-        tabs={tabs}
-        activeTabKey={activeTabKey}
-        onTabChange={handleTabChange}
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          zIndex: 1000,
-        }}
-      />
-    </View>
-  );
-}
-
 export default function TabLayout() {
   const { settings } = useSettings();
   const { t } = useTranslation();
 
-  // Must be called before any conditional return (rules of hooks)
+  // Handle TV back button - prevent app exit when at root
   useTVHomeBackHandler();
 
-  if (IS_ANDROID_TV) {
-    return <TVTabLayout />;
-  }
-
   return (
     <View style={{ flex: 1 }}>
       <SystemBars hidden={false} style='light' />

app/(auth)/now-playing.tsx

@@ -14,7 +14,6 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   Dimensions,
@@ -73,7 +72,6 @@ const ARTWORK_SIZE = SCREEN_WIDTH - 80;
 type ViewMode = "player" | "queue";
 
 export default function NowPlayingScreen() {
-  const { t } = useTranslation();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const router = useRouter();
@@ -232,9 +230,7 @@ export default function NowPlayingScreen() {
             paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
           }}
         >
-          <Text className='text-neutral-500'>
+          <Text className='text-neutral-500'>No track playing</Text>
-            {t("music.no_track_playing")}
-          </Text>
         </View>
       </BottomSheetModalProvider>
     );
@@ -271,7 +267,7 @@ export default function NowPlayingScreen() {
                     : "text-neutral-500"
                 }
               >
-                {t("music.now_playing")}
+                Now Playing
               </Text>
             </TouchableOpacity>
             <TouchableOpacity
@@ -722,7 +718,6 @@ const QueueView: React.FC<QueueViewProps> = ({
   onRemoveFromQueue,
   onReorderQueue,
 }) => {
-  const { t } = useTranslation();
   const renderQueueItem = useCallback(
     ({ item, drag, isActive, getIndex }: RenderItemParams<BaseItemDto>) => {
       const index = getIndex() ?? 0;
@@ -836,15 +831,13 @@ const QueueView: React.FC<QueueViewProps> = ({
       ListHeaderComponent={
         <View className='px-4 py-2'>
           <Text className='text-neutral-400 text-xs uppercase tracking-wider'>
-            {history.length > 0
+            {history.length > 0 ? "Playing from queue" : "Up next"}
-              ? t("music.playing_from_queue")
-              : t("music.up_next")}
           </Text>
         </View>
       }
       ListEmptyComponent={
         <View className='flex-1 items-center justify-center py-20'>
-          <Text className='text-neutral-500'>{t("music.queue_empty")}</Text>
+          <Text className='text-neutral-500'>Queue is empty</Text>
         </View>
       }
     />

app/(auth)/player/direct-player.tsx

@@ -147,9 +147,9 @@ export default function DirectPlayerPage() {
   const audioIndexFromUrl = audioIndexStr
     ? Number.parseInt(audioIndexStr, 10)
     : undefined;
-  const subtitleIndex = subtitleIndexStr
+  const subtitleIndexFromUrl = subtitleIndexStr
     ? Number.parseInt(subtitleIndexStr, 10)
-    : -1;
+    : undefined;
   const bitrateValue = bitrateValueStr
     ? Number.parseInt(bitrateValueStr, 10)
     : BITRATES[0].value;
@@ -185,6 +185,23 @@ export default function DirectPlayerPage() {
     return undefined;
   }, [audioIndexFromUrl, offline, downloadedItem?.userData?.audioStreamIndex]);
 
+  // Resolve subtitle index: use URL param if provided, otherwise use stored index for offline playback
+  const subtitleIndex = useMemo(() => {
+    if (subtitleIndexFromUrl !== undefined) {
+      return subtitleIndexFromUrl;
+    }
+    if (
+      offline &&
+      downloadedItem?.userData?.subtitleStreamIndex !== undefined
+    ) {
+      return downloadedItem.userData.subtitleStreamIndex;
+    }
+    return -1;
+  }, [
+    subtitleIndexFromUrl,
+    offline,
+    downloadedItem?.userData?.subtitleStreamIndex,
+  ]);
   // Initialize TV audio/subtitle indices from URL params.
   // No undefined guard: when a new episode's URL omits audioIndex, reset to
   // undefined (media default) rather than leaking the previous episode's track.
@@ -456,23 +473,10 @@ export default function DirectPlayerPage() {
     });
     reportPlaybackStopped();
     setIsPlaybackStopped(true);
-    // Synchronously destroy the mpv instance + decoder + surface buffers
+    videoRef.current?.pause();
-    // BEFORE the screen unmounts. Otherwise the next screen (or the next
-    // episode's player) mounts while the old 4K decoder is still alive,
-    // causing OOM on low-RAM devices. Native stop() is idempotent so the
-    // later React unmount cleanup is still safe.
-    videoRef.current?.destroy().catch(() => {});
-    // Pre-libmpv-1.0 used `stop()`:
-    // videoRef.current?.stop();
     revalidateProgressCache();
     // Resume inactivity timer when leaving player (TV only)
     resumeInactivityTimer();
-    // Release the keep-awake wakelock acquired during playback so it
-    // doesn't follow us back to the home screen and block the TV
-    // screensaver. activateKeepAwakeAsync() is tag-scoped to this module
-    // and only released on the "paused" event; without this, navigating
-    // away mid-play leaves FLAG_KEEP_SCREEN_ON set on the window.
-    deactivateKeepAwake();
   }, [videoRef, reportPlaybackStopped, progress, resumeInactivityTimer]);
 
   useEffect(() => {
@@ -893,27 +897,6 @@ export default function DirectPlayerPage() {
       // Check if we're transcoding
       const isTranscoding = Boolean(stream?.mediaSource?.TranscodingUrl);
 
-      // A transcoded stream only carries the audio track the server encoded
-      // into it — switching requires re-negotiating the stream with the new
-      // index (like the mobile menu's replacePlayer), not an mpv aid change.
-      if (isTranscoding) {
-        const queryParams = new URLSearchParams({
-          itemId: item?.Id ?? "",
-          audioIndex: String(index),
-          subtitleIndex: String(currentSubtitleIndex),
-          mediaSourceId: stream?.mediaSource?.Id ?? "",
-          bitrateValue: bitrateValue?.toString() ?? "",
-          playbackPosition: msToTicks(progress.get()).toString(),
-        }).toString();
-        // Destroy the current mpv instance BEFORE navigating, same rationale as
-        // goToNextItem/goToPreviousItem: Expo Router briefly holds two players
-        // during the transition, and two simultaneous decoders OOM-kill low-RAM
-        // devices. Resume is preserved via the playbackPosition param.
-        videoRef.current?.destroy().catch(() => {});
-        router.replace(`player/direct-player?${queryParams}` as any);
-        return;
-      }
-
       // Convert Jellyfin index to MPV track ID
       const mpvTrackId = getMpvAudioId(
         stream?.mediaSource,
@@ -925,14 +908,7 @@ export default function DirectPlayerPage() {
         await videoRef.current?.setAudioTrack?.(mpvTrackId);
       }
     },
-    [
+    [stream?.mediaSource],
-      stream?.mediaSource,
-      item?.Id,
-      currentSubtitleIndex,
-      bitrateValue,
-      router,
-      progress,
-    ],
   );
 
   // TV subtitle track change handler
@@ -1146,15 +1122,6 @@ export default function DirectPlayerPage() {
         nextItem.UserData?.PlaybackPositionTicks?.toString() ?? "",
     }).toString();
 
-    // Destroy the current mpv instance BEFORE navigating so the old 4K
-    // decoder + surface buffers are freed before the new player screen
-    // mounts. Without this, Expo Router briefly holds two simultaneous
-    // mpv instances during the transition (~768 MB of surface buffers
-    // for two 4K HDR10+ decoders) and OOM-kills the app on low-RAM
-    // devices. Native stop() is idempotent so the subsequent React
-    // unmount cleanup is still safe.
-    videoRef.current?.destroy().catch(() => {});
-
     router.replace(`player/direct-player?${queryParams}` as any);
   }, [
     nextItem,
@@ -1165,7 +1132,6 @@ export default function DirectPlayerPage() {
     bitrateValue,
     router,
     isPlaybackStopped,
-    videoRef,
   ]);
 
   // Apply subtitle settings when video loads
@@ -1318,7 +1284,7 @@ export default function DirectPlayerPage() {
                   console.error("Video Error:", e.nativeEvent);
                   Alert.alert(
                     t("player.error"),
-                    t("player.an_error_occurred_while_playing_the_video"),
+                    t("player.an_error_occured_while_playing_the_video"),
                   );
                   writeToLog("ERROR", "Video Error", e.nativeEvent);
                 }}

app/(auth)/tv-option-modal.tsx

@@ -4,7 +4,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   Animated,
   Easing,
-  InteractionManager,
   ScrollView,
   StyleSheet,
   TVFocusGuideView,
@@ -76,20 +75,6 @@ export default function TVOptionModal() {
   }, [isReady]);
 
   const handleSelect = (value: any) => {
-    if (modalState?.deferApplyUntilDismissed) {
-      // onSelect navigates (the transcode audio switch replacing the player);
-      // a router.replace fired while this modal is the active route would be
-      // swallowed. Close FIRST, apply after dismissal.
-      const onSelect = modalState.onSelect;
-      store.set(tvOptionModalAtom, null);
-      router.back();
-      InteractionManager.runAfterInteractions(() => onSelect?.(value));
-      return;
-    }
-    // State-only callers (detail page, library filters, settings): run before
-    // closing so the re-render happens while the modal is up. Deferring it until
-    // after dismissal re-renders the page after focus returns and yanks TV
-    // focus, leaving navigation stuck.
     modalState?.onSelect(value);
     store.set(tvOptionModalAtom, null);
     router.back();

app/(auth)/tv-subtitle-modal.tsx

@@ -192,7 +192,6 @@ const SubtitleResultCard = React.forwardRef<
 >(({ result, hasTVPreferredFocus, isDownloading, onPress }, ref) => {
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({ scaleAmount: 1.03 });
-  const { t } = useTranslation();
 
   return (
     <Pressable
@@ -329,7 +328,7 @@ const SubtitleResultCard = React.forwardRef<
               ]}
             >
               <Text style={[styles.flagText, { fontSize: scaleSize(10) }]}>
-                {t("player.hash_match")}
+                Hash Match
               </Text>
             </View>
           )}

app/+not-found.tsx

@@ -1,20 +1,17 @@
 import { Link, Stack } from "expo-router";
-import { useTranslation } from "react-i18next";
 import { StyleSheet } from "react-native";
 
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
 
 export default function NotFoundScreen() {
-  const { t } = useTranslation();
-
   return (
     <>
-      <Stack.Screen options={{ title: t("home.oops") }} />
+      <Stack.Screen options={{ title: "Oops!" }} />
       <ThemedView style={styles.container}>
-        <ThemedText type='title'>{t("not_found.title")}</ThemedText>
+        <ThemedText type='title'>This screen doesn't exist.</ThemedText>
         <Link href={"/home"} style={styles.link}>
-          <ThemedText type='link'>{t("not_found.go_home")}</ThemedText>
+          <ThemedText type='link'>Go to home screen!</ThemedText>
         </Link>
       </ThemedView>
     </>

app/_layout.tsx

@@ -7,7 +7,6 @@ import { onlineManager, QueryClient } from "@tanstack/react-query";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import * as BackgroundTask from "expo-background-task";
 import * as Device from "expo-device";
-import { Image } from "expo-image";
 import { DarkTheme, ThemeProvider } from "expo-router/react-navigation";
 import { Platform } from "react-native";
 import { GlobalModal } from "@/components/GlobalModal";
@@ -85,8 +84,7 @@ configureReanimatedLogger({
 if (!Platform.isTV) {
   Notifications.setNotificationHandler({
     handleNotification: async () => ({
-      shouldShowBanner: true,
+      shouldShowAlert: true,
-      shouldShowList: true,
       shouldPlaySound: true,
       shouldSetBadge: false,
     }),
@@ -102,22 +100,6 @@ SplashScreen.setOptions({
   fade: true,
 });
 
-// Cap expo-image's in-memory cache. Default is unbounded (maxMemoryCost=0),
-// which on a 2GB Android TV box leads to ~200MB of decoded backdrops/posters
-// pinned in RAM after browsing. Caps are intentionally tighter on TV (which
-// has less RAM and runs alongside libmpv/MediaCodec) than on mobile.
-// Cost is measured in bytes of decoded bitmap (ARGB8888 = 4 bytes/pixel).
-try {
-  Image.configureCache({
-    maxMemoryCost: Platform.isTV
-      ? 8 * 1024 * 1024 // ~8 MB on TV
-      : 128 * 1024 * 1024, // ~128 MB on mobile
-    maxDiskSize: 200 * 1024 * 1024, // 200 MB disk cache on all platforms
-  });
-} catch {
-  // configureCache is a no-op on some platforms/versions; safe to ignore.
-}
-
 function useNotificationObserver() {
   const router = useRouter();
 
@@ -351,12 +333,9 @@ function Layout() {
       notificationListener.current =
         Notifications?.addNotificationReceivedListener(
           (notification: Notification) => {
-            // Log only the title — serializing the whole notification touches
-            // the deprecated dataString getter (deprecation warning) and dumps
-            // noisy payloads into the console.
             console.log(
-              "Notification received while app running:",
+              "Notification received while app running",
-              notification.request.content.title,
+              notification,
             );
           },
         );

augmentations/index.ts

@@ -1,3 +1,4 @@
 export * from "./api";
 export * from "./mmkv";
 export * from "./number";
+export * from "./string";

augmentations/number.ts

@@ -3,6 +3,7 @@ declare global {
     bytesToReadable(decimals?: number): string;
     secondsToMilliseconds(): number;
     minutesToMilliseconds(): number;
+    hoursToMilliseconds(): number;
   }
 }
 
@@ -27,4 +28,8 @@ Number.prototype.minutesToMilliseconds = function () {
   return this.valueOf() * (60).secondsToMilliseconds();
 };
 
+Number.prototype.hoursToMilliseconds = function () {
+  return this.valueOf() * (60).minutesToMilliseconds();
+};
+
 export {};

augmentations/string.ts

@@ -0,0 +1,14 @@
+declare global {
+  interface String {
+    toTitle(): string;
+  }
+}
+
+String.prototype.toTitle = function () {
+  return this.replaceAll("_", " ").replace(
+    /\w\S*/g,
+    (text) => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase(),
+  );
+};
+
+export {};

components/ExampleGlobalModalUsage.tsx

@@ -0,0 +1,203 @@
+/**
+ * Example Usage of Global Modal
+ *
+ * This file demonstrates how to use the global modal system from anywhere in your app.
+ * You can delete this file after understanding how it works.
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import { TouchableOpacity, View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { useGlobalModal } from "@/providers/GlobalModalProvider";
+
+/**
+ * Example 1: Simple Content Modal
+ */
+export const SimpleModalExample = () => {
+  const { showModal } = useGlobalModal();
+
+  const handleOpenModal = () => {
+    showModal(
+      <View className='p-6'>
+        <Text className='text-2xl font-bold mb-4 text-white'>Simple Modal</Text>
+        <Text className='text-white mb-4'>
+          This is a simple modal with just some text content.
+        </Text>
+        <Text className='text-neutral-400'>
+          Swipe down or tap outside to close.
+        </Text>
+      </View>,
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={handleOpenModal}
+      className='bg-purple-600 px-4 py-2 rounded-lg'
+    >
+      <Text className='text-white font-semibold'>Open Simple Modal</Text>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * Example 2: Modal with Custom Snap Points
+ */
+export const CustomSnapPointsExample = () => {
+  const { showModal } = useGlobalModal();
+
+  const handleOpenModal = () => {
+    showModal(
+      <View className='p-6' style={{ minHeight: 400 }}>
+        <Text className='text-2xl font-bold mb-4 text-white'>
+          Custom Snap Points
+        </Text>
+        <Text className='text-white mb-4'>
+          This modal has custom snap points (25%, 50%, 90%).
+        </Text>
+        <View className='bg-neutral-800 p-4 rounded-lg'>
+          <Text className='text-white'>
+            Try dragging the modal to different heights!
+          </Text>
+        </View>
+      </View>,
+      {
+        snapPoints: ["25%", "50%", "90%"],
+        enableDynamicSizing: false,
+      },
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={handleOpenModal}
+      className='bg-blue-600 px-4 py-2 rounded-lg'
+    >
+      <Text className='text-white font-semibold'>Custom Snap Points</Text>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * Example 3: Complex Component in Modal
+ */
+const SettingsModalContent = () => {
+  const { hideModal } = useGlobalModal();
+
+  const settings = [
+    {
+      id: 1,
+      title: "Notifications",
+      icon: "notifications-outline" as const,
+      enabled: true,
+    },
+    { id: 2, title: "Dark Mode", icon: "moon-outline" as const, enabled: true },
+    {
+      id: 3,
+      title: "Auto-play",
+      icon: "play-outline" as const,
+      enabled: false,
+    },
+  ];
+
+  return (
+    <View className='p-6'>
+      <Text className='text-2xl font-bold mb-6 text-white'>Settings</Text>
+
+      {settings.map((setting, index) => (
+        <View
+          key={setting.id}
+          className={`flex-row items-center justify-between py-4 ${
+            index !== settings.length - 1 ? "border-b border-neutral-700" : ""
+          }`}
+        >
+          <View className='flex-row items-center gap-3'>
+            <Ionicons name={setting.icon} size={24} color='white' />
+            <Text className='text-white text-lg'>{setting.title}</Text>
+          </View>
+          <View
+            className={`w-12 h-7 rounded-full ${
+              setting.enabled ? "bg-purple-600" : "bg-neutral-600"
+            }`}
+          >
+            <View
+              className={`w-5 h-5 rounded-full bg-white shadow-md transform ${
+                setting.enabled ? "translate-x-6" : "translate-x-1"
+              }`}
+              style={{ marginTop: 4 }}
+            />
+          </View>
+        </View>
+      ))}
+
+      <TouchableOpacity
+        onPress={hideModal}
+        className='bg-purple-600 px-4 py-3 rounded-lg mt-6'
+      >
+        <Text className='text-white font-semibold text-center'>Close</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export const ComplexModalExample = () => {
+  const { showModal } = useGlobalModal();
+
+  const handleOpenModal = () => {
+    showModal(<SettingsModalContent />);
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={handleOpenModal}
+      className='bg-green-600 px-4 py-2 rounded-lg'
+    >
+      <Text className='text-white font-semibold'>Complex Component</Text>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * Example 4: Modal Triggered from Function (e.g., API response)
+ */
+export const useShowSuccessModal = () => {
+  const { showModal } = useGlobalModal();
+
+  return (message: string) => {
+    showModal(
+      <View className='p-6 items-center'>
+        <View className='bg-green-500 rounded-full p-4 mb-4'>
+          <Ionicons name='checkmark' size={48} color='white' />
+        </View>
+        <Text className='text-2xl font-bold mb-2 text-white'>Success!</Text>
+        <Text className='text-white text-center'>{message}</Text>
+      </View>,
+    );
+  };
+};
+
+/**
+ * Main Demo Component
+ */
+export const GlobalModalDemo = () => {
+  const showSuccess = useShowSuccessModal();
+
+  return (
+    <View className='p-6 gap-4'>
+      <Text className='text-2xl font-bold mb-4 text-white'>
+        Global Modal Examples
+      </Text>
+
+      <SimpleModalExample />
+      <CustomSnapPointsExample />
+      <ComplexModalExample />
+
+      <TouchableOpacity
+        onPress={() => showSuccess("Operation completed successfully!")}
+        className='bg-orange-600 px-4 py-2 rounded-lg'
+      >
+        <Text className='text-white font-semibold'>Show Success Modal</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};

components/ItemContent.tsx

@@ -24,6 +24,7 @@ import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useImageColorsReturn } from "@/hooks/useImageColorsReturn";
 import { useOrientation } from "@/hooks/useOrientation";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -59,6 +60,9 @@ const ItemContentMobile: React.FC<ItemContentProps> = ({
 }) => {
   const [api] = useAtom(apiAtom);
   const isOffline = useOfflineMode();
+  const { getDownloadedItemById } = useDownload();
+  const downloadedItem =
+    isOffline && item?.Id ? getDownloadedItemById(item.Id) : null;
   const { settings } = useSettings();
   const { orientation } = useOrientation();
   const navigation = useNavigation();
@@ -105,17 +109,30 @@ const ItemContentMobile: React.FC<ItemContentProps> = ({
 
   // Needs to automatically change the selected to the default values for default indexes.
   useEffect(() => {
+    // When offline, use the indices stored in userData (the last-used tracks for this file)
+    // rather than the server's defaults, so MediaSourceButton reflects what will actually play.
+    const offlineUserData = downloadedItem?.userData;
+
     setSelectedOptions(() => ({
       bitrate: defaultBitrate,
       mediaSource: defaultMediaSource ?? undefined,
-      subtitleIndex: defaultSubtitleIndex ?? -1,
+      subtitleIndex:
-      audioIndex: defaultAudioIndex,
+        offlineUserData && !offlineUserData.isTranscoded
+          ? offlineUserData.subtitleStreamIndex
+          : (defaultSubtitleIndex ?? -1),
+      audioIndex:
+        offlineUserData && !offlineUserData.isTranscoded
+          ? offlineUserData.audioStreamIndex
+          : defaultAudioIndex,
     }));
   }, [
     defaultAudioIndex,
     defaultBitrate,
     defaultSubtitleIndex,
     defaultMediaSource,
+    downloadedItem?.userData?.audioStreamIndex,
+    downloadedItem?.userData?.subtitleStreamIndex,
+    downloadedItem?.userData?.isTranscoded,
   ]);
 
   useEffect(() => {

components/MediaSourceButton.tsx

@@ -7,6 +7,8 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import type { ThemeColors } from "@/hooks/useImageColorsReturn";
+import { useDownload } from "@/providers/DownloadProvider";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { BITRATES } from "./BitRateSheet";
 import type { SelectedOptions } from "./ItemContent";
 import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
@@ -28,6 +30,14 @@ export const MediaSourceButton: React.FC<Props> = ({
 }: Props) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
+  const isOffline = useOfflineMode();
+  const { getDownloadedItemById } = useDownload();
+
+  // For transcoded downloads there's only one burned-in track — nothing to pick
+  const isTranscodedDownload = useMemo(() => {
+    if (!isOffline || !item?.Id) return false;
+    return getDownloadedItemById(item.Id)?.userData?.isTranscoded === true;
+  }, [isOffline, item?.Id, getDownloadedItemById]);
 
   const effectiveColors = colors || {
     primary: "#7c3aed",
@@ -72,34 +82,36 @@ export const MediaSourceButton: React.FC<Props> = ({
   const optionGroups: OptionGroup[] = useMemo(() => {
     const groups: OptionGroup[] = [];
 
-    // Bitrate group
+    if (!isOffline) {
-    groups.push({
+      // Bitrate group
-      title: t("item_card.quality"),
-      options: BITRATES.map((bitrate) => ({
-        type: "radio" as const,
-        label: bitrate.key,
-        value: bitrate,
-        selected: bitrate.value === selectedOptions.bitrate?.value,
-        onPress: () =>
-          setSelectedOptions((prev) => prev && { ...prev, bitrate }),
-      })),
-    });
-
-    // Media Source group (only if multiple sources)
-    if (item?.MediaSources && item.MediaSources.length > 1) {
       groups.push({
-        title: t("item_card.video"),
+        title: t("item_card.quality"),
-        options: item.MediaSources.map((source) => ({
+        options: BITRATES.map((bitrate) => ({
           type: "radio" as const,
-          label: getMediaSourceDisplayName(source),
+          label: bitrate.key,
-          value: source,
+          value: bitrate,
-          selected: source.Id === selectedOptions.mediaSource?.Id,
+          selected: bitrate.value === selectedOptions.bitrate?.value,
           onPress: () =>
-            setSelectedOptions(
+            setSelectedOptions((prev) => prev && { ...prev, bitrate }),
-              (prev) => prev && { ...prev, mediaSource: source },
-            ),
         })),
       });
+
+      // Media Source group (only if multiple sources)
+      if (item?.MediaSources && item.MediaSources.length > 1) {
+        groups.push({
+          title: t("item_card.video"),
+          options: item.MediaSources.map((source) => ({
+            type: "radio" as const,
+            label: getMediaSourceDisplayName(source),
+            value: source,
+            selected: source.Id === selectedOptions.mediaSource?.Id,
+            onPress: () =>
+              setSelectedOptions(
+                (prev) => prev && { ...prev, mediaSource: source },
+              ),
+          })),
+        });
+      }
     }
 
     // Audio track group
@@ -150,6 +162,7 @@ export const MediaSourceButton: React.FC<Props> = ({
     return groups;
   }, [
     item,
+    isOffline,
     selectedOptions,
     audioStreams,
     subtitleStreams,
@@ -178,6 +191,8 @@ export const MediaSourceButton: React.FC<Props> = ({
     </TouchableOpacity>
   );
 
+  if (isTranscodedDownload) return null;
+
   return (
     <PlatformDropdown
       groups={optionGroups}

components/PlatformDropdown.tsx

@@ -1,7 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import React, { useEffect } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
@@ -210,7 +209,6 @@ const PlatformDropdownComponent = ({
   expoUIConfig,
   bottomSheetConfig,
 }: PlatformDropdownProps) => {
-  const { t } = useTranslation();
   const { showModal, hideModal, isVisible } = useGlobalModal();
 
   // Handle controlled open state for Android
@@ -382,7 +380,7 @@ const PlatformDropdownComponent = ({
 
   return (
     <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
-      {trigger || <Text className='text-white'>{t("common.open_menu")}</Text>}
+      {trigger || <Text className='text-white'>Open Menu</Text>}
     </TouchableOpacity>
   );
 };

components/PlayButton.tsx

@@ -96,14 +96,23 @@ export const PlayButton: React.FC<Props> = ({
 
     const queryParams = new URLSearchParams({
       itemId: item.Id!,
-      audioIndex: selectedOptions.audioIndex?.toString() ?? "",
-      subtitleIndex: selectedOptions.subtitleIndex?.toString() ?? "",
       mediaSourceId: selectedOptions.mediaSource?.Id ?? "",
       bitrateValue: selectedOptions.bitrate?.value?.toString() ?? "",
       playbackPosition: item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
       offline: isOffline ? "true" : "false",
     });
 
+    if (selectedOptions.audioIndex !== undefined) {
+      queryParams.set("audioIndex", selectedOptions.audioIndex.toString());
+    }
+
+    if (selectedOptions.subtitleIndex !== undefined) {
+      queryParams.set(
+        "subtitleIndex",
+        selectedOptions.subtitleIndex.toString(),
+      );
+    }
+
     const queryString = queryParams.toString();
 
     if (!client) {
@@ -292,6 +301,29 @@ export const PlayButton: React.FC<Props> = ({
     t,
   ]);
 
+  const buildOfflineQueryParams = useCallback(
+    (downloadedItem: NonNullable<ReturnType<typeof getDownloadedItemById>>) => {
+      const isTranscoded = downloadedItem.userData?.isTranscoded === true;
+      const audioIdx = isTranscoded
+        ? downloadedItem.userData?.audioStreamIndex
+        : selectedOptions.audioIndex;
+      const subtitleIdx = isTranscoded
+        ? downloadedItem.userData?.subtitleStreamIndex
+        : selectedOptions.subtitleIndex;
+      const params = new URLSearchParams({
+        itemId: item.Id!,
+        offline: "true",
+        playbackPosition:
+          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
+      });
+      if (audioIdx !== undefined) params.set("audioIndex", audioIdx.toString());
+      if (subtitleIdx !== undefined)
+        params.set("subtitleIndex", subtitleIdx.toString());
+      return params;
+    },
+    [item, selectedOptions],
+  );
+
   const onPress = useCallback(async () => {
     if (!item) return;
 
@@ -302,13 +334,7 @@ export const PlayButton: React.FC<Props> = ({
 
     // If already in offline mode, play downloaded file directly
     if (isOffline && downloadedItem) {
-      const queryParams = new URLSearchParams({
+      goToPlayer(buildOfflineQueryParams(downloadedItem).toString());
-        itemId: item.Id!,
-        offline: "true",
-        playbackPosition:
-          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-      });
-      goToPlayer(queryParams.toString());
       return;
     }
 
@@ -331,13 +357,9 @@ export const PlayButton: React.FC<Props> = ({
                 <Button
                   onPress={() => {
                     hideModal();
-                    const queryParams = new URLSearchParams({
+                    goToPlayer(
-                      itemId: item.Id!,
+                      buildOfflineQueryParams(downloadedItem).toString(),
-                      offline: "true",
+                    );
-                      playbackPosition:
-                        item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-                    });
-                    goToPlayer(queryParams.toString());
                   }}
                   color='purple'
                 >
@@ -374,13 +396,7 @@ export const PlayButton: React.FC<Props> = ({
             {
               text: t("player.downloaded_file_yes"),
               onPress: () => {
-                const queryParams = new URLSearchParams({
+                goToPlayer(buildOfflineQueryParams(downloadedItem).toString());
-                  itemId: item.Id!,
-                  offline: "true",
-                  playbackPosition:
-                    item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-                });
-                goToPlayer(queryParams.toString());
               },
               isPreferred: true,
             },
@@ -502,8 +518,8 @@ export const PlayButton: React.FC<Props> = ({
   return (
     <TouchableOpacity
       disabled={!item}
-      accessibilityLabel={t("accessibility.play_button")}
+      accessibilityLabel='Play button'
-      accessibilityHint={t("accessibility.play_hint")}
+      accessibilityHint='Tap to play the media'
       onPress={onPress}
       className={"relative flex-1"}
     >

components/PlayButton.tv.tsx

@@ -2,7 +2,6 @@ import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useAtom } from "jotai";
 import { useCallback, useEffect } from "react";
-import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View } from "react-native";
 import Animated, {
   Easing,
@@ -37,7 +36,6 @@ export const PlayButton: React.FC<Props> = ({
   colors,
   ...props
 }: Props) => {
-  const { t } = useTranslation();
   const [globalColorAtom] = useAtom(itemThemeColorAtom);
 
   // Use colors prop if provided, otherwise fallback to global atom
@@ -170,8 +168,8 @@ export const PlayButton: React.FC<Props> = ({
 
   return (
     <TouchableOpacity
-      accessibilityLabel={t("accessibility.play_button")}
+      accessibilityLabel='Play button'
-      accessibilityHint={t("accessibility.play_hint")}
+      accessibilityHint='Tap to play the media'
       onPress={onPress}
       className={"relative"}
       {...props}

components/PlayInRemoteSession.tsx

@@ -6,7 +6,6 @@ import {
 import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
 import { useAtomValue } from "jotai";
 import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
 import {
   FlatList,
   Modal,
@@ -32,7 +31,6 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
   const [modalVisible, setModalVisible] = useState(false);
   const api = useAtomValue(apiAtom);
   const { sessions, isLoading } = useAllSessions({} as useSessionsProps);
-  const { t } = useTranslation();
   const handlePlayInSession = async (sessionId: string) => {
     if (!api || !item.Id) return;
 
@@ -67,9 +65,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
         <View style={styles.centeredView}>
           <View style={styles.modalView}>
             <View style={styles.modalHeader}>
-              <Text style={styles.modalTitle}>
+              <Text style={styles.modalTitle}>Select Session</Text>
-                {t("home.sessions.select_session")}
-              </Text>
               <TouchableOpacity onPress={() => setModalVisible(false)}>
                 <Ionicons name='close' size={24} color='white' />
               </TouchableOpacity>
@@ -82,7 +78,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
                 </View>
               ) : !sessions || sessions.length === 0 ? (
                 <Text style={styles.noSessionsText}>
-                  {t("home.sessions.no_active_sessions")}
+                  No active sessions found
                 </Text>
               ) : (
                 <FlatList
@@ -102,7 +98,7 @@ export const PlayInRemoteSessionButton: React.FC<Props> = ({
                         </Text>
                         {session.NowPlayingItem && (
                           <Text style={styles.nowPlaying} numberOfLines={1}>
-                            {t("home.sessions.now_playing")}{" "}
+                            Now playing:{" "}
                             {session.NowPlayingItem.SeriesName
                               ? `${session.NowPlayingItem.SeriesName} :`
                               : ""}

components/TrackSheet.tsx

@@ -0,0 +1,99 @@
+import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View } from "react-native";
+import { Text } from "./common/Text";
+import { FilterSheet } from "./filters/FilterSheet";
+
+interface Props extends React.ComponentProps<typeof View> {
+  source?: MediaSourceInfo;
+  onChange: (value: number) => void;
+  selected?: number | undefined;
+  streamType?: string;
+  title: string;
+}
+
+export const TrackSheet: React.FC<Props> = ({
+  source,
+  onChange,
+  selected,
+  streamType,
+  title,
+  ...props
+}) => {
+  const isTv = Platform.isTV;
+  const { t } = useTranslation();
+
+  const streams = useMemo(
+    () => source?.MediaStreams?.filter((x) => x.Type === streamType),
+    [source],
+  );
+
+  const selectedSteam = useMemo(
+    () => streams?.find((x) => x.Index === selected),
+    [streams, selected],
+  );
+
+  const noneOption = useMemo(
+    () => ({ Index: -1, DisplayTitle: t("common.none") }),
+    [t],
+  );
+
+  // Creates a modified data array that includes a "None" option for subtitles
+  // We might want to possibly do this for other places, like audio?
+  const addNoneToSubtitles = useMemo(() => {
+    if (streamType === "Subtitle") {
+      const result = streams ? [noneOption, ...streams] : [noneOption];
+      return result;
+    }
+    return streams;
+  }, [streams, streamType, noneOption]);
+  const [open, setOpen] = useState(false);
+
+  if (isTv || (streams && streams.length === 0)) return null;
+
+  return (
+    <View className='flex shrink' style={{ minWidth: 60 }} {...props}>
+      <View className='flex flex-col'>
+        <Text className='opacity-50 mb-1 text-xs'>{title}</Text>
+        <TouchableOpacity
+          className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
+          onPress={() => setOpen(true)}
+        >
+          <Text numberOfLines={1}>
+            {selected === -1 && streamType === "Subtitle"
+              ? t("common.none")
+              : selectedSteam?.DisplayTitle || t("common.select")}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <FilterSheet
+        open={open}
+        setOpen={setOpen}
+        title={title}
+        data={addNoneToSubtitles || []}
+        values={
+          selected === -1 && streamType === "Subtitle"
+            ? [{ Index: -1, DisplayTitle: t("common.none") }]
+            : selectedSteam
+              ? [selectedSteam]
+              : []
+        }
+        multiple={false}
+        searchFilter={(item, query) => {
+          const label = (item as any).DisplayTitle || "";
+          return label.toLowerCase().includes(query.toLowerCase());
+        }}
+        renderItemLabel={(item) => (
+          <Text>{(item as any).DisplayTitle || ""}</Text>
+        )}
+        set={(vals) => {
+          const chosen = vals[0] as any;
+          if (chosen && chosen.Index !== null && chosen.Index !== undefined) {
+            onChange(chosen.Index);
+          }
+        }}
+      />
+    </View>
+  );
+};

components/WatchedIndicator.tsx

@@ -1,119 +1,43 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import React from "react";
+import type React from "react";
-import { Platform, View, type ViewStyle } from "react-native";
+import { Platform, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { scaleSize } from "@/utils/scaleSize";
-
-const isAggregateType = (item: BaseItemDto) =>
-  item.Type === "Series" || item.Type === "BoxSet";
-
-// TV sizes are scaled relative to a 1920×1080 reference (see scaleSize).
-const tvBadgeBase: ViewStyle = {
-  position: "absolute",
-  top: scaleSize(8),
-  right: scaleSize(8),
-  height: scaleSize(28),
-  borderRadius: scaleSize(14),
-  backgroundColor: "rgba(255,255,255,0.92)",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-// Mobile uses raw dp — no scaling.
-const mobileBadgeBase: ViewStyle = {
-  position: "absolute",
-  top: 4,
-  right: 4,
-  height: 20,
-  borderRadius: 10,
-  backgroundColor: "#9333ea",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-/**
- * Renders the unplayed-episode count badge for Series/BoxSet items that still
- * have episodes left to watch. Returns null for non-aggregate types, fully
- * watched items, or items with no unplayed count, so it is safe to mount
- * unconditionally as an overlay (e.g. on top of the tvOS glass poster, where
- * the watched checkmark is drawn natively and only the count needs RN).
- */
-export const UnplayedCountBadge: React.FC<{ item: BaseItemDto }> = React.memo(
-  ({ item }) => {
-    if (!isAggregateType(item)) return null;
-    if (item.UserData?.Played) return null;
-    const unplayed = item.UserData?.UnplayedItemCount ?? 0;
-    if (unplayed <= 0) return null;
-    // Cap at 1k+ to keep the badge compact (jellyfin-web caps at 99+).
-    const label = unplayed >= 1000 ? "1k+" : String(unplayed);
-
-    if (Platform.isTV) {
-      return (
-        <View
-          style={[
-            tvBadgeBase,
-            { minWidth: scaleSize(28), paddingHorizontal: scaleSize(7) },
-          ]}
-        >
-          <Text
-            style={{
-              fontSize: scaleSize(15),
-              fontWeight: "700",
-              color: "black",
-            }}
-          >
-            {label}
-          </Text>
-        </View>
-      );
-    }
-
-    return (
-      <View style={[mobileBadgeBase, { minWidth: 20, paddingHorizontal: 5 }]}>
-        <Text style={{ fontSize: 12, fontWeight: "700", color: "white" }}>
-          {label}
-        </Text>
-      </View>
-    );
-  },
-);
 
 export const WatchedIndicator: React.FC<{ item: BaseItemDto }> = ({ item }) => {
-  const isMovieOrEpisode = item.Type === "Movie" || item.Type === "Episode";
-  const isAggregate = isAggregateType(item);
-  const isPlayed = item.UserData?.Played === true;
-
   if (Platform.isTV) {
-    // Fully watched → white checkmark badge (top-right)
+    // TV: Show white checkmark when watched
-    if (isPlayed && (isMovieOrEpisode || isAggregate)) {
+    if (
+      item.UserData?.Played &&
+      (item.Type === "Movie" || item.Type === "Episode")
+    ) {
       return (
-        <View style={[tvBadgeBase, { width: scaleSize(28) }]}>
+        <View
-          <Ionicons name='checkmark' size={scaleSize(18)} color='black' />
+          style={{
+            position: "absolute",
+            top: 8,
+            right: 8,
+            backgroundColor: "rgba(255,255,255,0.9)",
+            borderRadius: 14,
+            width: 28,
+            height: 28,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Ionicons name='checkmark' size={18} color='black' />
         </View>
       );
     }
-    // Series/BoxSet with remaining episodes → count badge
+    return null;
-    return <UnplayedCountBadge item={item} />;
   }
 
-  // Mobile: purple corner ribbon for unwatched Movie/Episode (existing behavior)
+  // Mobile: Show purple triangle for unwatched
   return (
     <>
-      {/* Strict === false: items without UserData (unknown state) get no ribbon */}
+      {item.UserData?.Played === false &&
-      {isMovieOrEpisode && item.UserData?.Played === false && (
+        (item.Type === "Movie" || item.Type === "Episode") && (
-        <View className='bg-purple-600 w-8 h-8 absolute -top-4 -right-4 rotate-45' />
+          <View className='bg-purple-600 w-8 h-8 absolute -top-4 -right-4 rotate-45' />
-      )}
+        )}
-
-      {/* Fully watched Series/BoxSet → small purple checkmark */}
-      {isAggregate && isPlayed && (
-        <View style={[mobileBadgeBase, { width: 20 }]}>
-          <Ionicons name='checkmark' size={13} color='white' />
-        </View>
-      )}
-
-      {/* Series/BoxSet with remaining episodes → count badge */}
-      <UnplayedCountBadge item={item} />
     </>
   );
 };

components/common/LargePoster.tsx

@@ -0,0 +1,20 @@
+import { Image } from "expo-image";
+import { View } from "react-native";
+
+export const LargePoster: React.FC<{ url?: string | null }> = ({ url }) => {
+  if (!url)
+    return (
+      <View className='p-4 rounded-xl overflow-hidden '>
+        <View className='w-full aspect-video rounded-xl overflow-hidden border border-neutral-800' />
+      </View>
+    );
+
+  return (
+    <View className='p-4 rounded-xl overflow-hidden '>
+      <Image
+        source={{ uri: url }}
+        className='w-full aspect-video rounded-xl overflow-hidden border border-neutral-800'
+      />
+    </View>
+  );
+};

components/common/VerticalSkeleton.tsx

@@ -0,0 +1,28 @@
+import { View, type ViewProps } from "react-native";
+
+interface Props extends ViewProps {
+  index: number;
+}
+
+export const VerticalSkeleton: React.FC<Props> = ({ index, ...props }) => {
+  return (
+    <View
+      key={index}
+      style={{
+        width: "32%",
+      }}
+      className='flex flex-col'
+      {...props}
+    >
+      <View
+        style={{
+          aspectRatio: "10/15",
+        }}
+        className='w-full bg-neutral-800 mb-2 rounded-lg'
+      />
+      <View className='h-2 bg-neutral-800 rounded-full mb-1' />
+      <View className='h-2 bg-neutral-800 rounded-full mb-1' />
+      <View className='h-2 bg-neutral-800 rounded-full mb-2 w-1/2' />
+    </View>
+  );
+};

components/downloads/DownloadCard.tsx

@@ -1,7 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
+import { t } from "i18next";
 import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   TouchableOpacity,
@@ -35,7 +35,6 @@ interface DownloadCardProps extends TouchableOpacityProps {
 }
 
 export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
-  const { t } = useTranslation();
   const { cancelDownload } = useDownload();
   const router = useRouter();
   const queryClient = useNetworkAwareQueryClient();
@@ -174,9 +173,7 @@ export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
 
             {isTranscoding && (
               <View className='bg-purple-600/20 px-2 py-0.5 rounded-md mt-1 self-start'>
-                <Text className='text-xs text-purple-400'>
+                <Text className='text-xs text-purple-400'>Transcoding</Text>
-                  {t("home.downloads.transcoding")}
-                </Text>
               </View>
             )}
 

components/downloads/SeriesCard.tsx

@@ -16,12 +16,9 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
   const { showActionSheetWithOptions } = useActionSheet();
   const router = useRouter();
 
-  // Keyed on SeriesId so recycled FlashList cells re-read the correct poster
-  // instead of freezing the first-rendered series' image (empty deps bug).
   const base64Image = useMemo(() => {
-    const seriesId = items[0]?.SeriesId;
+    return storage.getString(items[0].SeriesId!);
-    return seriesId ? storage.getString(seriesId) : undefined;
+  }, []);
-  }, [items[0]?.SeriesId]);
 
   const deleteSeries = useCallback(
     async () =>

components/home/Home.tv.tsx

@@ -140,11 +140,9 @@ export const Home = () => {
     let isCancelled = false;
 
     const performCrossfade = async () => {
-      // Prefetch to disk only - the full-size 1920x1080 backdrop (~8MB
+      // Prefetch the image before starting the crossfade
-      // decoded ARGB) is too large to pin in the memory cache on every
-      // focus change. Disk cache is fast enough for a 500ms crossfade.
       try {
-        await Image.prefetch(backdropUrl, "disk");
+        await Image.prefetch(backdropUrl);
       } catch {
         // Continue even if prefetch fails
       }

components/home/InfiniteScrollingCollectionList.tv.tsx

@@ -201,18 +201,12 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
 
   const handleSeeAllPress = useCallback(() => {
     if (!parentId) return;
-    // Navigate into the library detail (lives in the libraries tab) sorted by most
-    // recently added. The `fromSeeAll` flag tells the detail page to (a) collapse
-    // the libraries stack so the native tab can't auto-pop it back to the list, and
-    // (b) intercept Back to route to the library list so the user can switch
-    // libraries. See app/(auth)/(tabs)/(libraries)/[libraryId].tsx.
     router.push({
-      pathname: "/[libraryId]",
+      pathname: "/(auth)/(tabs)/(libraries)/[libraryId]",
       params: {
         libraryId: parentId,
         sortBy: SortByOption.DateCreated,
         sortOrder: SortOrderOption.Descending,
-        fromSeeAll: "true",
       },
     } as any);
   }, [router, parentId]);
@@ -332,9 +326,9 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
           showsHorizontalScrollIndicator={false}
           onEndReached={handleEndReached}
           onEndReachedThreshold={0.5}
-          initialNumToRender={4}
+          initialNumToRender={5}
-          maxToRenderPerBatch={2}
+          maxToRenderPerBatch={3}
-          windowSize={3}
+          windowSize={5}
           removeClippedSubviews={false}
           maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
           style={{ overflow: "visible" }}
@@ -354,14 +348,11 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
           // contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
           // contentContainerStyle={{ paddingVertical: SCALE_PADDING }}
           ListFooterComponent={
-            // No fixed width: the footer must size to the "See All" card so the
-            // FlatList's scrollable content extends to fully reveal it. A fixed
-            // (narrow) width clipped the card at the right edge. Trailing space is
-            // provided by contentContainerStyle.paddingRight.
             <View
               style={{
                 flexDirection: "row",
                 alignItems: "center",
+                width: sizes.padding.horizontal,
               }}
             >
               {isFetchingNextPage && (

components/home/TVHeroCarousel.tsx

@@ -256,11 +256,8 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
     let isCancelled = false;
 
     const performCrossfade = async () => {
-      // Disk-only prefetch: backdrops are ~8MB decoded ARGB; keeping them
-      // out of the memory cache avoids bloat when the user cycles through
-      // hero items quickly.
       try {
-        await Image.prefetch(backdropUrl, "disk");
+        await Image.prefetch(backdropUrl);
       } catch {
         // Continue even if prefetch fails
       }
@@ -382,7 +379,7 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
   if (items.length === 0) return null;
 
   // Extra top padding for tvOS to clear the menu bar
-  const tvosTopPadding = scaleSize(145);
+  const tvosTopPadding = Platform.OS === "ios" ? scaleSize(145) : 0;
   const heroHeight = SCREEN_HEIGHT * sizes.padding.heroHeight;
 
   return (

components/library/LibraryItemCard.tsx

@@ -51,7 +51,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
         api,
         item: library,
       }),
-    [api, library],
+    [library],
   );
 
   const itemType = useMemo(() => {

components/livetv/TVGuideProgramCell.tsx

@@ -1,6 +1,5 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import React from "react";
-import { useTranslation } from "react-i18next";
 import { Animated, Pressable, StyleSheet, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
@@ -23,7 +22,6 @@ export const TVGuideProgramCell: React.FC<TVGuideProgramCellProps> = ({
   disabled = false,
   refSetter,
 }) => {
-  const { t } = useTranslation();
   const typography = useScaledTVTypography();
   const { focused, handleFocus, handleBlur } = useTVFocusAnimation({
     scaleAmount: 1,
@@ -70,7 +68,7 @@ export const TVGuideProgramCell: React.FC<TVGuideProgramCellProps> = ({
             <Text
               style={[styles.liveBadgeText, { fontSize: typography.callout }]}
             >
-              {t("player.live")}
+              LIVE
             </Text>
           </View>
         )}

components/livetv/TVLiveTVPage.tsx

@@ -235,7 +235,7 @@ export const TVLiveTVPage: React.FC = () => {
             marginBottom: 24,
           }}
         >
-          {t("live_tv.title")}
+          Live TV
         </Text>
 
         {/* Tab Bar */}

components/login/Login.tsx

@@ -146,7 +146,7 @@ export const Login: React.FC = () => {
       } else {
         Alert.alert(
           t("login.connection_failed"),
-          t("login.an_unexpected_error_occurred"),
+          t("login.an_unexpected_error_occured"),
         );
       }
     } finally {

components/login/TVLogin.tsx

@@ -437,7 +437,7 @@ export const TVLogin: React.FC = () => {
       } else {
         Alert.alert(
           t("login.connection_failed"),
-          t("login.an_unexpected_error_occurred"),
+          t("login.an_unexpected_error_occured"),
         );
       }
     } finally {
@@ -499,7 +499,7 @@ export const TVLogin: React.FC = () => {
         const message =
           error instanceof Error
             ? error.message
-            : t("login.an_unexpected_error_occurred");
+            : t("login.an_unexpected_error_occured");
         Alert.alert(t("login.connection_failed"), message);
         goToQRScreen();
       } finally {
@@ -523,7 +523,7 @@ export const TVLogin: React.FC = () => {
         } else {
           Alert.alert(
             t("login.connection_failed"),
-            t("login.an_unexpected_error_occurred"),
+            t("login.an_unexpected_error_occured"),
           );
         }
       } finally {
@@ -768,7 +768,7 @@ export const TVLogin: React.FC = () => {
               const message =
                 error instanceof Error
                   ? error.message
-                  : t("login.an_unexpected_error_occurred");
+                  : t("login.an_unexpected_error_occured");
               Alert.alert(t("login.connection_failed"), message);
               goToQRScreen();
             });

components/navigation/TabBarIcon.tsx

@@ -0,0 +1,12 @@
+// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
+
+import type { IconProps } from "@expo/vector-icons/build/createIconSet";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import type { ComponentProps } from "react";
+
+export function TabBarIcon({
+  style,
+  ...rest
+}: IconProps<ComponentProps<typeof Ionicons>["name"]>) {
+  return <Ionicons size={26} style={[{ marginBottom: -3 }, style]} {...rest} />;
+}

components/persons/TVActorPage.tsx

@@ -156,9 +156,9 @@ export const TVActorPage: React.FC<TVActorPageProps> = ({ personId }) => {
     let isCancelled = false;
 
     const performCrossfade = async () => {
-      // Disk-only prefetch to avoid pinning large backdrops in memory cache.
+      // Prefetch the image before starting the crossfade
       try {
-        await Image.prefetch(backdropUrl, "disk");
+        await Image.prefetch(backdropUrl);
       } catch {
         // Continue even if prefetch fails
       }

components/posters/EpisodePoster.tsx

@@ -0,0 +1,63 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo, useState } from "react";
+import { View } from "react-native";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
+import { apiAtom } from "@/providers/JellyfinProvider";
+
+type MoviePosterProps = {
+  item: BaseItemDto;
+  showProgress?: boolean;
+};
+
+export const EpisodePoster: React.FC<MoviePosterProps> = ({
+  item,
+  showProgress = false,
+}) => {
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(() => {
+    if (item.Type === "Episode") {
+      return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
+    }
+  }, [item]);
+
+  const [progress, _setProgress] = useState(
+    item.UserData?.PlayedPercentage || 0,
+  );
+
+  const blurhash = useMemo(() => {
+    const key = item.ImageTags?.Primary as string;
+    return item.ImageBlurHashes?.Primary?.[key];
+  }, [item]);
+
+  return (
+    <View className='relative rounded-lg overflow-hidden border border-neutral-900'>
+      <Image
+        placeholder={{
+          blurhash,
+        }}
+        key={item.Id}
+        id={item.Id}
+        source={
+          url
+            ? {
+                uri: url,
+              }
+            : null
+        }
+        cachePolicy={"memory-disk"}
+        contentFit='cover'
+        style={{
+          aspectRatio: "10/15",
+          width: "100%",
+        }}
+      />
+      <WatchedIndicator item={item} />
+      {showProgress && progress > 0 && (
+        <View className='h-1 bg-red-600 w-full' />
+      )}
+    </View>
+  );
+};

components/posters/ItemPoster.tsx

@@ -1,8 +1,8 @@
 import { type BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useState } from "react";
 import { View, type ViewProps } from "react-native";
-import { WatchedIndicator } from "@/components/WatchedIndicator";
 import { ItemImage } from "../common/ItemImage";
+import { WatchedIndicator } from "../WatchedIndicator";
 
 interface Props extends ViewProps {
   item: BaseItemDto;

components/posters/ParentPoster.tsx

@@ -0,0 +1,48 @@
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+import { View } from "react-native";
+import { apiAtom } from "@/providers/JellyfinProvider";
+
+type PosterProps = {
+  id?: string;
+  showProgress?: boolean;
+};
+
+const ParentPoster: React.FC<PosterProps> = ({ id }) => {
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(
+    () => `${api?.basePath}/Items/${id}/Images/Primary`,
+    [id],
+  );
+
+  if (!url || !id)
+    return (
+      <View
+        className='border border-neutral-900'
+        style={{
+          aspectRatio: "10/15",
+        }}
+      />
+    );
+
+  return (
+    <View className='rounded-lg overflow-hidden border border-neutral-900'>
+      <Image
+        key={id}
+        id={id}
+        source={{
+          uri: url,
+        }}
+        cachePolicy={"memory-disk"}
+        contentFit='cover'
+        style={{
+          aspectRatio: "10/15",
+        }}
+      />
+    </View>
+  );
+};
+
+export default ParentPoster;

components/posters/SeriesPoster.tsx

@@ -3,7 +3,6 @@ import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
 import { View } from "react-native";
-import { WatchedIndicator } from "@/components/WatchedIndicator";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 
@@ -53,7 +52,6 @@ const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
           width: "100%",
         }}
       />
-      <WatchedIndicator item={item} />
     </View>
   );
 };

components/search/TVSearchTabBadges.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
@@ -89,8 +88,6 @@ export const TVSearchTabBadges: React.FC<TVSearchTabBadgesProps> = ({
   showDiscover,
   disabled = false,
 }) => {
-  const { t } = useTranslation();
-
   if (!showDiscover) {
     return null;
   }
@@ -104,13 +101,13 @@ export const TVSearchTabBadges: React.FC<TVSearchTabBadgesProps> = ({
       }}
     >
       <TVSearchTabBadge
-        label={t("search.library")}
+        label='Library'
         isSelected={searchType === "Library"}
         onPress={() => setSearchType("Library")}
         disabled={disabled}
       />
       <TVSearchTabBadge
-        label={t("search.discover")}
+        label='Discover'
         isSelected={searchType === "Discover"}
         onPress={() => setSearchType("Discover")}
         disabled={disabled}

components/settings/Dashboard.tsx

@@ -0,0 +1,29 @@
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import useRouter from "@/hooks/useAppRouter";
+import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
+import { useSettings } from "@/utils/atoms/settings";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+export const Dashboard = () => {
+  const { settings } = useSettings();
+  const { sessions = [] } = useSessions({} as useSessionsProps);
+  const router = useRouter();
+
+  const { t } = useTranslation();
+
+  if (!settings) return null;
+  return (
+    <View>
+      <ListGroup title={t("home.settings.dashboard.title")} className='mt-4'>
+        <ListItem
+          className={sessions.length !== 0 ? "bg-purple-900" : ""}
+          onPress={() => router.push("/settings/dashboard/sessions")}
+          title={t("home.settings.dashboard.sessions_title")}
+          showArrow
+        />
+      </ListGroup>
+    </View>
+  );
+};

components/settings/DownloadSettings.tsx

@@ -0,0 +1,3 @@
+export default function DownloadSettings() {
+  return null;
+}

components/settings/DownloadSettings.tv.tsx

@@ -0,0 +1,3 @@
+export default function DownloadSettings() {
+  return null;
+}

components/settings/Jellyseerr.tsx

@@ -115,6 +115,9 @@ export const JellyseerrSettings = () => {
           </>
         ) : (
           <View className='flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900'>
+            <Text className='text-xs text-red-600 mb-2'>
+              {t("home.settings.plugins.jellyseerr.jellyseerr_warning")}
+            </Text>
             <Text className='font-bold mb-1'>
               {t("home.settings.plugins.jellyseerr.server_url")}
             </Text>

components/settings/MpvSubtitleSettings.tsx

@@ -1,6 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, Switch, View, type ViewProps } from "react-native";
 import { Stepper } from "@/components/inputs/Stepper";
 import { Text } from "../common/Text";
@@ -18,21 +17,20 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
   const isTv = Platform.isTV;
   const media = useMedia();
   const { settings, updateSettings } = media;
-  const { t } = useTranslation();
 
   const alignXOptions: AlignX[] = ["left", "center", "right"];
   const alignYOptions: AlignY[] = ["top", "center", "bottom"];
 
   const alignXLabels: Record<AlignX, string> = {
-    left: t("home.settings.subtitles.align.left"),
+    left: "Left",
-    center: t("home.settings.subtitles.align.center"),
+    center: "Center",
-    right: t("home.settings.subtitles.align.right"),
+    right: "Right",
   };
 
   const alignYLabels: Record<AlignY, string> = {
-    top: t("home.settings.subtitles.align.top"),
+    top: "Top",
-    center: t("home.settings.subtitles.align.center"),
+    center: "Center",
-    bottom: t("home.settings.subtitles.align.bottom"),
+    bottom: "Bottom",
   };
 
   const alignXOptionGroups = useMemo(() => {
@@ -62,18 +60,16 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
   return (
     <View {...props}>
       <ListGroup
-        title={t("home.settings.subtitles.mpv_settings_title")}
+        title='MPV Subtitle Settings'
         description={
           <Text className='text-[#8E8D91] text-xs'>
-            {t("home.settings.subtitles.mpv_settings_description")}
+            Advanced subtitle customization for MPV player
           </Text>
         }
       >
         {!isTv && (
           <>
-            <ListItem
+            <ListItem title='Vertical Margin'>
-              title={t("home.settings.subtitles.mpv_subtitle_margin_y")}
-            >
               <Stepper
                 value={settings.mpvSubtitleMarginY ?? 0}
                 step={5}
@@ -85,7 +81,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
               />
             </ListItem>
 
-            <ListItem title={t("home.settings.subtitles.mpv_subtitle_align_x")}>
+            <ListItem title='Horizontal Alignment'>
               <PlatformDropdown
                 groups={alignXOptionGroups}
                 trigger={
@@ -100,11 +96,11 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                     />
                   </View>
                 }
-                title={t("home.settings.subtitles.mpv_subtitle_align_x")}
+                title='Horizontal Alignment'
               />
             </ListItem>
 
-            <ListItem title={t("home.settings.subtitles.mpv_subtitle_align_y")}>
+            <ListItem title='Vertical Alignment'>
               <PlatformDropdown
                 groups={alignYOptionGroups}
                 trigger={
@@ -119,13 +115,13 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                     />
                   </View>
                 }
-                title={t("home.settings.subtitles.mpv_subtitle_align_y")}
+                title='Vertical Alignment'
               />
             </ListItem>
           </>
         )}
 
-        <ListItem title={t("home.settings.subtitles.opaque_background")}>
+        <ListItem title='Opaque Background'>
           <Switch
             value={settings.mpvSubtitleBackgroundEnabled ?? false}
             onValueChange={(value) =>
@@ -135,7 +131,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
         </ListItem>
 
         {settings.mpvSubtitleBackgroundEnabled && (
-          <ListItem title={t("home.settings.subtitles.background_opacity")}>
+          <ListItem title='Background Opacity'>
             <Stepper
               value={settings.mpvSubtitleBackgroundOpacity ?? 75}
               step={5}

components/settings/QuickConnect.tsx

@@ -58,7 +58,7 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
           successHapticFeedback();
           Alert.alert(
             t("home.settings.quick_connect.success"),
-            t("home.settings.quick_connect.quick_connect_authorized"),
+            t("home.settings.quick_connect.quick_connect_autorized"),
           );
           setQuickConnectCode(undefined);
           bottomSheetModalRef?.current?.close();

components/settings/StorageSettings.tsx

@@ -1,6 +1,6 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
-import { Alert, Platform, View } from "react-native";
+import { Platform, View } from "react-native";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
@@ -12,7 +12,6 @@ import { ListItem } from "../list/ListItem";
 export const StorageSettings = () => {
   const { deleteAllFiles, appSizeUsage } = useDownload();
   const { t } = useTranslation();
-  const queryClient = useQueryClient();
   const successHapticFeedback = useHaptic("success");
   const errorHapticFeedback = useHaptic("error");
 
@@ -28,38 +27,16 @@ export const StorageSettings = () => {
         used: (app.total - app.remaining) / app.total,
       };
     },
-    // Keep the bar moving while a download is writing to disk.
-    refetchInterval: 10 * 1000,
   });
 
-  const onDeleteClicked = () => {
+  const onDeleteClicked = async () => {
-    Alert.alert(
+    try {
-      t("home.settings.storage.delete_all_downloaded_files_confirm"),
+      await deleteAllFiles();
-      t("home.settings.storage.delete_all_downloaded_files_confirm_desc"),
+      successHapticFeedback();
-      [
+    } catch (_e) {
-        {
+      errorHapticFeedback();
-          text: t("common.cancel"),
+      toast.error(t("home.settings.toasts.error_deleting_files"));
-          style: "cancel",
+    }
-        },
-        {
-          text: t("common.ok"),
-          style: "destructive",
-          onPress: async () => {
-            try {
-              await deleteAllFiles();
-              successHapticFeedback();
-            } catch (_e) {
-              errorHapticFeedback();
-              toast.error(t("home.settings.toasts.error_deleting_files"));
-            } finally {
-              // Reflect the freed space immediately instead of waiting for
-              // the next poll.
-              queryClient.invalidateQueries({ queryKey: ["appSize"] });
-            }
-          },
-        },
-      ],
-    );
   };
 
   const calculatePercentage = (value: number, total: number) => {

components/tv/TVNavBar.tsx

@@ -1,155 +0,0 @@
-import React from "react";
-import {
-  Animated,
-  Pressable,
-  ScrollView,
-  StyleProp,
-  View,
-  ViewStyle,
-} from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
-import { TVPadding } from "@/constants/TVSizes";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import { scaleSize } from "@/utils/scaleSize";
-
-export interface TVNavBarTab {
-  key: string;
-  label: string;
-}
-
-export interface TVNavBarProps {
-  tabs: TVNavBarTab[];
-  activeTabKey: string;
-  onTabChange: (key: string) => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-const TVNavBarTabItem: React.FC<{
-  label: string;
-  isActive: boolean;
-  onSelect: () => void;
-  onLayout: (e: {
-    nativeEvent: { layout: { x: number; width: number } };
-  }) => void;
-  hasTVPreferredFocus: boolean;
-}> = ({ label, isActive, onSelect, onLayout, hasTVPreferredFocus }) => {
-  const typography = useScaledTVTypography();
-  const { focused, handleFocus, handleBlur, animatedStyle } =
-    useTVFocusAnimation({
-      scaleAmount: 1.05,
-      duration: 120,
-    });
-
-  const bg = focused
-    ? "rgba(255, 255, 255, 0.95)"
-    : isActive
-      ? "rgba(255, 255, 255, 0.15)"
-      : "transparent";
-
-  const textColor = focused
-    ? "#000"
-    : isActive
-      ? "#fff"
-      : "rgba(255, 255, 255, 0.7)";
-
-  return (
-    <Pressable
-      onPress={onSelect}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      hasTVPreferredFocus={hasTVPreferredFocus}
-      onLayout={onLayout}
-    >
-      <Animated.View
-        style={[
-          animatedStyle,
-          {
-            backgroundColor: bg,
-            borderRadius: scaleSize(24),
-            borderWidth: isActive && !focused ? 1 : 0,
-            borderColor: "rgba(255, 255, 255, 0.3)",
-            paddingHorizontal: scaleSize(28),
-            paddingVertical: scaleSize(14),
-          },
-        ]}
-      >
-        <Text
-          style={{
-            fontSize: typography.heading,
-            color: textColor,
-            fontWeight: isActive || focused ? "600" : "400",
-          }}
-        >
-          {label}
-        </Text>
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-export const TVNavBar: React.FC<TVNavBarProps> = ({
-  tabs,
-  activeTabKey,
-  onTabChange,
-  style,
-}) => {
-  const scrollRef = React.useRef<ScrollView>(null);
-  const tabLayouts = React.useRef<Record<string, { x: number; width: number }>>(
-    {},
-  );
-  const insets = useSafeAreaInsets();
-
-  const handleTabLayout = React.useCallback(
-    (key: string) =>
-      (e: { nativeEvent: { layout: { x: number; width: number } } }) => {
-        tabLayouts.current[key] = e.nativeEvent.layout;
-      },
-    [],
-  );
-
-  const handleTabChange = React.useCallback(
-    (key: string) => {
-      onTabChange(key);
-
-      const layout = tabLayouts.current[key];
-      if (layout && scrollRef.current) {
-        scrollRef.current.scrollTo({
-          x: Math.max(0, layout.x - TVPadding.horizontal / 2),
-          animated: true,
-        });
-      }
-    },
-    [onTabChange],
-  );
-
-  if (tabs.length === 0) return null;
-
-  return (
-    <View style={[{ paddingTop: insets.top + 16, paddingBottom: 8 }, style]}>
-      <ScrollView
-        ref={scrollRef}
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        keyboardShouldPersistTaps='handled'
-        contentContainerStyle={{
-          flexGrow: 1,
-          justifyContent: "center",
-          gap: scaleSize(12),
-        }}
-      >
-        {tabs.map((tab) => (
-          <TVNavBarTabItem
-            key={tab.key}
-            label={tab.label}
-            isActive={tab.key === activeTabKey}
-            onSelect={() => handleTabChange(tab.key)}
-            onLayout={handleTabLayout(tab.key)}
-            hasTVPreferredFocus={tab.key === activeTabKey}
-          />
-        ))}
-      </ScrollView>
-    </View>
-  );
-};

components/tv/TVPosterCard.tsx

@@ -12,10 +12,7 @@ import {
 } from "react-native";
 import { ProgressBar } from "@/components/common/ProgressBar";
 import { Text } from "@/components/common/Text";
-import {
+import { WatchedIndicator } from "@/components/WatchedIndicator";
-  UnplayedCountBadge,
-  WatchedIndicator,
-} from "@/components/WatchedIndicator";
 import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import {
@@ -430,12 +427,6 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
           />
           {PlayButtonOverlay}
           {NowPlayingBadge}
-          {/*
-            The glass view draws the watched checkmark natively but cannot show
-            an unplayed-episode count, so render it as an RN overlay on top.
-            Returns null when not applicable (non-series / fully watched).
-          */}
-          {showWatchedIndicator && <UnplayedCountBadge item={item} />}
         </View>
       );
     }
@@ -457,8 +448,8 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
         <Image
           placeholder={{ blurhash }}
           key={item.Id}
+          id={item.Id}
           source={{ uri: imageUrl }}
-          recyclingKey={item.Id}
           cachePolicy='memory-disk'
           contentFit='cover'
           style={{
@@ -468,7 +459,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
         />
         {PlayButtonOverlay}
         {NowPlayingBadge}
-        {showWatchedIndicator && <WatchedIndicator item={item} />}
+        <WatchedIndicator item={item} />
         <ProgressBar item={item} />
       </View>
     );

components/tv/TVSubtitleResultCard.tsx

@@ -1,6 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
 import React from "react";
-import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   Animated,
@@ -29,7 +28,6 @@ export const TVSubtitleResultCard = React.forwardRef<
   const styles = createStyles(typography);
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({ scaleAmount: 1.03 });
-  const { t } = useTranslation();
 
   return (
     <Pressable
@@ -154,7 +152,7 @@ export const TVSubtitleResultCard = React.forwardRef<
                 },
               ]}
             >
-              <Text style={styles.flagText}>{t("player.hash_match")}</Text>
+              <Text style={styles.flagText}>Hash Match</Text>
             </View>
           )}
           {result.hearingImpaired && (

components/tv/index.ts

@@ -35,8 +35,6 @@ export type { TVLanguageCardProps } from "./TVLanguageCard";
 export { TVLanguageCard } from "./TVLanguageCard";
 export type { TVMetadataBadgesProps } from "./TVMetadataBadges";
 export { TVMetadataBadges } from "./TVMetadataBadges";
-export type { TVNavBarProps, TVNavBarTab } from "./TVNavBar";
-export { TVNavBar } from "./TVNavBar";
 export type { TVNextEpisodeCountdownProps } from "./TVNextEpisodeCountdown";
 export { TVNextEpisodeCountdown } from "./TVNextEpisodeCountdown";
 export type { TVOptionButtonProps } from "./TVOptionButton";

components/video-player/controls/BottomControls.tsx

@@ -183,7 +183,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
           <SkipButton
             showButton={showSkipButton}
             onPress={skipIntro}
-            buttonText={t("player.skip_intro")}
+            buttonText='Skip Intro'
           />
           {/* Smart Skip Credits behavior:
               - Show "Skip Credits" if there's content after credits OR no next episode
@@ -193,7 +193,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
               showSkipCreditButton && (hasContentAfterCredits || !nextItem)
             }
             onPress={skipCredit}
-            buttonText={t("player.skip_credits")}
+            buttonText='Skip Credits'
           />
           {settings.autoPlayNextEpisode !== false &&
             (settings.maxAutoPlayEpisodeCount.value === -1 ||

components/video-player/controls/ContinueWatchingOverlay.tsx

@@ -27,7 +27,7 @@ const ContinueWatchingOverlay: React.FC<ContinueWatchingOverlayProps> = ({
       }
     >
       <Text className='text-2xl font-bold text-white py-4 '>
-        {t("player.still_watching")}
+        Are you still watching ?
       </Text>
       <Button
         onPress={() => {

components/video-player/controls/Controls.tv.tsx

@@ -564,9 +564,6 @@ export const Controls: FC<Props> = ({
       title: t("item_card.audio"),
       options: audioOptions,
       onSelect: handleAudioChange,
-      // In-player audio selection navigates (replacePlayer while transcoding);
-      // apply it after the modal is dismissed so it isn't swallowed.
-      deferApplyUntilDismissed: true,
     });
     controlsInteractionRef.current();
   }, [showOptions, t, audioOptions, handleAudioChange]);

components/video-player/controls/HeaderControls.tsx

@@ -4,7 +4,6 @@ import type {
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
 import { type FC, useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import useRouter from "@/hooks/useAppRouter";
 import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
@@ -58,7 +57,6 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
   showTechnicalInfo = false,
   onToggleTechnicalInfo,
 }) => {
-  const { t } = useTranslation();
   const router = useRouter();
   const insets = useControlsSafeAreaInsets();
   const lightHapticFeedback = useHaptic("light");
@@ -129,8 +127,8 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
             onPress={toggleOrientation}
             disabled={isTogglingOrientation}
             className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-            accessibilityLabel={t("accessibility.toggle_orientation")}
+            accessibilityLabel='Toggle screen orientation'
-            accessibilityHint={t("accessibility.toggle_orientation_hint")}
+            accessibilityHint='Toggles the screen orientation between portrait and landscape'
           >
             <MaterialIcons
               name='screen-rotation'

components/video-player/controls/TVSubtitleSheet.tsx

@@ -0,0 +1,560 @@
+import { Ionicons } from "@expo/vector-icons";
+import type {
+  BaseItemDto,
+  MediaStream,
+} from "@jellyfin/sdk/lib/generated-client";
+import { BlurView } from "expo-blur";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  Animated,
+  Easing,
+  ScrollView,
+  StyleSheet,
+  TVFocusGuideView,
+  View,
+} from "react-native";
+import { Text } from "@/components/common/Text";
+import {
+  TVCancelButton,
+  TVLanguageCard,
+  TVSubtitleResultCard,
+  TVTabButton,
+  TVTrackCard,
+} from "@/components/tv";
+import {
+  type SubtitleSearchResult,
+  useRemoteSubtitles,
+} from "@/hooks/useRemoteSubtitles";
+import { COMMON_SUBTITLE_LANGUAGES } from "@/utils/opensubtitles/api";
+
+interface TVSubtitleSheetProps {
+  visible: boolean;
+  item: BaseItemDto;
+  mediaSourceId?: string | null;
+  subtitleTracks: MediaStream[];
+  currentSubtitleIndex: number;
+  onSubtitleIndexChange: (index: number) => void;
+  onClose: () => void;
+  onServerSubtitleDownloaded?: () => void;
+  onLocalSubtitleDownloaded?: (path: string) => void;
+}
+
+type TabType = "tracks" | "download";
+
+export const TVSubtitleSheet: React.FC<TVSubtitleSheetProps> = ({
+  visible,
+  item,
+  mediaSourceId,
+  subtitleTracks,
+  currentSubtitleIndex,
+  onSubtitleIndexChange,
+  onClose,
+  onServerSubtitleDownloaded,
+  onLocalSubtitleDownloaded,
+}) => {
+  const { t } = useTranslation();
+
+  console.log(
+    "[TVSubtitleSheet] visible:",
+    visible,
+    "tracks:",
+    subtitleTracks.length,
+  );
+  const [activeTab, setActiveTab] = useState<TabType>("tracks");
+  const [selectedLanguage, setSelectedLanguage] = useState("eng");
+  const [downloadingId, setDownloadingId] = useState<string | null>(null);
+  const [hasSearchedThisSession, setHasSearchedThisSession] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [isTabContentReady, setIsTabContentReady] = useState(false);
+  const firstTrackRef = useRef<View>(null);
+
+  const {
+    hasOpenSubtitlesApiKey,
+    isSearching,
+    searchError,
+    searchResults,
+    search,
+    downloadAsync,
+    reset,
+  } = useRemoteSubtitles({
+    itemId: item.Id ?? "",
+    item,
+    mediaSourceId,
+  });
+
+  const resetRef = useRef(reset);
+  resetRef.current = reset;
+
+  const overlayOpacity = useRef(new Animated.Value(0)).current;
+  const sheetTranslateY = useRef(new Animated.Value(300)).current;
+
+  const initialSelectedTrackIndex = useMemo(() => {
+    if (currentSubtitleIndex === -1) return 0;
+    const trackIdx = subtitleTracks.findIndex(
+      (t) => t.Index === currentSubtitleIndex,
+    );
+    return trackIdx >= 0 ? trackIdx + 1 : 0;
+  }, [subtitleTracks, currentSubtitleIndex]);
+
+  useEffect(() => {
+    if (visible) {
+      overlayOpacity.setValue(0);
+      sheetTranslateY.setValue(300);
+
+      Animated.parallel([
+        Animated.timing(overlayOpacity, {
+          toValue: 1,
+          duration: 250,
+          easing: Easing.out(Easing.quad),
+          useNativeDriver: true,
+        }),
+        Animated.timing(sheetTranslateY, {
+          toValue: 0,
+          duration: 300,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [visible, overlayOpacity, sheetTranslateY]);
+
+  useEffect(() => {
+    if (!visible) {
+      setHasSearchedThisSession(false);
+      setActiveTab("tracks");
+      resetRef.current();
+      setIsReady(false);
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    if (visible) {
+      const timer = setTimeout(() => setIsReady(true), 100);
+      return () => clearTimeout(timer);
+    }
+    setIsReady(false);
+  }, [visible]);
+
+  useEffect(() => {
+    if (visible && activeTab === "download" && !hasSearchedThisSession) {
+      search({ language: selectedLanguage });
+      setHasSearchedThisSession(true);
+    }
+  }, [visible, activeTab, hasSearchedThisSession, search, selectedLanguage]);
+
+  useEffect(() => {
+    if (isReady) {
+      setIsTabContentReady(false);
+      const timer = setTimeout(() => setIsTabContentReady(true), 50);
+      return () => clearTimeout(timer);
+    }
+    setIsTabContentReady(false);
+  }, [activeTab, isReady]);
+
+  const handleLanguageSelect = useCallback(
+    (code: string) => {
+      setSelectedLanguage(code);
+      search({ language: code });
+    },
+    [search],
+  );
+
+  const handleTrackSelect = useCallback(
+    (index: number) => {
+      onSubtitleIndexChange(index);
+      onClose();
+    },
+    [onSubtitleIndexChange, onClose],
+  );
+
+  const handleDownload = useCallback(
+    async (result: SubtitleSearchResult) => {
+      setDownloadingId(result.id);
+
+      try {
+        const downloadResult = await downloadAsync(result);
+
+        if (downloadResult.type === "server") {
+          onServerSubtitleDownloaded?.();
+        } else if (downloadResult.type === "local" && downloadResult.path) {
+          onLocalSubtitleDownloaded?.(downloadResult.path);
+        }
+
+        onClose();
+      } catch (error) {
+        console.error("Failed to download subtitle:", error);
+      } finally {
+        setDownloadingId(null);
+      }
+    },
+    [
+      downloadAsync,
+      onServerSubtitleDownloaded,
+      onLocalSubtitleDownloaded,
+      onClose,
+    ],
+  );
+
+  const displayLanguages = useMemo(
+    () => COMMON_SUBTITLE_LANGUAGES.slice(0, 16),
+    [],
+  );
+
+  const trackOptions = useMemo(() => {
+    const noneOption = {
+      label: t("item_card.subtitles.none"),
+      sublabel: undefined as string | undefined,
+      value: -1,
+      selected: currentSubtitleIndex === -1,
+    };
+    const options = subtitleTracks.map((track) => ({
+      label:
+        track.DisplayTitle || `${track.Language || "Unknown"} (${track.Codec})`,
+      sublabel: track.Codec?.toUpperCase(),
+      value: track.Index!,
+      selected: track.Index === currentSubtitleIndex,
+    }));
+    return [noneOption, ...options];
+  }, [subtitleTracks, currentSubtitleIndex, t]);
+
+  if (!visible) return null;
+
+  return (
+    <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
+      <Animated.View
+        style={[
+          styles.sheetContainer,
+          { transform: [{ translateY: sheetTranslateY }] },
+        ]}
+      >
+        <BlurView intensity={90} tint='dark' style={styles.blurContainer}>
+          <TVFocusGuideView
+            trapFocusUp
+            trapFocusDown
+            trapFocusLeft
+            trapFocusRight
+            style={styles.content}
+          >
+            {/* Header with tabs */}
+            <View style={styles.header}>
+              <Text style={styles.title}>
+                {t("item_card.subtitles.label") || "Subtitles"}
+              </Text>
+
+              {/* Tab bar */}
+              <View style={styles.tabRow}>
+                <TVTabButton
+                  label={t("item_card.subtitles.tracks") || "Tracks"}
+                  active={activeTab === "tracks"}
+                  onSelect={() => setActiveTab("tracks")}
+                />
+                <TVTabButton
+                  label={t("player.download") || "Download"}
+                  active={activeTab === "download"}
+                  onSelect={() => setActiveTab("download")}
+                />
+              </View>
+            </View>
+
+            {/* Tracks Tab Content */}
+            {activeTab === "tracks" && isTabContentReady && (
+              <View style={styles.section}>
+                <ScrollView
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  style={styles.tracksScroll}
+                  contentContainerStyle={styles.tracksScrollContent}
+                >
+                  {trackOptions.map((option, index) => (
+                    <TVTrackCard
+                      key={option.value}
+                      ref={
+                        index === initialSelectedTrackIndex
+                          ? firstTrackRef
+                          : undefined
+                      }
+                      label={option.label}
+                      sublabel={option.sublabel}
+                      selected={option.selected}
+                      hasTVPreferredFocus={index === initialSelectedTrackIndex}
+                      onPress={() => handleTrackSelect(option.value)}
+                    />
+                  ))}
+                </ScrollView>
+              </View>
+            )}
+
+            {/* Download Tab Content */}
+            {activeTab === "download" && isTabContentReady && (
+              <>
+                {/* Language Selector */}
+                <View style={styles.section}>
+                  <Text style={styles.sectionTitle}>
+                    {t("player.language") || "Language"}
+                  </Text>
+                  <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    style={styles.languageScroll}
+                    contentContainerStyle={styles.languageScrollContent}
+                  >
+                    {displayLanguages.map((lang, index) => (
+                      <TVLanguageCard
+                        key={lang.code}
+                        code={lang.code}
+                        name={lang.name}
+                        selected={selectedLanguage === lang.code}
+                        hasTVPreferredFocus={
+                          index === 0 &&
+                          (!searchResults || searchResults.length === 0)
+                        }
+                        onPress={() => handleLanguageSelect(lang.code)}
+                      />
+                    ))}
+                  </ScrollView>
+                </View>
+
+                {/* Results Section */}
+                <View style={styles.section}>
+                  <Text style={styles.sectionTitle}>
+                    {t("player.results") || "Results"}
+                    {searchResults && ` (${searchResults.length})`}
+                  </Text>
+
+                  {/* Loading state */}
+                  {isSearching && (
+                    <View style={styles.loadingContainer}>
+                      <ActivityIndicator size='large' color='#fff' />
+                      <Text style={styles.loadingText}>
+                        {t("player.searching") || "Searching..."}
+                      </Text>
+                    </View>
+                  )}
+
+                  {/* Error state */}
+                  {searchError && !isSearching && (
+                    <View style={styles.errorContainer}>
+                      <Ionicons
+                        name='alert-circle-outline'
+                        size={32}
+                        color='rgba(255,100,100,0.8)'
+                      />
+                      <Text style={styles.errorText}>
+                        {t("player.search_failed") || "Search failed"}
+                      </Text>
+                      <Text style={styles.errorHint}>
+                        {!hasOpenSubtitlesApiKey
+                          ? t("player.no_subtitle_provider") ||
+                            "No subtitle provider configured on server"
+                          : String(searchError)}
+                      </Text>
+                    </View>
+                  )}
+
+                  {/* No results */}
+                  {searchResults &&
+                    searchResults.length === 0 &&
+                    !isSearching &&
+                    !searchError && (
+                      <View style={styles.emptyContainer}>
+                        <Ionicons
+                          name='document-text-outline'
+                          size={32}
+                          color='rgba(255,255,255,0.4)'
+                        />
+                        <Text style={styles.emptyText}>
+                          {t("player.no_subtitles_found") ||
+                            "No subtitles found"}
+                        </Text>
+                      </View>
+                    )}
+
+                  {/* Results list */}
+                  {searchResults &&
+                    searchResults.length > 0 &&
+                    !isSearching && (
+                      <ScrollView
+                        horizontal
+                        showsHorizontalScrollIndicator={false}
+                        style={styles.resultsScroll}
+                        contentContainerStyle={styles.resultsScrollContent}
+                      >
+                        {searchResults.map((result, index) => (
+                          <TVSubtitleResultCard
+                            key={result.id}
+                            result={result}
+                            hasTVPreferredFocus={index === 0}
+                            isDownloading={downloadingId === result.id}
+                            onPress={() => handleDownload(result)}
+                          />
+                        ))}
+                      </ScrollView>
+                    )}
+                </View>
+
+                {/* API Key hint if no fallback available */}
+                {!hasOpenSubtitlesApiKey && (
+                  <View style={styles.apiKeyHint}>
+                    <Ionicons
+                      name='information-circle-outline'
+                      size={16}
+                      color='rgba(255,255,255,0.4)'
+                    />
+                    <Text style={styles.apiKeyHintText}>
+                      {t("player.add_opensubtitles_key_hint") ||
+                        "Add OpenSubtitles API key in settings for client-side fallback"}
+                    </Text>
+                  </View>
+                )}
+              </>
+            )}
+
+            {/* Cancel button */}
+            {isReady && (
+              <View style={styles.cancelButtonContainer}>
+                <TVCancelButton
+                  onPress={onClose}
+                  label={t("common.cancel") || "Cancel"}
+                />
+              </View>
+            )}
+          </TVFocusGuideView>
+        </BlurView>
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    justifyContent: "flex-end",
+    zIndex: 1000,
+  },
+  sheetContainer: {
+    maxHeight: "70%",
+  },
+  blurContainer: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    overflow: "hidden",
+  },
+  content: {
+    paddingTop: 24,
+    paddingBottom: 48,
+  },
+  header: {
+    paddingHorizontal: 48,
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "600",
+    color: "#fff",
+    marginBottom: 16,
+  },
+  tabRow: {
+    flexDirection: "row",
+    gap: 24,
+  },
+  section: {
+    marginBottom: 20,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "rgba(255,255,255,0.5)",
+    textTransform: "uppercase",
+    letterSpacing: 1,
+    marginBottom: 12,
+    paddingHorizontal: 48,
+  },
+  tracksScroll: {
+    overflow: "visible",
+  },
+  tracksScrollContent: {
+    paddingHorizontal: 48,
+    paddingVertical: 8,
+    gap: 12,
+  },
+  languageScroll: {
+    overflow: "visible",
+  },
+  languageScrollContent: {
+    paddingHorizontal: 48,
+    paddingVertical: 8,
+    gap: 10,
+  },
+  resultsScroll: {
+    overflow: "visible",
+  },
+  resultsScrollContent: {
+    paddingHorizontal: 48,
+    paddingVertical: 8,
+    gap: 12,
+  },
+  loadingContainer: {
+    paddingVertical: 40,
+    alignItems: "center",
+  },
+  loadingText: {
+    color: "rgba(255,255,255,0.6)",
+    marginTop: 12,
+    fontSize: 14,
+  },
+  errorContainer: {
+    paddingVertical: 40,
+    paddingHorizontal: 48,
+    alignItems: "center",
+  },
+  errorText: {
+    color: "rgba(255,100,100,0.9)",
+    marginTop: 8,
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  errorHint: {
+    color: "rgba(255,255,255,0.5)",
+    marginTop: 4,
+    fontSize: 13,
+    textAlign: "center",
+  },
+  emptyContainer: {
+    paddingVertical: 40,
+    alignItems: "center",
+  },
+  emptyText: {
+    color: "rgba(255,255,255,0.5)",
+    marginTop: 8,
+    fontSize: 14,
+  },
+  apiKeyHint: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 48,
+    paddingTop: 8,
+  },
+  apiKeyHintText: {
+    color: "rgba(255,255,255,0.4)",
+    fontSize: 12,
+  },
+  cancelButtonContainer: {
+    paddingHorizontal: 48,
+    paddingTop: 20,
+    alignItems: "flex-start",
+  },
+});

components/video-player/controls/TechnicalInfoOverlay.tsx

@@ -7,7 +7,6 @@ import {
   useMemo,
   useState,
 } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import Animated, {
   Easing,
@@ -185,7 +184,6 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
     currentAudioIndex,
   }) => {
     const typography = useScaledTVTypography();
-    const { t } = useTranslation();
     const insets = useSafeAreaInsets();
     const safeInsets = useControlsSafeAreaInsets();
     const [info, setInfo] = useState<TechnicalInfo | null>(null);
@@ -314,13 +312,13 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           )}
           {info?.videoCodec && (
             <Text style={textStyle}>
-              {t("player.technical_info.video")} {formatCodec(info.videoCodec)}
+              Video: {formatCodec(info.videoCodec)}
               {info.fps ? ` @ ${formatFps(info.fps)} fps` : ""}
             </Text>
           )}
           {info?.audioCodec && (
             <Text style={textStyle}>
-              {t("player.technical_info.audio")} {formatCodec(info.audioCodec)}
+              Audio: {formatCodec(info.audioCodec)}
               {streamInfo?.audioChannels
                 ? ` ${formatAudioChannels(streamInfo.audioChannels)}`
                 : ""}
@@ -328,13 +326,12 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           )}
           {streamInfo?.subtitleCodec && (
             <Text style={textStyle}>
-              {t("player.technical_info.subtitle")}{" "}
+              Subtitle: {formatCodec(streamInfo.subtitleCodec)}
-              {formatCodec(streamInfo.subtitleCodec)}
             </Text>
           )}
           {(info?.videoBitrate || info?.audioBitrate) && (
             <Text style={textStyle}>
-              {t("player.technical_info.bitrate")}{" "}
+              Bitrate:{" "}
               {info.videoBitrate
                 ? formatBitrate(info.videoBitrate)
                 : info.audioBitrate
@@ -344,39 +341,21 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           )}
           {info?.cacheSeconds !== undefined && (
             <Text style={textStyle}>
-              {t("player.technical_info.buffer_seconds", {
+              Buffer: {info.cacheSeconds.toFixed(1)}s
-                seconds: info.cacheSeconds.toFixed(1),
-              })}
-              {info?.demuxerMaxBytes !== undefined
-                ? ` (cap ${info.demuxerMaxBytes}MB` +
-                  `${info.demuxerMaxBackBytes !== undefined ? ` / ${info.demuxerMaxBackBytes}MB back` : ""}` +
-                  `${info?.cacheSecsLimit !== undefined && info.cacheSecsLimit < 3600 ? ` · ${info.cacheSecsLimit.toFixed(0)}s` : ""}` +
-                  ")"
-                : ""}
             </Text>
           )}
           {info?.voDriver && (
             <Text style={textStyle}>
-              {t("player.technical_info.vo")} {info.voDriver}
+              VO: {info.voDriver}
               {info.hwdec ? ` / ${info.hwdec}` : ""}
             </Text>
           )}
-          {info?.estimatedVfFps !== undefined && (
-            <Text style={textStyle}>
-              Output FPS: {info.estimatedVfFps.toFixed(2)}
-              {info?.fps ? ` (container ${formatFps(info.fps)})` : ""}
-            </Text>
-          )}
           {info?.droppedFrames !== undefined && info.droppedFrames > 0 && (
             <Text style={[textStyle, styles.warningText]}>
-              {t("player.technical_info.dropped_frames", {
+              Dropped: {info.droppedFrames} frames
-                count: info.droppedFrames,
-              })}
             </Text>
           )}
-          {!info && !playMethod && (
+          {!info && !playMethod && <Text style={textStyle}>Loading...</Text>}
-            <Text style={textStyle}>{t("player.technical_info.loading")}</Text>
-          )}
         </View>
       </Animated.View>
     );

components/video-player/controls/VideoScalingModeSelector.tsx

@@ -1,6 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
 import React, { useMemo } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import {
   type OptionGroup,
@@ -55,7 +54,6 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
   onRatioChange,
   disabled = false,
 }) => {
-  const { t } = useTranslation();
   const lightHapticFeedback = useHaptic("light");
 
   const handleRatioSelect = (ratio: AspectRatio) => {
@@ -68,10 +66,7 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
       {
         options: ASPECT_RATIO_OPTIONS.map((option) => ({
           type: "radio" as const,
-          label:
+          label: option.label,
-            option.id === "default"
-              ? t("player.aspect_ratio_original")
-              : option.label,
           value: option.id,
           selected: option.id === currentRatio,
           onPress: () => handleRatioSelect(option.id),
@@ -99,7 +94,7 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
 
   return (
     <PlatformDropdown
-      title={t("player.aspect_ratio")}
+      title='Aspect Ratio'
       groups={optionGroups}
       trigger={trigger}
       bottomSheetConfig={{

components/video-player/controls/dropdown/DropdownView.tsx

@@ -1,7 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useCallback, useMemo, useRef } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
 import {
@@ -48,7 +47,6 @@ const DropdownView = ({
   const { settings, updateSettings } = useSettings();
   const router = useRouter();
   const isOffline = useOfflineMode();
-  const { t } = useTranslation();
 
   const { subtitleIndex, audioIndex, bitrateValue, playbackPosition } =
     useLocalSearchParams<{
@@ -103,7 +101,7 @@ const DropdownView = ({
     // Quality Section
     if (!isOffline) {
       groups.push({
-        title: t("player.menu.quality"),
+        title: "Quality",
         options:
           BITRATES?.map((bitrate) => ({
             type: "radio" as const,
@@ -118,7 +116,7 @@ const DropdownView = ({
     // Subtitle Section
     if (subtitleTracks && subtitleTracks.length > 0) {
       groups.push({
-        title: t("player.menu.subtitles"),
+        title: "Subtitles",
         options: subtitleTracks.map((sub) => ({
           type: "radio" as const,
           label: sub.name,
@@ -130,7 +128,7 @@ const DropdownView = ({
 
       // Subtitle Scale Section
       groups.push({
-        title: t("player.menu.subtitle_scale"),
+        title: "Subtitle Scale",
         options: SUBTITLE_SCALE_PRESETS.map((preset) => ({
           type: "radio" as const,
           label: preset.label,
@@ -144,7 +142,7 @@ const DropdownView = ({
     // Audio Section
     if (audioTracks && audioTracks.length > 0) {
       groups.push({
-        title: t("player.menu.audio"),
+        title: "Audio",
         options: audioTracks.map((track) => ({
           type: "radio" as const,
           label: track.name,
@@ -158,7 +156,7 @@ const DropdownView = ({
     // Speed Section
     if (setPlaybackSpeed) {
       groups.push({
-        title: t("player.menu.speed"),
+        title: "Speed",
         options: PLAYBACK_SPEEDS.map((speed) => ({
           type: "radio" as const,
           label: speed.label,
@@ -176,8 +174,8 @@ const DropdownView = ({
           {
             type: "action" as const,
             label: showTechnicalInfo
-              ? t("player.menu.hide_technical_info")
+              ? "Hide Technical Info"
-              : t("player.menu.show_technical_info"),
+              : "Show Technical Info",
             onPress: onToggleTechnicalInfo,
           },
         ],
@@ -187,7 +185,6 @@ const DropdownView = ({
     return groups;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    t,
     isOffline,
     bitrateValue,
     changeBitrate,
@@ -220,7 +217,7 @@ const DropdownView = ({
 
   return (
     <PlatformDropdown
-      title={t("player.menu.playback_options")}
+      title='Playback Options'
       groups={optionGroups}
       trigger={trigger}
       expoUIConfig={{}}

components/video-player/controls/hooks/useRemoteControl.ts

@@ -3,7 +3,6 @@ import { Alert } from "react-native";
 import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import { useTVBackPress } from "@/hooks/useTVBackPress";
 import { useTVEventHandler } from "@/hooks/useTVEventHandler";
-import i18n from "@/i18n";
 
 interface UseRemoteControlProps {
   showControls: boolean;
@@ -125,23 +124,17 @@ export function useRemoteControl({
 
       // Controls are hidden, so confirm before leaving playback.
       Alert.alert(
-        i18n.t("player.stopPlayback"),
+        "Stop Playback",
         videoTitleRef.current
-          ? i18n.t("player.stopPlayingTitle", {
+          ? `Stop playing "${videoTitleRef.current}"?`
-              title: videoTitleRef.current,
+          : "Are you sure you want to stop playback?",
-            })
-          : i18n.t("player.stopPlayingConfirm"),
         [
           {
-            text: i18n.t("common.cancel"),
+            text: "Cancel",
             style: "cancel",
             onPress: () => onCancelExitRef.current?.(),
           },
-          {
+          { text: "Stop", style: "destructive", onPress: onBackRef.current },
-            text: i18n.t("common.stop"),
-            style: "destructive",
-            onPress: onBackRef.current,
-          },
         ],
       );
       return true;

constants/Languages.ts

@@ -0,0 +1,39 @@
+import type { DefaultLanguageOption } from "@/utils/atoms/settings";
+
+export const LANGUAGES: DefaultLanguageOption[] = [
+  { label: "English", value: "eng" },
+  { label: "Spanish", value: "spa" },
+  { label: "Chinese (Mandarin)", value: "cmn" },
+  { label: "Hindi", value: "hin" },
+  { label: "Arabic", value: "ara" },
+  { label: "French", value: "fra" },
+  { label: "Russian", value: "rus" },
+  { label: "Portuguese", value: "por" },
+  { label: "Japanese", value: "jpn" },
+  { label: "German", value: "deu" },
+  { label: "Italian", value: "ita" },
+  { label: "Korean", value: "kor" },
+  { label: "Turkish", value: "tur" },
+  { label: "Dutch", value: "nld" },
+  { label: "Polish", value: "pol" },
+  { label: "Vietnamese", value: "vie" },
+  { label: "Thai", value: "tha" },
+  { label: "Indonesian", value: "ind" },
+  { label: "Greek", value: "ell" },
+  { label: "Swedish", value: "swe" },
+  { label: "Danish", value: "dan" },
+  { label: "Norwegian", value: "nor" },
+  { label: "Finnish", value: "fin" },
+  { label: "Czech", value: "ces" },
+  { label: "Hungarian", value: "hun" },
+  { label: "Romanian", value: "ron" },
+  { label: "Ukrainian", value: "ukr" },
+  { label: "Hebrew", value: "heb" },
+  { label: "Bengali", value: "ben" },
+  { label: "Punjabi", value: "pan" },
+  { label: "Tagalog", value: "tgl" },
+  { label: "Swahili", value: "swa" },
+  { label: "Malay", value: "msa" },
+  { label: "Persian", value: "fas" },
+  { label: "Urdu", value: "urd" },
+];

constants/MediaTypes.js

@@ -3,13 +3,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-const MediaTypes = {
+export default {
   Audio: "Audio",
   Video: "Video",
   Photo: "Photo",
   Book: "Book",
-} as const;
+};
-
-export type MediaType = (typeof MediaTypes)[keyof typeof MediaTypes];
-
-export default MediaTypes;

docs/tv-discovery.md

@@ -28,7 +28,7 @@ Apple TV uses a Top Shelf extension target, not the main app process.
 
 Relevant files:
 
-- [plugins/withTVOSTopShelf.ts](../plugins/withTVOSTopShelf.ts)
+- [plugins/withTVOSTopShelf.js](../plugins/withTVOSTopShelf.js)
 - [targets/StreamyfinTopShelf/TopShelfProvider.swift](../targets/StreamyfinTopShelf/TopShelfProvider.swift)
 - [modules/top-shelf-cache/ios/TopShelfCacheModule.swift](../modules/top-shelf-cache/ios/TopShelfCacheModule.swift)
 - [utils/topshelf/cache.ts](../utils/topshelf/cache.ts)

eas.json

@@ -52,7 +52,7 @@
       }
     },
     "production": {
-      "bun": "1.3.14",
+      "bun": "1.3.5",
       "environment": "production",
       "autoIncrement": true,
       "android": {
@@ -64,7 +64,7 @@
       }
     },
     "production-apk": {
-      "bun": "1.3.14",
+      "bun": "1.3.5",
       "environment": "production",
       "autoIncrement": true,
       "android": {
@@ -74,7 +74,7 @@
       }
     },
     "production-apk-tv": {
-      "bun": "1.3.14",
+      "bun": "1.3.5",
       "environment": "production",
       "autoIncrement": true,
       "android": {
@@ -87,7 +87,7 @@
       }
     },
     "production_tv": {
-      "bun": "1.3.14",
+      "bun": "1.3.5",
       "environment": "production",
       "autoIncrement": true,
       "env": {

hooks/useControlsVisibility.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useSharedValue } from "react-native-reanimated";
+
+export const useControlsVisibility = (timeout = 3000) => {
+  const opacity = useSharedValue(1);
+
+  const hideControlsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+
+  const showControls = useCallback(() => {
+    opacity.value = 1;
+    if (hideControlsTimerRef.current) {
+      clearTimeout(hideControlsTimerRef.current);
+    }
+    hideControlsTimerRef.current = setTimeout(() => {
+      opacity.value = 0;
+    }, timeout);
+  }, [timeout]);
+
+  const hideControls = useCallback(() => {
+    opacity.value = 0;
+    if (hideControlsTimerRef.current) {
+      clearTimeout(hideControlsTimerRef.current);
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (hideControlsTimerRef.current) {
+        clearTimeout(hideControlsTimerRef.current);
+      }
+    };
+  }, []);
+
+  return { opacity, showControls, hideControls };
+};

hooks/useDownloadedFileOpener.ts

@@ -0,0 +1,51 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useCallback } from "react";
+import useRouter from "@/hooks/useAppRouter";
+import { getDownloadedItemById } from "@/providers/Downloads/database";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { writeToLog } from "@/utils/log";
+
+export const useDownloadedFileOpener = () => {
+  const router = useRouter();
+  const { setPlayUrl, setOfflineSettings } = usePlaySettings();
+
+  const openFile = useCallback(
+    async (item: BaseItemDto) => {
+      if (!item.Id) {
+        writeToLog("ERROR", "Attempted to open a file without an ID.");
+        console.error("Attempted to open a file without an ID.");
+        return;
+      }
+      const downloadedItem = getDownloadedItemById(item.Id);
+      const queryParams = new URLSearchParams({
+        itemId: item.Id,
+        offline: "true",
+        playbackPosition:
+          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
+      });
+
+      if (downloadedItem?.userData?.audioStreamIndex !== undefined) {
+        queryParams.set(
+          "audioIndex",
+          downloadedItem.userData.audioStreamIndex.toString(),
+        );
+      }
+      if (downloadedItem?.userData?.subtitleStreamIndex !== undefined) {
+        queryParams.set(
+          "subtitleIndex",
+          downloadedItem.userData.subtitleStreamIndex.toString(),
+        );
+      }
+
+      try {
+        router.push(`/player/direct-player?${queryParams.toString()}`);
+      } catch (error) {
+        writeToLog("ERROR", "Error opening file", error);
+        console.error("Error opening file:", error);
+      }
+    },
+    [setOfflineSettings, setPlayUrl, router],
+  );
+
+  return { openFile };
+};

hooks/useImageColors.ts

@@ -0,0 +1,120 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useAtom, useAtomValue } from "jotai";
+import { useEffect, useMemo } from "react";
+import { Platform } from "react-native";
+import type * as ImageColorsType from "react-native-image-colors";
+import { apiAtom } from "@/providers/JellyfinProvider";
+
+// Conditionally import react-native-image-colors only on non-TV platforms
+const ImageColors = Platform.isTV
+  ? null
+  : (require("react-native-image-colors") as typeof ImageColorsType);
+
+import {
+  adjustToNearBlack,
+  calculateTextColor,
+  isCloseToBlack,
+  itemThemeColorAtom,
+} from "@/utils/atoms/primaryColor";
+import { getItemImage } from "@/utils/getItemImage";
+import { storage } from "@/utils/mmkv";
+
+/**
+ * Custom hook to extract and manage image colors for a given item.
+ *
+ * @param item - The BaseItemDto object representing the item.
+ * @param disabled - A boolean flag to disable color extraction.
+ *
+ */
+export const useImageColors = ({
+  item,
+  url,
+  disabled,
+}: {
+  item?: BaseItemDto | null;
+  url?: string | null;
+  disabled?: boolean;
+}) => {
+  const api = useAtomValue(apiAtom);
+  const [, setPrimaryColor] = useAtom(itemThemeColorAtom);
+
+  const isTv = Platform.isTV;
+
+  const source = useMemo(() => {
+    if (!api) return;
+    if (url) return { uri: url };
+    if (item)
+      return getItemImage({
+        item,
+        api,
+        variant: "Primary",
+        quality: 80,
+        width: 300,
+      });
+    return null;
+  }, [api, item, url]);
+
+  useEffect(() => {
+    if (isTv) return;
+    if (disabled) return;
+    if (source?.uri) {
+      const _primary = storage.getString(`${source.uri}-primary`);
+      const _text = storage.getString(`${source.uri}-text`);
+
+      if (_primary && _text) {
+        setPrimaryColor({
+          primary: _primary,
+          text: _text,
+        });
+        return;
+      }
+
+      // Extract colors from the image
+      if (!ImageColors?.getColors) return;
+
+      ImageColors.getColors(source.uri, {
+        fallback: "#fff",
+        cache: false,
+      })
+        .then((colors: ImageColorsType.ImageColorsResult) => {
+          let primary = "#fff";
+          let text = "#000";
+          let backup = "#fff";
+
+          // Select the appropriate color based on the platform
+          if (colors.platform === "android") {
+            primary = colors.dominant;
+            backup = colors.vibrant;
+          } else if (colors.platform === "ios") {
+            primary = colors.detail;
+            backup = colors.primary;
+          }
+
+          // Adjust the primary color if it's too close to black
+          if (primary && isCloseToBlack(primary)) {
+            if (backup && !isCloseToBlack(backup)) primary = backup;
+            primary = adjustToNearBlack(primary);
+          }
+
+          // Calculate the text color based on the primary color
+          if (primary) text = calculateTextColor(primary);
+
+          setPrimaryColor({
+            primary,
+            text,
+          });
+
+          // Cache the colors in storage
+          if (source.uri && primary) {
+            storage.set(`${source.uri}-primary`, primary);
+            storage.set(`${source.uri}-text`, text);
+          }
+        })
+        .catch((error: any) => {
+          console.error("Error getting colors", error);
+        });
+    }
+  }, [isTv, source?.uri, setPrimaryColor, disabled]);
+
+  if (isTv) return;
+};

hooks/useJellyseerr.ts

@@ -143,7 +143,7 @@ export class JellyseerrApi {
         if (inRange(status, 200, 299)) {
           if (data.version < "2.0.0") {
             const error = t(
-              "jellyseerr.toasts.jellyseerr_does_not_meet_requirements",
+              "jellyseerr.toasts.jellyseer_does_not_meet_requirements",
             );
             toast.error(error);
             throw Error(error);