feat: Enables iOS TV builds and unsigned builds

Enables building of iOS TV apps and adds support for unsigned iOS builds. This change also enhances the artifact comment workflow by including file size and build duration in the download link. It also fixes the Crowdin integration by using a GitHub App token for authentication.
chore(deps): Update dependency @react-native-community/cli to v20.1.1 (#1413 )
2026-02-01 16:08:04 +00:00 · 2026-01-31 18:10:45 +01:00 · 2026-01-31 17:26:38 +01:00 · 2026-01-31 17:26:01 +01:00 · 2026-01-31 17:25:31 +01:00 · 2026-01-31 17:25:22 +01:00
147 changed files with 6291 additions and 1415 deletions
--- a/.claude/learned-facts.md
+++ b/.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)_
--- a/.github/workflows/artifact-comment.yml
+++ b/.github/workflows/artifact-comment.yml
@@ -220,7 +220,10 @@ jobs:
                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']
+                  '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']
                };
                
                // Create individual status for each job
@@ -353,10 +356,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 Phone', artifactPattern: /ios.*phone.*ipa(?!.*unsigned)/i },
+              { name: 'iOS Unsigned', platform: '🍎', device: '📱 Phone Unsigned', statusKey: 'iOS Phone 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 +376,26 @@ jobs:
              let status = '⏳ Pending';
              let downloadLink = '*Waiting for build...*';

-              // Special case for iOS TV - show as disabled
-              if (target.name === 'iOS TV') {
-                status = '💤 Disabled';
-                downloadLink = '*Disabled for now*';
-              } else if (matchingStatus) {
+              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 +423,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`;
--- a/.github/workflows/build-apps.yml
+++ b/.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@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
        with:
          bun-version: latest

      - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
        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@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
        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@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
        with:
          path: android/.gradle
          key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -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@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
        with:
          bun-version: latest

      - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
        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@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
        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@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
        with:
          path: android/.gradle
          key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -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@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
        with:
          bun-version: latest

      - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
        with:
          path: ~/.bun/install/cache
          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
@@ -194,7 +218,7 @@ jobs:
      - name: 🔧 Setup Xcode
        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
        with:
-          xcode-version: "26.0.1"
+          xcode-version: "26.2"

      - name: 🏗️ Setup EAS
        uses: expo/expo-github-action@main
@@ -203,9 +227,6 @@ jobs:
          token: ${{ secrets.EXPO_TOKEN }}
          eas-cache: true

-      - name: ⚙️ Ensure iOS SDKs installed
-        run: xcodebuild -downloadPlatform iOS
-
      - name: 🚀 Build iOS app
        env:
          EXPO_TV: 0
@@ -221,70 +242,180 @@ jobs:
          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@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-cache
+
+      - name: 📦 Install dependencies and reload submodules
+        run: |
+          bun install --frozen-lockfile
+          bun run submodule-reload
+
+      - name: 🛠️ Generate project files
+        run: bun run prebuild
+
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # 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@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        with:
+          name: streamyfin-ios-phone-unsigned-ipa-${{ env.DATE_TAG }}
+          path: build/*.ipa
+          retention-days: 7
+
+  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 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@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-cache
+
+      - name: 📦 Install dependencies and reload submodules
+        run: |
+          bun install --frozen-lockfile
+          bun run submodule-reload
+
+      - name: 🛠️ Generate project files
+        run: bun run prebuild:tv
+
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
+        with:
+          xcode-version: "26.2"
+
+      - name: 🏗️ Setup EAS
+        uses: expo/expo-github-action@main
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+          eas-cache: true
+
+      - name: 🚀 Build iOS app
+        env:
+          EXPO_TV: 1
+        run: eas build -p ios --local --non-interactive
+
+      - name: 📅 Set date tag
+        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
+
+      - name: 📤 Upload IPA artifact
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        with:
+          name: streamyfin-ios-tv-ipa-${{ env.DATE_TAG }}
+          path: build-*.ipa
+          retention-days: 7
+
+  build-ios-tv-unsigned:
+    if: (!contains(github.event.head_commit.message, '[skip ci]'))
+    runs-on: macos-26
+    name: 🍎 Build tvOS IPA (Unsigned)
+    permissions:
+      contents: read
+
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          fetch-depth: 0
+          submodules: recursive
+          show-progress: false
+
+      - name: 🍞 Setup Bun
+        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-cache
+
+      - name: 📦 Install dependencies and reload submodules
+        run: |
+          bun install --frozen-lockfile
+          bun run submodule-reload
+
+      - name: 🛠️ Generate project files
+        run: bun run prebuild:tv
+
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
+        with:
+          xcode-version: "26.2"
+
+      - name: 🚀 Build iOS app
+        env:
+          EXPO_TV: 1
+        run: bun run ios:unsigned-build:tv ${{ github.event_name == 'pull_request' && '-- --verbose' || '' }}
+
+      - name: 📅 Set date tag
+        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
+
+      - name: 📤 Upload IPA artifact
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        with:
+          name: streamyfin-ios-tv-unsigned-ipa-${{ env.DATE_TAG }}
+          path: build/*.ipa
+          retention-days: 7
--- a/.github/workflows/check-lockfile.yml
+++ b/.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@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
        with:
          bun-version: latest

      - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
        with:
          path: |
            ~/.bun/install/cache
--- a/.github/workflows/ci-codeql.yml
+++ b/.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@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.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@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0

      - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
+        uses: github/codeql-action/analyze@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
--- a/.github/workflows/crowdin.yml
+++ b/.github/workflows/crowdin.yml
@@ -23,12 +23,19 @@ jobs:

    steps:
      - name: 📥 Checkout Repository
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          fetch-depth: 0

+      - name: 🔑 Generate GitHub App Token
+        id: generate-token
+        uses: actions/create-github-app-token@v2
+        with:
+          app-id: ${{ vars.CROWDIN_APP_ID }}
+          private-key: ${{ secrets.CROWDIN_APP_PRIVATE_KEY }}
+
      - name: 🌐 Sync Translations with Crowdin
-        uses: crowdin/github-action@60debf382ee245b21794321190ad0501db89d8c1 # v2.13.0
+        uses: crowdin/github-action@b4b468cffefb50bdd99dd83e5d2eaeb63c880380 # v2.14.0
        with:
          upload_sources: true
          upload_translations: true
@@ -46,6 +53,6 @@ jobs:
          # Commit customization
          commit_message: "feat(i18n): update translations from Crowdin"
        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: ${{ steps.generate-token.outputs.token }}
          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
--- a/.github/workflows/linting.yml
+++ b/.github/workflows/linting.yml
@@ -51,7 +51,7 @@ 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
@@ -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@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
        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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version: '24.x'

      - name: "🍞 Setup Bun"
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
        with:
          bun-version: latest

--- a/.github/workflows/notification.yml
+++ b/.github/workflows/notification.yml
@@ -1,4 +1,5 @@
 name: 🛎️ Discord Notification
+permissions: {}

 on:
  pull_request:
--- a/.github/workflows/update-issue-form.yml
+++ b/.github/workflows/update-issue-form.yml
@@ -18,10 +18,10 @@ 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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version: '24.x'
          cache: 'npm'
@@ -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@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
        with:
          add-paths: .github/ISSUE_TEMPLATE/bug_report.yml
          branch: ci-update-bug-report
--- a/.gitignore
+++ b/.gitignore
@@ -66,7 +66,10 @@ streamyfin-4fec1-firebase-adminsdk.json

 # Version and Backup Files
 /version-backup-*
-modules/background-downloader/android/build/*
 /modules/sf-player/android/build
 /modules/music-controls/android/build
+modules/background-downloader/android/build/*
 /modules/mpv-player/android/build
+
+# ios:unsigned-build Artifacts
+build/
--- a/CLAUDE.md
+++ b/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
--- a/README.md
+++ b/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.**

 ---
--- a/app.json
+++ b/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"
--- a/app/(auth)/(tabs)/(home)/_layout.tsx
+++ b/app/(auth)/(tabs)/(home)/_layout.tsx
@@ -1,9 +1,10 @@
 import { Feather, Ionicons } from "@expo/vector-icons";
-import { Stack, useRouter } from "expo-router";
+import { Stack } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { Pressable } from "react-native-gesture-handler";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
+import useRouter from "@/hooks/useAppRouter";

 const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");

@@ -57,25 +58,6 @@ export default function IndexLayout() {
          ),
        }}
      />
-      <Stack.Screen
-        name='downloads/[seriesId]'
-        options={{
-          headerShown: true,
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          title: t("home.downloads.tvseries"),
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
-        }}
-      />
      <Stack.Screen
        name='sessions/index'
        options={{
@@ -329,6 +311,24 @@ export default function IndexLayout() {
          ),
        }}
      />
+      <Stack.Screen
+        name='settings/network/page'
+        options={{
+          title: t("home.settings.network.title"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
+        }}
+      />
      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
        <Stack.Screen key={name} name={name} options={options} />
      ))}
--- a/app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx
+++ b/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>
-  );
-}
--- a/app/(auth)/(tabs)/(home)/downloads/index.tsx
+++ b/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>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings.tsx
+++ b/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
--- a/app/(auth)/(tabs)/(home)/settings/network/page.tsx
+++ b/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>
+  );
+}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/items/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/items/page.tsx
@@ -13,6 +13,7 @@ import Animated, {
 import { Text } from "@/components/common/Text";
 import { ItemContent } from "@/components/ItemContent";
 import { useItemQuery } from "@/hooks/useItemQuery";
+import { OfflineModeProvider } from "@/providers/OfflineModeProvider";

 const Page: React.FC = () => {
  const { id } = useLocalSearchParams() as { id: string };
@@ -75,39 +76,35 @@ const Page: React.FC = () => {
    );

  return (
-    <View className='flex flex-1 relative'>
-      <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>
  );
 };

--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/jellyseerr/page.tsx
+++ b/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";
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/series/[id].tsx
+++ b/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>
  );
 };

--- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
+++ b/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({
--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/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);

--- a/app/(auth)/(tabs)/(watchlists)/[watchlistId].tsx
+++ b/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,
--- a/app/(auth)/(tabs)/(watchlists)/_layout.tsx
+++ b/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() {
--- a/app/(auth)/(tabs)/(watchlists)/create.tsx
+++ b/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,
--- a/app/(auth)/(tabs)/(watchlists)/edit/[watchlistId].tsx
+++ b/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 {
--- a/app/(auth)/(tabs)/(watchlists)/index.tsx
+++ b/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,
--- a/app/(auth)/now-playing.tsx
+++ b/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";
--- a/app/(auth)/player/direct-player.tsx
+++ b/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,6 +44,9 @@ 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 { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import {
@@ -60,6 +63,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 +82,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 +92,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 +113,7 @@ export default function page() {
    bitrateValue: bitrateValueStr,
    offline: offlineStr,
    playbackPosition: playbackPositionFromUrl,
-  } = useGlobalSearchParams<{
+  } = useLocalSearchParams<{
    itemId: string;
    audioIndex: string;
    subtitleIndex: string;
@@ -445,7 +449,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 +459,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();
@@ -527,7 +537,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 +691,8 @@ export default function page() {
        return;
      }

-      if (isLoading) {
-        setIsBuffering(true);
+      if (isLoading !== undefined) {
+        setIsBuffering(isLoading);
      }
    },
    [playbackManager, item?.Id, progress],
@@ -723,6 +737,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 +900,104 @@ 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%" }}
+                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>
  );
 }
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -22,6 +22,7 @@ import {
 import { MusicPlayerProvider } from "@/providers/MusicPlayerProvider";
 import { NetworkStatusProvider } from "@/providers/NetworkStatusProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
+import { ServerUrlProvider } from "@/providers/ServerUrlProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import {
@@ -47,7 +48,7 @@ import type {
  NotificationResponse,
 } from "expo-notifications/build/Notifications.types";
 import type { ExpoPushToken } from "expo-notifications/build/Tokens.types";
-import { router, Stack, useSegments } from "expo-router";
+import { Stack, useSegments } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider, useAtom } from "jotai";
@@ -56,6 +57,7 @@ import { I18nextProvider } from "react-i18next";
 import { Appearance } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import useRouter from "@/hooks/useAppRouter";
 import { userAtom } from "@/providers/JellyfinProvider";
 import { store } from "@/utils/store";
 import "react-native-reanimated";
@@ -80,14 +82,9 @@ SplashScreen.setOptions({
  fade: true,
 });

-function redirect(notification: typeof Notifications.Notification) {
-  const url = notification.request.content.data?.url;
-  if (url) {
-    router.push(url);
-  }
-}
-
 function useNotificationObserver() {
+  const router = useRouter();
+
  useEffect(() => {
    if (Platform.isTV) return;

@@ -98,14 +95,17 @@ function useNotificationObserver() {
        if (!isMounted || !response?.notification) {
          return;
        }
-        redirect(response?.notification);
+        const url = response?.notification.request.content.data?.url;
+        if (url) {
+          router.push(url);
+        }
      },
    );

    return () => {
      isMounted = false;
    };
-  }, []);
+  }, [router]);
 }

 if (!Platform.isTV) {
@@ -230,6 +230,7 @@ function Layout() {
  const [user] = useAtom(userAtom);
  const [api] = useAtom(apiAtom);
  const _segments = useSegments();
+  const router = useRouter();

  useEffect(() => {
    i18n.changeLanguage(
@@ -322,9 +323,6 @@ function Layout() {
      responseListener.current =
        Notifications?.addNotificationResponseReceivedListener(
          (response: NotificationResponse) => {
-            // redirect if internal notification
-            redirect(response?.notification);
-
            // Currently the notifications supported by the plugin will send data for deep links.
            const { title, data } = response.notification.request.content;
            writeInfoLog(`Notification ${title} opened`, data);
@@ -384,77 +382,79 @@ function Layout() {
      }}
    >
      <JellyfinProvider>
-        <NetworkStatusProvider>
-          <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>
  );
--- a/bun.lock
+++ b/bun.lock
--- a/components/Badge.tsx
+++ b/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,
+  },
+});
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -9,13 +9,14 @@ import type {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { type Href, router } from "expo-router";
+import { type Href } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Alert, Platform, Switch, View, type ViewProps } from "react-native";
 import { toast } from "sonner-native";
+import useRouter from "@/hooks/useAppRouter";
 import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -62,6 +63,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
  const [user] = useAtom(userAtom);
  const [queue, _setQueue] = useAtom(queueAtom);
  const { settings } = useSettings();
+  const router = useRouter();
  const [downloadUnwatchedOnly, setDownloadUnwatchedOnly] = useState(false);

  const { processes, startBackgroundDownload, downloadedItems } = useDownload();
@@ -170,9 +172,11 @@ export const DownloadItems: React.FC<DownloadProps> = ({
      firstItem.Type !== "Episode"
        ? "/downloads"
        : ({
-            pathname: `/downloads/${firstItem.SeriesId}`,
+            pathname: "/series/[id]",
            params: {
-              episodeSeasonIndex: firstItem.ParentIndexNumber,
+              id: firstItem.SeriesId!,
+              seasonIndex: firstItem.ParentIndexNumber?.toString(),
+              offline: "true",
            },
          } as Href),
    );
--- a/components/GenreTags.tsx
+++ b/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 }) => {
--- a/components/IntroSheet.tsx
+++ b/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: () => {
--- a/components/ItemContent.tsx
+++ b/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} />}
              </>
--- a/components/PlatformDropdown.tsx
+++ b/components/PlatformDropdown.tsx
@@ -25,7 +25,14 @@ export type ToggleOption = {
  disabled?: boolean;
 };

-export type Option = RadioOption | ToggleOption;
+export type ActionOption = {
+  type: "action";
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+};
+
+export type Option = RadioOption | ToggleOption | ActionOption;

 // Option group structure
 export type OptionGroup = {
@@ -64,7 +71,10 @@ const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
  isLast,
 }) => {
  const isToggle = option.type === "toggle";
-  const handlePress = isToggle ? option.onToggle : option.onPress;
+  const isAction = option.type === "action";
+  const handlePress = isToggle
+    ? option.onToggle
+    : (option as RadioOption | ActionOption).onPress;

  return (
    <>
@@ -76,7 +86,7 @@ const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
        <Text className='flex-1 text-white'>{option.label}</Text>
        {isToggle ? (
          <ToggleSwitch value={option.value} />
-        ) : option.selected ? (
+        ) : isAction ? null : (option as RadioOption).selected ? (
          <Ionicons name='checkmark-circle' size={24} color='#9333ea' />
        ) : (
          <Ionicons name='ellipse-outline' size={24} color='#6b7280' />
@@ -150,6 +160,15 @@ const BottomSheetContent: React.FC<{
          },
        };
      }
+      if (option.type === "action") {
+        return {
+          ...option,
+          onPress: () => {
+            option.onPress();
+            onClose?.();
+          },
+        };
+      }
      return option;
    }),
  }));
@@ -225,6 +244,9 @@ const PlatformDropdownComponent = ({
              const toggleOptions = group.options.filter(
                (opt) => opt.type === "toggle",
              ) as ToggleOption[];
+              const actionOptions = group.options.filter(
+                (opt) => opt.type === "action",
+              ) as ActionOption[];

              const items = [];

@@ -291,6 +313,21 @@ const PlatformDropdownComponent = ({
                );
              });

+              // Add Buttons for action options (no icon)
+              actionOptions.forEach((option, optionIndex) => {
+                items.push(
+                  <Button
+                    key={`action-${groupIndex}-${optionIndex}`}
+                    onPress={() => {
+                      option.onPress();
+                    }}
+                    disabled={option.disabled}
+                  >
+                    {option.label}
+                  </Button>,
+                );
+              });
+
              return items;
            })}
          </ContextMenu.Items>
--- a/components/PlayButton.tsx
+++ b/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
--- a/components/PlayButton.tv.tsx
+++ b/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";
--- a/components/PlayedStatus.tsx
+++ b/components/PlayedStatus.tsx
@@ -7,7 +7,6 @@ import { RoundButton } from "./RoundButton";

 interface Props extends ViewProps {
  items: BaseItemDto[];
-  isOffline?: boolean;
  size?: "default" | "large";
 }

--- a/components/apple-tv-carousel/AppleTVCarousel.tsx
+++ b/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";
--- a/components/common/HeaderBackButton.tsx
+++ b/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";
--- a/components/common/JellyseerrItemRouter.tsx
+++ b/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";
--- a/components/common/TouchableItemRouter.tsx
+++ b/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 (
--- a/components/downloads/DownloadCard.tsx
+++ b/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";
--- a/components/downloads/EpisodeCard.tsx
+++ b/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'
    >
--- a/components/downloads/MovieCard.tsx
+++ b/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
--- a/components/downloads/SeriesCard.tsx
+++ b/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 ? (
--- a/components/home/Favorites.tsx
+++ b/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";

--- a/components/home/Home.tsx
+++ b/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";
--- a/components/home/HomeWithCarousel.tsx
+++ b/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";
--- a/components/home/LargeMovieCarousel.tsx
+++ b/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";
--- a/components/home/ScrollingCollectionList.tsx
+++ b/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"}
                `}
--- a/components/item/ItemPeopleSections.tsx
+++ b/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(() => {
--- a/components/jellyseerr/PersonPoster.tsx
+++ b/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 {
--- a/components/jellyseerr/discover/CompanySlide.tsx
+++ b/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(
--- a/components/jellyseerr/discover/GenreSlide.tsx
+++ b/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(
--- a/components/library/LibraryItemCard.tsx
+++ b/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;
--- a/components/music/MiniPlayerBar.tsx
+++ b/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";

--- a/components/music/MusicAlbumCard.tsx
+++ b/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";

--- a/components/music/MusicAlbumRowCard.tsx
+++ b/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";

--- a/components/music/MusicArtistCard.tsx
+++ b/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";

--- a/components/music/MusicPlaylistCard.tsx
+++ b/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";
--- a/components/music/PlaylistOptionsSheet.tsx
+++ b/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 {
--- a/components/music/TrackOptionsSheet.tsx
+++ b/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,
--- a/components/series/CastAndCrew.tsx
+++ b/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(() => {
--- a/components/series/CurrentSeries.tsx
+++ b/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}>
--- a/components/series/EpisodeTitleHeader.tsx
+++ b/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;
--- a/components/series/NextItemButton.tsx
+++ b/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";

--- a/components/series/SeasonDropdown.tsx
+++ b/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(() => {
--- a/components/series/SeasonEpisodesCarousel.tsx
+++ b/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(() => {
--- a/components/series/SeasonPicker.tsx
+++ b/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
--- a/components/settings/AppearanceSettings.tsx
+++ b/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";
--- a/components/settings/Dashboard.tsx
+++ b/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";
--- a/components/settings/LocalNetworkSettings.tsx
+++ b/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>
+  );
+}
--- a/components/settings/OtherSettings.tsx
+++ b/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";
--- a/components/settings/PlaybackControlsSettings.tsx
+++ b/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]:
--- a/components/settings/PluginSettings.tsx
+++ b/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";
--- a/components/video-player/controls/ContinueWatchingOverlay.tsx
+++ b/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 '>
--- a/components/video-player/controls/Controls.tsx
+++ b/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);
@@ -303,7 +319,7 @@ export const Controls: FC<Props> = ({
      offline,
      api,
      downloadedFiles,
-      max.value,
+      maxMs,
    );

  const goToItemCommon = useCallback(
@@ -457,6 +473,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 +503,8 @@ export const Controls: FC<Props> = ({
              onZoomToggle={onZoomToggle}
              playbackSpeed={playbackSpeed}
              setPlaybackSpeed={setPlaybackSpeed}
+              showTechnicalInfo={showTechnicalInfo}
+              onToggleTechnicalInfo={onToggleTechnicalInfo}
            />
          </Animated.View>
          <Animated.View
--- a/components/video-player/controls/EpisodeList.tsx
+++ b/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>
  );
 };
--- a/components/video-player/controls/HeaderControls.tsx
+++ b/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>
        )}
--- a/components/video-player/controls/TechnicalInfoOverlay.tsx
+++ b/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,
+  },
+});
--- a/components/video-player/controls/constants.ts
+++ b/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;
--- a/components/video-player/controls/contexts/PlayerContext.tsx
+++ b/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 (
--- a/components/video-player/controls/contexts/VideoContext.tsx
+++ b/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<{
--- a/components/video-player/controls/dropdown/DropdownView.tsx
+++ b/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
  ]);
--- a/components/watchlists/WatchlistSheet.tsx
+++ b/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,
--- a/hooks/useAppRouter.ts
+++ b/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;
--- a/hooks/useDownloadedFileOpener.ts
+++ b/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";

--- a/hooks/useNetworkAwareQueryClient.ts
+++ b/hooks/useNetworkAwareQueryClient.ts
@@ -36,12 +36,26 @@ export function useNetworkAwareQueryClient(): NetworkAwareQueryClient {
  );

  return useMemo(() => {
-    // Create a proxy-like object that inherits from queryClient
-    // but overrides invalidateQueries
-    const wrapped = Object.create(queryClient) as NetworkAwareQueryClient;
-    wrapped.invalidateQueries = networkAwareInvalidate;
-    wrapped.forceInvalidateQueries =
-      queryClient.invalidateQueries.bind(queryClient);
-    return wrapped;
+    // Use a Proxy to wrap the queryClient and override invalidateQueries.
+    // Object.create doesn't work because QueryClient uses private fields (#)
+    // which can only be accessed on the exact instance they were defined on.
+    const forceInvalidate = queryClient.invalidateQueries.bind(queryClient);
+
+    return new Proxy(queryClient, {
+      get(target, prop) {
+        if (prop === "invalidateQueries") {
+          return networkAwareInvalidate;
+        }
+        if (prop === "forceInvalidateQueries") {
+          return forceInvalidate;
+        }
+        const value = Reflect.get(target, prop, target);
+        // Bind methods to the original target to preserve private field access
+        if (typeof value === "function") {
+          return value.bind(target);
+        }
+        return value;
+      },
+    }) as NetworkAwareQueryClient;
  }, [queryClient, networkAwareInvalidate]);
 }
--- a/hooks/useOrientation.ts
+++ b/hooks/useOrientation.ts
@@ -21,6 +21,8 @@ const orientationToOrientationLock = (
      return OrientationLock.LANDSCAPE_RIGHT;
    case Orientation.PORTRAIT_UP:
      return OrientationLock.PORTRAIT_UP;
+    case Orientation.UNKNOWN:
+      return OrientationLock.LANDSCAPE;
    default:
      return OrientationLock.PORTRAIT_UP;
  }
--- a/hooks/usePlaybackManager.ts
+++ b/hooks/usePlaybackManager.ts
@@ -3,7 +3,7 @@ import type {
  PlaybackProgressInfo,
 } from "@jellyfin/sdk/lib/generated-client";
 import { getPlaystateApi, getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useMemo } from "react";
 import { useDownload } from "@/providers/DownloadProvider";
@@ -69,6 +69,7 @@ export const usePlaybackManager = ({
  const api = useAtomValue(apiAtom);
  const user = useAtomValue(userAtom);
  const { isConnected } = useNetworkStatus();
+  const queryClient = useQueryClient();
  const { getDownloadedItemById, updateDownloadedItem, getDownloadedItems } =
    useDownload();

@@ -186,6 +187,9 @@ export const usePlaybackManager = ({
          },
        },
      });
+      // Force invalidate queries so they refetch from updated local database
+      queryClient.invalidateQueries({ queryKey: ["item", itemId] });
+      queryClient.invalidateQueries({ queryKey: ["episodes"] });
    }

    // Handle remote state update if online
@@ -226,6 +230,9 @@ export const usePlaybackManager = ({
          },
        },
      });
+      // Force invalidate queries so they refetch from updated local database
+      queryClient.invalidateQueries({ queryKey: ["item", itemId] });
+      queryClient.invalidateQueries({ queryKey: ["episodes"] });
    }

    // Handle remote state update if online
