Merge branch 'develop' into autoskip

Reconcile segment-skip with the diverged-but-ahead version on the
chromecast refactor branch:
- useSegmentSkipper: track auto-skip by segment identity instead of a
  bool, so it no longer re-triggers on pause/unpause; guard skipMode
  "none"; use a finite totalDuration check for Outro.
- Controls: playingRef avoids a stale-closure resume after a seek; only
  resume playback if it was actually playing; skipCredit noop fallback.
- segments: drop the dead try/catch around Promise.allSettled.
- Remove the obsolete useIntroSkipper / useCreditSkipper hooks (177 dead
  lines, superseded by useSegmentSkipper).

.claude/learned-facts.md

@@ -24,4 +24,4 @@ This file is auto-imported into CLAUDE.md and loaded at the start of each sessio
 
 - **Mark as played flow**: The "mark as played" button uses `PlayedStatus` component → `useMarkAsPlayed` hook → `usePlaybackManager.markItemPlayed()`. The hook does optimistic updates via `setQueriesData` before calling the API. Located in `components/PlayedStatus.tsx` and `hooks/useMarkAsPlayed.ts`. _(2026-01-10)_
 
-- **Stack screen header configuration**: Sub-pages under `(home)` need explicit `Stack.Screen` entries in `app/(auth)/(tabs)/(home)/_layout.tsx` with `headerTransparent: Platform.OS === "ios"`, `headerBlurEffect: "none"`, and a back button. Without this, pages show with wrong header styling. _(2026-01-10)_
+- **Stack screen header configuration**: Sub-pages under `(home)` need explicit `Stack.Screen` entries in `app/(auth)/(tabs)/(home)/_layout.tsx` with `headerTransparent: Platform.OS === "ios"`, `headerBlurEffect: "none"`, and a back button. Without this, pages show with wrong header styling. _(2026-01-10)_

.github/workflows/artifact-comment.yml

@@ -26,7 +26,7 @@ jobs:
 
     steps:
       - name: 🔍 Get PR and Artifacts
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9
         with:
           script: |
             // Check if we're running from a fork (more precise detection)
