Update to MPVKIT 0.41

mpv_terminate_destroy() blocks until mpv's threads (including the
vo_avfoundation output thread) are joined, and that teardown needs the
main run loop to complete. Calling it via queue.sync from MpvPlayerView
deinit (main thread) deadlocked/froze the UI on playback exit.

Remove the wakeup callback synchronously while self is still alive, then
run mpv_terminate_destroy on the serial queue via async so deinit returns
immediately and the main thread is never blocked. Also release the PiP
timebase/controller in deinit.

.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/pull_request_template.md

@@ -1,91 +1,54 @@
-<!--
-  Pull Request Template for Streamyfin
-  ====================================
-  Use this template to help reviewers understand the purpose of your PR
-  and to ensure all necessary checks are completed before merging.
+<!-- 
+Use a conventional commit title for the PR title, 
+for example `feat(auth): add MFA`
+All sections below are required. Write N/A if a section is not applicable.
+If you use AI to help implement this PR, you must declare it below. It's very important that the feature or fix implemented has been tested thoroughly by you personally on all target platforms. Only adding AI generated code without proper testing is not allowed and this PR will be closed immediately.
 -->
 
 # 📦 Pull Request
 
-## 🔖 Summary
+<!-- 
+  🤖 AI ASSISTED? 
+  Uncomment the line below if AI was used to assist with this PR:
+-->
+<!-- 
+[![AI Assisted](https://img.shields.io/badge/AI_Assisted-18181b?style=for-the-badge&logo=openai&logoColor=white)](#) -->
+
+## 📝 Description
 <!--
-A concise description of the changes introduced by this PR.
-Example:
-“Add real-time currency conversion widget to dashboard.”
+A short description of the changes and why you're making them.
+Example: “Add option to clean image cache, to mitigate stuck/blank movie poster issues.”
 -->
 
 ## 🏷️ Ticket / Issue
 <!--
 Link to the related ticket, issue or user story.
-You can also indicate if this PR supersedes a previous one.
-Example:
-- Closes #123
-- Fixes STREAMYFIN-456
-- Resolves #789
-- Supersedes #120
-- Related: #130
+Example: Fixes #123
 -->
 
-## 🛠️ What’s Changed
-<!-- Use a Conventional Commit in the PR title, e.g., `feat(auth): add MFA`. 
-If this PR introduces a breaking change, include a `BREAKING CHANGE:` block in the description.
-Spec: https://www.conventionalcommits.org/ -->
-
-- Type: feat | fix | docs | style | refactor | perf | test | chore | build | ci | revert
-- Scope (optional): e.g., auth, billing, mobile
-- Short summary: what changed and why (1–2 lines)
--->
-
-## 📋 Details
-<!--
-Provide more context or background. Explain any non-obvious decisions.
-Include screenshots or GIFs for UI changes if applicable.
--->
-
-### ⚠️ Breaking Changes
-<!-- List any breaking API/contract changes and migration guidance. If none, write “None”. -->
-
-### 🔐 Security & Privacy Impact
-<!-- Data touched, new permissions/scopes, PII, secrets, threat considerations. If none, write “None”. -->
-
-### ⚡ Performance Impact
-<!-- Hot paths, memory/CPU/latency implications, benchmarks if available. -->
-
 ### 🖼️ Screenshots / GIFs (if UI)
-<!-- Before/After, dark mode, responsive states. -->
+<!-- 
+Include screenshots of relevant UI changes for both Android and iOS.
+Before/After, responsive states (if relevant). 
+-->
 
 ## ✅ Checklist
 <!--
 Review and check off items as you complete them.
 -->
 - [ ] I’ve read the [contribution guidelines](CONTRIBUTING.md)
-- [ ] Code follows project style and passes lint/format (`npm|pnpm|yarn|bun` scripts)
-- [ ] Type checks pass (tsc/biome/etc.)
-- [ ] Docs updated (README/ADR/usage/API)
-- [ ] No secrets/credentials included; env vars documented
-- [ ] Release notes/CHANGELOG entry added (if applicable)
-- [ ] Verified locally that changes behave as expected
+- [ ] Verified that changes behave as expected for all platforms
+- [ ] Code passes lint/formatting and type checks (`tsc`/`biome`)
+- [ ] No secrets, hardcoded credentials, or private config files are included
+- [ ] I've declared if AI was used to assist with this PR (by uncommenting the line at the bottom, or not)
 
 ## 🔍 Testing Instructions
 <!--
-Describe how reviewers can test your changes.
+Describe how reviewers can test your changes. This will help the PR get merged faster.
 Example:
-1. `git fetch origin pull/<PR_ID>/head:branchname && git checkout branchname`
-2. Install deps: `npm|pnpm|yarn|bun install`
-3. Start service/app: `npm|pnpm|yarn|bun run [target]` (e.g., `npm run ios` or `bun run android:tv`)
-4. Run tests: `npm|pnpm|yarn|bun test`
-5. Verification steps:
-   - [ ] Expected UI/endpoint behavior
-   - [ ] Logs show no errors
-   - [ ] Edge cases covered (list)
+1. Open the settings page and scroll to the bottom
+2. Verify that the clear data button is visible and pressable
+3. Verify that when you click the clear data button, a dialog appears prompting you to confirm
+4. Verify that when you click the confirm button, the data is cleared and a toast message is displayed
 -->
 
-## ⚙️ Deployment Notes
-<!--
-Describe any deployment considerations such as config, environment vars, or native builds.
--->
-
-## 📝 Additional Notes
-<!--
-Any other information or references related to this PR.
--->

.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
-                buildStatuses['Android Phone'] = buildStatuses['Android TV'] = buildStatuses['iOS Phone'] = {
+                // Fallback to workflow-level status for every build target.
+                // 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 TV', platform: '🤖', device: '📺', statusKey: 'Android TV', artifactPattern: /android.*tv/i },
-              { name: 'iOS Phone', platform: '🍎', device: '📱', statusKey: 'iOS Phone', artifactPattern: /ios.*phone/i },
-              { name: 'iOS TV', platform: '🍎', device: '📺', statusKey: 'iOS TV', artifactPattern: /ios.*tv/i }
+              { name: 'Android Phone', platform: '🤖', device: '📱 Phone', statusKey: 'Android Phone', artifactPattern: /android.*phone/i },
+              { name: 'Android TV', platform: '🤖', device: '📺 TV', statusKey: 'Android TV', artifactPattern: /android.*tv/i },
+              { name: 'iOS', platform: '🍎', device: '📱 Phone', statusKey: 'iOS', artifactPattern: /ios.*phone.*ipa(?!.*unsigned)/i },
+              { name: 'iOS Unsigned', platform: '🍎', device: '📱 Phone Unsigned', statusKey: 'iOS Unsigned', artifactPattern: /ios.*phone.*unsigned/i },
+              { name: 'tvOS', platform: '🍎', device: '📺 TV', statusKey: 'tvOS', artifactPattern: /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
-              if (target.name === 'iOS TV') {
+              // tvOS builds are temporarily disabled until feat/tv-interface
+              // 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-tv:
-  #   if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
-  #   runs-on: macos-26
-  #   name: 🍎 Build iOS IPA (TV)
-  #   permissions:
-  #     contents: read
-  #
-  #   steps:
-  #     - name: 📥 Checkout code
-  #       uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
-  #       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@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
-  #       with:
-  #         bun-version: latest
-  #
-  #     - name: 💾 Cache Bun dependencies
-  #       uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
-  #       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@v1
-  #       with:
-  #         xcode-version: '26.0.1'
-  #
-  #     - name: 🏗️ Setup EAS
-  #       uses: expo/expo-github-action@main
-  #       with:
-  #         eas-version: latest
-  #         token: ${{ secrets.EXPO_TOKEN }}
-  #         eas-cache: true
-  #
-  #     - name: ⚙️ Ensure tvOS SDKs installed
-  #       run: xcodebuild -downloadPlatform tvOS
-  #
-  #     - 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@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
-  #       with:
-  #         name: streamyfin-ios-tv-ipa-${{ env.DATE_TAG }}
-  #         path: build-*.ipa
-  #         retention-days: 7
+  build-ios-phone-unsigned:
+    if: (!contains(github.event.head_commit.message, '[skip ci]'))
+    runs-on: macos-26
+    name: 🍎 Build iOS IPA (Phone - Unsigned)
+    permissions:
+      contents: read
+
+    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@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        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
+
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
+        with:
+          xcode-version: "26.2"
+
+      - name: 🚀 Build iOS app
+        env:
+          EXPO_TV: 0
+        run: bun run ios:unsigned-build ${{ 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@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: streamyfin-ios-phone-unsigned-ipa-${{ env.DATE_TAG }}
+          path: build/*.ipa
+          retention-days: 7
+
+  build-ios-tv:
+    # 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]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
+    runs-on: macos-26
+    name: 🍎 Build tvOS IPA
+    permissions:
+      contents: read
+
+    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@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        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@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
+        with:
+          xcode-version: "26.2"
+
+      - name: 🏗️ Setup EAS
+        uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # 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@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        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@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        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@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # 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@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        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@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
         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@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
+        uses: github/codeql-action/analyze@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0

.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,12 @@ 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/
+.agents/skills/**
+skills-lock.json

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"
@@ -119,8 +124,8 @@
       [
         "./plugins/withGitPod.js",
         {
-          "podName": "MPVKit-GPL",
-          "podspecUrl": "https://raw.githubusercontent.com/streamyfin/MPVKit/0.40.0-av/MPVKit-GPL.podspec"
+          "podName": "MPVKit",
+          "podspecUrl": "https://raw.githubusercontent.com/mpv-ios/MPVKit/0.41.0-av/MPVKit.podspec"
         }
       ]
     ],

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

@@ -1,13 +1,15 @@
 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");
 
 import { useAtom } from "jotai";
+import { HeaderBackButton } from "@/components/common/HeaderBackButton";
 import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
 import { userAtom } from "@/providers/JellyfinProvider";
 
@@ -46,34 +48,7 @@ export default function IndexLayout() {
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           title: t("home.downloads.downloads_title"),
-          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='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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -84,15 +59,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -102,15 +69,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -120,15 +79,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -138,15 +89,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -156,15 +99,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -174,15 +109,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -192,15 +119,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -228,15 +147,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -246,15 +157,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -264,15 +167,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -282,15 +177,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -300,15 +187,7 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       <Stack.Screen
@@ -318,15 +197,17 @@ export default function IndexLayout() {
           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>
-          ),
+          headerLeft: () => <HeaderBackButton />,
+        }}
+      />
+      <Stack.Screen
+        name='settings/network/page'
+        options={{
+          title: t("home.settings.network.title"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => <HeaderBackButton />,
         }}
       />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
@@ -336,11 +217,7 @@ export default function IndexLayout() {
         name='collections/[collectionId]'
         options={{
           title: "",
-          headerLeft: () => (
-            <Pressable onPress={() => _router.back()} className='pl-0.5'>
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
+          headerLeft: () => <HeaderBackButton />,
           headerShown: true,
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios",

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
-      showsVerticalScrollIndicator={false}
-      contentInsetAdjustmentBehavior='automatic'
-    >
-      <View style={{ paddingTop: Platform.OS === "android" ? 17 : 0 }}>
-        <View className='mb-4 flex flex-col space-y-4 px-4'>
-          {/* Queue card - hidden */}
-          {/* <View className='bg-neutral-900 p-4 rounded-2xl'>
+    <OfflineModeProvider isOffline={true}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentInsetAdjustmentBehavior='automatic'
+      >
+        <View style={{ paddingTop: Platform.OS === "android" ? 17 : 0 }}>
+          <View className='mb-4 flex flex-col space-y-4 px-4'>
+            <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'>
-                  {t("home.downloads.queue_hint")}
-                </Text>
-                <View className='flex flex-col space-y-2 mt-2'>
-                  {queue.map((q, index) => (
-                    <TouchableOpacity
-                      onPress={() =>
-                        router.push(`/(auth)/items/page?id=${q.item.Id}`)
-                      }
-                      className='relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between'
-                      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 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'>
+                  {movies?.map((item) => (
+                    <TouchableItemRouter item={item.item} key={item.item.Id}>
+                      <MovieCard item={item.item} />
+                    </TouchableItemRouter>
                   ))}
                 </View>
-
-                {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>
+              </ScrollView>
             </View>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-              <View className='px-4 flex flex-row'>
-                {movies?.map((item) => (
-                  <TouchableItemRouter
-                    item={item.item}
-                    isOffline
-                    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}
+          )}
+          {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>
               </View>
-            </View>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-              <View className='px-4 flex flex-row'>
-                {groupedBySeries?.map((items) => (
-                  <View className='mb-2 last:mb-0' key={items[0].item.SeriesId}>
-                    <SeriesCard
-                      items={items.map((i) => i.item)}
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className='px-4 flex flex-row'>
+                  {groupedBySeries?.map((items) => (
+                    <View
+                      className='mb-2 last:mb-0'
                       key={items[0].item.SeriesId}
-                    />
-                  </View>
-                ))}
-              </View>
-            </ScrollView>
-          </View>
-        )}
-
-        {otherMedia.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.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>
+                    >
+                      <SeriesCard
+                        items={items.map((i) => i.item)}
+                        key={items[0].item.SeriesId}
+                      />
+                    </View>
+                  ))}
+                </View>
+              </ScrollView>
             </View>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-              <View className='px-4 flex flex-row'>
-                {otherMedia?.map((item) => (
-                  <TouchableItemRouter
-                    item={item.item}
-                    isOffline
-                    key={item.item.Id}
-                  >
-                    <MovieCard item={item.item} />
-                  </TouchableItemRouter>
-                ))}
+          )}
+
+          {otherMedia.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.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>
-          </View>
-        )}
-        {downloadedFiles?.length === 0 && (
-          <View className='flex px-4'>
-            <Text className='opacity-50'>
-              {t("home.downloads.no_downloaded_items")}
-            </Text>
-          </View>
-        )}
-      </View>
-    </ScrollView>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className='px-4 flex flex-row'>
+                  {otherMedia?.map((item) => (
+                    <TouchableItemRouter item={item.item} key={item.item.Id}>
+                      <MovieCard item={item.item} />
+                    </TouchableItemRouter>
+                  ))}
+                </View>
+              </ScrollView>
+            </View>
+          )}
+          {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,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 };
@@ -29,8 +30,10 @@ const Page: React.FC = () => {
     ItemFields.MediaStreams,
   ]);
 
-  // Lazily preload item with full media sources in background
-  const { data: itemWithSources } = useItemQuery(id, isOffline, undefined, []);
+  // Lazily preload item with full media sources in background — never cache
+  const { data: itemWithSources } = useItemQuery(id, isOffline, undefined, [], {
+    gcTime: 0,
+  });
 
   const opacity = useSharedValue(1);
   const animatedStyle = useAnimatedStyle(() => {
@@ -75,39 +78,35 @@ const Page: React.FC = () => {
     );
 
   return (
-    <View className='flex flex-1 relative'>
-      <Animated.View
-        pointerEvents={"none"}
-        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={{
-            height: item?.Type === "Episode" ? 300 : 450,
-          }}
-          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-3 bg-neutral-900 rounded mb-3 w-8' />
-        <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>
-        <View className='h-3 bg-neutral-900 rounded w-2/3 mb-1' />
-        <View className='h-10 bg-neutral-900 rounded-lg w-full mb-2' />
-        <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
-        <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
-      </Animated.View>
-      {item && (
-        <ItemContent
-          item={item}
-          isOffline={isOffline}
-          itemWithSources={itemWithSources}
-        />
-      )}
-    </View>
+    <OfflineModeProvider isOffline={isOffline}>
+      <View className='flex flex-1 relative'>
+        <Animated.View
+          pointerEvents={"none"}
+          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={{
+              height: item?.Type === "Episode" ? 300 : 450,
+            }}
+            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-3 bg-neutral-900 rounded mb-3 w-8' />
+          <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>
+          <View className='h-3 bg-neutral-900 rounded w-2/3 mb-1' />
+          <View className='h-10 bg-neutral-900 rounded-lg w-full mb-2' />
+          <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
+          <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
+        </Animated.View>
+        {item && <ItemContent item={item} itemWithSources={itemWithSources} />}
+      </View>
+    </OfflineModeProvider>
   );
 };
 

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],
-    queryFn: async () =>
-      await getUserItemData({
+    queryKey: ["series", seriesId, isOffline, downloadedItems.length],
+    queryFn: async () => {
+      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(
-    () =>
-      getBackdropUrl({
-        api,
-        item,
-        quality: 90,
-        width: 1000,
-      }),
-    [item],
-  );
+  // For offline mode, use stored base64 image
+  const base64Image = useMemo(() => {
+    if (isOffline) {
+      return storage.getString(seriesId);
+    }
+    return null;
+  }, [isOffline, seriesId]);
 
-  const logoUrl = useMemo(
-    () =>
-      getLogoImageUrlById({
-        api,
-        item,
-      }),
-    [item],
-  );
+  const backdropUrl = useMemo(() => {
+    if (isOffline && base64Image) {
+      return `data:image/jpeg;base64,${base64Image}`;
+    }
+    return getBackdropUrl({
+      api,
+      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,
-    enabled: !!api && !!user?.Id && !!item?.Id,
+    staleTime: isOffline ? Infinity : 60,
+    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 &&
-        item &&
-        allEpisodes &&
-        allEpisodes.length > 0 && (
+        !isLoading && 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
-      headerHeight={400}
-      headerImage={
-        <Image
-          source={{
-            uri: backdropUrl,
-          }}
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      }
-      logo={
-        logoUrl ? (
-          <Image
-            source={{
-              uri: logoUrl,
-            }}
-            style={{
-              height: 130,
-              width: "100%",
-            }}
-            contentFit='contain'
-          />
-        ) : undefined
-      }
-    >
-      <View className='flex flex-col pt-4'>
-        <SeriesHeader item={item} />
-        <View className='mb-4'>
-          <NextUp seriesId={seriesId} />
+    <OfflineModeProvider isOffline={isOffline}>
+      <ParallaxScrollView
+        headerHeight={400}
+        headerImage={
+          backdropUrl ? (
+            <Image
+              source={{
+                uri: backdropUrl,
+              }}
+              style={{
+                width: "100%",
+                height: "100%",
+              }}
+            />
+          ) : (
+            <View
+              style={{
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1a1a1a",
+              }}
+            />
+          )
+        }
+        logo={
+          logoUrl ? (
+            <Image
+              source={{
+                uri: logoUrl,
+              }}
+              style={{
+                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)} />
-      </View>
-    </ParallaxScrollView>
+      </ParallaxScrollView>
+    </OfflineModeProvider>
   );
 };
 

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(
-    () => downloadUtils.getDownloadedItems(),
-    [downloadUtils.getDownloadedItems],
-  );
+  // Call directly instead of useMemo - the function reference doesn't change
+  // when data updates, only when the provider initializes
+  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) {
-        setIsBuffering(true);
+      if (isLoading !== undefined) {
+        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
-      playerRef={videoRef}
-      item={item}
-      mediaSource={stream?.mediaSource}
-      isVideoLoaded={isVideoLoaded}
-      tracksReady={tracksReady}
-      offline={offline}
-      downloadedItem={downloadedItem}
-    >
-      <VideoProvider>
-        <View
-          style={{
-            flex: 1,
-            backgroundColor: "black",
-            height: "100%",
-            width: "100%",
-          }}
-        >
+    <OfflineModeProvider isOffline={offline}>
+      <PlayerProvider
+        playerRef={videoRef}
+        item={item}
+        mediaSource={stream?.mediaSource}
+        isVideoLoaded={isVideoLoaded}
+        tracksReady={tracksReady}
+        downloadedItem={downloadedItem}
+      >
+        <VideoProvider>
           <View
             style={{
-              display: "flex",
-              width: "100%",
+              flex: 1,
+              backgroundColor: "black",
               height: "100%",
-              position: "relative",
-              flexDirection: "column",
-              justifyContent: "center",
+              width: "100%",
             }}
           >
-            <MpvPlayerView
-              ref={videoRef}
-              source={videoSource}
-              style={{ width: "100%", height: "100%" }}
-              onProgress={onProgress}
-              onPlaybackStateChange={onPlaybackStateChanged}
-              onLoad={() => setIsVideoLoaded(true)}
-              onError={(e: { nativeEvent: MpvOnErrorEventPayload }) => {
-                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);
+            <View
+              style={{
+                display: "flex",
+                width: "100%",
+                height: "100%",
+                position: "relative",
+                flexDirection: "column",
+                justifyContent: "center",
               }}
-              onTracksReady={() => {
-                setTracksReady(true);
-              }}
-            />
-            {!hasPlaybackStarted && (
-              <View
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  backgroundColor: "black",
-                  justifyContent: "center",
-                  alignItems: "center",
+            >
+              <MpvPlayerView
+                ref={videoRef}
+                source={videoSource}
+                style={{ width: "100%", height: "100%" }}
+                nowPlayingMetadata={nowPlayingMetadata}
+                onProgress={onProgress}
+                onPlaybackStateChange={onPlaybackStateChanged}
+                onLoad={() => setIsVideoLoaded(true)}
+                onError={(e: { nativeEvent: MpvOnErrorEventPayload }) => {
+                  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);
                 }}
-              >
-                <Loader />
-              </View>
+                onTracksReady={() => {
+                  setTracksReady(true);
+                }}
+              />
+              {!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 && (
-            <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}
-              offline={offline}
-              aspectRatio={aspectRatio}
-              isZoomedToFill={isZoomedToFill}
-              onZoomToggle={handleZoomToggle}
-              api={api}
-              downloadedFiles={downloadedFiles}
-              playbackSpeed={currentPlaybackSpeed}
-              setPlaybackSpeed={handleSetPlaybackSpeed}
-            />
-          )}
-        </View>
-      </VideoProvider>
-    </PlayerProvider>
+        </VideoProvider>
+      </PlayerProvider>
+    </OfflineModeProvider>
   );
 }

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);
@@ -377,84 +375,87 @@ function Layout() {
         maxAge: 1000 * 60 * 60 * 24, // 24 hours max cache age
         dehydrateOptions: {
           shouldDehydrateQuery: (query) => {
-            // Only persist successful queries
-            return query.state.status === "success";
+            return (
+              query.state.status === "success" && query.options.gcTime !== 0
+            );
           },
         },
       }}
     >
       <JellyfinProvider>
-        <NetworkStatusProvider>
-          <PlaySettingsProvider>
-            <LogProvider>
-              <WebSocketProvider>
-                <DownloadProvider>
-                  <MusicPlayerProvider>
-                    <GlobalModalProvider>
-                      <BottomSheetModalProvider>
-                        <IntroSheetProvider>
-                          <ThemeProvider value={DarkTheme}>
-                            <SystemBars style='light' hidden={false} />
-                            <Stack initialRouteName='(auth)/(tabs)'>
-                              <Stack.Screen
-                                name='(auth)/(tabs)'
-                                options={{
-                                  headerShown: false,
-                                  title: "",
-                                  header: () => null,
+        <ServerUrlProvider>
+          <NetworkStatusProvider>
+            <PlaySettingsProvider>
+              <LogProvider>
+                <WebSocketProvider>
+                  <DownloadProvider>
+                    <MusicPlayerProvider>
+                      <GlobalModalProvider>
+                        <BottomSheetModalProvider>
+                          <IntroSheetProvider>
+                            <ThemeProvider value={DarkTheme}>
+                              <SystemBars style='light' hidden={false} />
+                              <Stack initialRouteName='(auth)/(tabs)'>
+                                <Stack.Screen
+                                  name='(auth)/(tabs)'
+                                  options={{
+                                    headerShown: false,
+                                    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
-                                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
-                            />
-                            <GlobalModal />
-                          </ThemeProvider>
-                        </IntroSheetProvider>
-                      </BottomSheetModalProvider>
-                    </GlobalModalProvider>
-                  </MusicPlayerProvider>
-                </DownloadProvider>
-              </WebSocketProvider>
-            </LogProvider>
-          </PlaySettingsProvider>
-        </NetworkStatusProvider>
+                              <GlobalModal />
+                            </ThemeProvider>
+                          </IntroSheetProvider>
+                        </BottomSheetModalProvider>
+                      </GlobalModalProvider>
+                    </MusicPlayerProvider>
+                  </DownloadProvider>
+                </WebSocketProvider>
+              </LogProvider>
+            </PlaySettingsProvider>
+          </NetworkStatusProvider>
+        </ServerUrlProvider>
       </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,15 @@ import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { type Href, router } from "expo-router";
+import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+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 +64,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 +173,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),
     );
@@ -191,9 +196,30 @@ export const DownloadItems: React.FC<DownloadProps> = ({
         );
       }
       const downloadDetailsPromises = items.map(async (item) => {
+        // Ensure the snapshot we store offline carries the Chapters array.
+        // Page-level fetches sometimes use a fields filter that omits it; the
+        // offline player would then render no chapter ticks / list.
+        let itemForDownload = item;
+        if (!itemForDownload.Chapters && itemForDownload.Id) {
+          try {
+            const enriched = await getUserLibraryApi(api).getItem({
+              itemId: itemForDownload.Id,
+              userId: user.Id!,
+            });
+            if (enriched.data) {
+              itemForDownload = enriched.data;
+            }
+          } catch (e) {
+            console.warn(
+              "[DownloadItem] failed to refresh item for Chapters, falling back to original",
+              e,
+            );
+          }
+        }
+
         const { mediaSource, audioIndex, subtitleIndex } =
           itemsNotDownloaded.length > 1
-            ? getDefaultPlaySettings(item, settings!)
+            ? getDefaultPlaySettings(itemForDownload, settings!)
             : {
                 mediaSource: selectedOptions?.mediaSource,
                 audioIndex: selectedOptions?.audioIndex,
@@ -202,7 +228,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
 
         const downloadDetails = await getDownloadUrl({
           api,
-          item,
+          item: itemForDownload,
           userId: user.Id!,
           mediaSource: mediaSource!,
           audioStreamIndex: audioIndex ?? -1,
@@ -214,7 +240,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
 
         return {
           url: downloadDetails?.url,
-          item,
+          item: itemForDownload,
           mediaSource: downloadDetails?.mediaSource,
         };
       });

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
-                item={item}
-                loading={loading}
-                isOffline={isOffline}
-              />
+              <SeasonEpisodesCarousel item={item} loading={loading} />
             )}
 
             {!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

@@ -1,4 +1,4 @@
-import { Button, ContextMenu, Host, Picker } from "@expo/ui/swift-ui";
+import { Button, ContextMenu, Host } from "@expo/ui/swift-ui";
 import { Ionicons } from "@expo/vector-icons";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import React, { useEffect } from "react";
@@ -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 = [];
 
@@ -232,23 +254,39 @@ const PlatformDropdownComponent = ({
               // Otherwise render as individual buttons
               if (radioOptions.length > 0) {
                 if (group.title) {
-                  // Use Picker for grouped options
+                  // Use a nested ContextMenu as a submenu for grouped options
+                  const selectedOption = radioOptions.find(
+                    (opt) => opt.selected,
+                  );
+                  const displayTitle = selectedOption
+                    ? `${group.title}: ${selectedOption.label}`
+                    : group.title;
+
                   items.push(
-                    <Picker
-                      key={`picker-${groupIndex}`}
-                      label={group.title}
-                      options={radioOptions.map((opt) => opt.label)}
-                      variant='menu'
-                      selectedIndex={radioOptions.findIndex(
-                        (opt) => opt.selected,
-                      )}
-                      onOptionSelected={(event: any) => {
-                        const index = event.nativeEvent.index;
-                        const selectedOption = radioOptions[index];
-                        selectedOption?.onPress();
-                        onOptionSelect?.(selectedOption?.value);
-                      }}
-                    />,
+                    <ContextMenu key={`submenu-${groupIndex}`}>
+                      <ContextMenu.Trigger>
+                        <Button>{displayTitle}</Button>
+                      </ContextMenu.Trigger>
+                      <ContextMenu.Items>
+                        {radioOptions.map((option, optionIndex) => (
+                          <Button
+                            key={`radio-${groupIndex}-${optionIndex}`}
+                            systemImage={
+                              option.selected
+                                ? "checkmark.circle.fill"
+                                : "circle"
+                            }
+                            onPress={() => {
+                              option.onPress();
+                              onOptionSelect?.(option.value);
+                            }}
+                            disabled={option.disabled}
+                          >
+                            {option.label}
+                          </Button>
+                        ))}
+                      </ContextMenu.Items>
+                    </ContextMenu>,
                   );
                 } else {
                   // Render radio options as direct buttons
@@ -291,6 +329,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/chapters/ChapterList.tsx

@@ -0,0 +1,196 @@
+/**
+ * A modal listing an item's chapters. Each row shows the chapter name and its
+ * timestamp; the current chapter is highlighted. Tapping a row seeks to that
+ * chapter and closes the modal. Player-agnostic — the seek is injected.
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import type { ChapterInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { memo, useEffect, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { FlatList, Modal, Pressable, StyleSheet, View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { Colors } from "@/constants/Colors";
+import {
+  type ChapterEntry,
+  chapterStartsMs,
+  formatChapterTime,
+  sortedChapters,
+} from "@/utils/chapters";
+
+interface ChapterListProps {
+  visible: boolean;
+  chapters: ChapterInfo[] | null | undefined;
+  /** Current playback position in milliseconds (to highlight the row). */
+  currentPositionMs: number;
+  /** Seek the player to this millisecond position. */
+  onSeek: (positionMs: number) => void;
+  onClose: () => void;
+}
+
+const ROW_HEIGHT = 48;
+
+function ChapterListComponent({
+  visible,
+  chapters,
+  currentPositionMs,
+  onSeek,
+  onClose,
+}: ChapterListProps) {
+  const { t } = useTranslation();
+  const listRef = useRef<FlatList<ChapterEntry>>(null);
+
+  const entries = useMemo(() => sortedChapters(chapters), [chapters]);
+  // Memoize starts so currentChapterIndex computation doesn't re-sort/filter
+  // every tick — chapters is the only input that drives the underlying array.
+  const starts = useMemo(() => chapterStartsMs(chapters), [chapters]);
+  const activeIndex = useMemo(() => {
+    let idx = -1;
+    for (let i = 0; i < starts.length; i++) {
+      if (currentPositionMs >= starts[i]) idx = i;
+      else break;
+    }
+    return idx;
+  }, [currentPositionMs, starts]);
+
+  // FlatList.initialScrollIndex only fires at first mount; <Modal> keeps its
+  // children mounted across visible toggles, so subsequent opens never scroll.
+  // Trigger an imperative scroll each time the sheet becomes visible.
+  useEffect(() => {
+    if (!visible || activeIndex < 0 || entries.length === 0) return;
+    const raf = requestAnimationFrame(() => {
+      listRef.current?.scrollToIndex({
+        index: activeIndex,
+        animated: false,
+        viewPosition: 0.5,
+      });
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [visible, activeIndex, entries.length]);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType='slide'
+      onRequestClose={onClose}
+    >
+      <Pressable onPress={onClose} style={styles.backdrop}>
+        <Pressable onPress={(e) => e.stopPropagation()} style={styles.sheet}>
+          <View style={styles.header}>
+            <Text style={styles.title}>{t("chapters.title")}</Text>
+            <Pressable
+              onPress={onClose}
+              hitSlop={10}
+              accessibilityRole='button'
+              accessibilityLabel={t("chapters.close")}
+            >
+              <Ionicons name='close' size={24} color={Colors.text} />
+            </Pressable>
+          </View>
+          <FlatList
+            ref={listRef}
+            data={entries}
+            keyExtractor={(item, index) => `${item.positionMs}-${index}`}
+            getItemLayout={(_, index) => ({
+              length: ROW_HEIGHT,
+              offset: ROW_HEIGHT * index,
+              index,
+            })}
+            onScrollToIndexFailed={(info) => {
+              // Required when getItemLayout is provided and the target index
+              // is outside the currently rendered window. Fallback to an
+              // offset-based scroll, then retry the precise scroll once a
+              // frame has elapsed.
+              listRef.current?.scrollToOffset({
+                offset: info.averageItemLength * info.index,
+                animated: false,
+              });
+              setTimeout(() => {
+                listRef.current?.scrollToIndex({
+                  index: info.index,
+                  animated: false,
+                  viewPosition: 0.5,
+                });
+              }, 50);
+            }}
+            renderItem={({ item, index }) => {
+              const positionMs = item.positionMs;
+              const isActive = index === activeIndex;
+              return (
+                <Pressable
+                  onPress={() => {
+                    onSeek(positionMs);
+                    onClose();
+                  }}
+                  style={[
+                    styles.row,
+                    isActive && { backgroundColor: `${Colors.primary}33` },
+                  ]}
+                >
+                  <Text
+                    style={[
+                      styles.rowText,
+                      { color: isActive ? Colors.primary : Colors.text },
+                    ]}
+                    numberOfLines={1}
+                  >
+                    {item.chapter.Name ||
+                      t("chapters.chapter_number", { number: index + 1 })}
+                  </Text>
+                  <Text style={styles.rowTime}>
+                    {formatChapterTime(positionMs)}
+                  </Text>
+                </Pressable>
+              );
+            }}
+          />
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+export const ChapterList = memo(ChapterListComponent);
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    justifyContent: "flex-end",
+    backgroundColor: "rgba(0,0,0,0.6)",
+  },
+  sheet: {
+    backgroundColor: Colors.background,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    maxHeight: "70%",
+    paddingBottom: 24,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 16,
+  },
+  title: {
+    color: Colors.text,
+    fontSize: 17,
+    fontWeight: "700",
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    height: ROW_HEIGHT,
+  },
+  rowText: {
+    fontSize: 15,
+    flex: 1,
+  },
+  rowTime: {
+    color: Colors.icon,
+    fontSize: 13,
+    marginLeft: 12,
+  },
+});

components/chapters/ChapterTicks.tsx

@@ -0,0 +1,87 @@
+/**
+ * Chapter tick marks drawn as an absolute overlay over a progress slider.
+ * Renders nothing for media with one or zero chapters. `pointerEvents: "none"`
+ * so the slider underneath still receives touches.
+ */
+
+import { memo, useState } from "react";
+import { type LayoutChangeEvent, PixelRatio, View } from "react-native";
+import type { ChapterMarker } from "@/utils/chapters";
+
+interface ChapterTicksProps {
+  /** Pre-computed markers (caller memoizes — avoids double-computing here). */
+  markers: ChapterMarker[];
+  /** Tick colour. */
+  color?: string;
+  /** Tick height in px — slightly less than the slider track thickness. */
+  height?: number;
+  /** Tick width in px — integer to avoid sub-pixel anti-aliasing. */
+  width?: number;
+}
+
+function ChapterTicksComponent({
+  markers,
+  // Semi-transparent black contrasts against both the filled progress
+  // (#fff) and the unfilled track (rgba(255,255,255,0.2)) so the ticks
+  // stay visible across the whole bar as playback advances.
+  color = "rgba(0,0,0,0.55)",
+  height = 14,
+  width = 2,
+}: ChapterTicksProps) {
+  // Hooks must run unconditionally — keep them before any early return.
+  const [sliderWidth, setSliderWidth] = useState(0);
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    setSliderWidth(e.nativeEvent.layout.width);
+  };
+
+  // One chapter (typically a single marker at 0) is not worth marking.
+  if (markers.length <= 1) return null;
+
+  return (
+    <View
+      pointerEvents='none'
+      onLayout={handleLayout}
+      style={{
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        // Let ticks taller than this container bleed beyond its bounds.
+        overflow: "visible",
+      }}
+    >
+      {sliderWidth > 0 &&
+        markers
+          // Skip the leading 0ms marker — it overlaps the slider start and
+          // adds visual noise at an already-rendered boundary.
+          .filter((marker) => marker.positionMs > 0)
+          .map((marker, index) => {
+            // Align both the position AND the width onto the device's
+            // physical pixel grid. Without this, fractional dp values land
+            // at different sub-pixel fractions per tick — Android samples
+            // each one differently and some ticks render visibly thicker.
+            const centerDp = (marker.percent / 100) * sliderWidth;
+            const left = PixelRatio.roundToNearestPixel(centerDp - width / 2);
+            const snappedWidth = PixelRatio.roundToNearestPixel(width);
+            return (
+              <View
+                key={`${marker.positionMs}-${index}`}
+                style={{
+                  position: "absolute",
+                  left,
+                  top: "50%",
+                  marginTop: -height / 2,
+                  height,
+                  width: snappedWidth,
+                  backgroundColor: color,
+                }}
+              />
+            );
+          })}
+    </View>
+  );
+}
+
+export const ChapterTicks = memo(ChapterTicksComponent);

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> = ({
-  item,
-  isOffline,
-  ...props
-}) => {
+export const ItemPeopleSections: React.FC<Props> = ({ item, ...props }) => {
+  const isOffline = useOfflineMode();
   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/search/DiscoverFilters.tsx

@@ -1,4 +1,4 @@
-import { Button, ContextMenu, Host, Picker } from "@expo/ui/swift-ui";
+import { Button, ContextMenu, Host } from "@expo/ui/swift-ui";
 import { Platform, View } from "react-native";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { JellyseerrSearchSort } from "@/components/jellyseerr/JellyseerrIndexPage";
@@ -49,32 +49,66 @@ export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
             ></Button>
           </ContextMenu.Trigger>
           <ContextMenu.Items>
-            <Picker
-              label={t("library.filters.sort_by")}
-              options={sortOptions.map((item) =>
-                t(`home.settings.plugins.jellyseerr.order_by.${item}`),
-              )}
-              variant='menu'
-              selectedIndex={sortOptions.indexOf(
-                jellyseerrOrderBy as unknown as string,
-              )}
-              onOptionSelected={(event: any) => {
-                const index = event.nativeEvent.index;
-                setJellyseerrOrderBy(
-                  sortOptions[index] as unknown as JellyseerrSearchSort,
-                );
-              }}
-            />
-            <Picker
-              label={t("library.filters.sort_order")}
-              options={orderOptions.map((item) => t(`library.filters.${item}`))}
-              variant='menu'
-              selectedIndex={orderOptions.indexOf(jellyseerrSortOrder)}
-              onOptionSelected={(event: any) => {
-                const index = event.nativeEvent.index;
-                setJellyseerrSortOrder(orderOptions[index]);
-              }}
-            />
+            <ContextMenu>
+              <ContextMenu.Trigger>
+                <Button>
+                  {`${t("library.filters.sort_by")}: ${t(
+                    `home.settings.plugins.jellyseerr.order_by.${jellyseerrOrderBy}`,
+                  )}`}
+                </Button>
+              </ContextMenu.Trigger>
+              <ContextMenu.Items>
+                {sortOptions.map((item) => {
+                  const label = t(
+                    `home.settings.plugins.jellyseerr.order_by.${item}`,
+                  );
+                  const isSelected =
+                    jellyseerrOrderBy ===
+                    (item as unknown as JellyseerrSearchSort);
+                  return (
+                    <Button
+                      key={item}
+                      systemImage={
+                        isSelected ? "checkmark.circle.fill" : "circle"
+                      }
+                      onPress={() =>
+                        setJellyseerrOrderBy(
+                          item as unknown as JellyseerrSearchSort,
+                        )
+                      }
+                    >
+                      {label}
+                    </Button>
+                  );
+                })}
+              </ContextMenu.Items>
+            </ContextMenu>
+            <ContextMenu>
+              <ContextMenu.Trigger>
+                <Button>
+                  {`${t("library.filters.sort_order")}: ${t(
+                    `library.filters.${jellyseerrSortOrder}`,
+                  )}`}
+                </Button>
+              </ContextMenu.Trigger>
+              <ContextMenu.Items>
+                {orderOptions.map((item) => {
+                  const label = t(`library.filters.${item}`);
+                  const isSelected = jellyseerrSortOrder === item;
+                  return (
+                    <Button
+                      key={item}
+                      systemImage={
+                        isSelected ? "checkmark.circle.fill" : "circle"
+                      }
+                      onPress={() => setJellyseerrSortOrder(item)}
+                    >
+                      {label}
+                    </Button>
+                  );
+                })}
+              </ContextMenu.Items>
+            </ContextMenu>
           </ContextMenu.Items>
         </ContextMenu>
       </Host>

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 =
-              season[keys.title] ||
-              season.Name ||
-              `Season ${season.IndexNumber}`;
+            const 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
-          ?.filter(
-            (f) => f.item.Type === "Episode" && f.item.SeasonId === seasonId,
-          )
-          .map((f) => f.item);
+        return getDownloadedEpisodesBySeasonId(getDownloadedItems(), seasonId!);
       }
       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,
-    enabled: !!api && !!user?.Id && !!item.Id,
+    staleTime: isOffline ? Infinity : 60,
+    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'>
-                  <DownloadSingleItem item={e} />
-                </View>
+                {!isOffline && (
+                  <View className='self-start ml-auto -mt-0.5'>
+                    <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

@@ -29,6 +29,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 +40,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]:

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

@@ -1,18 +1,34 @@
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import type { FC } from "react";
-import { View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import type {
+  BaseItemDto,
+  ChapterInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import { type FC, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Pressable, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import { type SharedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ChapterList } from "@/components/chapters/ChapterList";
+import { ChapterTicks } from "@/components/chapters/ChapterTicks";
 import { Text } from "@/components/common/Text";
 import { useSettings } from "@/utils/atoms/settings";
+import { chapterMarkers, chapterNameAt } from "@/utils/chapters";
 import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
 import SkipButton from "./SkipButton";
 import { TimeDisplay } from "./TimeDisplay";
 import { TrickplayBubble } from "./TrickplayBubble";
 
+// Chapter tick height in dp — matches the slider track height for a clean,
+// flush look (no top/bottom overflow).
+const TICK_HEIGHT = 10;
+
 interface BottomControlsProps {
   item: BaseItemDto;
+  /** Item chapters, used for the tick overlay and chapter list. */
+  chapters?: ChapterInfo[] | null;
+  /** Total media duration in milliseconds. */
+  durationMs: number;
   showControls: boolean;
   isSliding: boolean;
   showRemoteBubble: boolean;
@@ -38,6 +54,8 @@ interface BottomControlsProps {
   handleSliderChange: (value: number) => void;
   handleTouchStart: () => void;
   handleTouchEnd: () => void;
+  /** Programmatic seek (chapter list, hotkeys) — bypasses slide gesture state. */
+  seekTo: (value: number) => void;
 
   // Trickplay props
   trickPlayUrl: {
@@ -61,6 +79,8 @@ interface BottomControlsProps {
 
 export const BottomControls: FC<BottomControlsProps> = ({
   item,
+  chapters,
+  durationMs,
   showControls,
   isSliding,
   showRemoteBubble,
@@ -84,12 +104,38 @@ export const BottomControls: FC<BottomControlsProps> = ({
   handleSliderChange,
   handleTouchStart,
   handleTouchEnd,
+  seekTo,
   trickPlayUrl,
   trickplayInfo,
   time,
 }) => {
   const { settings } = useSettings();
+  const { t } = useTranslation();
   const insets = useSafeAreaInsets();
+  const [chapterListVisible, setChapterListVisible] = useState(false);
+
+  // Only expose chapter UI when there are at least two real markers.
+  const chapterMarkerList = useMemo(
+    () => chapterMarkers(chapters, durationMs),
+    [chapters, durationMs],
+  );
+  const hasChapters = chapterMarkerList.length > 1;
+
+  // Current chapter name for the always-visible header label (live playback).
+  const currentChapterName = useMemo(
+    () => (hasChapters ? chapterNameAt(currentTime, chapters) : null),
+    [hasChapters, currentTime, chapters],
+  );
+
+  // Chapter name at the scrubbed position for the trickplay bubble. `time` is
+  // an {h,m,s} object derived from the slider's dragged value — convert back
+  // to ms for the lookup. Only useful while actively scrubbing.
+  const scrubChapterName = useMemo(() => {
+    if (!hasChapters) return null;
+    const scrubMs =
+      (time.hours * 3600 + time.minutes * 60 + time.seconds) * 1000;
+    return chapterNameAt(scrubMs, chapters);
+  }, [hasChapters, time.hours, time.minutes, time.seconds, chapters]);
 
   return (
     <View
@@ -131,8 +177,24 @@ export const BottomControls: FC<BottomControlsProps> = ({
           {item?.Type === "Audio" && (
             <Text className='text-xs opacity-50'>{item?.Album}</Text>
           )}
+          {currentChapterName ? (
+            <Text className='text-xs opacity-70 mt-1' numberOfLines={1}>
+              {currentChapterName}
+            </Text>
+          ) : null}
         </View>
-        <View className='flex flex-row space-x-2 shrink-0'>
+        <View className='flex flex-row items-center space-x-2 shrink-0'>
+          {hasChapters && (
+            <Pressable
+              onPress={() => setChapterListVisible(true)}
+              hitSlop={10}
+              className='justify-center mr-4'
+              accessibilityRole='button'
+              accessibilityLabel={t("chapters.open")}
+            >
+              <Ionicons name='bookmarks' size={24} color='white' />
+            </Pressable>
+          )}
           <SkipButton
             showButton={showSkipButton}
             onPress={skipIntro}
@@ -176,6 +238,9 @@ export const BottomControls: FC<BottomControlsProps> = ({
               height: 10,
               justifyContent: "center",
               alignItems: "stretch",
+              // Allow chapter ticks taller than the 10px track to bleed out
+              // top/bottom (RN defaults to overflow: "hidden" on Android).
+              overflow: "visible",
             }}
             onTouchStart={handleTouchStart}
             onTouchEnd={handleTouchEnd}
@@ -203,6 +268,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
                     trickPlayUrl={trickPlayUrl}
                     trickplayInfo={trickplayInfo}
                     time={time}
+                    chapterName={scrubChapterName}
                   />
                 )
               }
@@ -212,6 +278,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
               minimumValue={min}
               maximumValue={max}
             />
+            <ChapterTicks markers={chapterMarkerList} height={TICK_HEIGHT} />
           </View>
           <TimeDisplay
             currentTime={currentTime}
@@ -219,6 +286,13 @@ export const BottomControls: FC<BottomControlsProps> = ({
           />
         </View>
       </View>
+      <ChapterList
+        visible={chapterListVisible}
+        chapters={chapters}
+        currentPositionMs={currentTime}
+        onSeek={seekTo}
+        onClose={() => setChapterListVisible(false)}
+      />
     </View>
   );
 };

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,7 +3,7 @@ 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 { StyleSheet, useWindowDimensions, View } from "react-native";
 import Animated, {
@@ -15,12 +15,15 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import ContinueWatchingOverlay from "@/components/video-player/controls/ContinueWatchingOverlay";
+import useRouter from "@/hooks/useAppRouter";
 import { useCreditSkipper } from "@/hooks/useCreditSkipper";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useIntroSkipper } from "@/hooks/useIntroSkipper";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
 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";
@@ -34,6 +37,7 @@ 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";
@@ -49,7 +53,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 +66,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 +92,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");
@@ -110,7 +124,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);
@@ -235,6 +251,7 @@ export const Controls: FC<Props> = ({
     handleTouchEnd,
     handleSliderComplete,
     handleSliderChange,
+    seekTo,
   } = useVideoSlider({
     progress,
     isSeeking,
@@ -303,7 +320,7 @@ export const Controls: FC<Props> = ({
       offline,
       api,
       downloadedFiles,
-      max.value,
+      maxMs,
     );
 
   const goToItemCommon = useCallback(
@@ -457,6 +474,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 +504,8 @@ export const Controls: FC<Props> = ({
               onZoomToggle={onZoomToggle}
               playbackSpeed={playbackSpeed}
               setPlaybackSpeed={setPlaybackSpeed}
+              showTechnicalInfo={showTechnicalInfo}
+              onToggleTechnicalInfo={onToggleTechnicalInfo}
             />
           </Animated.View>
           <Animated.View
@@ -500,6 +529,8 @@ export const Controls: FC<Props> = ({
           >
             <BottomControls
               item={item}
+              chapters={item.Chapters}
+              durationMs={maxMs}
               showControls={showControls}
               isSliding={isSliding}
               showRemoteBubble={showRemoteBubble}
@@ -523,6 +554,7 @@ export const Controls: FC<Props> = ({
               handleSliderChange={handleSliderChange}
               handleTouchStart={handleTouchStart}
               handleTouchEnd={handleTouchEnd}
+              seekTo={seekTo}
               trickPlayUrl={trickPlayUrl}
               trickplayInfo={trickplayInfo}
               time={isSliding || showRemoteBubble ? time : remoteTime}

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<{
-    offline: string;
-  }>();
-  const isOffline = offline === "true";
+  const isOffline = useOfflineMode();
+  const { settings } = useSettings();
+  const insets = useSafeAreaInsets();
 
   // 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(
-          (f: DownloadedItem) => f.item.SeriesId === item.SeriesId,
-        );
-        const seasonNumbers = Array.from(
-          new Set(
-            seriesEpisodes
-              ?.map((f: DownloadedItem) => f.item.ParentIndexNumber)
-              .filter(Boolean),
-          ),
+        const seasonNumbers = getDownloadedSeasonNumbers(
+          getDownloadedItems(),
+          item.SeriesId,
         );
         // 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 [];
-        return downloadedFiles
-          ?.filter(
-            (f: DownloadedItem) =>
-              f.item.SeriesId === item.SeriesId &&
-              f.item.ParentIndexNumber === seasonIndex,
-          )
-          .map((f: DownloadedItem) => f.item);
+        if (!item.SeriesId || typeof seasonIndex !== "number") return [];
+        return getDownloadedEpisodesForSeason(
+          getDownloadedItems(),
+          item.SeriesId,
+          seasonIndex,
+        );
       }
       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/TrickplayBubble.tsx

@@ -22,12 +22,15 @@ interface TrickplayBubbleProps {
     minutes: number;
     seconds: number;
   };
+  /** Chapter name at the scrubbed position, if any. */
+  chapterName?: string | null;
 }
 
 export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
   trickPlayUrl,
   trickplayInfo,
   time,
+  chapterName,
 }) => {
   if (!trickPlayUrl || !trickplayInfo) {
     return null;
@@ -36,18 +39,30 @@ export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
   const { x, y, url } = trickPlayUrl;
   const tileWidth = CONTROLS_CONSTANTS.TILE_WIDTH;
   const tileHeight = tileWidth / trickplayInfo.aspectRatio!;
+  const timeStr = `${time.hours > 0 ? `${time.hours}:` : ""}${
+    time.minutes < 10 ? `0${time.minutes}` : time.minutes
+  }:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`;
+
+  // Slightly larger preview than before (scale 1.6 vs old 1.4) to give the
+  // overlay text more room and feel closer to the Jellyfin web style.
+  const previewScale = 1.6;
 
   return (
     <View
       style={{
         position: "absolute",
         left: -62,
+        // Sit just above the slider — high enough not to overlap the
+        // progress bar, low enough to feel anchored to the thumb.
         bottom: 0,
-        paddingTop: 30,
+        paddingTop: 12,
         paddingBottom: 5,
         width: tileWidth * 1.5,
         justifyContent: "center",
         alignItems: "center",
+        // Bring the bubble in front of the player title / overlays.
+        zIndex: 999,
+        elevation: 10,
       }}
     >
       <View
@@ -55,7 +70,7 @@ export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
           width: tileWidth,
           height: tileHeight,
           alignSelf: "center",
-          transform: [{ scale: 1.4 }],
+          transform: [{ scale: previewScale }],
           borderRadius: 5,
         }}
         className='bg-neutral-800 overflow-hidden'
@@ -75,17 +90,51 @@ export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
           source={{ uri: url }}
           contentFit='cover'
         />
+        {/*
+         * Bottom-right overlay (Jellyfin web style) — chapter name (small,
+         * faded) above the timestamp (small, bold). Sits on top of the
+         * trickplay frame inside the same overflow:hidden container so it
+         * always stays within the bubble bounds.
+         */}
+        <View
+          pointerEvents='none'
+          style={{
+            position: "absolute",
+            left: 4,
+            bottom: 3,
+            alignItems: "flex-start",
+            paddingHorizontal: 3,
+            paddingVertical: 1,
+            borderRadius: 3,
+            backgroundColor: "rgba(0,0,0,0.55)",
+            maxWidth: tileWidth - 8,
+          }}
+        >
+          {chapterName ? (
+            <Text
+              numberOfLines={1}
+              style={{
+                color: "#fff",
+                fontSize: 7,
+                opacity: 0.85,
+                lineHeight: 9,
+              }}
+            >
+              {chapterName}
+            </Text>
+          ) : null}
+          <Text
+            style={{
+              color: "#fff",
+              fontSize: 8,
+              fontWeight: "600",
+              lineHeight: 10,
+            }}
+          >
+            {timeStr}
+          </Text>
+        </View>
       </View>
-      <Text
-        style={{
-          marginTop: 30,
-          fontSize: 16,
-        }}
-      >
-        {`${time.hours > 0 ? `${time.hours}:` : ""}${
-          time.minutes < 10 ? `0${time.minutes}` : time.minutes
-        }:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`}
-      </Text>
     </View>
   );
 };

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,
-      offline,
-      downloadedItem,
-    ],
+    [playerRef, item, mediaSource, isVideoLoaded, tracksReady, 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 } =
-    usePlayerContext();
+  const { tracksReady, mediaSource, downloadedItem } = 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/video-player/controls/hooks/useVideoSlider.ts

@@ -74,6 +74,21 @@ export function useVideoSlider({
     [seek, play, progress, isSeeking],
   );
 
+  // Programmatic seek (chapter list, hotkeys) that bypasses the slide gesture.
+  // Reads `isPlaying` directly instead of `wasPlayingRef`, which is only set
+  // during a real slide and would carry stale state on a tap-to-seek.
+  const seekTo = useCallback(
+    (value: number) => {
+      const seekValue = Math.max(0, Math.floor(value));
+      progress.value = seekValue;
+      seek(seekValue);
+      if (isPlaying) {
+        play();
+      }
+    },
+    [seek, play, progress, isPlaying],
+  );
+
   const handleSliderChange = useCallback(
     debounce((value: number) => {
       // Convert ms to ticks for trickplay
@@ -96,5 +111,6 @@ export function useVideoSlider({
     handleTouchEnd,
     handleSliderComplete,
     handleSliderChange,
+    seekTo,
   };
 }

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/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/useItemQuery.ts

@@ -12,11 +12,17 @@ export const excludeFields = (fieldsToExclude: ItemFields[]) => {
   );
 };
 
+type ExtraQueryOptions = {
+  gcTime?: number;
+  staleTime?: number;
+};
+
 export const useItemQuery = (
   itemId: string | undefined,
   isOffline?: boolean,
   fields?: ItemFields[],
   excludeFields?: ItemFields[],
+  queryOptions?: ExtraQueryOptions,
 ) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -53,5 +59,6 @@ export const useItemQuery = (
     refetchOnWindowFocus: true,
     refetchOnReconnect: true,
     networkMode: "always",
+    ...queryOptions,
   });
 };