@@ -268,6 +275,9 @@ export const usePlaybackManager = ({
          },
        },
      });
+      // Force invalidate queries so they refetch from updated local database
+      queryClient.invalidateQueries({ queryKey: ["item", itemId] });
+      queryClient.invalidateQueries({ queryKey: ["episodes"] });
    }

    // Handle remote state update if online
--- a/hooks/useWebsockets.ts
+++ b/hooks/useWebsockets.ts
@@ -1,7 +1,7 @@
-import { useRouter } from "expo-router";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert } from "react-native";
+import useRouter from "@/hooks/useAppRouter";
 import { useWebSocketContext } from "@/providers/WebSocketProvider";

 interface UseWebSocketProps {
--- a/hooks/useWifiSSID.ts
+++ b/hooks/useWifiSSID.ts
@@ -0,0 +1,97 @@
+import * as Location from "expo-location";
+import { useCallback, useEffect, useState } from "react";
+import { getSSID } from "@/modules/wifi-ssid";
+
+export type PermissionStatus =
+  | "granted"
+  | "denied"
+  | "undetermined"
+  | "unavailable";
+
+export interface UseWifiSSIDReturn {
+  ssid: string | null;
+  permissionStatus: PermissionStatus;
+  requestPermission: () => Promise<boolean>;
+  isLoading: boolean;
+}
+
+function mapLocationStatus(
+  status: Location.PermissionStatus,
+): PermissionStatus {
+  switch (status) {
+    case Location.PermissionStatus.GRANTED:
+      return "granted";
+    case Location.PermissionStatus.DENIED:
+      return "denied";
+    default:
+      return "undetermined";
+  }
+}
+
+export function useWifiSSID(): UseWifiSSIDReturn {
+  const [ssid, setSSID] = useState<string | null>(null);
+  const [permissionStatus, setPermissionStatus] =
+    useState<PermissionStatus>("undetermined");
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchSSID = useCallback(async () => {
+    const result = await getSSID();
+    console.log("[WiFi Debug] Native module SSID:", result);
+    setSSID(result);
+  }, []);
+
+  const requestPermission = useCallback(async (): Promise<boolean> => {
+    try {
+      const { status } = await Location.requestForegroundPermissionsAsync();
+      const newStatus = mapLocationStatus(status);
+      setPermissionStatus(newStatus);
+
+      if (newStatus === "granted") {
+        await fetchSSID();
+      }
+
+      return newStatus === "granted";
+    } catch {
+      setPermissionStatus("unavailable");
+      return false;
+    }
+  }, [fetchSSID]);
+
+  useEffect(() => {
+    async function initialize() {
+      setIsLoading(true);
+      try {
+        const { status } = await Location.getForegroundPermissionsAsync();
+        const mappedStatus = mapLocationStatus(status);
+        setPermissionStatus(mappedStatus);
+
+        if (mappedStatus === "granted") {
+          await fetchSSID();
+        }
+      } catch {
+        setPermissionStatus("unavailable");
+      }
+      setIsLoading(false);
+    }
+
+    initialize();
+  }, [fetchSSID]);
+
+  // Refresh SSID when permission status changes to granted
+  useEffect(() => {
+    if (permissionStatus === "granted") {
+      fetchSSID();
+
+      // Also set up an interval to periodically check SSID
+      const interval = setInterval(fetchSSID, 10000); // Check every 10 seconds
+      return () => clearInterval(interval);
+    }
+  }, [permissionStatus, fetchSSID]);
+
+  return {
+    ssid,
+    permissionStatus,
+    requestPermission,
+    isLoading,
+  };
+}
--- a/modules/mpv-player/android/src/main/assets/subfont.ttf
+++ b/modules/mpv-player/android/src/main/assets/subfont.ttf
--- a/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MPVLayerRenderer.kt
+++ b/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MPVLayerRenderer.kt
@@ -1,10 +1,13 @@
 package expo.modules.mpvplayer

 import android.content.Context
+import android.content.res.AssetManager
 import android.os.Handler
 import android.os.Looper
 import android.util.Log
 import android.view.Surface
+import java.io.File
+import java.io.FileOutputStream

 /**
 * MPV renderer that wraps libmpv for video playback.
@@ -26,7 +29,7 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
    }
    
    interface Delegate {
-        fun onPositionChanged(position: Double, duration: Double)
+        fun onPositionChanged(position: Double, duration: Double, cacheSeconds: Double)
        fun onPauseChanged(isPaused: Boolean)
        fun onLoadingChanged(isLoading: Boolean)
        fun onReadyToSeek()
@@ -46,10 +49,28 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
    // Cached state
    private var cachedPosition: Double = 0.0
    private var cachedDuration: Double = 0.0
+    private var cachedCacheSeconds: Double = 0.0
    private var _isPaused: Boolean = true
    private var _isLoading: Boolean = false
    private var _playbackSpeed: Double = 1.0
    private var isReadyToSeek: Boolean = false
+
+    // Progress update throttling - CRITICAL for performance!
+    // DO NOT REMOVE THIS THROTTLE - it is essential for battery life and CPU efficiency.
+    //
+    // Without throttling, time-pos fires every video frame (24+ times/sec at 24fps).
+    // Each update crosses the React Native JS bridge, which is expensive on mobile.
+    // Even if the JS side does nothing, 24+ bridge calls/sec wastes CPU and battery.
+    //
+    // Throttling to 1 update/sec during normal playback is sufficient for:
+    // - Progress bar updates (users can't perceive 1-second granularity)
+    // - Playback position tracking
+    // - Any JS-side logic that needs current position
+    //
+    // During seeking, we bypass the throttle for responsive scrubbing.
+    // This optimization reduced CPU usage by ~50% for downloaded file playback.
+    private var lastProgressUpdateTime: Long = 0
+    private var _isSeeking: Boolean = false
    
    // Video dimensions
    private var _videoWidth: Int = 0
@@ -84,6 +105,52 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
            MPVLib.create(context)
            MPVLib.addObserver(this)
            
+            /**
+             * Create mpv config directory and copy font files to ensure SubRip subtitles load properly on Android.
+             *
+             * Technical Background:
+             * ====================
+             * On Android, mpv requires access to a font file to render text-based subtitles, particularly SubRip (.srt)
+             * format subtitles. Without an available font in the config directory, mpv will fail to display subtitles
+             * even when subtitle tracks are properly detected and loaded.
+             *
+             * Why This Is Necessary:
+             * =====================
+             * 1. Android's font system is isolated from native libraries like mpv. While Android has system fonts,
+             *    mpv cannot access them directly due to sandboxing and library isolation.
+             *
+             * 2. SubRip subtitles require a font to render text overlay on video. When no font is available in the
+             *    configured directory, mpv either:
+             *    - Fails silently (subtitles don't appear)
+             *    - Falls back to a default font that may not support the required character set
+             *    - Crashes or produces rendering errors
+             *
+             * 3. By placing a font file (font.ttf) in mpv's config directory and setting that directory via
+             *    MPVLib.setOptionString("config-dir", ...), we ensure mpv has a known, accessible font source.
+             *
+             * Reference:
+             * =========
+             * This workaround is documented in the mpv-android project:
+             * https://github.com/mpv-android/mpv-android/issues/96
+             *
+             * The issue discusses that without a font in the config directory, SubRip subtitles fail to load
+             * properly on Android, and the solution is to copy a font file to a known location that mpv can access.
+             */
+            // Create mpv config directory and copy font files
+            val mpvDir = File(context.getExternalFilesDir(null) ?: context.filesDir, "mpv")
+            //Log.i(TAG, "mpv config dir: $mpvDir")
+            if (!mpvDir.exists()) mpvDir.mkdirs()
+            // This needs to be named `subfont.ttf` else it won't work
+            arrayOf("subfont.ttf").forEach { fileName ->
+                val file = File(mpvDir, fileName)
+                if (file.exists()) return@forEach
+                context.assets
+                    .open(fileName, AssetManager.ACCESS_STREAMING)
+                    .copyTo(FileOutputStream(file))
+            }
+            MPVLib.setOptionString("config", "yes")
+            MPVLib.setOptionString("config-dir", mpvDir.path)
+            
            // Configure mpv options before initialization (based on Findroid)
            MPVLib.setOptionString("vo", "gpu")
            MPVLib.setOptionString("gpu-context", "android")
@@ -107,7 +174,7 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
            MPVLib.setOptionString("hr-seek-framedrop", "yes")
            
            // Subtitle settings
-            MPVLib.setOptionString("sub-scale-with-window", "yes")
+            MPVLib.setOptionString("sub-scale-with-window", "no")
            MPVLib.setOptionString("sub-use-margins", "no")
            MPVLib.setOptionString("subs-match-os-language", "yes")
            MPVLib.setOptionString("subs-fallback", "yes")
@@ -266,6 +333,7 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
        MPVLib.observeProperty("pause", MPV_FORMAT_FLAG)
        MPVLib.observeProperty("track-list/count", MPV_FORMAT_INT64)
        MPVLib.observeProperty("paused-for-cache", MPV_FORMAT_FLAG)
+        MPVLib.observeProperty("demuxer-cache-duration", MPV_FORMAT_DOUBLE)
        // Video dimensions for PiP aspect ratio
        MPVLib.observeProperty("video-params/w", MPV_FORMAT_INT64)
        MPVLib.observeProperty("video-params/h", MPV_FORMAT_INT64)
@@ -430,6 +498,57 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
        MPVLib.setPropertyDouble("panscan", panscanValue)
    }