@@ -188,6 +188,17 @@ jobs:
             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({
@@ -216,13 +227,6 @@ jobs:
                   return; // Exit early
                 }
                 
-                // Map job names to our build targets
-                const jobMappings = {
-                  'Android Phone': ['🤖 Build Android APK (Phone)', 'build-android-phone'],
-                  'Android TV': ['🤖 Build Android APK (TV)', 'build-android-tv'],  
-                  'iOS Phone': ['🍎 Build iOS IPA (Phone)', 'build-ios-phone']
-                };
-                
                 // Create individual status for each job
                 for (const [platform, jobNames] of Object.entries(jobMappings)) {
                   const job = jobs.jobs.find(j => 
@@ -236,7 +240,9 @@ jobs:
                       conclusion: job.conclusion,
                       url: job.html_url,
                       runId: latestAppsRun.id,
-                      created_at: job.started_at || latestAppsRun.created_at
+                      created_at: job.started_at || latestAppsRun.created_at,
+                      started_at: job.started_at,
+                      completed_at: job.completed_at
                     };
                     console.log(`Mapped ${platform} to job: ${job.name} (${job.status}/${job.conclusion || 'none'})`);
                   } else {
@@ -247,22 +253,30 @@ jobs:
                       conclusion: latestAppsRun.conclusion,
                       url: latestAppsRun.html_url,
                       runId: latestAppsRun.id,
-                      created_at: latestAppsRun.created_at
+                      created_at: latestAppsRun.created_at,
+                      started_at: latestAppsRun.run_started_at,
+                      completed_at: latestAppsRun.updated_at
                     };
                   }
                 }
                 
               } catch (error) {
                 console.log(`Failed to get jobs for run ${latestAppsRun.id}:`, error.message);
-                // Fallback to workflow-level status
+                // Fallback to workflow-level status for every build target.
-                buildStatuses['Android Phone'] = buildStatuses['Android TV'] = buildStatuses['iOS Phone'] = {
+                // Keys must match jobMappings / buildTargets statusKey values.
+                const fallbackStatus = {
                   name: latestAppsRun.name,
                   status: latestAppsRun.status,
                   conclusion: latestAppsRun.conclusion,
                   url: latestAppsRun.html_url,
                   runId: latestAppsRun.id,
-                  created_at: latestAppsRun.created_at
+                  created_at: latestAppsRun.created_at,
+                  started_at: latestAppsRun.run_started_at,
+                  completed_at: latestAppsRun.updated_at
                 };
+                for (const platform of Object.keys(jobMappings)) {
+                  buildStatuses[platform] = fallbackStatus;
+                }
               }
               
               // Collect artifacts if any job has completed successfully
@@ -353,10 +367,12 @@ jobs:
 
             // Process each expected build target individually
             const buildTargets = [
-              { name: 'Android Phone', platform: '🤖', device: '📱', statusKey: 'Android Phone', artifactPattern: /android.*phone/i },
+              { name: 'Android Phone', platform: '🤖', device: '📱 Phone', statusKey: 'Android Phone', artifactPattern: /android.*phone/i },
-              { name: 'Android TV', platform: '🤖', device: '📺', statusKey: 'Android TV', artifactPattern: /android.*tv/i },
+              { name: 'Android TV', platform: '🤖', device: '📺 TV', statusKey: 'Android TV', artifactPattern: /android.*tv/i },
-              { name: 'iOS Phone', platform: '🍎', device: '📱', statusKey: 'iOS Phone', artifactPattern: /ios.*phone/i },
+              { name: 'iOS', platform: '🍎', device: '📱 Phone', statusKey: 'iOS', artifactPattern: /ios.*phone.*ipa(?!.*unsigned)/i },
-              { name: 'iOS TV', platform: '🍎', device: '📺', statusKey: 'iOS TV', artifactPattern: /ios.*tv/i }
+              { name: 'iOS Unsigned', platform: '🍎', device: '📱 Phone Unsigned', statusKey: 'iOS Unsigned', artifactPattern: /ios.*phone.*unsigned/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 }
             ];
 
             for (const target of buildTargets) {
@@ -371,16 +387,31 @@ jobs:
               let status = '⏳ Pending';
               let downloadLink = '*Waiting for build...*';
 
-              // Special case for iOS TV - show as disabled
+              // tvOS builds are temporarily disabled until feat/tv-interface
-              if (target.name === 'iOS TV') {
+              // is merged - show them as disabled instead of stuck pending.
+              if (target.name === 'tvOS' || target.name === 'tvOS Unsigned') {
                 status = '💤 Disabled';
-                downloadLink = '*Disabled for now*';
+                downloadLink = '*Disabled until feat/tv-interface is merged*';
               } else if (matchingStatus) {
                 if (matchingStatus.conclusion === 'success' && matchingArtifact) {
                   status = '✅ Complete';
                   const directLink = `https://github.com/${context.repo.owner}/${context.repo.repo}/actions/runs/${matchingArtifact.workflow_run.id}/artifacts/${matchingArtifact.id}`;
                   const fileType = target.name.includes('Android') ? 'APK' : 'IPA';
-                  downloadLink = `[📥 Download ${fileType}](${directLink})`;
+                  
+                  // Format file size
+                  const sizeInMB = (matchingArtifact.size_in_bytes / (1024 * 1024)).toFixed(1);
+                  const sizeInfo = `(${sizeInMB} MB)`;
+                  
+                  // Calculate build duration
+                  let durationInfo = '';
+                  if (matchingStatus.started_at && matchingStatus.completed_at) {
+                    const durationMs = new Date(matchingStatus.completed_at) - new Date(matchingStatus.started_at);
+                    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})`;
                   downloadLink = '*Build failed*';
@@ -408,7 +439,7 @@ jobs:
                 }
               }
 
-              commentBody += `| ${target.platform} ${target.name.split(' ')[0]} | ${target.device} ${target.name.split(' ')[1]} | ${status} | ${downloadLink} |\n`;
+              commentBody += `| ${target.platform} ${target.name} | ${target.device} | ${status} | ${downloadLink} |\n`;
             }
 
             commentBody += `\n`;

.github/workflows/build-apps.yml

@@ -20,8 +20,20 @@ jobs:
       contents: read
 
     steps:
+      - name: 🗑️ Free Disk Space
+        uses: BRAINSia/free-disk-space@7048ffbf50819342ac964ef3998a51c2564a8a75 # v2.1.3
+        with:
+          tool-cache: false
+          mandb: true
+          android: false
+          dotnet: true
+          haskell: true
+          large-packages: true
+          docker-images: true
+          swap-storage: false
+
       - name: 📥 Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -29,12 +41,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -48,7 +60,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: |
             ~/.gradle/caches
@@ -61,7 +73,7 @@ jobs:
         run: bun run prebuild
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -76,7 +88,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: streamyfin-android-phone-apk-${{ env.DATE_TAG }}
           path: |
@@ -91,8 +103,20 @@ jobs:
       contents: read
 
     steps:
+      - name: 🗑️ Free Disk Space
+        uses: BRAINSia/free-disk-space@7048ffbf50819342ac964ef3998a51c2564a8a75 # v2.1.3
+        with:
+          tool-cache: false
+          mandb: true
+          android: false
+          dotnet: true
+          haskell: true
+          large-packages: true
+          docker-images: true
+          swap-storage: false
+
       - name: 📥 Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -100,12 +124,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -119,7 +143,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: |
             ~/.gradle/caches
@@ -132,7 +156,7 @@ jobs:
         run: bun run prebuild:tv
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -147,7 +171,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: streamyfin-android-tv-apk-${{ env.DATE_TAG }}
           path: |
@@ -163,7 +187,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -171,12 +195,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
@@ -192,20 +216,17 @@ jobs:
         run: bun run prebuild
 
       - name: 🔧 Setup Xcode
-        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
+        uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
         with:
-          xcode-version: "26.0.1"
+          xcode-version: "26.2"
 
       - name: 🏗️ Setup EAS
-        uses: expo/expo-github-action@main
+        uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main
         with:
           eas-version: latest
           token: ${{ secrets.EXPO_TOKEN }}
           eas-cache: true
 
-      - name: ⚙️ Ensure iOS SDKs installed
-        run: xcodebuild -downloadPlatform iOS
-
       - name: 🚀 Build iOS app
         env:
           EXPO_TV: 0
@@ -215,76 +236,190 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload IPA artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: streamyfin-ios-phone-ipa-${{ env.DATE_TAG }}
           path: build-*.ipa
           retention-days: 7
 
-  # Disabled for now - uncomment when ready to build iOS TV
+  build-ios-phone-unsigned:
-  # build-ios-tv:
+    if: (!contains(github.event.head_commit.message, '[skip ci]'))
-  #   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
-  #   runs-on: macos-26
+    name: 🍎 Build iOS IPA (Phone - Unsigned)
-  #   name: 🍎 Build iOS IPA (TV)
+    permissions:
-  #   permissions:
+      contents: read
-  #     contents: read
+
-  #
+    steps:
-  #   steps:
+      - name: 📥 Checkout code
-  #     - name: 📥 Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-  #       uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.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@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
+        with:
-  #       with:
+          bun-version: latest
-  #         bun-version: latest
+
-  #
+      - name: 💾 Cache Bun dependencies
-  #     - name: 💾 Cache Bun dependencies
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-  #       uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        with:
-  #       with:
+          path: ~/.bun/install/cache
-  #         path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
-  #         key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          restore-keys: |
-  #         restore-keys: |
+            ${{ runner.os }}-bun-cache
-  #           ${{ runner.os }}-bun-cache
+
-  #
+      - name: 📦 Install dependencies and reload submodules
-  #     - name: 📦 Install dependencies and reload submodules
+        run: |
-  #       run: |
+          bun install --frozen-lockfile
-  #         bun install --frozen-lockfile
+          bun run submodule-reload
-  #         bun run submodule-reload
+
-  #
+      - name: 🛠️ Generate project files
-  #     - name: 🛠️ Generate project files
+        run: bun run prebuild
-  #       run: bun run prebuild:tv
+
-  #
+      - name: 🔧 Setup Xcode
-  #     - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
-  #       uses: maxim-lobanov/setup-xcode@v1
+        with:
-  #       with:
+          xcode-version: "26.2"
-  #         xcode-version: '26.0.1'
+
-  #
+      - name: 🚀 Build iOS app
-  #     - name: 🏗️ Setup EAS
+        env:
-  #       uses: expo/expo-github-action@main
+          EXPO_TV: 0
-  #       with:
+        run: bun run ios:unsigned-build ${{ github.event_name == 'pull_request' && '-- --verbose' || '' }}
-  #         eas-version: latest
+
-  #         token: ${{ secrets.EXPO_TOKEN }}
+      - name: 📅 Set date tag
-  #         eas-cache: true
+        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
-  #
+
-  #     - name: ⚙️ Ensure tvOS SDKs installed
+      - name: 📤 Upload IPA artifact
-  #       run: xcodebuild -downloadPlatform tvOS
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-  #
+        with:
-  #     - name: 🚀 Build iOS app
+          name: streamyfin-ios-phone-unsigned-ipa-${{ env.DATE_TAG }}
-  #       env:
+          path: build/*.ipa
-  #         EXPO_TV: 1
+          retention-days: 7
-  #       run: eas build -p ios --local --non-interactive
+
-  #
+  build-ios-tv:
-  #     - name: 📅 Set date tag
+    # Temporarily disabled until feat/tv-interface is merged (TV UI not ready).
-  #       run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
+    # Re-enable by removing the `false &&` prefix 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'))
-  #     - name: 📤 Upload IPA artifact
+    runs-on: macos-26
-  #       uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+    name: 🍎 Build tvOS IPA
-  #       with:
+    permissions:
-  #         name: streamyfin-ios-tv-ipa-${{ env.DATE_TAG }}
+      contents: read
-  #         path: build-*.ipa
+
-  #         retention-days: 7
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          fetch-depth: 0
+          submodules: recursive
+          show-progress: false
+
+      - name: 🍞 Setup Bun
+        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-cache
+
+      - name: 📦 Install dependencies and reload submodules
+        run: |
+          bun install --frozen-lockfile
+          bun run submodule-reload
+
+      - name: 🛠️ Generate project files
+        run: bun run prebuild:tv
+
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
+        with:
+          xcode-version: "26.2"
+
+      - name: 🏗️ Setup EAS
+        uses: expo/expo-github-action@main
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+          eas-cache: true
+
+      - name: 🚀 Build iOS app
+        env:
+          EXPO_TV: 1
+        run: eas build -p ios --local --non-interactive
+
+      - name: 📅 Set date tag
+        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
+
+      - name: 📤 Upload IPA artifact
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        with:
+          name: streamyfin-ios-tv-ipa-${{ env.DATE_TAG }}
+          path: build-*.ipa
+          retention-days: 7
+
+  build-ios-tv-unsigned:
+    # Temporarily disabled until feat/tv-interface is merged (TV UI not ready).
+    # Re-enable by removing the `false &&` prefix below.
+    if: false && (!contains(github.event.head_commit.message, '[skip ci]'))
+    runs-on: macos-26
+    name: 🍎 Build tvOS IPA (Unsigned)
+    permissions:
+      contents: read
+
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          fetch-depth: 0
+          submodules: recursive
+          show-progress: false
+
+      - name: 🍞 Setup Bun
+        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-cache
+
+      - name: 📦 Install dependencies and reload submodules
+        run: |
+          bun install --frozen-lockfile
+          bun run submodule-reload
+
+      - name: 🛠️ Generate project files
+        run: bun run prebuild:tv
+
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
+        with:
+          xcode-version: "26.2"
+
+      - name: 🚀 Build iOS app
+        env:
+          EXPO_TV: 1
+        run: bun run ios:unsigned-build:tv ${{ github.event_name == 'pull_request' && '-- --verbose' || '' }}
+
+      - name: 📅 Set date tag
+        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
+
+      - name: 📤 Upload IPA artifact
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        with:
+          name: streamyfin-ios-tv-unsigned-ipa-${{ env.DATE_TAG }}
+          path: build/*.ipa
+          retention-days: 7

.github/workflows/check-lockfile.yml

@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           show-progress: false
@@ -27,12 +27,12 @@ jobs:
           fetch-depth: 0
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: |
             ~/.bun/install/cache

.github/workflows/ci-codeql.yml

@@ -24,16 +24,16 @@ jobs:
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
+        uses: github/codeql-action/init@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended,security-and-quality
 
       - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
+        uses: github/codeql-action/autobuild@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
+        uses: github/codeql-action/analyze@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5

.github/workflows/crowdin.yml

@@ -23,12 +23,12 @@ jobs:
 
     steps:
       - name: 📥 Checkout Repository
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
 
       - name: 🌐 Sync Translations with Crowdin
-        uses: crowdin/github-action@60debf382ee245b21794321190ad0501db89d8c1 # v2.13.0
+        uses: crowdin/github-action@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
         with:
           upload_sources: true
           upload_translations: true

.github/workflows/linting.yml

@@ -25,7 +25,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - uses: marocchino/sticky-pull-request-comment@773744901bac0e8cbb5a0dc842800d45e9b2b405 # v2.9.4
+      - 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
@@ -39,7 +39,7 @@ jobs:
             ```
 
       - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
-        uses: marocchino/sticky-pull-request-comment@773744901bac0e8cbb5a0dc842800d45e9b2b405 # v2.9.4
+        uses: marocchino/sticky-pull-request-comment@0ea0beb66eb9baf113663a64ec522f60e49231c0 # v3.0.4
         with:
           header: pr-title-lint-error
           delete: true
@@ -51,13 +51,13 @@ jobs:
       contents: read
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
 
       - name: Dependency Review
-        uses: actions/dependency-review-action@3c4e3dcb1aa7874d2c16be7d79418e9b7efd6261 # v4.8.2
+        uses: actions/dependency-review-action@a1d282b36b6f3519aa1f3fc636f609c47dddb294 # v5.0.0
         with:
           fail-on-severity: high
           base-ref: ${{ github.event.pull_request.base.sha || 'develop' }}
@@ -69,14 +69,14 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: 🛒 Checkout repository
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           submodules: recursive
           fetch-depth: 0
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 
@@ -100,19 +100,19 @@ jobs:
 
     steps:
       - name: "📥 Checkout PR code"
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           submodules: recursive
           fetch-depth: 0
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version: '24.x'
 
       - name: "🍞 Setup Bun"
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 

.github/workflows/notification.yml

@@ -1,4 +1,5 @@
 name: 🛎️ Discord Notification
+permissions: {}
 
 on:
   pull_request:

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

@@ -18,17 +18,17 @@ jobs:
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version: '24.x'
           cache: 'npm'
 
       - name: 🔍 Extract minor version from app.json
         id: minor
-        uses: actions/github-script@main
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # main
         with:
           result-encoding: string
           script: |
@@ -54,7 +54,7 @@ jobs:
           dry_run: no-push
 
       - name: 📬 Commit and create pull request
-        uses: peter-evans/create-pull-request@98357b18bf14b5342f975ff684046ec3b2a07725 # v8.0.0
+        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
         with:
           add-paths: .github/ISSUE_TEMPLATE/bug_report.yml
           branch: ci-update-bug-report

.gitignore

@@ -66,7 +66,10 @@ streamyfin-4fec1-firebase-adminsdk.json
 
 # Version and Backup Files
 /version-backup-*
-modules/background-downloader/android/build/*
 /modules/sf-player/android/build
 /modules/music-controls/android/build
+modules/background-downloader/android/build/*
 /modules/mpv-player/android/build
+
+# ios:unsigned-build Artifacts
+build/

CLAUDE.md

@@ -77,6 +77,21 @@ bun run ios:install-metal-toolchain  # Fix "missing Metal Toolchain" build error
 - File-based routing in `app/` directory
 - Tab navigation: `(home)`, `(search)`, `(favorites)`, `(libraries)`, `(watchlists)`
 - Shared routes use parenthesized groups like `(home,libraries,search,favorites,watchlists)`
+- **IMPORTANT**: Always use `useAppRouter` from `@/hooks/useAppRouter` instead of `useRouter` from `expo-router`. This custom hook automatically handles offline mode state preservation across navigation:
+  ```typescript
+  // ✅ Correct
+  import useRouter from "@/hooks/useAppRouter";
+  const router = useRouter();
+  
+  // ❌ Never use this
+  import { useRouter } from "expo-router";
+  import { router } from "expo-router";
+  ```
+
+**Offline Mode**:
+- Use `OfflineModeProvider` from `@/providers/OfflineModeProvider` to wrap pages that support offline content
+- Use `useOfflineMode()` hook to check if current context is offline
+- The `useAppRouter` hook automatically injects `offline=true` param when navigating within an offline context
 
 **Providers** (wrapping order in `app/_layout.tsx`):
 1. JotaiProvider

README.md

@@ -5,6 +5,12 @@
   <img src="https://raw.githubusercontent.com/streamyfin/.github/refs/heads/main/streamyfin-github-banner.png" alt="Streamyfin" width="100%">
 </p>
 
+<p align="center">
+  <a href="https://discord.gg/aJvAYeycyY">
+    <img alt="Streamyfin Discord" src="https://img.shields.io/badge/Discord-Streamyfin-blue?style=flat-square&logo=discord">
+  </a>
+</p>
+
 **Streamyfin is a user-friendly Jellyfin video streaming client built with Expo. Designed as an alternative to other Jellyfin clients, it aims to offer a smooth and reliable streaming experience. We hope you'll find it a valuable addition to your media streaming toolbox.**
 
 ---

app.json

@@ -17,6 +17,7 @@
         "NSMicrophoneUsageDescription": "The app needs access to your microphone.",
         "UIBackgroundModes": ["audio", "fetch"],
         "NSLocalNetworkUsageDescription": "The app needs access to your local network to connect to your Jellyfin server.",
+        "NSLocationWhenInUseUsageDescription": "Streamyfin uses your location to detect your home WiFi network for automatic local server switching.",
         "NSAppTransportSecurity": {
           "NSAllowsArbitraryLoads": true
         },
@@ -28,6 +29,9 @@
         "usesNonExemptEncryption": false
       },
       "supportsTablet": true,
+      "entitlements": {
+        "com.apple.developer.networking.wifi-info": true
+      },
       "bundleIdentifier": "com.fredrikburmester.streamyfin",
       "icon": "./assets/images/icon-ios-liquid-glass.icon",
       "appleTeamId": "MWD5K362T8"
@@ -44,7 +48,8 @@
       "permissions": [
         "android.permission.FOREGROUND_SERVICE",
         "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK",
-        "android.permission.WRITE_SETTINGS"
+        "android.permission.WRITE_SETTINGS",
+        "android.permission.ACCESS_FINE_LOCATION"
       ],
       "blockedPermissions": ["android.permission.ACTIVITY_RECOGNITION"],
       "googleServicesFile": "./google-services.json"

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

@@ -1,9 +1,10 @@
 import { Feather, Ionicons } from "@expo/vector-icons";
-import { Stack, useRouter } from "expo-router";
+import { Stack } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { Pressable } from "react-native-gesture-handler";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
+import useRouter from "@/hooks/useAppRouter";
 
 const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");
 
@@ -57,25 +58,6 @@ export default function IndexLayout() {
           ),
         }}
       />
-      <Stack.Screen
-        name='downloads/[seriesId]'
-        options={{
-          headerShown: true,
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          title: t("home.downloads.tvseries"),
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
-        }}
-      />
       <Stack.Screen
         name='sessions/index'
         options={{
@@ -329,6 +311,24 @@ export default function IndexLayout() {
           ),
         }}
       />
+      <Stack.Screen
+        name='settings/network/page'
+        options={{
+          title: t("home.settings.network.title"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
+        }}
+      />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={options} />
       ))}

app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx

@@ -1,181 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { FlashList } from "@shopify/flash-list";
-import { router, useLocalSearchParams, useNavigation } from "expo-router";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Alert, Platform, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { EpisodeCard } from "@/components/downloads/EpisodeCard";
-import {
-  SeasonDropdown,
-  type SeasonIndexState,
-} from "@/components/series/SeasonDropdown";
-import { useDownload } from "@/providers/DownloadProvider";
-import { storage } from "@/utils/mmkv";
-
-export default function page() {
-  const navigation = useNavigation();
-  const local = useLocalSearchParams();
-  const { seriesId, episodeSeasonIndex } = local as {
-    seriesId: string;
-    episodeSeasonIndex: number | string | undefined;
-  };
-
-  const [seasonIndexState, setSeasonIndexState] = useState<SeasonIndexState>(
-    {},
-  );
-  const { downloadedItems, deleteItems } = useDownload();
-  const insets = useSafeAreaInsets();
-
-  const series = useMemo(() => {
-    try {
-      return (
-        downloadedItems
-          ?.filter((f) => f.item.SeriesId === seriesId)
-          ?.sort(
-            (a, b) =>
-              (a.item.ParentIndexNumber ?? 0) - (b.item.ParentIndexNumber ?? 0),
-          ) || []
-      );
-    } catch {
-      return [];
-    }
-  }, [downloadedItems, seriesId]);
-
-  // Group episodes by season in a single pass
-  const seasonGroups = useMemo(() => {
-    const groups: Record<number, BaseItemDto[]> = {};
-
-    series.forEach((episode) => {
-      const seasonNumber = episode.item.ParentIndexNumber;
-      if (seasonNumber !== undefined && seasonNumber !== null) {
-        if (!groups[seasonNumber]) {
-          groups[seasonNumber] = [];
-        }
-        groups[seasonNumber].push(episode.item);
-      }
-    });
-
-    // Sort episodes within each season
-    Object.values(groups).forEach((episodes) => {
-      episodes.sort((a, b) => (a.IndexNumber || 0) - (b.IndexNumber || 0));
-    });
-
-    return groups;
-  }, [series]);
-
-  // Get unique seasons (just the season numbers, sorted)
-  const uniqueSeasons = useMemo(() => {
-    const seasonNumbers = Object.keys(seasonGroups)
-      .map(Number)
-      .sort((a, b) => a - b);
-    return seasonNumbers.map((seasonNum) => seasonGroups[seasonNum][0]); // First episode of each season
-  }, [seasonGroups]);
-
-  const seasonIndex =
-    seasonIndexState[series?.[0]?.item?.ParentId ?? ""] ??
-    episodeSeasonIndex ??
-    series?.[0]?.item?.ParentIndexNumber ??
-    "";
-
-  const groupBySeason = useMemo<BaseItemDto[]>(() => {
-    return seasonGroups[Number(seasonIndex)] ?? [];
-  }, [seasonGroups, seasonIndex]);
-
-  const initialSeasonIndex = useMemo(
-    () =>
-      groupBySeason?.[0]?.ParentIndexNumber ??
-      series?.[0]?.item?.ParentIndexNumber,
-    [groupBySeason, series],
-  );
-
-  useEffect(() => {
-    if (series.length > 0) {
-      navigation.setOptions({
-        title: series[0].item.SeriesName,
-      });
-    } else {
-      storage.remove(seriesId);
-      router.back();
-    }
-  }, [series]);
-
-  const deleteSeries = useCallback(() => {
-    Alert.alert(
-      "Delete season",
-      "Are you sure you want to delete the entire season?",
-      [
-        {
-          text: "Cancel",
-          style: "cancel",
-        },
-        {
-          text: "Delete",
-          onPress: () =>
-            deleteItems(
-              groupBySeason
-                .map((item) => item.Id)
-                .filter((id) => id !== undefined),
-            ),
-          style: "destructive",
-        },
-      ],
-    );
-  }, [groupBySeason, deleteItems]);
-
-  const ListHeaderComponent = useCallback(() => {
-    if (series.length === 0) return null;
-
-    return (
-      <View className='flex flex-row items-center justify-start pb-2'>
-        <SeasonDropdown
-          item={series[0].item}
-          seasons={uniqueSeasons}
-          state={seasonIndexState}
-          initialSeasonIndex={initialSeasonIndex!}
-          onSelect={(season) => {
-            setSeasonIndexState((prev) => ({
-              ...prev,
-              [series[0].item.ParentId ?? ""]: season.ParentIndexNumber,
-            }));
-          }}
-        />
-        <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center ml-2'>
-          <Text className='text-xs font-bold'>{groupBySeason.length}</Text>
-        </View>
-        <View className='bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center ml-auto'>
-          <TouchableOpacity onPress={deleteSeries}>
-            <Ionicons name='trash' size={20} color='white' />
-          </TouchableOpacity>
-        </View>
-      </View>
-    );
-  }, [
-    series,
-    uniqueSeasons,
-    seasonIndexState,
-    initialSeasonIndex,
-    groupBySeason,
-    deleteSeries,
-  ]);
-
-  return (
-    <View className='flex-1'>
-      <FlashList
-        key={seasonIndex}
-        data={groupBySeason}
-        renderItem={({ item }) => <EpisodeCard item={item} />}
-        keyExtractor={(item, index) => item.Id ?? `episode-${index}`}
-        ListHeaderComponent={ListHeaderComponent}
-        contentInsetAdjustmentBehavior='automatic'
-        contentContainerStyle={{
-          paddingHorizontal: 16,
-          paddingLeft: insets.left + 16,
-          paddingRight: insets.right + 16,
-          paddingTop: Platform.OS === "android" ? 10 : 8,
-        }}
-      />
-    </View>
-  );
-}

app/(auth)/(tabs)/(home)/downloads/index.tsx

@@ -1,5 +1,5 @@
 import { BottomSheetModal } from "@gorhom/bottom-sheet";
-import { useNavigation, useRouter } from "expo-router";
+import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,8 +13,10 @@ import ActiveDownloads from "@/components/downloads/ActiveDownloads";
 import { DownloadSize } from "@/components/downloads/DownloadSize";
 import { MovieCard } from "@/components/downloads/MovieCard";
 import { SeriesCard } from "@/components/downloads/SeriesCard";
+import useRouter from "@/hooks/useAppRouter";
 import { useDownload } from "@/providers/DownloadProvider";
 import { type DownloadedItem } from "@/providers/Downloads/types";
+import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
 import { queueAtom } from "@/utils/atoms/queue";
 import { writeToLog } from "@/utils/log";
 
@@ -161,145 +163,99 @@ export default function page() {
     );
 
   return (
-    <ScrollView
+    <OfflineModeProvider isOffline={true}>
-      showsVerticalScrollIndicator={false}
+      <ScrollView
-      contentInsetAdjustmentBehavior='automatic'
+        showsVerticalScrollIndicator={false}
-    >
+        contentInsetAdjustmentBehavior='automatic'
-      <View style={{ paddingTop: Platform.OS === "android" ? 17 : 0 }}>
+      >
-        <View className='mb-4 flex flex-col space-y-4 px-4'>
+        <View style={{ paddingTop: Platform.OS === "android" ? 17 : 0 }}>
-          {/* Queue card - hidden */}
+          <View className='mb-4 flex flex-col space-y-4 px-4'>
-          {/* <View className='bg-neutral-900 p-4 rounded-2xl'>
+            <ActiveDownloads />
+          </View>
+
+          {movies.length > 0 && (
+            <View className='mb-4'>
+              <View className='flex flex-row items-center justify-between mb-2 px-4'>
                 <Text className='text-lg font-bold'>
-                  {t("home.downloads.queue")}
+                  {t("home.downloads.movies")}
                 </Text>
-                <Text className='text-xs opacity-70 text-red-600'>
+                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                  {t("home.downloads.queue_hint")}
+                  <Text className='text-xs font-bold'>{movies?.length}</Text>
-                </Text>
+                </View>
-                <View className='flex flex-col space-y-2 mt-2'>
+              </View>
-                  {queue.map((q, index) => (
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                    <TouchableOpacity
+                <View className='px-4 flex flex-row'>
-                      onPress={() =>
+                  {movies?.map((item) => (
-                        router.push(`/(auth)/items/page?id=${q.item.Id}`)
+                    <TouchableItemRouter item={item.item} key={item.item.Id}>
-                      }
+                      <MovieCard item={item.item} />
-                      className='relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between'
+                    </TouchableItemRouter>
-                      key={index}
-                    >
-                      <View>
-                        <Text className='font-semibold'>{q.item.Name}</Text>
-                        <Text className='text-xs opacity-50'>
-                          {q.item.Type}
-                        </Text>
-                      </View>
-                      <TouchableOpacity
-                        onPress={() => {
-                          removeProcess(q.id);
-                          setQueue((prev) => {
-                            if (!prev) return [];
-                            return [...prev.filter((i) => i.id !== q.id)];
-                          });
-                        }}
-                      >
-                        <Ionicons name='close' size={24} color='red' />
-                      </TouchableOpacity>
-                    </TouchableOpacity>
                   ))}
                 </View>
-
+              </ScrollView>
-                {queue.length === 0 && (
-                  <Text className='opacity-50'>
-                    {t("home.downloads.no_items_in_queue")}
-                  </Text>
-                )}
-              </View> */}
-
-          <ActiveDownloads />
-        </View>
-
-        {movies.length > 0 && (
-          <View className='mb-4'>
-            <View className='flex flex-row items-center justify-between mb-2 px-4'>
-              <Text className='text-lg font-bold'>
-                {t("home.downloads.movies")}
-              </Text>
-              <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                <Text className='text-xs font-bold'>{movies?.length}</Text>
-              </View>
             </View>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          )}
-              <View className='px-4 flex flex-row'>
+          {groupedBySeries.length > 0 && (
-                {movies?.map((item) => (
+            <View className='mb-4'>
-                  <TouchableItemRouter
+              <View className='flex flex-row items-center justify-between mb-2 px-4'>
-                    item={item.item}
+                <Text className='text-lg font-bold'>
-                    isOffline
+                  {t("home.downloads.tvseries")}
-                    key={item.item.Id}
-                  >
-                    <MovieCard item={item.item} />
-                  </TouchableItemRouter>
-                ))}
-              </View>
-            </ScrollView>
-          </View>
-        )}
-        {groupedBySeries.length > 0 && (
-          <View className='mb-4'>
-            <View className='flex flex-row items-center justify-between mb-2 px-4'>
-              <Text className='text-lg font-bold'>
-                {t("home.downloads.tvseries")}
-              </Text>
-              <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                <Text className='text-xs font-bold'>
-                  {groupedBySeries?.length}
                 </Text>
+                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                  <Text className='text-xs font-bold'>
+                    {groupedBySeries?.length}
+                  </Text>
+                </View>
               </View>
-            </View>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className='px-4 flex flex-row'>
-              <View className='px-4 flex flex-row'>
+                  {groupedBySeries?.map((items) => (
-                {groupedBySeries?.map((items) => (
+                    <View
-                  <View className='mb-2 last:mb-0' key={items[0].item.SeriesId}>
+                      className='mb-2 last:mb-0'
-                    <SeriesCard
-                      items={items.map((i) => i.item)}
                       key={items[0].item.SeriesId}
-                    />
+                    >
-                  </View>
+                      <SeriesCard
-                ))}
+                        items={items.map((i) => i.item)}
-              </View>
+                        key={items[0].item.SeriesId}
-            </ScrollView>
+                      />
-          </View>
+                    </View>
-        )}
+                  ))}
-
+                </View>
-        {otherMedia.length > 0 && (
+              </ScrollView>
-          <View className='mb-4'>
-            <View className='flex flex-row items-center justify-between mb-2 px-4'>
-              <Text className='text-lg font-bold'>
-                {t("home.downloads.other_media")}
-              </Text>
-              <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                <Text className='text-xs font-bold'>{otherMedia?.length}</Text>
-              </View>
             </View>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          )}
-              <View className='px-4 flex flex-row'>
+
-                {otherMedia?.map((item) => (
+          {otherMedia.length > 0 && (
-                  <TouchableItemRouter
+            <View className='mb-4'>
-                    item={item.item}
+              <View className='flex flex-row items-center justify-between mb-2 px-4'>
-                    isOffline
+                <Text className='text-lg font-bold'>
-                    key={item.item.Id}
+                  {t("home.downloads.other_media")}
-                  >
+                </Text>
-                    <MovieCard item={item.item} />
+                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                  </TouchableItemRouter>
+                  <Text className='text-xs font-bold'>
-                ))}
+                    {otherMedia?.length}
+                  </Text>
+                </View>
               </View>
-            </ScrollView>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          </View>
+                <View className='px-4 flex flex-row'>
-        )}
+                  {otherMedia?.map((item) => (
-        {downloadedFiles?.length === 0 && (
+                    <TouchableItemRouter item={item.item} key={item.item.Id}>
-          <View className='flex px-4'>
+                      <MovieCard item={item.item} />
-            <Text className='opacity-50'>
+                    </TouchableItemRouter>
-              {t("home.downloads.no_downloaded_items")}
+                  ))}
-            </Text>
+                </View>
-          </View>
+              </ScrollView>
-        )}
+            </View>
-      </View>
+          )}
-    </ScrollView>
+          {downloadedFiles?.length === 0 && (
+            <View className='flex px-4'>
+              <Text className='opacity-50'>
+                {t("home.downloads.no_downloaded_items")}
+              </Text>
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </OfflineModeProvider>
   );
 }

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

@@ -1,4 +1,4 @@
-import { useNavigation, useRouter } from "expo-router";
+import { useNavigation } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
 import { useEffect } from "react";
@@ -11,6 +11,7 @@ import { AppLanguageSelector } from "@/components/settings/AppLanguageSelector";
 import { QuickConnect } from "@/components/settings/QuickConnect";
 import { StorageSettings } from "@/components/settings/StorageSettings";
 import { UserInfo } from "@/components/settings/UserInfo";
+import useRouter from "@/hooks/useAppRouter";
 import { useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 
 export default function settings() {
@@ -90,6 +91,11 @@ export default function settings() {
               showArrow
               title={t("home.settings.intro.title")}
             />
+            <ListItem
+              onPress={() => router.push("/settings/network/page")}
+              showArrow
+              title={t("home.settings.network.title")}
+            />
             <ListItem
               onPress={() => router.push("/settings/logs/page")}
               showArrow

app/(auth)/(tabs)/(home)/settings/logs/page.tsx

@@ -61,7 +61,10 @@ export default function Page() {
     setLoading(true);
     try {
       logsFile.write(JSON.stringify(filteredLogs));
-      await Sharing.shareAsync(logsFile.uri, { mimeType: "txt", UTI: "txt" });
+      await Sharing.shareAsync(logsFile.uri, {
+        mimeType: "text/plain",
+        UTI: "public.plain-text",
+      });
     } catch (e: any) {
       writeErrorLog("Something went wrong attempting to export", e);
     } finally {

app/(auth)/(tabs)/(home)/settings/network/page.tsx

@@ -0,0 +1,48 @@
+import { useAtomValue } from "jotai";
+import { useTranslation } from "react-i18next";
+import { Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { LocalNetworkSettings } from "@/components/settings/LocalNetworkSettings";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { storage } from "@/utils/mmkv";
+
+export default function NetworkSettingsPage() {
+  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
+  const api = useAtomValue(apiAtom);
+
+  const remoteUrl = storage.getString("serverUrl");
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+        paddingBottom: insets.bottom + 20,
+      }}
+    >
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <ListGroup title={t("home.settings.network.current_server")}>
+          <ListItem
+            title={t("home.settings.network.remote_url")}
+            subtitle={remoteUrl ?? t("home.settings.network.not_configured")}
+          />
+          <ListItem
+            title={t("home.settings.network.active_url")}
+            subtitle={api?.basePath ?? t("home.settings.network.not_connected")}
+          />
+        </ListGroup>
+
+        <View className='mt-4'>
+          <LocalNetworkSettings />
+        </View>
+      </View>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/segment-skip/page.tsx

@@ -0,0 +1,233 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useNavigation } from "expo-router";
+import { TFunction } from "i18next";
+import { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { useSettings } from "@/utils/atoms/settings";
+
+/**
+ * Factory function to create skip options for a specific segment type
+ * Reduces code duplication across all 5 segment types
+ */
+const useSkipOptions = (
+  settingKey:
+    | "skipIntro"
+    | "skipOutro"
+    | "skipRecap"
+    | "skipCommercial"
+    | "skipPreview",
+  settings: ReturnType<typeof useSettings>["settings"] | null,
+  updateSettings: ReturnType<typeof useSettings>["updateSettings"],
+  t: TFunction<"translation", undefined>,
+) => {
+  return useMemo(
+    () => [
+      {
+        options: SEGMENT_SKIP_OPTIONS(t).map((option) => ({
+          type: "radio" as const,
+          label: option.label,
+          value: option.value,
+          selected: option.value === settings?.[settingKey],
+          onPress: () => updateSettings({ [settingKey]: option.value }),
+        })),
+      },
+    ],
+    [settings?.[settingKey], updateSettings, t, settingKey],
+  );
+};
+
+export default function SegmentSkipPage() {
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  const { t } = useTranslation();
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    navigation.setOptions({
+      title: t("home.settings.other.segment_skip_settings"),
+    });
+  }, [navigation, t]);
+
+  const skipIntroOptions = useSkipOptions(
+    "skipIntro",
+    settings,
+    updateSettings,
+    t,
+  );
+  const skipOutroOptions = useSkipOptions(
+    "skipOutro",
+    settings,
+    updateSettings,
+    t,
+  );
+  const skipRecapOptions = useSkipOptions(
+    "skipRecap",
+    settings,
+    updateSettings,
+    t,
+  );
+  const skipCommercialOptions = useSkipOptions(
+    "skipCommercial",
+    settings,
+    updateSettings,
+    t,
+  );
+  const skipPreviewOptions = useSkipOptions(
+    "skipPreview",
+    settings,
+    updateSettings,
+    t,
+  );
+
+  if (!settings) return null;
+
+  return (
+    <DisabledSetting disabled={false} className='px-4'>
+      <ListGroup>
+        <ListItem
+          title={t("home.settings.other.skip_intro")}
+          subtitle={t("home.settings.other.skip_intro_description")}
+          disabled={pluginSettings?.skipIntro?.locked}
+        >
+          <PlatformDropdown
+            groups={skipIntroOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(`home.settings.other.segment_skip_${settings.skipIntro}`)}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.skip_intro")}
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.other.skip_outro")}
+          subtitle={t("home.settings.other.skip_outro_description")}
+          disabled={pluginSettings?.skipOutro?.locked}
+        >
+          <PlatformDropdown
+            groups={skipOutroOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(`home.settings.other.segment_skip_${settings.skipOutro}`)}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.skip_outro")}
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.other.skip_recap")}
+          subtitle={t("home.settings.other.skip_recap_description")}
+          disabled={pluginSettings?.skipRecap?.locked}
+        >
+          <PlatformDropdown
+            groups={skipRecapOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(`home.settings.other.segment_skip_${settings.skipRecap}`)}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.skip_recap")}
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.other.skip_commercial")}
+          subtitle={t("home.settings.other.skip_commercial_description")}
+          disabled={pluginSettings?.skipCommercial?.locked}
+        >
+          <PlatformDropdown
+            groups={skipCommercialOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(
+                    `home.settings.other.segment_skip_${settings.skipCommercial}`,
+                  )}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.skip_commercial")}
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.other.skip_preview")}
+          subtitle={t("home.settings.other.skip_preview_description")}
+          disabled={pluginSettings?.skipPreview?.locked}
+        >
+          <PlatformDropdown
+            groups={skipPreviewOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(
+                    `home.settings.other.segment_skip_${settings.skipPreview}`,
+                  )}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.skip_preview")}
+          />
+        </ListItem>
+      </ListGroup>
+    </DisabledSetting>
+  );
+}
+
+const SEGMENT_SKIP_OPTIONS = (
+  t: TFunction<"translation", undefined>,
+): Array<{
+  label: string;
+  value: "none" | "ask" | "auto";
+}> => [
+  {
+    label: t("home.settings.other.segment_skip_auto"),
+    value: "auto",
+  },
+  {
+    label: t("home.settings.other.segment_skip_ask"),
+    value: "ask",
+  },
+  {
+    label: t("home.settings.other.segment_skip_none"),
+    value: "none",
+  },
+];

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/items/page.tsx

@@ -13,6 +13,7 @@ import Animated, {
 import { Text } from "@/components/common/Text";
 import { ItemContent } from "@/components/ItemContent";
 import { useItemQuery } from "@/hooks/useItemQuery";
+import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
 
 const Page: React.FC = () => {
   const { id } = useLocalSearchParams() as { id: string };
@@ -75,39 +76,35 @@ const Page: React.FC = () => {
     );
 
   return (
-    <View className='flex flex-1 relative'>
+    <OfflineModeProvider isOffline={isOffline}>
-      <Animated.View
+      <View className='flex flex-1 relative'>
-        pointerEvents={"none"}
+        <Animated.View
-        style={[animatedStyle]}
+          pointerEvents={"none"}
-        className='absolute top-0 left-0 flex flex-col items-start h-screen w-screen px-4 z-50 bg-black'
+          style={[animatedStyle]}
-      >
+          className='absolute top-0 left-0 flex flex-col items-start h-screen w-screen px-4 z-50 bg-black'
-        <View
+        >
-          style={{
+          <View
-            height: item?.Type === "Episode" ? 300 : 450,
+            style={{
-          }}
+              height: item?.Type === "Episode" ? 300 : 450,
-          className='bg-transparent rounded-lg mb-4 w-full'
+            }}
-        />
+            className='bg-transparent rounded-lg mb-4 w-full'
-        <View className='h-6 bg-neutral-900 rounded mb-4 w-14' />
+          />
-        <View className='h-10 bg-neutral-900 rounded-lg mb-2 w-1/2' />
+          <View className='h-6 bg-neutral-900 rounded mb-4 w-14' />
-        <View className='h-3 bg-neutral-900 rounded mb-3 w-8' />
+          <View className='h-10 bg-neutral-900 rounded-lg mb-2 w-1/2' />
-        <View className='flex flex-row space-x-1 mb-8'>
+          <View className='h-3 bg-neutral-900 rounded mb-3 w-8' />
-          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+          <View className='flex flex-row space-x-1 mb-8'>
-          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+            <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
-          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+            <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
-        </View>
+            <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
-        <View className='h-3 bg-neutral-900 rounded w-2/3 mb-1' />
+          </View>
-        <View className='h-10 bg-neutral-900 rounded-lg w-full mb-2' />
+          <View className='h-3 bg-neutral-900 rounded w-2/3 mb-1' />
-        <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
+          <View className='h-10 bg-neutral-900 rounded-lg w-full mb-2' />
-        <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
+          <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
-      </Animated.View>
+          <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
-      {item && (
+        </Animated.View>
-        <ItemContent
+        {item && <ItemContent item={item} itemWithSources={itemWithSources} />}
-          item={item}
+      </View>
-          isOffline={isOffline}
+    </OfflineModeProvider>
-          itemWithSources={itemWithSources}
-        />
-      )}
-    </View>
   );
 };
 

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/jellyseerr/page.tsx

@@ -8,7 +8,7 @@ import {
 } from "@gorhom/bottom-sheet";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation, useRouter } from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -27,6 +27,7 @@ import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { JellyserrRatings } from "@/components/Ratings";
 import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
 import { ItemActions } from "@/components/series/SeriesActions";
+import useRouter from "@/hooks/useAppRouter";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
 import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/series/[id].tsx

@@ -14,86 +14,124 @@ import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { NextUp } from "@/components/series/NextUp";
 import { SeasonPicker } from "@/components/series/SeasonPicker";
 import { SeriesHeader } from "@/components/series/SeriesHeader";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
+import {
+  buildOfflineSeriesFromEpisodes,
+  getDownloadedEpisodesForSeries,
+} from "@/utils/downloads/offline-series";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { storage } from "@/utils/mmkv";
 
 const page: React.FC = () => {
   const navigation = useNavigation();
   const { t } = useTranslation();
   const params = useLocalSearchParams();
-  const { id: seriesId, seasonIndex } = params as {
+  const {
+    id: seriesId,
+    seasonIndex,
+    offline: offlineParam,
+  } = params as {
     id: string;
     seasonIndex: string;
+    offline?: string;
   };
 
+  const isOffline = offlineParam === "true";
+
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
+  const { getDownloadedItems, downloadedItems } = useDownload();
 
+  // For offline mode, construct series data from downloaded episodes
+  // Include downloadedItems.length so query refetches when items are deleted
   const { data: item } = useQuery({
-    queryKey: ["series", seriesId],
+    queryKey: ["series", seriesId, isOffline, downloadedItems.length],
-    queryFn: async () =>
+    queryFn: async () => {
-      await getUserItemData({
+      if (isOffline) {
+        return buildOfflineSeriesFromEpisodes(getDownloadedItems(), seriesId);
+      }
+      return await getUserItemData({
         api,
         userId: user?.Id,
         itemId: seriesId,
-      }),
+      });
-    staleTime: 60 * 1000,
+    },
+    staleTime: isOffline ? Infinity : 60 * 1000,
+    enabled: isOffline || (!!api && !!user?.Id),
   });
 
-  const backdropUrl = useMemo(
+  // For offline mode, use stored base64 image
-    () =>
+  const base64Image = useMemo(() => {
-      getBackdropUrl({
+    if (isOffline) {
-        api,
+      return storage.getString(seriesId);
-        item,
+    }
-        quality: 90,
+    return null;
-        width: 1000,
+  }, [isOffline, seriesId]);
-      }),
-    [item],
-  );
 
-  const logoUrl = useMemo(
+  const backdropUrl = useMemo(() => {
-    () =>
+    if (isOffline && base64Image) {
-      getLogoImageUrlById({
+      return `data:image/jpeg;base64,${base64Image}`;
-        api,
+    }
-        item,
+    return getBackdropUrl({
-      }),
+      api,
-    [item],
+      item,
-  );
+      quality: 90,
+      width: 1000,
+    });
+  }, [isOffline, base64Image, api, item]);
+
+  const logoUrl = useMemo(() => {
+    if (isOffline) {
+      return null; // No logo in offline mode
+    }
+    return getLogoImageUrlById({
+      api,
+      item,
+    });
+  }, [isOffline, api, item]);
 
   const { data: allEpisodes, isLoading } = useQuery({
-    queryKey: ["AllEpisodes", item?.Id],
+    queryKey: ["AllEpisodes", seriesId, isOffline, downloadedItems.length],
     queryFn: async () => {
-      if (!api || !user?.Id || !item?.Id) return [];
+      if (isOffline) {
+        return getDownloadedEpisodesForSeries(getDownloadedItems(), seriesId);
+      }
+      if (!api || !user?.Id) return [];
 
       const res = await getTvShowsApi(api).getEpisodes({
-        seriesId: item.Id,
+        seriesId: seriesId,
         userId: user.Id,
         enableUserData: true,
-        // Note: Including trick play is necessary to enable trick play downloads
         fields: ["MediaSources", "MediaStreams", "Overview", "Trickplay"],
       });
       return res?.data.Items || [];
     },
     select: (data) =>
-      // This needs to be sorted by parent index number and then index number, that way we can download the episodes in the correct order.
       [...(data || [])].sort(
         (a, b) =>
           (a.ParentIndexNumber ?? 0) - (b.ParentIndexNumber ?? 0) ||
           (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0),
       ),
-    staleTime: 60,
+    staleTime: isOffline ? Infinity : 60,
-    enabled: !!api && !!user?.Id && !!item?.Id,
+    enabled: isOffline || (!!api && !!user?.Id),
   });
 
   useEffect(() => {
+    // Don't show header buttons in offline mode
+    if (isOffline) {
+      navigation.setOptions({
+        headerRight: () => null,
+      });
+      return;
+    }
+
     navigation.setOptions({
       headerRight: () =>
-        !isLoading &&
+        !isLoading && item && allEpisodes && allEpisodes.length > 0 ? (
-        item &&
-        allEpisodes &&
-        allEpisodes.length > 0 && (
           <View className='flex flex-row items-center space-x-2'>
             <AddToFavorites item={item} />
             {!Platform.isTV && (
@@ -114,49 +152,64 @@ const page: React.FC = () => {
               />
             )}
           </View>
-        ),
+        ) : null,
     });
-  }, [allEpisodes, isLoading, item]);
+  }, [allEpisodes, isLoading, item, isOffline]);
 
-  if (!item || !backdropUrl) return null;
+  // For offline mode, we can show the page even without backdropUrl
+  if (!item || (!isOffline && !backdropUrl)) return null;
 
   return (
-    <ParallaxScrollView
+    <OfflineModeProvider isOffline={isOffline}>
-      headerHeight={400}
+      <ParallaxScrollView
-      headerImage={
+        headerHeight={400}
-        <Image
+        headerImage={
-          source={{
+          backdropUrl ? (
-            uri: backdropUrl,
+            <Image
-          }}
+              source={{
-          style={{
+                uri: backdropUrl,
-            width: "100%",
+              }}
-            height: "100%",
+              style={{
-          }}
+                width: "100%",
-        />
+                height: "100%",
-      }
+              }}
-      logo={
+            />
-        logoUrl ? (
+          ) : (
-          <Image
+            <View
-            source={{
+              style={{
-              uri: logoUrl,
+                width: "100%",
-            }}
+                height: "100%",
-            style={{
+                backgroundColor: "#1a1a1a",
-              height: 130,
+              }}
-              width: "100%",
+            />
-            }}
+          )
-            contentFit='contain'
+        }
-          />
+        logo={
-        ) : undefined
+          logoUrl ? (
-      }
+            <Image
-    >
+              source={{
-      <View className='flex flex-col pt-4'>
+                uri: logoUrl,
-        <SeriesHeader item={item} />
+              }}
-        <View className='mb-4'>
+              style={{
-          <NextUp seriesId={seriesId} />
+                height: 130,
+                width: "100%",
+              }}
+              contentFit='contain'
+            />
+          ) : undefined
+        }
+      >
+        <View className='flex flex-col pt-4'>
+          <SeriesHeader item={item} />
+          {!isOffline && (
+            <View className='mb-4'>
+              <NextUp seriesId={seriesId} />
+            </View>
+          )}
+          <SeasonPicker item={item} initialSeasonIndex={Number(seasonIndex)} />
         </View>
-        <SeasonPicker item={item} initialSeasonIndex={Number(seasonIndex)} />
+      </ParallaxScrollView>
-      </View>
+    </OfflineModeProvider>
-    </ParallaxScrollView>
   );
 };
 

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

@@ -209,6 +209,10 @@ const Page = () => {
         itemType = "Series";
       } else if (library.CollectionType === "boxsets") {
         itemType = "BoxSet";
+      } else if (library.CollectionType === "homevideos") {
+        itemType = "Video";
+      } else if (library.CollectionType === "musicvideos") {
+        itemType = "MusicVideo";
       }
 
       const response = await getItemsApi(api).getItems({

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

@@ -7,7 +7,7 @@ import { useAsyncDebouncer } from "@tanstack/react-pacer";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { Image } from "expo-image";
-import { router, useLocalSearchParams, useNavigation } from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import {
   useCallback,
@@ -36,6 +36,7 @@ import { DiscoverFilters } from "@/components/search/DiscoverFilters";
 import { LoadingSkeleton } from "@/components/search/LoadingSkeleton";
 import { SearchItemWrapper } from "@/components/search/SearchItemWrapper";
 import { SearchTabButtons } from "@/components/search/SearchTabButtons";
+import useRouter from "@/hooks/useAppRouter";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -57,6 +58,7 @@ const exampleSearches = [
 export default function search() {
   const params = useLocalSearchParams();
   const insets = useSafeAreaInsets();
+  const router = useRouter();
 
   const [user] = useAtom(userAtom);
 

app/(auth)/(tabs)/(watchlists)/[watchlistId].tsx

@@ -1,7 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { FlashList } from "@shopify/flash-list";
-import { useLocalSearchParams, useNavigation, useRouter } from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -19,6 +19,7 @@ import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import { ItemPoster } from "@/components/posters/ItemPoster";
+import useRouter from "@/hooks/useAppRouter";
 import { useOrientation } from "@/hooks/useOrientation";
 import {
   useDeleteWatchlist,

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

@@ -1,9 +1,10 @@
 import { Ionicons } from "@expo/vector-icons";
-import { Stack, useRouter } from "expo-router";
+import { Stack } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform } from "react-native";
 import { Pressable } from "react-native-gesture-handler";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
+import useRouter from "@/hooks/useAppRouter";
 import { useStreamystatsEnabled } from "@/hooks/useWatchlists";
 
 export default function WatchlistsLayout() {

app/(auth)/(tabs)/(watchlists)/create.tsx

@@ -1,5 +1,4 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useRouter } from "expo-router";
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -15,6 +14,7 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { useCreateWatchlist } from "@/hooks/useWatchlistMutations";
 import type {
   StreamystatsWatchlistAllowedItemType,

app/(auth)/(tabs)/(watchlists)/edit/[watchlistId].tsx

@@ -1,5 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useLocalSearchParams, useRouter } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -15,6 +15,7 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { useUpdateWatchlist } from "@/hooks/useWatchlistMutations";
 import { useWatchlistDetailQuery } from "@/hooks/useWatchlists";
 import type {

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

@@ -1,6 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
 import { FlashList } from "@shopify/flash-list";
-import { useRouter } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -8,6 +7,7 @@ import { Platform, RefreshControl, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import {
   useStreamystatsEnabled,
   useWatchlistsQuery,

app/(auth)/now-playing.tsx

@@ -6,7 +6,6 @@ import type {
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import React, {
   useCallback,
@@ -38,6 +37,7 @@ import { Text } from "@/components/common/Text";
 import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
 import { PlaylistPickerSheet } from "@/components/music/PlaylistPickerSheet";
 import { TrackOptionsSheet } from "@/components/music/TrackOptionsSheet";
+import useRouter from "@/hooks/useAppRouter";
 import { useFavorite } from "@/hooks/useFavorite";
 import { useMusicCast } from "@/hooks/useMusicCast";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";

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

@@ -10,13 +10,12 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
-import { router, useGlobalSearchParams, useNavigation } from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, Platform, useWindowDimensions, View } from "react-native";
 import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
-
 import { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
@@ -27,6 +26,7 @@ import {
   PlaybackSpeedScope,
   updatePlaybackSpeedSettings,
 } from "@/components/video-player/controls/utils/playback-speed-settings";
+import useRouter from "@/hooks/useAppRouter";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useOrientation } from "@/hooks/useOrientation";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
@@ -44,7 +44,11 @@ import {
 import { useDownload } from "@/providers/DownloadProvider";
 import { DownloadedItem } from "@/providers/Downloads/types";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
+import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
+
 import { useSettings } from "@/utils/atoms/settings";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import {
   getMpvAudioId,
@@ -60,6 +64,7 @@ export default function page() {
   const api = useAtomValue(apiAtom);
   const { t } = useTranslation();
   const navigation = useNavigation();
+  const router = useRouter();
   const { settings, updateSettings } = useSettings();
 
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
@@ -78,6 +83,7 @@ export default function page() {
   const [tracksReady, setTracksReady] = useState(false);
   const [hasPlaybackStarted, setHasPlaybackStarted] = useState(false);
   const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState(1.0);
+  const [showTechnicalInfo, setShowTechnicalInfo] = useState(false);
 
   const progress = useSharedValue(0);
   const isSeeking = useSharedValue(false);
@@ -87,10 +93,9 @@ export default function page() {
     : require("react-native-volume-manager");
 
   const downloadUtils = useDownload();
-  const downloadedFiles = useMemo(
+  // Call directly instead of useMemo - the function reference doesn't change
-    () => downloadUtils.getDownloadedItems(),
+  // when data updates, only when the provider initializes
-    [downloadUtils.getDownloadedItems],
+  const downloadedFiles = downloadUtils.getDownloadedItems();
-  );
 
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
@@ -109,7 +114,7 @@ export default function page() {
     bitrateValue: bitrateValueStr,
     offline: offlineStr,
     playbackPosition: playbackPositionFromUrl,
-  } = useGlobalSearchParams<{
+  } = useLocalSearchParams<{
     itemId: string;
     audioIndex: string;
     subtitleIndex: string;
@@ -445,7 +450,7 @@ export default function page() {
     async (data: { nativeEvent: MpvOnProgressEventPayload }) => {
       if (isSeeking.get() || isPlaybackStopped) return;
 
-      const { position } = data.nativeEvent;
+      const { position, cacheSeconds } = data.nativeEvent;
       // MPV reports position in seconds, convert to ms
       const currentTime = position * 1000;
 
@@ -455,6 +460,12 @@ export default function page() {
 
       progress.set(currentTime);
 
+      // Update cache progress (current position + buffered seconds ahead)
+      if (cacheSeconds !== undefined && cacheSeconds > 0) {
+        const cacheEnd = currentTime + cacheSeconds * 1000;
+        cacheProgress.set(cacheEnd);
+      }
+
       // Update URL immediately after seeking, or every 30 seconds during normal playback
       const now = Date.now();
       const shouldUpdateUrl = wasJustSeeking.get();
@@ -494,6 +505,31 @@ export default function page() {
     return ticksToSeconds(getInitialPlaybackTicks());
   }, [getInitialPlaybackTicks]);
 
+  /** Prepare metadata for iOS native media controls (Control Center, Lock Screen) */
+  const nowPlayingMetadata = useMemo(() => {
+    if (!item || !api) return undefined;
+
+    const artworkUri = getPrimaryImageUrl({
+      api,
+      item,
+      quality: 90,
+      width: 500,
+    });
+
+    return {
+      title: item.Name || "",
+      artist:
+        item.Type === "Episode"
+          ? item.SeriesName || ""
+          : item.AlbumArtist || "",
+      albumTitle:
+        item.Type === "Episode" && item.SeasonName
+          ? item.SeasonName
+          : undefined,
+      artworkUri: artworkUri || undefined,
+    };
+  }, [item, api]);
+
   /** Build video source config for MPV */
   const videoSource = useMemo<MpvVideoSource | undefined>(() => {
     if (!stream?.url) return undefined;
@@ -527,7 +563,11 @@ export default function page() {
       subtitleIndex,
       isTranscoding,
     );
-    const initialAudioId = getMpvAudioId(mediaSource, audioIndex);
+    const initialAudioId = getMpvAudioId(
+      mediaSource,
+      audioIndex,
+      isTranscoding,
+    );
 
     // Calculate start position directly here to avoid timing issues
     const startTicks = playbackPositionFromUrl
@@ -677,8 +717,8 @@ export default function page() {
         return;
       }
 
-      if (isLoading) {
+      if (isLoading !== undefined) {
-        setIsBuffering(true);
+        setIsBuffering(isLoading);
       }
     },
     [playbackManager, item?.Id, progress],
@@ -723,6 +763,59 @@ export default function page() {
     videoRef.current?.seekTo?.(position / 1000);
   }, []);
 
+  // Technical info toggle handler
+  const handleToggleTechnicalInfo = useCallback(() => {
+    setShowTechnicalInfo((prev) => !prev);
+  }, []);
+
+  // Get technical info from the player
+  const getTechnicalInfo = useCallback(async () => {
+    return (await videoRef.current?.getTechnicalInfo?.()) ?? {};
+  }, []);
+
+  // Determine play method based on stream URL and media source
+  const playMethod = useMemo<
+    "DirectPlay" | "DirectStream" | "Transcode" | undefined
+  >(() => {
+    if (!stream?.url) return undefined;
+
+    // Check if transcoding (m3u8 playlist or TranscodingUrl present)
+    if (stream.url.includes("m3u8") || stream.mediaSource?.TranscodingUrl) {
+      return "Transcode";
+    }
+
+    // Check if direct play (no container remuxing needed)
+    // Direct play means the file is being served as-is
+    if (stream.url.includes("/Videos/") && stream.url.includes("/stream")) {
+      return "DirectStream";
+    }
+
+    // Default to direct play if we're not transcoding
+    return "DirectPlay";
+  }, [stream?.url, stream?.mediaSource?.TranscodingUrl]);
+
+  // Extract transcode reasons from the TranscodingUrl
+  const transcodeReasons = useMemo<string[]>(() => {
+    const transcodingUrl = stream?.mediaSource?.TranscodingUrl;
+    if (!transcodingUrl) return [];
+
+    try {
+      // Parse the TranscodeReasons parameter from the URL
+      const url = new URL(transcodingUrl, "http://localhost");
+      const reasons = url.searchParams.get("TranscodeReasons");
+      if (reasons) {
+        return reasons.split(",").filter(Boolean);
+      }
+    } catch {
+      // If URL parsing fails, try regex fallback
+      const match = transcodingUrl.match(/TranscodeReasons=([^&]+)/);
+      if (match) {
+        return match[1].split(",").filter(Boolean);
+      }
+    }
+    return [];
+  }, [stream?.mediaSource?.TranscodingUrl]);
+
   const handleZoomToggle = useCallback(async () => {
     const newZoomState = !isZoomedToFill;
     await videoRef.current?.setZoomedToFill?.(newZoomState);
@@ -833,99 +926,105 @@ export default function page() {
     );
 
   return (
-    <PlayerProvider
+    <OfflineModeProvider isOffline={offline}>
-      playerRef={videoRef}
+      <PlayerProvider
-      item={item}
+        playerRef={videoRef}
-      mediaSource={stream?.mediaSource}
+        item={item}
-      isVideoLoaded={isVideoLoaded}
+        mediaSource={stream?.mediaSource}
-      tracksReady={tracksReady}
+        isVideoLoaded={isVideoLoaded}
-      offline={offline}
+        tracksReady={tracksReady}
-      downloadedItem={downloadedItem}
+        downloadedItem={downloadedItem}
-    >
+      >
-      <VideoProvider>
+        <VideoProvider>
-        <View
-          style={{
-            flex: 1,
-            backgroundColor: "black",
-            height: "100%",
-            width: "100%",
-          }}
-        >
           <View
             style={{
-              display: "flex",
+              flex: 1,
-              width: "100%",
+              backgroundColor: "black",
               height: "100%",
-              position: "relative",
+              width: "100%",
-              flexDirection: "column",
-              justifyContent: "center",
             }}
           >
-            <MpvPlayerView
+            <View
-              ref={videoRef}
+              style={{
-              source={videoSource}
+                display: "flex",
-              style={{ width: "100%", height: "100%" }}
+                width: "100%",
-              onProgress={onProgress}
+                height: "100%",
-              onPlaybackStateChange={onPlaybackStateChanged}
+                position: "relative",
-              onLoad={() => setIsVideoLoaded(true)}
+                flexDirection: "column",
-              onError={(e: { nativeEvent: MpvOnErrorEventPayload }) => {
+                justifyContent: "center",
-                console.error("Video Error:", e.nativeEvent);
-                Alert.alert(
-                  t("player.error"),
-                  t("player.an_error_occured_while_playing_the_video"),
-                );
-                writeToLog("ERROR", "Video Error", e.nativeEvent);
               }}
-              onTracksReady={() => {
+            >
-                setTracksReady(true);
+              <MpvPlayerView
-              }}
+                ref={videoRef}
-            />
+                source={videoSource}
-            {!hasPlaybackStarted && (
+                style={{ width: "100%", height: "100%" }}
-              <View
+                nowPlayingMetadata={nowPlayingMetadata}
-                style={{
+                onProgress={onProgress}
-                  position: "absolute",
+                onPlaybackStateChange={onPlaybackStateChanged}
-                  top: 0,
+                onLoad={() => setIsVideoLoaded(true)}
-                  left: 0,
+                onError={(e: { nativeEvent: MpvOnErrorEventPayload }) => {
-                  right: 0,
+                  console.error("Video Error:", e.nativeEvent);
-                  bottom: 0,
+                  Alert.alert(
-                  backgroundColor: "black",
+                    t("player.error"),
-                  justifyContent: "center",
+                    t("player.an_error_occured_while_playing_the_video"),
-                  alignItems: "center",
+                  );
+                  writeToLog("ERROR", "Video Error", e.nativeEvent);
                 }}
-              >
+                onTracksReady={() => {
-                <Loader />
+                  setTracksReady(true);
-              </View>
+                }}
+              />
+              {!hasPlaybackStarted && (
+                <View
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: "black",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <Loader />
+                </View>
+              )}
+            </View>
+            {isMounted === true && item && !isPipMode && (
+              <Controls
+                mediaSource={stream?.mediaSource}
+                item={item}
+                togglePlay={togglePlay}
+                isPlaying={isPlaying}
+                isSeeking={isSeeking}
+                progress={progress}
+                cacheProgress={cacheProgress}
+                isBuffering={isBuffering}
+                showControls={showControls}
+                setShowControls={setShowControls}
+                startPictureInPicture={startPictureInPicture}
+                play={play}
+                pause={pause}
+                seek={seek}
+                enableTrickplay={true}
+                aspectRatio={aspectRatio}
+                isZoomedToFill={isZoomedToFill}
+                onZoomToggle={handleZoomToggle}
+                api={api}
+                downloadedFiles={downloadedFiles}
+                playbackSpeed={currentPlaybackSpeed}
+                setPlaybackSpeed={handleSetPlaybackSpeed}
+                showTechnicalInfo={showTechnicalInfo}
+                onToggleTechnicalInfo={handleToggleTechnicalInfo}
+                getTechnicalInfo={getTechnicalInfo}
+                playMethod={playMethod}
+                transcodeReasons={transcodeReasons}
+              />
             )}
           </View>
-          {isMounted === true && item && !isPipMode && (
+        </VideoProvider>
-            <Controls
+      </PlayerProvider>
-              mediaSource={stream?.mediaSource}
+    </OfflineModeProvider>
-              item={item}
-              togglePlay={togglePlay}
-              isPlaying={isPlaying}
-              isSeeking={isSeeking}
-              progress={progress}
-              cacheProgress={cacheProgress}
-              isBuffering={isBuffering}
-              showControls={showControls}
-              setShowControls={setShowControls}
-              startPictureInPicture={startPictureInPicture}
-              play={play}
-              pause={pause}
-              seek={seek}
-              enableTrickplay={true}
-              offline={offline}
-              aspectRatio={aspectRatio}
-              isZoomedToFill={isZoomedToFill}
-              onZoomToggle={handleZoomToggle}
-              api={api}
-              downloadedFiles={downloadedFiles}
-              playbackSpeed={currentPlaybackSpeed}
-              setPlaybackSpeed={handleSetPlaybackSpeed}
-            />
-          )}
-        </View>
-      </VideoProvider>
-    </PlayerProvider>
   );
 }

app/_layout.tsx

@@ -22,6 +22,7 @@ import {
 import { MusicPlayerProvider } from "@/providers/MusicPlayerProvider";
 import { NetworkStatusProvider } from "@/providers/NetworkStatusProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
+import { ServerUrlProvider } from "@/providers/ServerUrlProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import {
@@ -47,7 +48,7 @@ import type {
   NotificationResponse,
 } from "expo-notifications/build/Notifications.types";
 import type { ExpoPushToken } from "expo-notifications/build/Tokens.types";
-import { router, Stack, useSegments } from "expo-router";
+import { Stack, useSegments } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider, useAtom } from "jotai";
@@ -56,6 +57,7 @@ import { I18nextProvider } from "react-i18next";
 import { Appearance } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import useRouter from "@/hooks/useAppRouter";
 import { userAtom } from "@/providers/JellyfinProvider";
 import { store } from "@/utils/store";
 import "react-native-reanimated";
@@ -80,14 +82,9 @@ SplashScreen.setOptions({
   fade: true,
 });
 
-function redirect(notification: typeof Notifications.Notification) {
-  const url = notification.request.content.data?.url;
-  if (url) {
-    router.push(url);
-  }
-}
-
 function useNotificationObserver() {
+  const router = useRouter();
+
   useEffect(() => {
     if (Platform.isTV) return;
 
@@ -98,14 +95,17 @@ function useNotificationObserver() {
         if (!isMounted || !response?.notification) {
           return;
         }
-        redirect(response?.notification);
+        const url = response?.notification.request.content.data?.url;
+        if (url) {
+          router.push(url);
+        }
       },
     );
 
     return () => {
       isMounted = false;
     };
-  }, []);
+  }, [router]);
 }
 
 if (!Platform.isTV) {
@@ -230,6 +230,7 @@ function Layout() {
   const [user] = useAtom(userAtom);
   const [api] = useAtom(apiAtom);
   const _segments = useSegments();
+  const router = useRouter();
 
   useEffect(() => {
     i18n.changeLanguage(
@@ -322,9 +323,6 @@ function Layout() {
       responseListener.current =
         Notifications?.addNotificationResponseReceivedListener(
           (response: NotificationResponse) => {
-            // redirect if internal notification
-            redirect(response?.notification);
-
             // Currently the notifications supported by the plugin will send data for deep links.
             const { title, data } = response.notification.request.content;
             writeInfoLog(`Notification ${title} opened`, data);
@@ -384,77 +382,79 @@ function Layout() {
       }}
     >
       <JellyfinProvider>
-        <NetworkStatusProvider>
+        <ServerUrlProvider>
-          <PlaySettingsProvider>
+          <NetworkStatusProvider>
-            <LogProvider>
+            <PlaySettingsProvider>
-              <WebSocketProvider>
+              <LogProvider>
-                <DownloadProvider>
+                <WebSocketProvider>
-                  <MusicPlayerProvider>
+                  <DownloadProvider>
-                    <GlobalModalProvider>
+                    <MusicPlayerProvider>
-                      <BottomSheetModalProvider>
+                      <GlobalModalProvider>
-                        <IntroSheetProvider>
+                        <BottomSheetModalProvider>
-                          <ThemeProvider value={DarkTheme}>
+                          <IntroSheetProvider>
-                            <SystemBars style='light' hidden={false} />
+                            <ThemeProvider value={DarkTheme}>
-                            <Stack initialRouteName='(auth)/(tabs)'>
+                              <SystemBars style='light' hidden={false} />
-                              <Stack.Screen
+                              <Stack initialRouteName='(auth)/(tabs)'>
-                                name='(auth)/(tabs)'
+                                <Stack.Screen
-                                options={{
+                                  name='(auth)/(tabs)'
-                                  headerShown: false,
+                                  options={{
-                                  title: "",
+                                    headerShown: false,
-                                  header: () => null,
+                                    title: "",
+                                    header: () => null,
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/player'
+                                  options={{
+                                    headerShown: false,
+                                    title: "",
+                                    header: () => null,
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/now-playing'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "modal",
+                                    gestureEnabled: true,
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='login'
+                                  options={{
+                                    headerShown: true,
+                                    title: "",
+                                    headerTransparent: Platform.OS === "ios",
+                                  }}
+                                />
+                                <Stack.Screen name='+not-found' />
+                              </Stack>
+                              <Toaster
+                                duration={4000}
+                                toastOptions={{
+                                  style: {
+                                    backgroundColor: "#262626",
+                                    borderColor: "#363639",
+                                    borderWidth: 1,
+                                  },
+                                  titleStyle: {
+                                    color: "white",
+                                  },
                                 }}
+                                closeButton
                               />
-                              <Stack.Screen
+                              <GlobalModal />
-                                name='(auth)/player'
+                            </ThemeProvider>
-                                options={{
+                          </IntroSheetProvider>
-                                  headerShown: false,
+                        </BottomSheetModalProvider>
-                                  title: "",
+                      </GlobalModalProvider>
-                                  header: () => null,
+                    </MusicPlayerProvider>
-                                }}
+                  </DownloadProvider>
-                              />
+                </WebSocketProvider>
-                              <Stack.Screen
+              </LogProvider>
-                                name='(auth)/now-playing'
+            </PlaySettingsProvider>
-                                options={{
+          </NetworkStatusProvider>
-                                  headerShown: false,
+        </ServerUrlProvider>
-                                  presentation: "modal",
-                                  gestureEnabled: true,
-                                }}
-                              />
-                              <Stack.Screen
-                                name='login'
-                                options={{
-                                  headerShown: true,
-                                  title: "",
-                                  headerTransparent: Platform.OS === "ios",
-                                }}
-                              />
-                              <Stack.Screen name='+not-found' />
-                            </Stack>
-                            <Toaster
-                              duration={4000}
-                              toastOptions={{
-                                style: {
-                                  backgroundColor: "#262626",
-                                  borderColor: "#363639",
-                                  borderWidth: 1,
-                                },
-                                titleStyle: {
-                                  color: "white",
-                                },
-                              }}
-                              closeButton
-                            />
-                            <GlobalModal />
-                          </ThemeProvider>
-                        </IntroSheetProvider>
-                      </BottomSheetModalProvider>
-                    </GlobalModalProvider>
-                  </MusicPlayerProvider>
-                </DownloadProvider>
-              </WebSocketProvider>
-            </LogProvider>
-          </PlaySettingsProvider>
-        </NetworkStatusProvider>
       </JellyfinProvider>
     </PersistQueryClientProvider>
   );

components/Badge.tsx

@@ -1,4 +1,5 @@
-import { View, type ViewProps } from "react-native";
+import { Platform, StyleSheet, View, type ViewProps } from "react-native";
+import { GlassEffectView } from "react-native-glass-effect-view";
 import { Text } from "./common/Text";
 
 interface Props extends ViewProps {
@@ -13,6 +14,30 @@ export const Badge: React.FC<Props> = ({
   variant = "purple",
   ...props
 }) => {
+  const content = (
+    <View style={styles.content}>
+      {iconLeft && <View style={styles.iconLeft}>{iconLeft}</View>}
+      <Text
+        className={`
+          text-xs
+          ${variant === "purple" && "text-white"}
+      `}
+      >
+        {text}
+      </Text>
+    </View>
+  );
+
+  if (Platform.OS === "ios") {
+    return (
+      <View {...props} style={[styles.container, props.style]}>
+        <GlassEffectView style={{ borderRadius: 100 }}>
+          {content}
+        </GlassEffectView>
+      </View>
+    );
+  }
+
   return (
     <View
       {...props}
@@ -34,3 +59,23 @@ export const Badge: React.FC<Props> = ({
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    alignSelf: "flex-start",
+    flexShrink: 1,
+    flexGrow: 0,
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 50,
+    backgroundColor: "transparent",
+  },
+  iconLeft: {
+    marginRight: 4,
+  },
+});

components/DownloadItem.tsx

@@ -9,13 +9,14 @@ import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { type Href, router } from "expo-router";
+import { type Href } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Alert, Platform, Switch, View, type ViewProps } from "react-native";
 import { toast } from "sonner-native";
+import useRouter from "@/hooks/useAppRouter";
 import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -62,6 +63,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   const [user] = useAtom(userAtom);
   const [queue, _setQueue] = useAtom(queueAtom);
   const { settings } = useSettings();
+  const router = useRouter();
   const [downloadUnwatchedOnly, setDownloadUnwatchedOnly] = useState(false);
 
   const { processes, startBackgroundDownload, downloadedItems } = useDownload();
@@ -170,9 +172,11 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       firstItem.Type !== "Episode"
         ? "/downloads"
         : ({
-            pathname: `/downloads/${firstItem.SeriesId}`,
+            pathname: "/series/[id]",
             params: {
-              episodeSeasonIndex: firstItem.ParentIndexNumber,
+              id: firstItem.SeriesId!,
+              seasonIndex: firstItem.ParentIndexNumber?.toString(),
+              offline: "true",
             },
           } as Href),
     );

components/GenreTags.tsx

@@ -1,11 +1,14 @@
 // GenreTags.tsx
 import type React from "react";
 import {
+  Platform,
   type StyleProp,
+  StyleSheet,
   type TextStyle,
   View,
   type ViewProps,
 } from "react-native";
+import { GlassEffectView } from "react-native-glass-effect-view";
 import { Text } from "./common/Text";
 
 interface TagProps {
@@ -20,6 +23,23 @@ export const Tag: React.FC<
     textStyle?: StyleProp<TextStyle>;
   } & ViewProps
 > = ({ text, textClass, textStyle, ...props }) => {
+  if (Platform.OS === "ios") {
+    return (
+      <View>
+        <GlassEffectView style={styles.glass}>
+          <View
+            style={{
+              paddingHorizontal: 8,
+              paddingVertical: 4,
+            }}
+          >
+            <Text>{text}</Text>
+          </View>
+        </GlassEffectView>
+      </View>
+    );
+  }
+
   return (
     <View className='bg-neutral-800 rounded-full px-2 py-1' {...props}>
       <Text className={textClass} style={textStyle}>
@@ -29,6 +49,16 @@ export const Tag: React.FC<
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    borderRadius: 50,
+  },
+  glass: {
+    borderRadius: 50,
+  },
+});
+
 export const Tags: React.FC<
   TagProps & { tagProps?: ViewProps } & ViewProps
 > = ({ tags, textClass = "text-xs", tagProps, ...props }) => {

components/IntroSheet.tsx

@@ -6,13 +6,13 @@ import {
   BottomSheetScrollView,
 } from "@gorhom/bottom-sheet";
 import { Image } from "expo-image";
-import { router } from "expo-router";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Linking, Platform, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { storage } from "@/utils/mmkv";
 
 export interface IntroSheetRef {
@@ -24,6 +24,7 @@ export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
   const bottomSheetRef = useRef<BottomSheetModal>(null);
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
+  const router = useRouter();
 
   useImperativeHandle(ref, () => ({
     present: () => {

components/ItemContent.tsx

@@ -26,6 +26,7 @@ import { useImageColorsReturn } from "@/hooks/useImageColorsReturn";
 import { useOrientation } from "@/hooks/useOrientation";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { AddToFavorites } from "./AddToFavorites";
@@ -45,13 +46,13 @@ export type SelectedOptions = {
 
 interface ItemContentProps {
   item: BaseItemDto;
-  isOffline: boolean;
   itemWithSources?: BaseItemDto | null;
 }
 
 export const ItemContent: React.FC<ItemContentProps> = React.memo(
-  ({ item, isOffline, itemWithSources }) => {
+  ({ item, itemWithSources }) => {
     const [api] = useAtom(apiAtom);
+    const isOffline = useOfflineMode();
     const { settings } = useSettings();
     const { orientation } = useOrientation();
     const navigation = useNavigation();
@@ -228,7 +229,6 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                 <PlayButton
                   selectedOptions={selectedOptions}
                   item={item}
-                  isOffline={isOffline}
                   colors={itemColors}
                 />
                 <View className='w-1' />
@@ -243,11 +243,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
               </View>
             </View>
             {item.Type === "Episode" && (
-              <SeasonEpisodesCarousel
+              <SeasonEpisodesCarousel item={item} loading={loading} />
-                item={item}
-                loading={loading}
-                isOffline={isOffline}
-              />
             )}
 
             {!isOffline &&
@@ -264,7 +260,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                   <CurrentSeries item={item} className='mb-2' />
                 )}
 
-                <ItemPeopleSections item={item} isOffline={isOffline} />
+                <ItemPeopleSections item={item} />
 
                 {!isOffline && <SimilarItems itemId={item.Id} />}
               </>

components/PlatformDropdown.tsx

@@ -25,7 +25,14 @@ export type ToggleOption = {
   disabled?: boolean;
 };
 
-export type Option = RadioOption | ToggleOption;
+export type ActionOption = {
+  type: "action";
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+};
+
+export type Option = RadioOption | ToggleOption | ActionOption;
 
 // Option group structure
 export type OptionGroup = {
@@ -64,7 +71,10 @@ const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
   isLast,
 }) => {
   const isToggle = option.type === "toggle";
-  const handlePress = isToggle ? option.onToggle : option.onPress;
+  const isAction = option.type === "action";
+  const handlePress = isToggle
+    ? option.onToggle
+    : (option as RadioOption | ActionOption).onPress;
 
   return (
     <>
@@ -76,7 +86,7 @@ const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
         <Text className='flex-1 text-white'>{option.label}</Text>
         {isToggle ? (
           <ToggleSwitch value={option.value} />
-        ) : option.selected ? (
+        ) : isAction ? null : (option as RadioOption).selected ? (
           <Ionicons name='checkmark-circle' size={24} color='#9333ea' />
         ) : (
           <Ionicons name='ellipse-outline' size={24} color='#6b7280' />
@@ -150,6 +160,15 @@ const BottomSheetContent: React.FC<{
           },
         };
       }
+      if (option.type === "action") {
+        return {
+          ...option,
+          onPress: () => {
+            option.onPress();
+            onClose?.();
+          },
+        };
+      }
       return option;
     }),
   }));
@@ -225,6 +244,9 @@ const PlatformDropdownComponent = ({
               const toggleOptions = group.options.filter(
                 (opt) => opt.type === "toggle",
               ) as ToggleOption[];
+              const actionOptions = group.options.filter(
+                (opt) => opt.type === "action",
+              ) as ActionOption[];
 
               const items = [];
 
@@ -291,6 +313,21 @@ const PlatformDropdownComponent = ({
                 );
               });
 
+              // Add Buttons for action options (no icon)
+              actionOptions.forEach((option, optionIndex) => {
+                items.push(
+                  <Button
+                    key={`action-${groupIndex}-${optionIndex}`}
+                    onPress={() => {
+                      option.onPress();
+                    }}
+                    disabled={option.disabled}
+                  >
+                    {option.label}
+                  </Button>,
+                );
+              });
+
               return items;
             })}
           </ContextMenu.Items>

components/PlayButton.tsx

@@ -2,7 +2,6 @@ import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { BottomSheetView } from "@gorhom/bottom-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -24,11 +23,13 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import useRouter from "@/hooks/useAppRouter";
 import { useHaptic } from "@/hooks/useHaptic";
 import type { ThemeColors } from "@/hooks/useImageColorsReturn";
 import { getDownloadedItemById } from "@/providers/Downloads/database";
 import { useGlobalModal } from "@/providers/GlobalModalProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { useSettings } from "@/utils/atoms/settings";
 import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
@@ -44,7 +45,6 @@ import type { SelectedOptions } from "./ItemContent";
 interface Props extends React.ComponentProps<typeof TouchableOpacity> {
   item: BaseItemDto;
   selectedOptions: SelectedOptions;
-  isOffline?: boolean;
   colors?: ThemeColors;
 }
 
@@ -54,9 +54,9 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({
   item,
   selectedOptions,
-  isOffline,
   colors,
 }: Props) => {
+  const isOffline = useOfflineMode();
   const { showActionSheetWithOptions } = useActionSheet();
   const client = useRemoteMediaClient();
   const mediaStatus = useMediaStatus();
@@ -300,6 +300,19 @@ export const PlayButton: React.FC<Props> = ({
     // Check if item is downloaded
     const downloadedItem = item.Id ? getDownloadedItemById(item.Id) : undefined;
 
+    // If already in offline mode, play downloaded file directly
+    if (isOffline && downloadedItem) {
+      const queryParams = new URLSearchParams({
+        itemId: item.Id!,
+        offline: "true",
+        playbackPosition:
+          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
+      });
+      goToPlayer(queryParams.toString());
+      return;
+    }
+
+    // If online but file is downloaded, ask user which version to play
     if (downloadedItem) {
       if (Platform.OS === "android") {
         // Show bottom sheet for Android

components/PlayButton.tv.tsx

@@ -1,6 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useEffect } from "react";
 import { TouchableOpacity, View } from "react-native";
@@ -14,6 +13,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import useRouter from "@/hooks/useAppRouter";
 import { useHaptic } from "@/hooks/useHaptic";
 import type { ThemeColors } from "@/hooks/useImageColorsReturn";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";

components/PlayedStatus.tsx

@@ -7,7 +7,6 @@ import { RoundButton } from "./RoundButton";
 
 interface Props extends ViewProps {
   items: BaseItemDto[];
-  isOffline?: boolean;
   size?: "default" | "large";
 }
 

components/apple-tv-carousel/AppleTVCarousel.tsx

@@ -7,7 +7,6 @@ import {
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { LinearGradient } from "expo-linear-gradient";
-import { useRouter } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
@@ -26,6 +25,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import useRouter from "@/hooks/useAppRouter";
 import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useImageColorsReturn } from "@/hooks/useImageColorsReturn";
 import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";

components/common/HeaderBackButton.tsx

@@ -1,8 +1,8 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BlurView, type BlurViewProps } from "expo-blur";
-import { useRouter } from "expo-router";
 import { Platform } from "react-native";
 import { Pressable, type PressableProps } from "react-native-gesture-handler";
+import useRouter from "@/hooks/useAppRouter";
 
 interface Props extends BlurViewProps {
   background?: "blur" | "transparent";

components/common/JellyseerrItemRouter.tsx

@@ -1,7 +1,8 @@
-import { useRouter, useSegments } from "expo-router";
+import { useSegments } from "expo-router";
 import type React from "react";
 import { type PropsWithChildren } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
+import useRouter from "@/hooks/useAppRouter";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";

components/common/TouchableItemRouter.tsx

@@ -1,14 +1,16 @@
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useRouter, useSegments } from "expo-router";
+import { useSegments } from "expo-router";
 import { type PropsWithChildren, useCallback } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
+import useRouter from "@/hooks/useAppRouter";
 import { useFavorite } from "@/hooks/useFavorite";
 import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
+import { useDownload } from "@/providers/DownloadProvider";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
-  isOffline?: boolean;
 }
 
 export const itemRouter = (item: BaseItemDto, from: string) => {
@@ -134,26 +136,20 @@ export const getItemNavigation = (item: BaseItemDto, _from: string) => {
 
 export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   item,
-  isOffline = false,
   children,
   ...props
 }) => {
-  const router = useRouter();
   const segments = useSegments();
   const { showActionSheetWithOptions } = useActionSheet();
   const markAsPlayedStatus = useMarkAsPlayed([item]);
   const { isFavorite, toggleFavorite } = useFavorite(item);
+  const router = useRouter();
+  const isOffline = useOfflineMode();
+  const { deleteFile } = useDownload();
 
   const from = (segments as string[])[2] || "(home)";
 
   const handlePress = useCallback(() => {
-    // For offline mode, we still need to use query params
-    if (isOffline) {
-      const url = `${itemRouter(item, from)}&offline=true`;
-      router.push(url as any);
-      return;
-    }
-
     // Force music libraries to navigate via the explicit string route.
     // This avoids losing the dynamic [libraryId] param when going through a nested navigator.
     if ("CollectionType" in item && item.CollectionType === "music") {
@@ -163,7 +159,7 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
 
     const navigation = getItemNavigation(item, from);
     router.push(navigation as any);
-  }, [from, isOffline, item, router]);
+  }, [from, item, router]);
 
   const showActionSheet = useCallback(() => {
     if (
@@ -179,14 +175,19 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
       "Mark as Played",
       "Mark as Not Played",
       isFavorite ? "Unmark as Favorite" : "Mark as Favorite",
+      ...(isOffline ? ["Delete Download"] : []),
       "Cancel",
     ];
     const cancelButtonIndex = options.length - 1;
+    const destructiveButtonIndex = isOffline
+      ? cancelButtonIndex - 1
+      : undefined;
 
     showActionSheetWithOptions(
       {
         options,
         cancelButtonIndex,
+        destructiveButtonIndex,
       },
       async (selectedIndex) => {
         if (selectedIndex === 0) {
@@ -195,6 +196,8 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
           await markAsPlayedStatus(false);
         } else if (selectedIndex === 2) {
           toggleFavorite();
+        } else if (isOffline && selectedIndex === 3 && item.Id) {
+          deleteFile(item.Id);
         }
       },
     );
@@ -203,6 +206,9 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
     isFavorite,
     markAsPlayedStatus,
     toggleFavorite,
+    isOffline,
+    deleteFile,
+    item.Id,
   ]);
 
   if (

components/downloads/DownloadCard.tsx

@@ -1,6 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
 import { t } from "i18next";
 import { useMemo } from "react";
 import {
@@ -11,6 +10,7 @@ import {
 } from "react-native";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useDownload } from "@/providers/DownloadProvider";
 import { calculateSmoothedETA } from "@/providers/Downloads/hooks/useDownloadSpeedCalculator";

components/downloads/EpisodeCard.tsx

@@ -61,7 +61,6 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
   return (
     <TouchableItemRouter
       item={item}
-      isOffline={true}
       onLongPress={showActionSheet}
       className='flex flex-col mb-4'
     >

components/downloads/MovieCard.tsx

@@ -67,7 +67,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
   }, [showActionSheetWithOptions, handleDeleteFile]);
 
   return (
-    <TouchableItemRouter onLongPress={showActionSheet} item={item} isOffline>
+    <TouchableItemRouter onLongPress={showActionSheet} item={item}>
       {base64Image ? (
         <View className='relative w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900'>
           <Image

components/downloads/SeriesCard.tsx

@@ -2,11 +2,11 @@ import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { router } from "expo-router";
 import type React from "react";
 import { useCallback, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { DownloadSize } from "@/components/downloads/DownloadSize";
+import useRouter from "@/hooks/useAppRouter";
 import { useDownload } from "@/providers/DownloadProvider";
 import { storage } from "@/utils/mmkv";
 import { Text } from "../common/Text";
@@ -14,6 +14,7 @@ import { Text } from "../common/Text";
 export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
   const { deleteItems } = useDownload();
   const { showActionSheetWithOptions } = useActionSheet();
+  const router = useRouter();
 
   const base64Image = useMemo(() => {
     return storage.getString(items[0].SeriesId!);
@@ -46,7 +47,12 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
 
   return (
     <TouchableOpacity
-      onPress={() => router.push(`/downloads/${items[0].SeriesId}`)}
+      onPress={() =>
+        router.push({
+          pathname: "/series/[id]",
+          params: { id: items[0].SeriesId!, offline: "true" },
+        })
+      }
       onLongPress={showActionSheet}
     >
       {base64Image ? (

components/home/Favorites.tsx

@@ -2,7 +2,6 @@ import type { Api } from "@jellyfin/sdk";
 import type { BaseItemKind } from "@jellyfin/sdk/lib/generated-client";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useState } from "react";
@@ -10,6 +9,7 @@ import { Text, View } from "react-native";
 // PNG ASSET
 import heart from "@/assets/icons/heart.fill.png";
 import { Colors } from "@/constants/Colors";
+import useRouter from "@/hooks/useAppRouter";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { InfiniteScrollingCollectionList } from "./InfiniteScrollingCollectionList";
 

components/home/Home.tsx

@@ -12,7 +12,7 @@ import {
   getUserViewsApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { type QueryFunction, useQuery } from "@tanstack/react-query";
-import { useNavigation, useRouter, useSegments } from "expo-router";
+import { useNavigation, useSegments } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -33,6 +33,7 @@ import { StreamystatsRecommendations } from "@/components/home/StreamystatsRecom
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { Colors } from "@/constants/Colors";
+import useRouter from "@/hooks/useAppRouter";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";

components/home/HomeWithCarousel.tsx

@@ -12,7 +12,7 @@ import {
   getUserViewsApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { type QueryFunction, useQuery } from "@tanstack/react-query";
-import { useNavigation, useRouter, useSegments } from "expo-router";
+import { useNavigation, useSegments } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -35,6 +35,7 @@ import { StreamystatsRecommendations } from "@/components/home/StreamystatsRecom
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { Colors } from "@/constants/Colors";
+import useRouter from "@/hooks/useAppRouter";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";

components/home/LargeMovieCarousel.tsx

@@ -2,7 +2,7 @@ import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useRouter, useSegments } from "expo-router";
+import { useSegments } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo } from "react";
 import { Dimensions, View, type ViewProps } from "react-native";
@@ -16,6 +16,7 @@ import Carousel, {
   type ICarouselInstance,
   Pagination,
 } from "react-native-reanimated-carousel";
+import useRouter from "@/hooks/useAppRouter";
 import { useHaptic } from "@/hooks/useHaptic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";

components/home/ScrollingCollectionList.tsx

@@ -21,7 +21,6 @@ interface Props extends ViewProps {
   queryKey: QueryKey;
   queryFn: QueryFunction<BaseItemDto[]>;
   hideIfEmpty?: boolean;
-  isOffline?: boolean;
   scrollY?: number; // For lazy loading
   enableLazyLoading?: boolean; // Enable/disable lazy loading
 }
@@ -33,7 +32,6 @@ export const ScrollingCollectionList: React.FC<Props> = ({
   queryFn,
   queryKey,
   hideIfEmpty = false,
-  isOffline = false,
   scrollY = 0,
   enableLazyLoading = false,
   ...props
@@ -106,7 +104,6 @@ export const ScrollingCollectionList: React.FC<Props> = ({
               <TouchableItemRouter
                 item={item}
                 key={item.Id}
-                isOffline={isOffline}
                 className={`mr-2 
                   ${orientation === "horizontal" ? "w-44" : "w-28"}
                 `}

components/item/ItemPeopleSections.tsx

@@ -8,17 +8,14 @@ import { InteractionManager, View, type ViewProps } from "react-native";
 import { MoreMoviesWithActor } from "@/components/MoreMoviesWithActor";
 import { CastAndCrew } from "@/components/series/CastAndCrew";
 import { useItemPeopleQuery } from "@/hooks/useItemPeopleQuery";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
 
 interface Props extends ViewProps {
   item: BaseItemDto;
-  isOffline: boolean;
 }
 
-export const ItemPeopleSections: React.FC<Props> = ({
+export const ItemPeopleSections: React.FC<Props> = ({ item, ...props }) => {
-  item,
+  const isOffline = useOfflineMode();
-  isOffline,
-  ...props
-}) => {
   const [enabled, setEnabled] = useState(false);
 
   useEffect(() => {

components/jellyseerr/PersonPoster.tsx

@@ -1,8 +1,9 @@
-import { useRouter, useSegments } from "expo-router";
+import { useSegments } from "expo-router";
 import type React from "react";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 import Poster from "@/components/posters/Poster";
+import useRouter from "@/hooks/useAppRouter";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 
 interface Props {

components/jellyseerr/discover/CompanySlide.tsx

@@ -1,9 +1,10 @@
-import { router, useSegments } from "expo-router";
+import { useSegments } from "expo-router";
 import type React from "react";
 import { useCallback } from "react";
 import { TouchableOpacity, type ViewProps } from "react-native";
 import GenericSlideCard from "@/components/jellyseerr/discover/GenericSlideCard";
 import Slide, { type SlideProps } from "@/components/jellyseerr/discover/Slide";
+import useRouter from "@/hooks/useAppRouter";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import {
   COMPANY_LOGO_IMAGE_FILTER,
@@ -16,6 +17,7 @@ const CompanySlide: React.FC<
 > = ({ slide, data, ...props }) => {
   const segments = useSegments();
   const { jellyseerrApi } = useJellyseerr();
+  const router = useRouter();
   const from = (segments as string[])[2] || "(home)";
 
   const navigate = useCallback(

components/jellyseerr/discover/GenreSlide.tsx

@@ -1,10 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
-import { router, useSegments } from "expo-router";
+import { useSegments } from "expo-router";
 import type React from "react";
 import { useCallback } from "react";
 import { TouchableOpacity, type ViewProps } from "react-native";
 import GenericSlideCard from "@/components/jellyseerr/discover/GenericSlideCard";
 import Slide, { type SlideProps } from "@/components/jellyseerr/discover/Slide";
+import useRouter from "@/hooks/useAppRouter";
 import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 import type { GenreSliderItem } from "@/utils/jellyseerr/server/interfaces/api/discoverInterfaces";
@@ -13,6 +14,7 @@ import { genreColorMap } from "@/utils/jellyseerr/src/components/Discover/consta
 const GenreSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) => {
   const segments = useSegments();
   const { jellyseerrApi } = useJellyseerr();
+  const router = useRouter();
   const from = (segments as string[])[2] || "(home)";
 
   const navigate = useCallback(

components/library/LibraryItemCard.tsx

@@ -63,6 +63,10 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
       _itemType = "Series";
     } else if (library.CollectionType === "boxsets") {
       _itemType = "BoxSet";
+    } else if (library.CollectionType === "homevideos") {
+      _itemType = "Video";
+    } else if (library.CollectionType === "musicvideos") {
+      _itemType = "MusicVideo";
     }
 
     return _itemType;

components/music/MiniPlayerBar.tsx

@@ -1,6 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo } from "react";
 import {
@@ -23,6 +22,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
 

components/music/MusicAlbumCard.tsx

@@ -1,10 +1,10 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 

components/music/MusicAlbumRowCard.tsx

@@ -1,10 +1,10 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 

components/music/MusicArtistCard.tsx

@@ -1,10 +1,10 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 

components/music/MusicPlaylistCard.tsx

@@ -3,11 +3,11 @@ import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { getLocalPath } from "@/providers/AudioStorage";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";

components/music/PlaylistOptionsSheet.tsx

@@ -6,12 +6,12 @@ import {
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useRouter } from "expo-router";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, StyleSheet, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { useDeletePlaylist } from "@/hooks/usePlaylistMutations";
 
 interface Props {

components/music/TrackOptionsSheet.tsx

@@ -7,7 +7,6 @@ import {
 } from "@gorhom/bottom-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import React, {
   useCallback,
@@ -25,6 +24,7 @@ import {
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { useFavorite } from "@/hooks/useFavorite";
 import {
   audioStorageEvents,

components/series/CastAndCrew.tsx

@@ -2,13 +2,14 @@ import type {
   BaseItemDto,
   BaseItemPerson,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { router, useSegments } from "expo-router";
+import { useSegments } from "expo-router";
 import { useAtom } from "jotai";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { POSTER_CAROUSEL_HEIGHT } from "@/constants/Values";
+import useRouter from "@/hooks/useAppRouter";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { HorizontalScroll } from "../common/HorizontalScroll";
@@ -24,6 +25,7 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
   const [api] = useAtom(apiAtom);
   const segments = useSegments();
   const { t } = useTranslation();
+  const router = useRouter();
   const from = (segments as string[])[2];
 
   const destinctPeople = useMemo(() => {

components/series/CurrentSeries.tsx

@@ -1,10 +1,10 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { router } from "expo-router";
 import { useAtom } from "jotai";
 import type React from "react";
 import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { POSTER_CAROUSEL_HEIGHT } from "@/constants/Values";
+import useRouter from "@/hooks/useAppRouter";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
 import { HorizontalScroll } from "../common/HorizontalScroll";
@@ -18,6 +18,7 @@ interface Props extends ViewProps {
 export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {
   const [api] = useAtom(apiAtom);
   const { t } = useTranslation();
+  const router = useRouter();
 
   return (
     <View {...props}>

components/series/EpisodeTitleHeader.tsx

@@ -1,7 +1,7 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useRouter } from "expo-router";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 
 interface Props extends ViewProps {
   item: BaseItemDto;

components/series/NextItemButton.tsx

@@ -2,9 +2,9 @@ import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
+import useRouter from "@/hooks/useAppRouter";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { Button } from "../Button";
 

components/series/SeasonDropdown.tsx

@@ -54,29 +54,28 @@ export const SeasonDropdown: React.FC<Props> = ({
     [state, item, keys],
   );
 
+  // Always use IndexNumber for Season objects (not keys.index which is for the item)
   const sortByIndex = (a: BaseItemDto, b: BaseItemDto) =>
-    Number(a[keys.index]) - Number(b[keys.index]);
+    Number(a.IndexNumber) - Number(b.IndexNumber);
 
   const optionGroups = useMemo(
     () => [
       {
         options:
           seasons?.sort(sortByIndex).map((season: any) => {
-            const title =
+            const title = season.Name || `Season ${season.IndexNumber}`;
-              season[keys.title] ||
-              season.Name ||
-              `Season ${season.IndexNumber}`;
             return {
               type: "radio" as const,
               label: title,
               value: season.Id || season.IndexNumber,
-              selected: Number(season[keys.index]) === Number(seasonIndex),
+              // Compare season's IndexNumber with the selected seasonIndex
+              selected: Number(season.IndexNumber) === Number(seasonIndex),
               onPress: () => onSelect(season),
             };
           }) || [],
       },
     ],
-    [seasons, keys, seasonIndex, onSelect],
+    [seasons, seasonIndex, onSelect],
   );
 
   useEffect(() => {

components/series/SeasonEpisodesCarousel.tsx

@@ -1,12 +1,14 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import { router } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef } from "react";
 import { TouchableOpacity, type ViewStyle } from "react-native";
+import useRouter from "@/hooks/useAppRouter";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
+import { getDownloadedEpisodesBySeasonId } from "@/utils/downloads/offline-series";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import {
   HorizontalScroll,
@@ -17,7 +19,6 @@ import { ItemCardText } from "../ItemCardText";
 interface Props {
   item?: BaseItemDto | null;
   loading?: boolean;
-  isOffline?: boolean;
   style?: ViewStyle;
   containerStyle?: ViewStyle;
 }
@@ -25,17 +26,14 @@ interface Props {
 export const SeasonEpisodesCarousel: React.FC<Props> = ({
   item,
   loading,
-  isOffline,
   style,
   containerStyle,
 }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
+  const isOffline = useOfflineMode();
+  const router = useRouter();
   const { getDownloadedItems } = useDownload();
-  const downloadedFiles = useMemo(
-    () => getDownloadedItems(),
-    [getDownloadedItems],
-  );
 
   const scrollRef = useRef<HorizontalScrollRef>(null);
 
@@ -51,11 +49,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
     queryKey: ["episodes", seasonId, isOffline],
     queryFn: async () => {
       if (isOffline) {
-        return downloadedFiles
+        return getDownloadedEpisodesBySeasonId(getDownloadedItems(), seasonId!);
-          ?.filter(
-            (f) => f.item.Type === "Episode" && f.item.SeasonId === seasonId,
-          )
-          .map((f) => f.item);
       }
       if (!api || !user?.Id || !item?.SeriesId) return [];
       const response = await getTvShowsApi(api).getEpisodes({
@@ -73,7 +67,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
       });
       return response.data.Items as BaseItemDto[];
     },
-    enabled: !!api && !!user?.Id && !!seasonId,
+    enabled: !!seasonId && (isOffline || (!!api && !!user?.Id)),
   });
 
   useEffect(() => {

components/series/SeasonPicker.tsx

@@ -10,7 +10,13 @@ import {
   SeasonDropdown,
   type SeasonIndexState,
 } from "@/components/series/SeasonDropdown";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
+import {
+  buildOfflineSeasons,
+  getDownloadedEpisodesForSeason,
+} from "@/utils/downloads/offline-series";
 import { runtimeTicksToSeconds } from "@/utils/time";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { Text } from "../common/Text";
@@ -31,6 +37,8 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
   const [user] = useAtom(userAtom);
   const [seasonIndexState, setSeasonIndexState] = useAtom(seasonIndexAtom);
   const { t } = useTranslation();
+  const isOffline = useOfflineMode();
+  const { getDownloadedItems, downloadedItems } = useDownload();
 
   const seasonIndex = useMemo(
     () => seasonIndexState[item.Id ?? ""],
@@ -38,8 +46,12 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
   );
 
   const { data: seasons } = useQuery({
-    queryKey: ["seasons", item.Id],
+    queryKey: ["seasons", item.Id, isOffline, downloadedItems.length],
     queryFn: async () => {
+      if (isOffline) {
+        return buildOfflineSeasons(getDownloadedItems(), item.Id!);
+      }
+
       if (!api || !user?.Id || !item.Id) return [];
       const response = await api.axiosInstance.get(
         `${api.basePath}/Shows/${item.Id}/Seasons`,
@@ -58,8 +70,8 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
 
       return response.data.Items;
     },
-    staleTime: 60,
+    staleTime: isOffline ? Infinity : 60,
-    enabled: !!api && !!user?.Id && !!item.Id,
+    enabled: isOffline || (!!api && !!user?.Id && !!item.Id),
   });
 
   const selectedSeasonId: string | null = useMemo(() => {
@@ -73,9 +85,33 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
     return season.Id!;
   }, [seasons, seasonIndex]);
 
+  // For offline mode, we use season index number instead of ID
+  const selectedSeasonNumber = useMemo(() => {
+    if (!isOffline) return null;
+    const season = seasons?.find(
+      (s: BaseItemDto) =>
+        s.IndexNumber === seasonIndex || s.Name === seasonIndex,
+    );
+    return season?.IndexNumber ?? null;
+  }, [isOffline, seasons, seasonIndex]);
+
   const { data: episodes, isPending } = useQuery({
-    queryKey: ["episodes", item.Id, selectedSeasonId],
+    queryKey: [
+      "episodes",
+      item.Id,
+      isOffline ? selectedSeasonNumber : selectedSeasonId,
+      isOffline,
+      downloadedItems.length,
+    ],
     queryFn: async () => {
+      if (isOffline) {
+        return getDownloadedEpisodesForSeason(
+          getDownloadedItems(),
+          item.Id!,
+          selectedSeasonNumber!,
+        );
+      }
+
       if (!api || !user?.Id || !item.Id || !selectedSeasonId) {
         return [];
       }
@@ -85,7 +121,6 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
         userId: user.Id,
         seasonId: selectedSeasonId,
         enableUserData: true,
-        // Note: Including trick play is necessary to enable trick play downloads
         fields: ["MediaSources", "MediaStreams", "Overview", "Trickplay"],
       });
 
@@ -97,7 +132,10 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
 
       return res.data.Items;
     },
-    enabled: !!api && !!user?.Id && !!item.Id && !!selectedSeasonId,
+    staleTime: isOffline ? Infinity : 0,
+    enabled: isOffline
+      ? !!item.Id && selectedSeasonNumber !== null
+      : !!api && !!user?.Id && !!item.Id && !!selectedSeasonId,
   });
 
   // Used for height calculation
@@ -127,7 +165,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
             }));
           }}
         />
-        {episodes?.length ? (
+        {episodes?.length && !isOffline ? (
           <View className='flex flex-row items-center space-x-2'>
             <DownloadItems
               title={t("item_card.download.download_season")}
@@ -180,9 +218,11 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
                     {runtimeTicksToSeconds(e.RunTimeTicks)}
                   </Text>
                 </View>
-                <View className='self-start ml-auto -mt-0.5'>
+                {!isOffline && (
-                  <DownloadSingleItem item={e} />
+                  <View className='self-start ml-auto -mt-0.5'>
-                </View>
+                    <DownloadSingleItem item={e} />
+                  </View>
+                )}
               </View>
 
               <Text

components/settings/AppearanceSettings.tsx

@@ -1,9 +1,9 @@
-import { useRouter } from "expo-router";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Linking, Switch } from "react-native";
 import DisabledSetting from "@/components/settings/DisabledSetting";
+import useRouter from "@/hooks/useAppRouter";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";

components/settings/Dashboard.tsx

@@ -1,6 +1,6 @@
-import { useRouter } from "expo-router";
 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";

components/settings/LocalNetworkSettings.tsx

@@ -0,0 +1,224 @@
+import { Ionicons } from "@expo/vector-icons";
+import type React from "react";
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Switch, TouchableOpacity, View } from "react-native";
+import { toast } from "sonner-native";
+import { useWifiSSID } from "@/hooks/useWifiSSID";
+import { useServerUrl } from "@/providers/ServerUrlProvider";
+import { storage } from "@/utils/mmkv";
+import {
+  getServerLocalConfig,
+  type LocalNetworkConfig,
+  updateServerLocalConfig,
+} from "@/utils/secureCredentials";
+import { Button } from "../Button";
+import { Input } from "../common/Input";
+import { Text } from "../common/Text";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+const DEFAULT_CONFIG: LocalNetworkConfig = {
+  localUrl: "",
+  homeWifiSSIDs: [],
+  enabled: false,
+};
+
+interface StatusDisplayProps {
+  currentSSID: string | null;
+  isUsingLocalUrl: boolean;
+  t: (key: string) => string;
+}
+
+function StatusDisplay({
+  currentSSID,
+  isUsingLocalUrl,
+  t,
+}: StatusDisplayProps): React.ReactElement {
+  const wifiStatus = currentSSID ?? t("home.settings.network.not_connected");
+  const urlType = isUsingLocalUrl
+    ? t("home.settings.network.local")
+    : t("home.settings.network.remote");
+  const urlTypeColor = isUsingLocalUrl ? "text-green-500" : "text-blue-500";
+
+  return (
+    <View className='px-4 py-2 bg-neutral-900 rounded-xl mt-4'>
+      <View className='flex-row justify-between items-center py-1'>
+        <Text className='text-neutral-400'>
+          {t("home.settings.network.current_wifi")}
+        </Text>
+        <Text>{wifiStatus}</Text>
+      </View>
+      <View className='flex-row justify-between items-center py-1'>
+        <Text className='text-neutral-400'>
+          {t("home.settings.network.using_url")}
+        </Text>
+        <Text className={urlTypeColor}>{urlType}</Text>
+      </View>
+    </View>
+  );
+}
+
+export function LocalNetworkSettings(): React.ReactElement | null {
+  const { t } = useTranslation();
+  const { permissionStatus, requestPermission } = useWifiSSID();
+  const { isUsingLocalUrl, currentSSID, refreshUrlState } = useServerUrl();
+
+  const remoteUrl = storage.getString("serverUrl");
+  const [config, setConfig] = useState<LocalNetworkConfig>(DEFAULT_CONFIG);
+
+  useEffect(() => {
+    if (remoteUrl) {
+      const existingConfig = getServerLocalConfig(remoteUrl);
+      if (existingConfig) {
+        setConfig(existingConfig);
+      }
+    }
+  }, [remoteUrl]);
+
+  const saveConfig = useCallback(
+    (newConfig: LocalNetworkConfig) => {
+      if (!remoteUrl) return;
+      setConfig(newConfig);
+      updateServerLocalConfig(remoteUrl, newConfig);
+      // Trigger URL re-evaluation after config change
+      refreshUrlState();
+    },
+    [remoteUrl, refreshUrlState],
+  );
+
+  const handleToggleEnabled = useCallback(
+    async (enabled: boolean) => {
+      if (enabled && permissionStatus !== "granted") {
+        const granted = await requestPermission();
+        if (!granted) {
+          toast.error(t("home.settings.network.permission_denied"));
+          return;
+        }
+      }
+      saveConfig({ ...config, enabled });
+    },
+    [config, permissionStatus, requestPermission, saveConfig, t],
+  );
+
+  const handleLocalUrlChange = useCallback(
+    (localUrl: string) => {
+      saveConfig({ ...config, localUrl });
+    },
+    [config, saveConfig],
+  );
+
+  const handleAddCurrentNetwork = useCallback(() => {
+    if (!currentSSID) {
+      toast.error(t("home.settings.network.no_wifi_connected"));
+      return;
+    }
+    if (config.homeWifiSSIDs.includes(currentSSID)) {
+      toast.info(t("home.settings.network.network_already_added"));
+      return;
+    }
+    saveConfig({
+      ...config,
+      homeWifiSSIDs: [...config.homeWifiSSIDs, currentSSID],
+    });
+    toast.success(t("home.settings.network.network_added"));
+  }, [config, currentSSID, saveConfig, t]);
+
+  const handleRemoveNetwork = useCallback(
+    (ssidToRemove: string) => {
+      saveConfig({
+        ...config,
+        homeWifiSSIDs: config.homeWifiSSIDs.filter((s) => s !== ssidToRemove),
+      });
+    },
+    [config, saveConfig],
+  );
+
+  if (!remoteUrl) return null;
+
+  const addNetworkButtonText = currentSSID
+    ? t("home.settings.network.add_current_network", { ssid: currentSSID })
+    : t("home.settings.network.not_connected_to_wifi");
+
+  return (
+    <View>
+      <ListGroup title={t("home.settings.network.local_network")}>
+        <ListItem
+          title={t("home.settings.network.auto_switch_enabled")}
+          subtitle={t("home.settings.network.auto_switch_description")}
+        >
+          <Switch value={config.enabled} onValueChange={handleToggleEnabled} />
+        </ListItem>
+      </ListGroup>
+
+      {config.enabled && (
+        <View className='pt-4'>
+          <ListGroup
+            title={t("home.settings.network.local_url")}
+            description={
+              <Text className='text-[#8E8D91] text-xs'>
+                {t("home.settings.network.local_url_hint")}
+              </Text>
+            }
+          >
+            <View className=''>
+              <Input
+                placeholder={t("home.settings.network.local_url_placeholder")}
+                value={config.localUrl}
+                onChangeText={handleLocalUrlChange}
+                keyboardType='url'
+                autoCapitalize='none'
+                autoCorrect={false}
+              />
+            </View>
+          </ListGroup>
+
+          <ListGroup
+            title={t("home.settings.network.home_wifi_networks")}
+            className='mt-4'
+          >
+            {config.homeWifiSSIDs.map((wifiSSID) => (
+              <ListItem key={wifiSSID} title={wifiSSID}>
+                <TouchableOpacity
+                  onPress={() => handleRemoveNetwork(wifiSSID)}
+                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                  <Ionicons name='close-circle' size={22} color='#EF4444' />
+                </TouchableOpacity>
+              </ListItem>
+            ))}
+            {config.homeWifiSSIDs.length === 0 && (
+              <ListItem
+                title={t("home.settings.network.no_networks_configured")}
+                subtitle={t("home.settings.network.add_network_hint")}
+              />
+            )}
+          </ListGroup>
+
+          <View className='py-2'>
+            <Button
+              onPress={handleAddCurrentNetwork}
+              disabled={!currentSSID || permissionStatus !== "granted"}
+            >
+              {addNetworkButtonText}
+            </Button>
+          </View>
+
+          <StatusDisplay
+            currentSSID={currentSSID}
+            isUsingLocalUrl={isUsingLocalUrl}
+            t={t}
+          />
+        </View>
+      )}
+
+      {permissionStatus === "denied" && (
+        <View className='py-2'>
+          <Text className='text-xs text-red-500'>
+            {t("home.settings.network.permission_denied_explanation")}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

components/settings/OtherSettings.tsx

@@ -1,5 +1,4 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useRouter } from "expo-router";
 import { TFunction } from "i18next";
 import type React from "react";
 import { useMemo } from "react";
@@ -8,6 +7,7 @@ import { Linking, Switch, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import DisabledSetting from "@/components/settings/DisabledSetting";
+import useRouter from "@/hooks/useAppRouter";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";

components/settings/PlaybackControlsSettings.tsx

@@ -8,6 +8,7 @@ import { BITRATES } from "@/components/BitrateSelector";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
 import DisabledSetting from "@/components/settings/DisabledSetting";
+import useRouter from "@/hooks/useAppRouter";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
@@ -15,6 +16,7 @@ import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 
 export const PlaybackControlsSettings: React.FC = () => {
+  const router = useRouter();
   const { settings, updateSettings, pluginSettings } = useSettings();
   const { t } = useTranslation();
 
@@ -29,6 +31,7 @@ export const PlaybackControlsSettings: React.FC = () => {
   const orientations = [
     ScreenOrientation.OrientationLock.DEFAULT,
     ScreenOrientation.OrientationLock.PORTRAIT_UP,
+    ScreenOrientation.OrientationLock.LANDSCAPE,
     ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
     ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
   ];
@@ -39,6 +42,8 @@ export const PlaybackControlsSettings: React.FC = () => {
         "home.settings.other.orientations.DEFAULT",
       [ScreenOrientation.OrientationLock.PORTRAIT_UP]:
         "home.settings.other.orientations.PORTRAIT_UP",
+      [ScreenOrientation.OrientationLock.LANDSCAPE]:
+        "home.settings.other.orientations.LANDSCAPE",
       [ScreenOrientation.OrientationLock.LANDSCAPE_LEFT]:
         "home.settings.other.orientations.LANDSCAPE_LEFT",
       [ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT]:
@@ -245,6 +250,15 @@ export const PlaybackControlsSettings: React.FC = () => {
             title={t("home.settings.other.max_auto_play_episode_count")}
           />
         </ListItem>
+
+        {/* Media Segment Skip Settings */}
+        <ListItem
+          title={t("home.settings.other.segment_skip_settings")}
+          subtitle={t("home.settings.other.segment_skip_settings_description")}
+          onPress={() => router.push("/settings/segment-skip/page")}
+        >
+          <Ionicons name='chevron-forward' size={20} color='#8E8D91' />
+        </ListItem>
       </ListGroup>
     </DisabledSetting>
   );

components/settings/PluginSettings.tsx

@@ -1,5 +1,5 @@
-import { useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
+import useRouter from "@/hooks/useAppRouter";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";

components/video-player/controls/BottomControls.tsx

@@ -19,7 +19,9 @@ interface BottomControlsProps {
   currentTime: number;
   remainingTime: number;
   showSkipButton: boolean;
+  skipButtonText: string;
   showSkipCreditButton: boolean;
+  skipCreditButtonText: string;
   hasContentAfterCredits: boolean;
   skipIntro: () => void;
   skipCredit: () => void;
@@ -67,7 +69,9 @@ export const BottomControls: FC<BottomControlsProps> = ({
   currentTime,
   remainingTime,
   showSkipButton,
+  skipButtonText,
   showSkipCreditButton,
+  skipCreditButtonText,
   hasContentAfterCredits,
   skipIntro,
   skipCredit,
@@ -136,7 +140,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
           <SkipButton
             showButton={showSkipButton}
             onPress={skipIntro}
-            buttonText='Skip Intro'
+            buttonText={skipButtonText}
           />
           {/* Smart Skip Credits behavior:
               - Show "Skip Credits" if there's content after credits OR no next episode
@@ -146,7 +150,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
               showSkipCreditButton && (hasContentAfterCredits || !nextItem)
             }
             onPress={skipCredit}
-            buttonText='Skip Credits'
+            buttonText={skipCreditButtonText}
           />
           {settings.autoPlayNextEpisode !== false &&
             (settings.maxAutoPlayEpisodeCount.value === -1 ||

components/video-player/controls/ContinueWatchingOverlay.tsx

@@ -1,9 +1,9 @@
-import { useRouter } from "expo-router";
 import { t } from "i18next";
 import React from "react";
 import { View } from "react-native";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import { useSettings } from "@/utils/atoms/settings";
 
 export interface ContinueWatchingOverlayProps {
@@ -23,7 +23,7 @@ const ContinueWatchingOverlay: React.FC<ContinueWatchingOverlayProps> = ({
     settings.maxAutoPlayEpisodeCount.value ? (
     <View
       className={
-        "absolute top-0 bottom-0 left-0 right-0 flex flex-col px-4 items-center justify-center bg-[#000000B3]"
+        "absolute top-0 bottom-0 left-0 right-0 z-50 flex flex-col px-4 items-center justify-center bg-[#000000B3]"
       }
     >
       <Text className='text-2xl font-bold text-white py-4 '>

components/video-player/controls/Controls.tsx

@@ -3,8 +3,16 @@ import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
-import { useLocalSearchParams, useRouter } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
-import { type FC, useCallback, useEffect, useState } from "react";
+import {
+  type FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
 import { StyleSheet, useWindowDimensions, View } from "react-native";
 import Animated, {
   Easing,
@@ -15,15 +23,18 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import ContinueWatchingOverlay from "@/components/video-player/controls/ContinueWatchingOverlay";
-import { useCreditSkipper } from "@/hooks/useCreditSkipper";
+import useRouter from "@/hooks/useAppRouter";
 import { useHaptic } from "@/hooks/useHaptic";
-import { useIntroSkipper } from "@/hooks/useIntroSkipper";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
+import { useSegmentSkipper } from "@/hooks/useSegmentSkipper";
 import { useTrickplay } from "@/hooks/useTrickplay";
+import type { TechnicalInfo } from "@/modules/mpv-player";
 import { DownloadedItem } from "@/providers/Downloads/types";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { ticksToMs } from "@/utils/time";
+import { useSegments } from "@/utils/segments";
+import { msToSeconds, ticksToMs } from "@/utils/time";
 import { BottomControls } from "./BottomControls";
 import { CenterControls } from "./CenterControls";
 import { CONTROLS_CONSTANTS } from "./constants";
@@ -34,10 +45,14 @@ import { useRemoteControl } from "./hooks/useRemoteControl";
 import { useVideoNavigation } from "./hooks/useVideoNavigation";
 import { useVideoSlider } from "./hooks/useVideoSlider";
 import { useVideoTime } from "./hooks/useVideoTime";
+import { TechnicalInfoOverlay } from "./TechnicalInfoOverlay";
 import { useControlsTimeout } from "./useControlsTimeout";
 import { PlaybackSpeedScope } from "./utils/playback-speed-settings";
 import { type AspectRatio } from "./VideoScalingModeSelector";
 
+// No-op function to avoid creating new references on every render
+const noop = () => {};
+
 interface Props {
   item: BaseItemDto;
   isPlaying: boolean;
@@ -49,7 +64,6 @@ interface Props {
   enableTrickplay?: boolean;
   togglePlay: () => void;
   setShowControls: (shown: boolean) => void;
-  offline?: boolean;
   mediaSource?: MediaSourceInfo | null;
   seek: (ticks: number) => void;
   startPictureInPicture?: () => Promise<void>;
@@ -63,6 +77,12 @@ interface Props {
   // Playback speed props
   playbackSpeed?: number;
   setPlaybackSpeed?: (speed: number, scope: PlaybackSpeedScope) => void;
+  // Technical info props
+  showTechnicalInfo?: boolean;
+  onToggleTechnicalInfo?: () => void;
+  getTechnicalInfo?: () => Promise<TechnicalInfo>;
+  playMethod?: "DirectPlay" | "DirectStream" | "Transcode";
+  transcodeReasons?: string[];
 }
 
 export const Controls: FC<Props> = ({
@@ -83,12 +103,17 @@ export const Controls: FC<Props> = ({
   aspectRatio = "default",
   isZoomedToFill = false,
   onZoomToggle,
-  offline = false,
   api = null,
   downloadedFiles = undefined,
   playbackSpeed = 1.0,
   setPlaybackSpeed,
+  showTechnicalInfo = false,
+  onToggleTechnicalInfo,
+  getTechnicalInfo,
+  playMethod,
+  transcodeReasons,
 }) => {
+  const offline = useOfflineMode();
   const { settings, updateSettings } = useSettings();
   const router = useRouter();
   const lightHapticFeedback = useHaptic("light");
@@ -96,6 +121,24 @@ export const Controls: FC<Props> = ({
   const [episodeView, setEpisodeView] = useState(false);
   const [showAudioSlider, setShowAudioSlider] = useState(false);
 
+  // Ref to track pending play timeout for cleanup and cancellation
+  const playTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Mutable ref tracking isPlaying to avoid stale closures in seekMs timeout
+  const playingRef = useRef(isPlaying);
+  useEffect(() => {
+    playingRef.current = isPlaying;
+  }, [isPlaying]);
+
+  // Clean up timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (playTimeoutRef.current) {
+        clearTimeout(playTimeoutRef.current);
+      }
+    };
+  }, []);
+
   const { height: screenHeight, width: screenWidth } = useWindowDimensions();
   const { previousItem, nextItem } = usePlaybackManager({
     item,
@@ -110,7 +153,9 @@ export const Controls: FC<Props> = ({
   } = useTrickplay(item);
 
   const min = useSharedValue(0);
-  const max = useSharedValue(ticksToMs(item.RunTimeTicks || 0));
+  // Regular value for use during render (avoids Reanimated warning)
+  const maxMs = ticksToMs(item.RunTimeTicks || 0);
+  const max = useSharedValue(maxMs);
 
   // Animation values for controls
   const controlsOpacity = useSharedValue(showControls ? 1 : 0);
@@ -284,27 +329,125 @@ export const Controls: FC<Props> = ({
     subtitleIndex: string;
   }>();
 
-  const { showSkipButton, skipIntro } = useIntroSkipper(
+  // Fetch all segments for the current item
-    item.Id!,
+  const { data: segments } = useSegments(
-    currentTime,
+    item.Id ?? "",
-    seek,
-    play,
     offline,
-    api,
     downloadedFiles,
+    api,
   );
 
-  const { showSkipCreditButton, skipCredit, hasContentAfterCredits } =
+  // Convert milliseconds to seconds for segment comparison
-    useCreditSkipper(
+  const currentTimeSeconds = msToSeconds(currentTime);
-      item.Id!,
+  const maxSeconds = maxMs ? msToSeconds(maxMs) : undefined;
-      currentTime,
+
-      seek,
+  // Wrapper to convert segment skip from seconds to milliseconds
-      play,
+  // Includes 200ms delay to allow seek operation to complete before resuming playback
-      offline,
+  const seekMs = useCallback(
-      api,
+    (timeInSeconds: number) => {
-      downloadedFiles,
+      // Cancel any pending play call to avoid race conditions
-      max.value,
+      if (playTimeoutRef.current) {
-    );
+        clearTimeout(playTimeoutRef.current);
+      }
+      seek(timeInSeconds * 1000);
+      // Brief delay ensures the seek operation completes before resuming playback
+      // Without this, playback may resume from the old position
+      // Read latest isPlaying from ref to avoid stale closure
+      playTimeoutRef.current = setTimeout(() => {
+        if (playingRef.current) {
+          play();
+        }
+        playTimeoutRef.current = null;
+      }, 200);
+    },
+    [seek, play],
+  );
+
+  // Use unified segment skipper for all segment types
+  const introSkipper = useSegmentSkipper({
+    segments: segments?.introSegments || [],
+    segmentType: "Intro",
+    currentTime: currentTimeSeconds,
+    seek: seekMs,
+    isPaused: !isPlaying,
+  });
+
+  const outroSkipper = useSegmentSkipper({
+    segments: segments?.creditSegments || [],
+    segmentType: "Outro",
+    currentTime: currentTimeSeconds,
+    totalDuration: maxSeconds,
+    seek: seekMs,
+    isPaused: !isPlaying,
+  });
+
+  const recapSkipper = useSegmentSkipper({
+    segments: segments?.recapSegments || [],
+    segmentType: "Recap",
+    currentTime: currentTimeSeconds,
+    seek: seekMs,
+    isPaused: !isPlaying,
+  });
+
+  const commercialSkipper = useSegmentSkipper({
+    segments: segments?.commercialSegments || [],
+    segmentType: "Commercial",
+    currentTime: currentTimeSeconds,
+    seek: seekMs,
+    isPaused: !isPlaying,
+  });
+
+  const previewSkipper = useSegmentSkipper({
+    segments: segments?.previewSegments || [],
+    segmentType: "Preview",
+    currentTime: currentTimeSeconds,
+    seek: seekMs,
+    isPaused: !isPlaying,
+  });
+
+  // Determine which segment button to show (priority order)
+  // Commercial > Recap > Intro > Preview > Outro
+  const activeSegment = useMemo(() => {
+    if (commercialSkipper.currentSegment)
+      return { type: "Commercial", ...commercialSkipper };
+    if (recapSkipper.currentSegment) return { type: "Recap", ...recapSkipper };
+    if (introSkipper.currentSegment) return { type: "Intro", ...introSkipper };
+    if (previewSkipper.currentSegment)
+      return { type: "Preview", ...previewSkipper };
+    if (outroSkipper.currentSegment) return { type: "Outro", ...outroSkipper };
+    return null;
+  }, [
+    commercialSkipper.currentSegment,
+    recapSkipper.currentSegment,
+    introSkipper.currentSegment,
+    previewSkipper.currentSegment,
+    outroSkipper.currentSegment,
+    commercialSkipper,
+    recapSkipper,
+    introSkipper,
+    previewSkipper,
+    outroSkipper,
+  ]);
+
+  // Legacy compatibility: map to old variable names
+  const showSkipButton = !!(
+    activeSegment &&
+    ["Intro", "Recap", "Commercial", "Preview"].includes(activeSegment.type)
+  );
+  const skipIntro = activeSegment?.skipSegment || noop;
+  const showSkipCreditButton = activeSegment?.type === "Outro";
+  const skipCredit = outroSkipper.skipSegment || noop;
+  const hasContentAfterCredits =
+    outroSkipper.currentSegment && maxSeconds
+      ? outroSkipper.currentSegment.endTime < maxSeconds
+      : false;
+
+  // Get button text based on segment type using i18n
+  const { t } = useTranslation();
+  const skipButtonText = activeSegment
+    ? t(`player.skip_${activeSegment.type.toLowerCase()}`)
+    : t("player.skip_intro");
+  const skipCreditButtonText = t("player.skip_outro");
 
   const goToItemCommon = useCallback(
     (item: BaseItemDto) => {
@@ -457,6 +600,16 @@ export const Controls: FC<Props> = ({
             onSkipForward={handleSkipForward}
             onSkipBackward={handleSkipBackward}
           />
+          {/* Technical Info Overlay - rendered outside animated views to stay visible */}
+          {getTechnicalInfo && (
+            <TechnicalInfoOverlay
+              showControls={showControls}
+              visible={showTechnicalInfo}
+              getTechnicalInfo={getTechnicalInfo}
+              playMethod={playMethod}
+              transcodeReasons={transcodeReasons}
+            />
+          )}
           <Animated.View
             style={headerAnimatedStyle}
             pointerEvents={showControls ? "auto" : "none"}
@@ -477,6 +630,8 @@ export const Controls: FC<Props> = ({
               onZoomToggle={onZoomToggle}
               playbackSpeed={playbackSpeed}
               setPlaybackSpeed={setPlaybackSpeed}
+              showTechnicalInfo={showTechnicalInfo}
+              onToggleTechnicalInfo={onToggleTechnicalInfo}
             />
           </Animated.View>
           <Animated.View
@@ -506,7 +661,9 @@ export const Controls: FC<Props> = ({
               currentTime={currentTime}
               remainingTime={remainingTime}
               showSkipButton={showSkipButton}
+              skipButtonText={skipButtonText}
               showSkipCreditButton={showSkipCreditButton}
+              skipCreditButtonText={skipCreditButtonText}
               hasContentAfterCredits={hasContentAfterCredits}
               skipIntro={skipIntro}
               skipCredit={skipCredit}

components/video-player/controls/EpisodeList.tsx

@@ -2,11 +2,10 @@ import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useGlobalSearchParams } from "expo-router";
 import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useRef } from "react";
 import { TouchableOpacity, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
 import {
   HorizontalScroll,
@@ -19,10 +18,16 @@ import {
   type SeasonIndexState,
 } from "@/components/series/SeasonDropdown";
 import { useDownload } from "@/providers/DownloadProvider";
-import type { DownloadedItem } from "@/providers/Downloads/types";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import {
+  getDownloadedEpisodesForSeason,
+  getDownloadedSeasonNumbers,
+} from "@/utils/downloads/offline-series";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { runtimeTicksToSeconds } from "@/utils/time";
+import { HEADER_LAYOUT, ICON_SIZES } from "./constants";
 
 type Props = {
   item: BaseItemDto;
@@ -40,10 +45,9 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
   const scrollToIndex = (index: number) => {
     scrollViewRef.current?.scrollToIndex(index, 100);
   };
-  const { offline } = useGlobalSearchParams<{
+  const isOffline = useOfflineMode();
-    offline: string;
+  const { settings } = useSettings();
-  }>();
+  const insets = useSafeAreaInsets();
-  const isOffline = offline === "true";
 
   // Set the initial season index
   useEffect(() => {
@@ -56,10 +60,6 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
   }, []);
 
   const { getDownloadedItems } = useDownload();
-  const downloadedFiles = useMemo(
-    () => getDownloadedItems(),
-    [getDownloadedItems],
-  );
 
   const seasonIndex = seasonIndexState[item.ParentId ?? ""];
 
@@ -68,15 +68,9 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     queryFn: async () => {
       if (isOffline) {
         if (!item.SeriesId) return [];
-        const seriesEpisodes = downloadedFiles?.filter(
+        const seasonNumbers = getDownloadedSeasonNumbers(
-          (f: DownloadedItem) => f.item.SeriesId === item.SeriesId,
+          getDownloadedItems(),
-        );
+          item.SeriesId,
-        const seasonNumbers = Array.from(
-          new Set(
-            seriesEpisodes
-              ?.map((f: DownloadedItem) => f.item.ParentIndexNumber)
-              .filter(Boolean),
-          ),
         );
         // Create fake season objects
         return seasonNumbers.map((seasonNumber) => ({
@@ -117,14 +111,12 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     queryKey: ["episodes", item.SeriesId, selectedSeasonId],
     queryFn: async () => {
       if (isOffline) {
-        if (!item.SeriesId) return [];
+        if (!item.SeriesId || typeof seasonIndex !== "number") return [];
-        return downloadedFiles
+        return getDownloadedEpisodesForSeason(
-          ?.filter(
+          getDownloadedItems(),
-            (f: DownloadedItem) =>
+          item.SeriesId,
-              f.item.SeriesId === item.SeriesId &&
+          seasonIndex,
-              f.item.ParentIndexNumber === seasonIndex,
+        );
-          )
-          .map((f: DownloadedItem) => f.item);
       }
       if (!api || !user?.Id || !item.Id || !selectedSeasonId) return [];
       const res = await getTvShowsApi(api).getEpisodes({
@@ -153,6 +145,9 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
 
   const queryClient = useQueryClient();
   useEffect(() => {
+    // Don't prefetch when offline - data is already local
+    if (isOffline) return;
+
     for (const e of episodes || []) {
       queryClient.prefetchQuery({
         queryKey: ["item", e.Id],
@@ -168,7 +163,7 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
         staleTime: 60 * 5 * 1000,
       });
     }
-  }, [episodes]);
+  }, [episodes, isOffline]);
 
   // Scroll to the current item when episodes are fetched
   useEffect(() => {
@@ -181,15 +176,24 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
   }, [episodes, item.Id]);
 
   return (
-    <SafeAreaView
+    <View
       style={{
         position: "absolute",
         backgroundColor: "black",
         height: "100%",
         width: "100%",
+        paddingTop:
+          (settings?.safeAreaInControlsEnabled ?? true) ? insets.top : 0,
+        paddingLeft:
+          (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+        paddingRight:
+          (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
       }}
     >
-      <View className='flex-row items-center p-4 z-10'>
+      <View
+        style={{ padding: HEADER_LAYOUT.CONTAINER_PADDING }}
+        className='flex-row items-center z-10'
+      >
         {seasons && seasons.length > 0 && !episodesLoading && episodes && (
           <SeasonDropdown
             item={item}
@@ -207,9 +211,9 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
           onPress={async () => {
             close();
           }}
-          className='aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2 ml-auto'
+          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2 ml-auto'
         >
-          <Ionicons name='close' size={24} color='white' />
+          <Ionicons name='close' size={ICON_SIZES.HEADER} color='white' />
         </TouchableOpacity>
       </View>
 
@@ -274,6 +278,6 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
           showsHorizontalScrollIndicator={false}
         />
       )}
-    </SafeAreaView>
+    </View>
   );
 };

components/video-player/controls/HeaderControls.tsx

@@ -3,15 +3,15 @@ import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
-import { useRouter } from "expo-router";
 import { type FC, useCallback, useState } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import useRouter from "@/hooks/useAppRouter";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useOrientation } from "@/hooks/useOrientation";
 import { OrientationLock } from "@/packages/expo-screen-orientation";
 import { useSettings } from "@/utils/atoms/settings";
-import { ICON_SIZES } from "./constants";
+import { HEADER_LAYOUT, ICON_SIZES } from "./constants";
 import DropdownView from "./dropdown/DropdownView";
 import { PlaybackSpeedScope } from "./utils/playback-speed-settings";
 import { type AspectRatio } from "./VideoScalingModeSelector";
@@ -34,6 +34,9 @@ interface HeaderControlsProps {
   // Playback speed props
   playbackSpeed?: number;
   setPlaybackSpeed?: (speed: number, scope: PlaybackSpeedScope) => void;
+  // Technical info props
+  showTechnicalInfo?: boolean;
+  onToggleTechnicalInfo?: () => void;
 }
 
 export const HeaderControls: FC<HeaderControlsProps> = ({
@@ -52,6 +55,8 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
   onZoomToggle,
   playbackSpeed = 1.0,
   setPlaybackSpeed,
+  showTechnicalInfo = false,
+  onToggleTechnicalInfo,
 }) => {
   const { settings } = useSettings();
   const router = useRouter();
@@ -98,17 +103,20 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
           left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
           right:
             (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
+          padding: HEADER_LAYOUT.CONTAINER_PADDING,
         },
       ]}
       pointerEvents={showControls ? "auto" : "none"}
       className='flex flex-row justify-between'
     >
-      <View className='mr-auto p-2' pointerEvents='box-none'>
+      <View className='mr-auto' pointerEvents='box-none'>
         {!Platform.isTV && (!offline || !mediaSource?.TranscodingUrl) && (
           <View pointerEvents='auto'>
             <DropdownView
               playbackSpeed={playbackSpeed}
               setPlaybackSpeed={setPlaybackSpeed}
+              showTechnicalInfo={showTechnicalInfo}
+              onToggleTechnicalInfo={onToggleTechnicalInfo}
             />
           </View>
         )}

components/video-player/controls/TechnicalInfoOverlay.tsx

@@ -0,0 +1,283 @@
+import { type FC, memo, useCallback, useEffect, useState } from "react";
+import { Platform, StyleSheet, Text, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { TechnicalInfo } from "@/modules/mpv-player";
+import { useSettings } from "@/utils/atoms/settings";
+import { HEADER_LAYOUT } from "./constants";
+
+type PlayMethod = "DirectPlay" | "DirectStream" | "Transcode";
+
+interface TechnicalInfoOverlayProps {
+  showControls: boolean;
+  visible: boolean;
+  getTechnicalInfo: () => Promise<TechnicalInfo>;
+  playMethod?: PlayMethod;
+  transcodeReasons?: string[];
+}
+
+const formatBitrate = (bitsPerSecond: number): string => {
+  const mbps = bitsPerSecond / 1_000_000;
+  if (mbps >= 1) {
+    return `${mbps.toFixed(1)} Mbps`;
+  }
+  const kbps = bitsPerSecond / 1_000;
+  return `${kbps.toFixed(0)} Kbps`;
+};
+
+const formatCodec = (codec: string): string => {
+  // Normalize common codec names
+  const codecMap: Record<string, string> = {
+    h264: "H.264",
+    hevc: "HEVC",
+    h265: "HEVC",
+    vp9: "VP9",
+    vp8: "VP8",
+    av1: "AV1",
+    aac: "AAC",
+    ac3: "AC3",
+    eac3: "E-AC3",
+    dts: "DTS",
+    truehd: "TrueHD",
+    flac: "FLAC",
+    opus: "Opus",
+    mp3: "MP3",
+  };
+  return codecMap[codec.toLowerCase()] || codec.toUpperCase();
+};
+
+const formatFps = (fps: number): string => {
+  // Common frame rates
+  if (Math.abs(fps - 23.976) < 0.01) return "23.976";
+  if (Math.abs(fps - 29.97) < 0.01) return "29.97";
+  if (Math.abs(fps - 59.94) < 0.01) return "59.94";
+  if (Number.isInteger(fps)) return fps.toString();
+  return fps.toFixed(2);
+};
+
+const getPlayMethodLabel = (method: PlayMethod): string => {
+  switch (method) {
+    case "DirectPlay":
+      return "Direct Play";
+    case "DirectStream":
+      return "Direct Stream";
+    case "Transcode":
+      return "Transcoding";
+    default:
+      return method;
+  }
+};
+
+const getPlayMethodColor = (method: PlayMethod): string => {
+  switch (method) {
+    case "DirectPlay":
+      return "#4ade80"; // green
+    case "DirectStream":
+      return "#60a5fa"; // blue
+    case "Transcode":
+      return "#fbbf24"; // yellow/amber
+    default:
+      return "white";
+  }
+};
+
+const formatTranscodeReason = (reason: string): string => {
+  // Convert camelCase/PascalCase to readable format
+  const reasonMap: Record<string, string> = {
+    ContainerNotSupported: "Container not supported",
+    VideoCodecNotSupported: "Video codec not supported",
+    AudioCodecNotSupported: "Audio codec not supported",
+    SubtitleCodecNotSupported: "Subtitle codec not supported",
+    AudioIsExternal: "Audio is external",
+    SecondaryAudioNotSupported: "Secondary audio not supported",
+    VideoProfileNotSupported: "Video profile not supported",
+    VideoLevelNotSupported: "Video level not supported",
+    VideoResolutionNotSupported: "Resolution not supported",
+    VideoBitDepthNotSupported: "Bit depth not supported",
+    VideoFramerateNotSupported: "Framerate not supported",
+    RefFramesNotSupported: "Ref frames not supported",
+    AnamorphicVideoNotSupported: "Anamorphic video not supported",
+    InterlacedVideoNotSupported: "Interlaced video not supported",
+    AudioChannelsNotSupported: "Audio channels not supported",
+    AudioProfileNotSupported: "Audio profile not supported",
+    AudioSampleRateNotSupported: "Sample rate not supported",
+    AudioBitDepthNotSupported: "Audio bit depth not supported",
+    ContainerBitrateExceedsLimit: "Bitrate exceeds limit",
+    VideoBitrateNotSupported: "Video bitrate not supported",
+    AudioBitrateNotSupported: "Audio bitrate not supported",
+    UnknownVideoStreamInfo: "Unknown video stream",
+    UnknownAudioStreamInfo: "Unknown audio stream",
+    DirectPlayError: "Direct play error",
+    VideoRangeTypeNotSupported: "HDR not supported",
+    VideoCodecTagNotSupported: "Video codec tag not supported",
+  };
+  return reasonMap[reason] || reason;
+};
+
+export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
+  ({
+    showControls,
+    visible,
+    getTechnicalInfo,
+    playMethod,
+    transcodeReasons,
+  }) => {
+    const { settings } = useSettings();
+    const insets = useSafeAreaInsets();
+    const [info, setInfo] = useState<TechnicalInfo | null>(null);
+
+    const opacity = useSharedValue(0);
+
+    // Animate visibility based on visible prop only (stays visible regardless of controls)
+    useEffect(() => {
+      opacity.value = withTiming(visible ? 1 : 0, {
+        duration: 300,
+        easing: Easing.out(Easing.quad),
+      });
+    }, [visible, opacity]);
+
+    // Fetch technical info periodically when visible
+    const fetchInfo = useCallback(async () => {
+      try {
+        const data = await getTechnicalInfo();
+        setInfo(data);
+      } catch (_error) {
+        // Silently fail - the info is optional
+      }
+    }, [getTechnicalInfo]);
+
+    useEffect(() => {
+      if (!visible) {
+        return;
+      }
+
+      // Fetch immediately
+      fetchInfo();
+
+      // Then fetch every 2 seconds
+      const interval = setInterval(fetchInfo, 2000);
+      return () => clearInterval(interval);
+    }, [visible, fetchInfo]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      opacity: opacity.value,
+    }));
+
+    // Hide on TV platforms
+    if (Platform.isTV) return null;
+
+    // Don't render if not visible
+    if (!visible) return null;
+
+    return (
+      <Animated.View
+        style={[
+          styles.container,
+          animatedStyle,
+          {
+            top:
+              (settings?.safeAreaInControlsEnabled ?? true)
+                ? insets.top + HEADER_LAYOUT.CONTAINER_PADDING + 4
+                : HEADER_LAYOUT.CONTAINER_PADDING + 4,
+            left:
+              (settings?.safeAreaInControlsEnabled ?? true)
+                ? insets.left + HEADER_LAYOUT.CONTAINER_PADDING + 20
+                : HEADER_LAYOUT.CONTAINER_PADDING + 20,
+          },
+        ]}
+        pointerEvents='none'
+      >
+        <View style={styles.infoBox}>
+          {playMethod && (
+            <Text
+              style={[
+                styles.infoText,
+                { color: getPlayMethodColor(playMethod) },
+              ]}
+            >
+              {getPlayMethodLabel(playMethod)}
+            </Text>
+          )}
+          {transcodeReasons && transcodeReasons.length > 0 && (
+            <Text style={[styles.infoText, styles.reasonText]}>
+              {transcodeReasons.map(formatTranscodeReason).join(", ")}
+            </Text>
+          )}
+          {info?.videoWidth && info?.videoHeight && (
+            <Text style={styles.infoText}>
+              {info.videoWidth}x{info.videoHeight}
+            </Text>
+          )}
+          {info?.videoCodec && (
+            <Text style={styles.infoText}>
+              Video: {formatCodec(info.videoCodec)}
+              {info.fps ? ` @ ${formatFps(info.fps)} fps` : ""}
+            </Text>
+          )}
+          {info?.audioCodec && (
+            <Text style={styles.infoText}>
+              Audio: {formatCodec(info.audioCodec)}
+            </Text>
+          )}
+          {(info?.videoBitrate || info?.audioBitrate) && (
+            <Text style={styles.infoText}>
+              Bitrate:{" "}
+              {info.videoBitrate
+                ? formatBitrate(info.videoBitrate)
+                : info.audioBitrate
+                  ? formatBitrate(info.audioBitrate)
+                  : "N/A"}
+            </Text>
+          )}
+          {info?.cacheSeconds !== undefined && (
+            <Text style={styles.infoText}>
+              Buffer: {info.cacheSeconds.toFixed(1)}s
+            </Text>
+          )}
+          {info?.droppedFrames !== undefined && info.droppedFrames > 0 && (
+            <Text style={[styles.infoText, styles.warningText]}>
+              Dropped: {info.droppedFrames} frames
+            </Text>
+          )}
+          {!info && !playMethod && (
+            <Text style={styles.infoText}>Loading...</Text>
+          )}
+        </View>
+      </Animated.View>
+    );
+  },
+);
+
+TechnicalInfoOverlay.displayName = "TechnicalInfoOverlay";
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    zIndex: 15,
+  },
+  infoBox: {
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minWidth: 150,
+  },
+  infoText: {
+    color: "white",
+    fontSize: 12,
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    lineHeight: 18,
+  },
+  warningText: {
+    color: "#ff9800",
+  },
+  reasonText: {
+    color: "#fbbf24",
+    fontSize: 10,
+  },
+});

components/video-player/controls/constants.ts

@@ -15,3 +15,7 @@ export const ICON_SIZES = {
   HEADER: 24,
   CENTER: 50,
 } as const;
+
+export const HEADER_LAYOUT = {
+  CONTAINER_PADDING: 8, // p-2 = 8px (matches HeaderControls)
+} as const;

components/video-player/controls/contexts/PlayerContext.tsx

@@ -18,7 +18,6 @@ interface PlayerContextProps {
   mediaSource: MediaSourceInfo | null | undefined;
   isVideoLoaded: boolean;
   tracksReady: boolean;
-  offline: boolean;
   downloadedItem: DownloadedItem | null;
 }
 
@@ -31,7 +30,6 @@ interface PlayerProviderProps {
   mediaSource: MediaSourceInfo | null | undefined;
   isVideoLoaded: boolean;
   tracksReady: boolean;
-  offline?: boolean;
   downloadedItem?: DownloadedItem | null;
 }
 
@@ -42,7 +40,6 @@ export const PlayerProvider: React.FC<PlayerProviderProps> = ({
   mediaSource,
   isVideoLoaded,
   tracksReady,
-  offline = false,
   downloadedItem = null,
 }) => {
   const value = useMemo(
@@ -52,18 +49,9 @@ export const PlayerProvider: React.FC<PlayerProviderProps> = ({
       mediaSource,
       isVideoLoaded,
       tracksReady,
-      offline,
       downloadedItem,
     }),
-    [
+    [playerRef, item, mediaSource, isVideoLoaded, tracksReady, downloadedItem],
-      playerRef,
-      item,
-      mediaSource,
-      isVideoLoaded,
-      tracksReady,
-      offline,
-      downloadedItem,
-    ],
   );
 
   return (

components/video-player/controls/contexts/VideoContext.tsx

@@ -47,7 +47,7 @@
  */
 
 import { SubtitleDeliveryMethod } from "@jellyfin/sdk/lib/generated-client";
-import { router, useLocalSearchParams } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
 import type React from "react";
 import {
   createContext,
@@ -57,7 +57,9 @@ import {
   useMemo,
   useState,
 } from "react";
+import useRouter from "@/hooks/useAppRouter";
 import type { MpvAudioTrack } from "@/modules";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { isImageBasedSubtitle } from "@/utils/jellyfin/subtitleUtils";
 import type { Track } from "../types";
 import { usePlayerContext, usePlayerControls } from "./PlayerContext";
@@ -75,9 +77,10 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
   const [subtitleTracks, setSubtitleTracks] = useState<Track[] | null>(null);
   const [audioTracks, setAudioTracks] = useState<Track[] | null>(null);
 
-  const { tracksReady, mediaSource, offline, downloadedItem } =
+  const { tracksReady, mediaSource, downloadedItem } = usePlayerContext();
-    usePlayerContext();
   const playerControls = usePlayerControls();
+  const offline = useOfflineMode();
+  const router = useRouter();
 
   const { itemId, audioIndex, bitrateValue, subtitleIndex, playbackPosition } =
     useLocalSearchParams<{

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

@@ -1,5 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useLocalSearchParams, useRouter } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
 import { useCallback, useMemo, useRef } from "react";
 import { Platform, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
@@ -8,6 +8,8 @@ import {
   PlatformDropdown,
 } from "@/components/PlatformDropdown";
 import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
+import useRouter from "@/hooks/useAppRouter";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { usePlayerContext } from "../contexts/PlayerContext";
 import { useVideoContext } from "../contexts/VideoContext";
@@ -28,18 +30,23 @@ const SUBTITLE_SIZE_PRESETS = [
 interface DropdownViewProps {
   playbackSpeed?: number;
   setPlaybackSpeed?: (speed: number, scope: PlaybackSpeedScope) => void;
+  showTechnicalInfo?: boolean;
+  onToggleTechnicalInfo?: () => void;
 }
 
 const DropdownView = ({
   playbackSpeed = 1.0,
   setPlaybackSpeed,
+  showTechnicalInfo = false,
+  onToggleTechnicalInfo,
 }: DropdownViewProps) => {
   const { subtitleTracks, audioTracks } = useVideoContext();
   const { item, mediaSource } = usePlayerContext();
   const { settings, updateSettings } = useSettings();
   const router = useRouter();
+  const isOffline = useOfflineMode();
 
-  const { subtitleIndex, audioIndex, bitrateValue, playbackPosition, offline } =
+  const { subtitleIndex, audioIndex, bitrateValue, playbackPosition } =
     useLocalSearchParams<{
       itemId: string;
       audioIndex: string;
@@ -47,15 +54,12 @@ const DropdownView = ({
       mediaSourceId: string;
       bitrateValue: string;
       playbackPosition: string;
-      offline: string;
     }>();
 
   // Use ref to track playbackPosition without causing re-renders
   const playbackPositionRef = useRef(playbackPosition);
   playbackPositionRef.current = playbackPosition;
 
-  const isOffline = offline === "true";
-
   // Stabilize IDs to prevent unnecessary recalculations
   const itemIdRef = useRef(item.Id);
   const mediaSourceIdRef = useRef(mediaSource?.Id);
@@ -161,6 +165,21 @@ const DropdownView = ({
       });
     }
 
+    // Technical Info (at bottom)
+    if (onToggleTechnicalInfo) {
+      groups.push({
+        options: [
+          {
+            type: "action" as const,
+            label: showTechnicalInfo
+              ? "Hide Technical Info"
+              : "Show Technical Info",
+            onPress: onToggleTechnicalInfo,
+          },
+        ],
+      });
+    }
+
     return groups;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -175,6 +194,8 @@ const DropdownView = ({
     updateSettings,
     playbackSpeed,
     setPlaybackSpeed,
+    showTechnicalInfo,
+    onToggleTechnicalInfo,
     // Note: subtitleTracks and audioTracks are intentionally excluded
     // because we use subtitleTracksKey and audioTracksKey for stability
   ]);

components/watchlists/WatchlistSheet.tsx

@@ -6,7 +6,6 @@ import {
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useRouter } from "expo-router";
 import React, {
   forwardRef,
   useCallback,
@@ -23,6 +22,7 @@ import {
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
 import {
   useAddToWatchlist,
   useRemoveFromWatchlist,

hooks/useAppRouter.ts

@@ -0,0 +1,86 @@
+import { useRouter } from "expo-router";
+import { useCallback, useMemo } from "react";
+import { useOfflineMode } from "@/providers/OfflineModeProvider";
+
+/**
+ * Drop-in replacement for expo-router's useRouter that automatically
+ * preserves offline state across navigation.
+ *
+ * - For object-form navigation, automatically adds offline=true when in offline context
+ * - For string URLs, passes through unchanged (caller handles offline param)
+ *
+ * @example
+ * import useRouter from "@/hooks/useAppRouter";
+ *
+ * const router = useRouter();
+ * router.push({ pathname: "/items/page", params: { id: item.Id } }); // offline added automatically
+ */
+export function useAppRouter() {
+  const router = useRouter();
+  const isOffline = useOfflineMode();
+
+  const push = useCallback(
+    (href: Parameters<typeof router.push>[0]) => {
+      if (typeof href === "string") {
+        router.push(href as any);
+      } else {
+        const callerParams = (href.params ?? {}) as Record<string, unknown>;
+        const hasExplicitOffline = "offline" in callerParams;
+        router.push({
+          ...href,
+          params: {
+            // Only add offline if caller hasn't explicitly set it
+            ...(isOffline && !hasExplicitOffline && { offline: "true" }),
+            ...callerParams,
+          },
+        } as any);
+      }
+    },
+    [router, isOffline],
+  );
+
+  const replace = useCallback(
+    (href: Parameters<typeof router.replace>[0]) => {
+      if (typeof href === "string") {
+        router.replace(href as any);
+      } else {
+        const callerParams = (href.params ?? {}) as Record<string, unknown>;
+        const hasExplicitOffline = "offline" in callerParams;
+        router.replace({
+          ...href,
+          params: {
+            // Only add offline if caller hasn't explicitly set it
+            ...(isOffline && !hasExplicitOffline && { offline: "true" }),
+            ...callerParams,
+          },
+        } as any);
+      }
+    },
+    [router, isOffline],
+  );
+
+  const setParams = useCallback(
+    (params: Parameters<typeof router.setParams>[0]) => {
+      const callerParams = (params ?? {}) as Record<string, unknown>;
+      const hasExplicitOffline = "offline" in callerParams;
+      router.setParams({
+        // Only add offline if caller hasn't explicitly set it
+        ...(isOffline && !hasExplicitOffline && { offline: "true" }),
+        ...callerParams,
+      });
+    },
+    [router, isOffline],
+  );
+
+  return useMemo(
+    () => ({
+      ...router,
+      push,
+      replace,
+      setParams,
+    }),
+    [router, push, replace, setParams],
+  );
+}
+
+export default useAppRouter;

hooks/useCreditSkipper.ts

@@ -1,109 +0,0 @@
-import { Api } from "@jellyfin/sdk";
-import { useCallback, useEffect, useState } from "react";
-import { DownloadedItem } from "@/providers/Downloads/types";
-import { useSegments } from "@/utils/segments";
-import { msToSeconds, secondsToMs } from "@/utils/time";
-import { useHaptic } from "./useHaptic";
-
-/**
- * Custom hook to handle skipping credits in a media player.
- * The player reports time values in milliseconds.
- */
-export const useCreditSkipper = (
-  itemId: string,
-  currentTime: number,
-  seek: (ms: number) => void,
-  play: () => void,
-  isOffline = false,
-  api: Api | null = null,
-  downloadedFiles: DownloadedItem[] | undefined = undefined,
-  totalDuration?: number,
-) => {
-  const [showSkipCreditButton, setShowSkipCreditButton] = useState(false);
-  const lightHapticFeedback = useHaptic("light");
-
-  // Convert ms to seconds for comparison with timestamps
-  const currentTimeSeconds = msToSeconds(currentTime);
-
-  const totalDurationInSeconds =
-    totalDuration != null ? msToSeconds(totalDuration) : undefined;
-
-  // Regular function (not useCallback) to match useIntroSkipper pattern
-  const wrappedSeek = (seconds: number) => {
-    seek(secondsToMs(seconds));
-  };
-
-  const { data: segments } = useSegments(
-    itemId,
-    isOffline,
-    downloadedFiles,
-    api,
-  );
-  const creditTimestamps = segments?.creditSegments?.[0];
-
-  // Determine if there's content after credits (credits don't extend to video end)
-  // Use a 5-second buffer to account for timing discrepancies
-  const hasContentAfterCredits = (() => {
-    if (
-      !creditTimestamps ||
-      totalDurationInSeconds == null ||
-      !Number.isFinite(totalDurationInSeconds)
-    ) {
-      return false;
-    }
-    const creditsEndToVideoEnd =
-      totalDurationInSeconds - creditTimestamps.endTime;
-    // If credits end more than 5 seconds before video ends, there's content after
-    return creditsEndToVideoEnd > 5;
-  })();
-
-  useEffect(() => {
-    if (creditTimestamps) {
-      const shouldShow =
-        currentTimeSeconds > creditTimestamps.startTime &&
-        currentTimeSeconds < creditTimestamps.endTime;
-
-      setShowSkipCreditButton(shouldShow);
-    } else {
-      // Reset button state when no credit timestamps exist
-      if (showSkipCreditButton) {
-        setShowSkipCreditButton(false);
-      }
-    }
-  }, [creditTimestamps, currentTimeSeconds, showSkipCreditButton]);
-
-  const skipCredit = useCallback(() => {
-    if (!creditTimestamps) return;
-
-    try {
-      lightHapticFeedback();
-
-      // Calculate the target seek position
-      let seekTarget = creditTimestamps.endTime;
-
-      // If we have total duration, ensure we don't seek past the end of the video.
-      // Some media sources report credit end times that exceed the actual video duration,
-      // which causes the player to pause/stop when seeking past the end.
-      // Leave a small buffer (2 seconds) to trigger the natural end-of-video flow
-      // (next episode countdown, etc.) instead of an abrupt pause.
-      if (totalDurationInSeconds && seekTarget >= totalDurationInSeconds) {
-        seekTarget = Math.max(0, totalDurationInSeconds - 2);
-      }
-
-      wrappedSeek(seekTarget);
-      setTimeout(() => {
-        play();
-      }, 200);
-    } catch (error) {
-      console.error("[CREDIT_SKIPPER] Error skipping credit", error);
-    }
-  }, [
-    creditTimestamps,
-    lightHapticFeedback,
-    wrappedSeek,
-    play,
-    totalDurationInSeconds,
-  ]);
-
-  return { showSkipCreditButton, skipCredit, hasContentAfterCredits };
-};

hooks/useDownloadedFileOpener.ts

@@ -1,6 +1,6 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useRouter } from "expo-router";
 import { useCallback } from "react";
+import useRouter from "@/hooks/useAppRouter";
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { writeToLog } from "@/utils/log";
 

hooks/useIntroSkipper.ts

@@ -1,68 +0,0 @@
-import { Api } from "@jellyfin/sdk";
-import { useCallback, useEffect, useState } from "react";
-import { DownloadedItem } from "@/providers/Downloads/types";
-import { useSegments } from "@/utils/segments";
-import { msToSeconds, secondsToMs } from "@/utils/time";
-import { useHaptic } from "./useHaptic";
-
-/**
- * Custom hook to handle skipping intros in a media player.
- * MPV player uses milliseconds for time.
- *
- * @param {number} currentTime - The current playback time in milliseconds.
- */
-export const useIntroSkipper = (
-  itemId: string,
-  currentTime: number,
-  seek: (ms: number) => void,
-  play: () => void,
-  isOffline = false,
-  api: Api | null = null,
-  downloadedFiles: DownloadedItem[] | undefined = undefined,
-) => {
-  const [showSkipButton, setShowSkipButton] = useState(false);
-  // Convert ms to seconds for comparison with timestamps
-  const currentTimeSeconds = msToSeconds(currentTime);
-  const lightHapticFeedback = useHaptic("light");
-
-  const wrappedSeek = (seconds: number) => {
-    seek(secondsToMs(seconds));
-  };
-
-  const { data: segments } = useSegments(
-    itemId,
-    isOffline,
-    downloadedFiles,
-    api,
-  );
-  const introTimestamps = segments?.introSegments?.[0];
-
-  useEffect(() => {
-    if (introTimestamps) {
-      const shouldShow =
-        currentTimeSeconds > introTimestamps.startTime &&
-        currentTimeSeconds < introTimestamps.endTime;
-
-      setShowSkipButton(shouldShow);
-    } else {
-      if (showSkipButton) {
-        setShowSkipButton(false);
-      }
-    }
-  }, [introTimestamps, currentTimeSeconds, showSkipButton]);
-
-  const skipIntro = useCallback(() => {
-    if (!introTimestamps) return;
-    try {
-      lightHapticFeedback();
-      wrappedSeek(introTimestamps.endTime);
-      setTimeout(() => {
-        play();
-      }, 200);
-    } catch (error) {
-      console.error("[INTRO_SKIPPER] Error skipping intro", error);
-    }
-  }, [introTimestamps, lightHapticFeedback, wrappedSeek, play]);
-
-  return { showSkipButton, skipIntro };
-};

hooks/useNetworkAwareQueryClient.ts

@@ -36,12 +36,26 @@ export function useNetworkAwareQueryClient(): NetworkAwareQueryClient {
   );
 
   return useMemo(() => {
-    // Create a proxy-like object that inherits from queryClient
+    // Use a Proxy to wrap the queryClient and override invalidateQueries.
-    // but overrides invalidateQueries
+    // Object.create doesn't work because QueryClient uses private fields (#)
-    const wrapped = Object.create(queryClient) as NetworkAwareQueryClient;
+    // which can only be accessed on the exact instance they were defined on.
-    wrapped.invalidateQueries = networkAwareInvalidate;
+    const forceInvalidate = queryClient.invalidateQueries.bind(queryClient);
-    wrapped.forceInvalidateQueries =
+
-      queryClient.invalidateQueries.bind(queryClient);
+    return new Proxy(queryClient, {
-    return wrapped;
+      get(target, prop) {
+        if (prop === "invalidateQueries") {
+          return networkAwareInvalidate;
+        }
+        if (prop === "forceInvalidateQueries") {
+          return forceInvalidate;
+        }
+        const value = Reflect.get(target, prop, target);
+        // Bind methods to the original target to preserve private field access
+        if (typeof value === "function") {
+          return value.bind(target);
+        }
+        return value;
+      },
+    }) as NetworkAwareQueryClient;
   }, [queryClient, networkAwareInvalidate]);
 }

hooks/useOrientation.ts

@@ -21,6 +21,8 @@ const orientationToOrientationLock = (
       return OrientationLock.LANDSCAPE_RIGHT;
     case Orientation.PORTRAIT_UP:
       return OrientationLock.PORTRAIT_UP;
+    case Orientation.UNKNOWN:
+      return OrientationLock.LANDSCAPE;
     default:
       return OrientationLock.PORTRAIT_UP;
   }

hooks/usePlaybackManager.ts

@@ -3,7 +3,7 @@ import type {
   PlaybackProgressInfo,
 } from "@jellyfin/sdk/lib/generated-client";
 import { getPlaystateApi, getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useMemo } from "react";
 import { useDownload } from "@/providers/DownloadProvider";
@@ -69,6 +69,7 @@ export const usePlaybackManager = ({
   const api = useAtomValue(apiAtom);
   const user = useAtomValue(userAtom);
   const { isConnected } = useNetworkStatus();
+  const queryClient = useQueryClient();
   const { getDownloadedItemById, updateDownloadedItem, getDownloadedItems } =
     useDownload();
 
@@ -186,6 +187,9 @@ export const usePlaybackManager = ({
           },
         },
       });
+      // Force invalidate queries so they refetch from updated local database
+      queryClient.invalidateQueries({ queryKey: ["item", itemId] });
+      queryClient.invalidateQueries({ queryKey: ["episodes"] });
     }
 
     // Handle remote state update if online
@@ -226,6 +230,9 @@ export const usePlaybackManager = ({
           },
         },
       });
+      // Force invalidate queries so they refetch from updated local database
+      queryClient.invalidateQueries({ queryKey: ["item", itemId] });
+      queryClient.invalidateQueries({ queryKey: ["episodes"] });
     }
 
     // Handle remote state update if online
@@ -268,6 +275,9 @@ export const usePlaybackManager = ({
           },
         },
       });
+      // Force invalidate queries so they refetch from updated local database
+      queryClient.invalidateQueries({ queryKey: ["item", itemId] });
+      queryClient.invalidateQueries({ queryKey: ["episodes"] });
     }
 
     // Handle remote state update if online

hooks/useSegmentSkipper.ts

@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useRef } from "react";
+import { MediaTimeSegment } from "@/providers/Downloads/types";
+import { useSettings } from "@/utils/atoms/settings";
+import { useHaptic } from "./useHaptic";
+
+type SegmentType = "Intro" | "Outro" | "Recap" | "Commercial" | "Preview";
+
+interface UseSegmentSkipperProps {
+  segments: MediaTimeSegment[];
+  segmentType: SegmentType;
+  currentTime: number;
+  totalDuration?: number;
+  seek: (time: number) => void;
+  isPaused: boolean;
+}
+
+interface UseSegmentSkipperReturn {
+  currentSegment: MediaTimeSegment | null;
+  skipSegment: (notifyOrUseHaptics?: boolean) => void;
+}
+
+/**
+ * Generic hook to handle all media segment types (intro, outro, recap, commercial, preview)
+ * Supports three modes: 'none' (disabled), 'ask' (show button), 'auto' (auto-skip)
+ */
+export const useSegmentSkipper = ({
+  segments,
+  segmentType,
+  currentTime,
+  totalDuration,
+  seek,
+  isPaused,
+}: UseSegmentSkipperProps): UseSegmentSkipperReturn => {
+  const { settings } = useSettings();
+  const haptic = useHaptic();
+  const autoSkipTriggeredRef = useRef<string | null>(null);
+
+  // Get skip mode based on segment type
+  const skipMode = (() => {
+    switch (segmentType) {
+      case "Intro":
+        return settings.skipIntro;
+      case "Outro":
+        return settings.skipOutro;
+      case "Recap":
+        return settings.skipRecap;
+      case "Commercial":
+        return settings.skipCommercial;
+      case "Preview":
+        return settings.skipPreview;
+      default:
+        return "none";
+    }
+  })();
+
+  // Find current segment
+  const currentSegment =
+    segments.find(
+      (segment) =>
+        currentTime >= segment.startTime && currentTime < segment.endTime,
+    ) || null;
+
+  // Skip function with optional haptic feedback
+  const skipSegment = useCallback(
+    (notifyOrUseHaptics = true) => {
+      if (!currentSegment || skipMode === "none") return;
+
+      // For Outro segments, prevent seeking past the end
+      if (
+        segmentType === "Outro" &&
+        totalDuration != null &&
+        Number.isFinite(totalDuration)
+      ) {
+        const seekTime = Math.min(currentSegment.endTime, totalDuration);
+        seek(seekTime);
+      } else {
+        seek(currentSegment.endTime);
+      }
+
+      // Only trigger haptic feedback if explicitly requested (manual skip)
+      if (notifyOrUseHaptics) {
+        haptic();
+      }
+    },
+    [currentSegment, segmentType, totalDuration, seek, haptic, skipMode],
+  );
+  // Auto-skip logic when mode is 'auto'
+  useEffect(() => {
+    if (skipMode !== "auto" || isPaused) {
+      return;
+    }
+
+    // Track segment identity to avoid re-triggering on pause/unpause
+    const segmentId = currentSegment
+      ? `${currentSegment.startTime}-${currentSegment.endTime}`
+      : null;
+
+    if (currentSegment && autoSkipTriggeredRef.current !== segmentId) {
+      autoSkipTriggeredRef.current = segmentId;
+      skipSegment(false); // Don't trigger haptics for auto-skip
+    }
+
+    if (!currentSegment) {
+      autoSkipTriggeredRef.current = null;
+    }
+  }, [currentSegment, skipMode, isPaused, skipSegment]);
+
+  // Return null segment if skip mode is 'none'
+  return {
+    currentSegment: skipMode === "none" ? null : currentSegment,
+    skipSegment,
+  };
+};