+    // MARK: - Technical Info
+
+    fun getTechnicalInfo(): Map<String, Any> {
+        val info = mutableMapOf<String, Any>()
+
+        // Video dimensions
+        MPVLib.getPropertyInt("video-params/w")?.takeIf { it > 0 }?.let {
+            info["videoWidth"] = it
+        }
+        MPVLib.getPropertyInt("video-params/h")?.takeIf { it > 0 }?.let {
+            info["videoHeight"] = it
+        }
+
+        // Video codec
+        MPVLib.getPropertyString("video-format")?.let {
+            info["videoCodec"] = it
+        }
+
+        // Audio codec
+        MPVLib.getPropertyString("audio-codec-name")?.let {
+            info["audioCodec"] = it
+        }
+
+        // FPS (container fps)
+        MPVLib.getPropertyDouble("container-fps")?.takeIf { it > 0 }?.let {
+            info["fps"] = it
+        }
+
+        // Video bitrate (bits per second)
+        MPVLib.getPropertyInt("video-bitrate")?.takeIf { it > 0 }?.let {
+            info["videoBitrate"] = it
+        }
+
+        // Audio bitrate (bits per second)
+        MPVLib.getPropertyInt("audio-bitrate")?.takeIf { it > 0 }?.let {
+            info["audioBitrate"] = it
+        }
+
+        // Demuxer cache duration (seconds of video buffered)
+        MPVLib.getPropertyDouble("demuxer-cache-duration")?.let {
+            info["cacheSeconds"] = it
+        }
+
+        // Dropped frames
+        MPVLib.getPropertyInt("frame-drop-count")?.let {
+            info["droppedFrames"] = it
+        }
+
+        return info
+    }
+
    // MARK: - MPVLib.EventObserver
    
    override fun eventProperty(property: String) {
@@ -493,11 +612,20 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
        when (property) {
            "duration" -> {
                cachedDuration = value
-                mainHandler.post { delegate?.onPositionChanged(cachedPosition, cachedDuration) }
+                mainHandler.post { delegate?.onPositionChanged(cachedPosition, cachedDuration, cachedCacheSeconds) }
            }
            "time-pos" -> {
                cachedPosition = value
-                mainHandler.post { delegate?.onPositionChanged(cachedPosition, cachedDuration) }
+                // Always update immediately when seeking, otherwise throttle to once per second
+                val now = System.currentTimeMillis()
+                val shouldUpdate = _isSeeking || (now - lastProgressUpdateTime >= 1000)
+                if (shouldUpdate) {
+                    lastProgressUpdateTime = now
+                    mainHandler.post { delegate?.onPositionChanged(cachedPosition, cachedDuration, cachedCacheSeconds) }
+                }
+            }
+            "demuxer-cache-duration" -> {
+                cachedCacheSeconds = value
            }
        }
    }
@@ -507,8 +635,10 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
            MPVLib.MPV_EVENT_FILE_LOADED -> {
                // Add external subtitles now that file is loaded
                if (pendingExternalSubtitles.isNotEmpty()) {
-                    for (subUrl in pendingExternalSubtitles) {
-                        MPVLib.command(arrayOf("sub-add", subUrl))
+                    pendingExternalSubtitles.forEachIndexed { index, subUrl ->
+                        android.util.Log.d("MPVRenderer", "Adding external subtitle [$index]: $subUrl")
+                        // "auto" flag = add without auto-selecting (order preserved, MPVLib.command is sync)
+                        MPVLib.command(arrayOf("sub-add", subUrl, "auto"))
                    }
                    pendingExternalSubtitles = emptyList()
                    
@@ -527,7 +657,8 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
                }
            }
            MPVLib.MPV_EVENT_SEEK -> {
-                // Seek started - show loading indicator
+                // Seek started - show loading indicator and enable immediate progress updates
+                _isSeeking = true
                if (!_isLoading) {
                    _isLoading = true
                    mainHandler.post { delegate?.onLoadingChanged(true) }
@@ -535,6 +666,7 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
            }
            MPVLib.MPV_EVENT_PLAYBACK_RESTART -> {
                // Video playback has started/restarted (including after seek)
+                _isSeeking = false
                if (_isLoading) {
                    _isLoading = false
                    mainHandler.post { delegate?.onLoadingChanged(false) }
--- a/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MpvPlayerModule.kt
+++ b/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MpvPlayerModule.kt
@@ -173,6 +173,11 @@ class MpvPlayerModule : Module() {
                view.isZoomedToFill()
            }

+            // Technical info function
+            AsyncFunction("getTechnicalInfo") { view: MpvPlayerView ->
+                view.getTechnicalInfo()
+            }
+
            // Defines events that the view can send to JavaScript
            Events("onLoad", "onPlaybackStateChange", "onProgress", "onError", "onTracksReady")
        }
--- a/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MpvPlayerView.kt
+++ b/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MpvPlayerView.kt
@@ -33,23 +33,6 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
    
    companion object {
        private const val TAG = "MpvPlayerView"
-
-        /**
-         * Detect if running on an Android emulator.
-         * MPV player has EGL/OpenGL compatibility issues on emulators.
-         */
-        private fun isEmulator(): Boolean {
-            return (Build.FINGERPRINT.startsWith("generic")
-                    || Build.FINGERPRINT.startsWith("unknown")
-                    || Build.MODEL.contains("google_sdk")
-                    || Build.MODEL.contains("Emulator")
-                    || Build.MODEL.contains("Android SDK built for x86")
-                    || Build.MANUFACTURER.contains("Genymotion")
-                    || (Build.BRAND.startsWith("generic") && Build.DEVICE.startsWith("generic"))
-                    || "google_sdk" == Build.PRODUCT
-                    || Build.HARDWARE.contains("goldfish")
-                    || Build.HARDWARE.contains("ranchu"))
-        }
    }
    
    // Event dispatchers
@@ -104,21 +87,14 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
            }
        }
        
-        // Start the renderer (skip on emulators to avoid EGL crashes)
-        if (isEmulator()) {
-            Log.w(TAG, "Running on emulator - MPV player disabled due to EGL/OpenGL compatibility issues")
-            // Don't start renderer on emulator, will show error when trying to play
-        } else {
-            try {
-                renderer?.start()
-            } catch (e: Exception) {
-                Log.e(TAG, "Failed to start renderer: ${e.message}")
-                onError(mapOf("error" to "Failed to start renderer: ${e.message}"))
-            }
+        // Start the renderer
+        try {
+            renderer?.start()
+        } catch (e: Exception) {
+            Log.e(TAG, "Failed to start renderer: ${e.message}")
+            onError(mapOf("error" to "Failed to start renderer: ${e.message}"))
        }
    }
-
-    private var isOnEmulator: Boolean = isEmulator()
    
    // MARK: - SurfaceHolder.Callback
    
@@ -149,13 +125,6 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
    // MARK: - Video Loading

    fun loadVideo(config: VideoLoadConfig) {
-        // Block video loading on emulators
-        if (isOnEmulator) {
-            Log.w(TAG, "Cannot load video on emulator - MPV player not supported")
-            onError(mapOf("error" to "MPV player is not supported on emulators. Please test on a real device."))
-            return
-        }
-
        // Skip reload if same URL is already playing
        if (currentUrl == config.url) {
            return
@@ -330,9 +299,15 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
        return _isZoomedToFill
    }

+    // MARK: - Technical Info
+
+    fun getTechnicalInfo(): Map<String, Any> {
+        return renderer?.getTechnicalInfo() ?: emptyMap()
+    }
+
    // MARK: - MPVLayerRenderer.Delegate
    
-    override fun onPositionChanged(position: Double, duration: Double) {
+    override fun onPositionChanged(position: Double, duration: Double, cacheSeconds: Double) {
        cachedPosition = position
        cachedDuration = duration
        
@@ -344,7 +319,8 @@ class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context
        onProgress(mapOf(
            "position" to position,
            "duration" to duration,
-            "progress" to if (duration > 0) position / duration else 0.0
+            "progress" to if (duration > 0) position / duration else 0.0,
+            "cacheSeconds" to cacheSeconds
        ))
    }
    
--- a/Show More
+++ b/Show More