fix: resolve 13 review issues across casting components

- casting-player: remove redundant self-navigation useEffect
- casting-player: derive Type from metadata instead of hardcoding 'Movie'
- casting-player: pass null to useTrickplay instead of empty BaseItemDto
- casting-player: use != null for skip time labels (allow 0 to render)
- Chromecast: case-insensitive m3u8 detection via regex
- Chromecast: fix UUID hyphen indices to 4,6,8,10 for proper v4 format
- CastingMiniPlayer: use SeriesPrimaryImageTag for series poster URL
- ChromecastConnectionMenu: send rounded volume to castSession.setVolume
- ChromecastConnectionMenu: use isMutedRef in onValueChange to avoid stale closure
- ChromecastDeviceSheet: skip volume sync during active sliding
- ChromecastDeviceSheet: move unmute logic from onValueChange to onSlidingStart
- useCasting: detect playback start via isPlaying/playerState, not just progress>0
- useCasting: derive isChromecastAvailable from castState instead of hardcoding true
- useTrickplay: accept BaseItemDto|null with null guards on Id access

.claude/learned-facts.md

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

.github/copilot-instructions.md

@@ -3,7 +3,7 @@
 ## Project Overview
 
 Streamyfin is a cross-platform Jellyfin video streaming client built with Expo (React Native).  
-It supports mobile (iOS/Android) and TV platforms, integrates with Jellyfin and Jellyseerr APIs,
+It supports mobile (iOS/Android) and TV platforms, integrates with Jellyfin and Seerr APIs,
 and provides seamless media streaming with offline capabilities and Chromecast support.
 
 ## Main Technologies
@@ -40,9 +40,30 @@ and provides seamless media streaming with offline capabilities and Chromecast s
 - `scripts/` – Automation scripts (Node.js, Bash)
 - `plugins/` – Expo/Metro plugins
 
-## Coding Standards
+## Code Quality Standards
 
+**CRITICAL: Code must be production-ready, reliable, and maintainable**
+
+### Type Safety
 - Use TypeScript for ALL files (no .js files)
+- **NEVER use `any` type** - use proper types, generics, or `unknown` with type guards
+- Use `@ts-expect-error` with detailed comments only when necessary (e.g., library limitations)
+- When facing type issues, create proper type definitions and helper functions instead of using `any`
+- Use type assertions (`as`) only as a last resort with clear documentation explaining why
+- For Expo Router navigation: prefer string URLs with `URLSearchParams` over object syntax to avoid type conflicts
+- Enable and respect strict TypeScript compiler options
+- Define explicit return types for functions
+- Use discriminated unions for complex state
+
+### Code Reliability
+- Implement comprehensive error handling with try-catch blocks
+- Validate all external inputs (API responses, user input, query params)
+- Handle edge cases explicitly (empty arrays, null, undefined)
+- Use optional chaining (`?.`) and nullish coalescing (`??`) appropriately
+- Add runtime checks for critical operations
+- Implement proper loading and error states in components
+
+### Best Practices
 - Use descriptive English names for variables, functions, and components
 - Prefer functional React components with hooks
 - Use Jotai atoms for global state management
@@ -50,8 +71,10 @@ and provides seamless media streaming with offline capabilities and Chromecast s
 - Follow BiomeJS formatting and linting rules
 - Use `const` over `let`, avoid `var` entirely
 - Implement proper error boundaries
-- Use React.memo() for performance optimization
+- Use React.memo() for performance optimization when needed
 - Handle both mobile and TV navigation patterns
+- Write self-documenting code with clear intent
+- Add comments only when code complexity requires explanation
 
 ## API Integration
 
@@ -85,6 +108,18 @@ Exemples:
 - `fix(auth): handle expired JWT tokens`
 - `chore(deps): update Jellyfin SDK`
 
+## Internationalization (i18n)
+
+- **Primary workflow**: Always edit `translations/en.json` for new translation keys or updates
+- **Translation files** (ar.json, ca.json, cs.json, de.json, etc.):
+  - **NEVER add or remove keys** - Crowdin manages the key structure
+  - **Editing translation values is safe** - Bidirectional sync handles merges
+  - Prefer letting Crowdin translators update values, but direct edits work if needed
+- **Crowdin workflow**:
+  - New keys added to `en.json` sync to Crowdin automatically
+  - Approved translations sync back to language files via GitHub integration
+  - The source of truth is `en.json` for structure, Crowdin for translations
+
 ## Special Instructions
 
 - Prioritize cross-platform compatibility (mobile + TV)

.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,6 +242,63 @@ jobs:
           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
+
   # 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'))
@@ -271,9 +349,6 @@ jobs:
   #         token: ${{ secrets.EXPO_TOKEN }}
   #         eas-cache: true
   #
-  #     - name: ⚙️ Ensure tvOS SDKs installed
-  #       run: xcodebuild -downloadPlatform tvOS
-  #
   #     - name: 🚀 Build iOS app
   #       env:
   #         EXPO_TV: 1

.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

.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

.github/workflows/crowdin.yml

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

.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
 

.github/workflows/notification.yml

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

.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

.gitignore

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

CLAUDE.md

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

README.md

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

app.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -11,6 +11,7 @@ import { withLayoutContext } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
+import { CastingMiniPlayer } from "@/components/casting/CastingMiniPlayer";
 import { MiniPlayerBar } from "@/components/music/MiniPlayerBar";
 import { MusicPlaybackEngine } from "@/components/music/MusicPlaybackEngine";
 import { Colors } from "@/constants/Colors";
@@ -118,6 +119,7 @@ export default function TabLayout() {
           }}
         />
       </NativeTabs>
+      <CastingMiniPlayer />
       <MiniPlayerBar />
       <MusicPlaybackEngine />
     </View>

app/(auth)/now-playing.tsx

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

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

@@ -10,13 +10,12 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
-import { router, useGlobalSearchParams, useNavigation } from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, Platform, useWindowDimensions, View } from "react-native";
 import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
-
 import { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
@@ -27,6 +26,7 @@ import {
   PlaybackSpeedScope,
   updatePlaybackSpeedSettings,
 } from "@/components/video-player/controls/utils/playback-speed-settings";
+import useRouter from "@/hooks/useAppRouter";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useOrientation } from "@/hooks/useOrientation";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
@@ -44,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_occurred_while_playing_the_video"),
+                  );
+                  writeToLog("ERROR", "Video Error", e.nativeEvent);
                 }}
-              >
-                <Loader />
-              </View>
+                onTracksReady={() => {
+                  setTracksReady(true);
+                }}
+              />
+              {!hasPlaybackStarted && (
+                <View
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: "black",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <Loader />
+                </View>
+              )}
+            </View>
+            {isMounted === true && item && !isPipMode && (
+              <Controls
+                mediaSource={stream?.mediaSource}
+                item={item}
+                togglePlay={togglePlay}
+                isPlaying={isPlaying}
+                isSeeking={isSeeking}
+                progress={progress}
+                cacheProgress={cacheProgress}
+                isBuffering={isBuffering}
+                showControls={showControls}
+                setShowControls={setShowControls}
+                startPictureInPicture={startPictureInPicture}
+                play={play}
+                pause={pause}
+                seek={seek}
+                enableTrickplay={true}
+                aspectRatio={aspectRatio}
+                isZoomedToFill={isZoomedToFill}
+                onZoomToggle={handleZoomToggle}
+                api={api}
+                downloadedFiles={downloadedFiles}
+                playbackSpeed={currentPlaybackSpeed}
+                setPlaybackSpeed={handleSetPlaybackSpeed}
+                showTechnicalInfo={showTechnicalInfo}
+                onToggleTechnicalInfo={handleToggleTechnicalInfo}
+                getTechnicalInfo={getTechnicalInfo}
+                playMethod={playMethod}
+                transcodeReasons={transcodeReasons}
+              />
             )}
           </View>
-          {isMounted === true && item && !isPipMode && (
-            <Controls
-              mediaSource={stream?.mediaSource}
-              item={item}
-              togglePlay={togglePlay}
-              isPlaying={isPlaying}
-              isSeeking={isSeeking}
-              progress={progress}
-              cacheProgress={cacheProgress}
-              isBuffering={isBuffering}
-              showControls={showControls}
-              setShowControls={setShowControls}
-              startPictureInPicture={startPictureInPicture}
-              play={play}
-              pause={pause}
-              seek={seek}
-              enableTrickplay={true}
-              offline={offline}
-              aspectRatio={aspectRatio}
-              isZoomedToFill={isZoomedToFill}
-              onZoomToggle={handleZoomToggle}
-              api={api}
-              downloadedFiles={downloadedFiles}
-              playbackSpeed={currentPlaybackSpeed}
-              setPlaybackSpeed={handleSetPlaybackSpeed}
-            />
-          )}
-        </View>
-      </VideoProvider>
-    </PlayerProvider>
+        </VideoProvider>
+      </PlayerProvider>
+    </OfflineModeProvider>
   );
 }

app/_layout.tsx

@@ -22,6 +22,7 @@ import {
 import { MusicPlayerProvider } from "@/providers/MusicPlayerProvider";
 import { NetworkStatusProvider } from "@/providers/NetworkStatusProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
+import { ServerUrlProvider } from "@/providers/ServerUrlProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import {
@@ -47,7 +48,7 @@ import type {
   NotificationResponse,
 } from "expo-notifications/build/Notifications.types";
 import type { ExpoPushToken } from "expo-notifications/build/Tokens.types";
-import { router, Stack, useSegments } from "expo-router";
+import { Stack, useSegments } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider, useAtom } from "jotai";
@@ -56,6 +57,7 @@ import { I18nextProvider } from "react-i18next";
 import { Appearance } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import useRouter from "@/hooks/useAppRouter";
 import { userAtom } from "@/providers/JellyfinProvider";
 import { store } from "@/utils/store";
 import "react-native-reanimated";
@@ -80,14 +82,9 @@ SplashScreen.setOptions({
   fade: true,
 });
 
-function redirect(notification: typeof Notifications.Notification) {
-  const url = notification.request.content.data?.url;
-  if (url) {
-    router.push(url);
-  }
-}
-
 function useNotificationObserver() {
+  const router = useRouter();
+
   useEffect(() => {
     if (Platform.isTV) return;
 
@@ -98,14 +95,17 @@ function useNotificationObserver() {
         if (!isMounted || !response?.notification) {
           return;
         }
-        redirect(response?.notification);
+        const url = response?.notification.request.content.data?.url;
+        if (url) {
+          router.push(url);
+        }
       },
     );
 
     return () => {
       isMounted = false;
     };
-  }, []);
+  }, [router]);
 }
 
 if (!Platform.isTV) {
@@ -230,6 +230,7 @@ function Layout() {
   const [user] = useAtom(userAtom);
   const [api] = useAtom(apiAtom);
   const _segments = useSegments();
+  const router = useRouter();
 
   useEffect(() => {
     i18n.changeLanguage(
@@ -322,9 +323,6 @@ function Layout() {
       responseListener.current =
         Notifications?.addNotificationResponseReceivedListener(
           (response: NotificationResponse) => {
-            // redirect if internal notification
-            redirect(response?.notification);
-
             // Currently the notifications supported by the plugin will send data for deep links.
             const { title, data } = response.notification.request.content;
             writeInfoLog(`Notification ${title} opened`, data);
@@ -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>
   );

components/Badge.tsx

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

components/Chromecast.tsx

@@ -1,15 +1,23 @@
 import { Feather } from "@expo/vector-icons";
-import { useCallback, useEffect } from "react";
+import type { PlaybackProgressInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
+import { router } from "expo-router";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Platform } from "react-native";
 import { Pressable } from "react-native-gesture-handler";
 import GoogleCast, {
   CastButton,
   CastContext,
+  CastState,
   useCastDevice,
+  useCastState,
   useDevices,
   useMediaStatus,
   useRemoteMediaClient,
 } from "react-native-google-cast";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { ChromecastConnectionMenu } from "./chromecast/ChromecastConnectionMenu";
 import { RoundButton } from "./RoundButton";
 
 export function Chromecast({
@@ -18,23 +26,137 @@ export function Chromecast({
   background = "transparent",
   ...props
 }) {
-  const client = useRemoteMediaClient();
-  const castDevice = useCastDevice();
-  const devices = useDevices();
-  const sessionManager = GoogleCast.getSessionManager();
+  // Hooks called for their side effects (keep Chromecast session active)
+  useRemoteMediaClient();
+  useCastDevice();
+  const castState = useCastState();
+  useDevices();
   const discoveryManager = GoogleCast.getDiscoveryManager();
   const mediaStatus = useMediaStatus();
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
 
+  // Connection menu state
+  const [showConnectionMenu, setShowConnectionMenu] = useState(false);
+  const isConnected = castState === CastState.CONNECTED;
+
+  const lastReportedProgressRef = useRef(0);
+  const lastReportedPlayerStateRef = useRef<string | null>(null);
+  const playSessionIdRef = useRef<string | null>(null);
+  const lastContentIdRef = useRef<string | null>(null);
+  const discoveryAttempts = useRef(0);
+  const maxDiscoveryAttempts = 3;
+
+  // Enhanced discovery with retry mechanism - runs once on mount
   useEffect(() => {
-    (async () => {
+    let isSubscribed = true;
+    let retryTimeout: NodeJS.Timeout;
+
+    const startDiscoveryWithRetry = async () => {
       if (!discoveryManager) {
-        console.warn("DiscoveryManager is not initialized");
         return;
       }
 
-      await discoveryManager.startDiscovery();
-    })();
-  }, [client, devices, castDevice, sessionManager, discoveryManager]);
+      try {
+        // Stop any existing discovery first
+        try {
+          await discoveryManager.stopDiscovery();
+        } catch {
+          // Ignore errors when stopping
+        }
+
+        // Start fresh discovery
+        await discoveryManager.startDiscovery();
+        discoveryAttempts.current = 0; // Reset on success
+      } catch (error) {
+        console.error("[Chromecast Discovery] Failed:", error);
+
+        // Retry on error
+        if (discoveryAttempts.current < maxDiscoveryAttempts && isSubscribed) {
+          discoveryAttempts.current++;
+          retryTimeout = setTimeout(() => {
+            if (isSubscribed) {
+              startDiscoveryWithRetry();
+            }
+          }, 2000);
+        }
+      }
+    };
+
+    startDiscoveryWithRetry();
+
+    return () => {
+      isSubscribed = false;
+      if (retryTimeout) {
+        clearTimeout(retryTimeout);
+      }
+    };
+  }, [discoveryManager]); // Only re-run if discoveryManager changes
+
+  // Report video progress to Jellyfin server
+  useEffect(() => {
+    if (!api || !user?.Id || !mediaStatus?.mediaInfo?.contentId) {
+      return;
+    }
+
+    const streamPosition = mediaStatus.streamPosition || 0;
+    const playerState = mediaStatus.playerState || null;
+
+    // Report every 10 seconds OR immediately when playerState changes (pause/resume)
+    const positionChanged =
+      Math.abs(streamPosition - lastReportedProgressRef.current) >= 10;
+    const stateChanged = playerState !== lastReportedPlayerStateRef.current;
+    if (!positionChanged && !stateChanged) {
+      return;
+    }
+
+    const contentId = mediaStatus.mediaInfo.contentId;
+
+    // Generate a new PlaySessionId when the content changes
+    if (contentId !== lastContentIdRef.current) {
+      const randomBytes = new Uint8Array(16);
+      crypto.getRandomValues(randomBytes);
+      // Format as UUID v4
+      randomBytes[6] = (randomBytes[6] & 0x0f) | 0x40; // Version 4
+      randomBytes[8] = (randomBytes[8] & 0x3f) | 0x80; // Variant 10
+      const uuid = Array.from(randomBytes, (b, i) => {
+        const hex = b.toString(16).padStart(2, "0");
+        return [4, 6, 8, 10].includes(i) ? `-${hex}` : hex;
+      }).join("");
+      playSessionIdRef.current = uuid;
+      lastContentIdRef.current = contentId;
+    }
+
+    const positionTicks = Math.floor(streamPosition * 10000000);
+    const isPaused = mediaStatus.playerState === "paused";
+    const streamUrl = mediaStatus.mediaInfo.contentUrl || "";
+    const isTranscoding = /m3u8/i.test(streamUrl);
+
+    const progressInfo: PlaybackProgressInfo = {
+      ItemId: contentId,
+      PositionTicks: positionTicks,
+      IsPaused: isPaused,
+      PlayMethod: isTranscoding ? "Transcode" : "DirectStream",
+      PlaySessionId: playSessionIdRef.current || contentId,
+    };
+
+    getPlaystateApi(api)
+      .reportPlaybackProgress({ playbackProgressInfo: progressInfo })
+      .then(() => {
+        lastReportedProgressRef.current = streamPosition;
+        lastReportedPlayerStateRef.current = playerState;
+      })
+      .catch((error) => {
+        console.error("Failed to report Chromecast progress:", error);
+      });
+  }, [
+    api,
+    user?.Id,
+    mediaStatus?.streamPosition,
+    mediaStatus?.mediaInfo?.contentId,
+    mediaStatus?.playerState,
+    mediaStatus?.mediaInfo?.contentUrl,
+  ]);
 
   // Android requires the cast button to be present for startDiscovery to work
   const AndroidCastButton = useCallback(
@@ -43,50 +165,92 @@ export function Chromecast({
     [Platform.OS],
   );
 
+  // Handle press - show connection menu when connected, otherwise show cast dialog
+  const handlePress = useCallback(() => {
+    if (isConnected) {
+      if (mediaStatus?.currentItemId) {
+        // Media is playing - navigate to full player
+        router.push("/casting-player");
+      } else {
+        // Connected but no media - show connection menu
+        setShowConnectionMenu(true);
+      }
+    } else {
+      // Not connected - show cast dialog
+      CastContext.showCastDialog();
+    }
+  }, [isConnected, mediaStatus?.currentItemId]);
+
+  // Handle disconnect from Chromecast
+  const handleDisconnect = useCallback(async () => {
+    try {
+      const sessionManager = GoogleCast.getSessionManager();
+      await sessionManager.endCurrentSession(true);
+    } catch (error) {
+      console.error("[Chromecast] Disconnect error:", error);
+    }
+  }, []);
+
   if (Platform.OS === "ios") {
     return (
-      <Pressable
-        className='mr-4'
-        onPress={() => {
-          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
-          else CastContext.showCastDialog();
-        }}
-        {...props}
-      >
-        <AndroidCastButton />
-        <Feather name='cast' size={22} color={"white"} />
-      </Pressable>
+      <>
+        <Pressable className='mr-4' onPress={handlePress} {...props}>
+          <AndroidCastButton />
+          <Feather
+            name='cast'
+            size={22}
+            color={isConnected ? "#a855f7" : "white"}
+          />
+        </Pressable>
+        <ChromecastConnectionMenu
+          visible={showConnectionMenu}
+          onClose={() => setShowConnectionMenu(false)}
+          onDisconnect={handleDisconnect}
+        />
+      </>
     );
   }
 
   if (background === "transparent")
     return (
-      <RoundButton
-        size='large'
-        className='mr-2'
-        background={false}
-        onPress={() => {
-          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
-          else CastContext.showCastDialog();
-        }}
-        {...props}
-      >
-        <AndroidCastButton />
-        <Feather name='cast' size={22} color={"white"} />
-      </RoundButton>
+      <>
+        <RoundButton
+          size='large'
+          className='mr-2'
+          background={false}
+          onPress={handlePress}
+          {...props}
+        >
+          <AndroidCastButton />
+          <Feather
+            name='cast'
+            size={22}
+            color={isConnected ? "#a855f7" : "white"}
+          />
+        </RoundButton>
+        <ChromecastConnectionMenu
+          visible={showConnectionMenu}
+          onClose={() => setShowConnectionMenu(false)}
+          onDisconnect={handleDisconnect}
+        />
+      </>
     );
 
   return (
-    <RoundButton
-      size='large'
-      onPress={() => {
-        if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
-        else CastContext.showCastDialog();
-      }}
-      {...props}
-    >
-      <AndroidCastButton />
-      <Feather name='cast' size={22} color={"white"} />
-    </RoundButton>
+    <>
+      <RoundButton size='large' onPress={handlePress} {...props}>
+        <AndroidCastButton />
+        <Feather
+          name='cast'
+          size={22}
+          color={isConnected ? "#a855f7" : "white"}
+        />
+      </RoundButton>
+      <ChromecastConnectionMenu
+        visible={showConnectionMenu}
+        onClose={() => setShowConnectionMenu(false)}
+        onDisconnect={handleDisconnect}
+      />
+    </>
   );
 }

components/DownloadItem.tsx

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

components/GenreTags.tsx

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

components/IntroSheet.tsx

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

components/ItemContent.tsx

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

components/PlatformDropdown.tsx

@@ -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 = {
@@ -40,6 +47,7 @@ interface PlatformDropdownProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   onOptionSelect?: (value?: any) => void;
+  disabled?: boolean;
   expoUIConfig?: {
     hostStyle?: any;
   };
@@ -64,7 +72,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 +87,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 +161,15 @@ const BottomSheetContent: React.FC<{
           },
         };
       }
+      if (option.type === "action") {
+        return {
+          ...option,
+          onPress: () => {
+            option.onPress();
+            onClose?.();
+          },
+        };
+      }
       return option;
     }),
   }));
@@ -178,6 +198,7 @@ const PlatformDropdownComponent = ({
   onOpenChange: controlledOnOpenChange,
   onOptionSelect,
   expoUIConfig,
+  disabled,
   bottomSheetConfig,
 }: PlatformDropdownProps) => {
   const { showModal, hideModal, isVisible } = useGlobalModal();
@@ -212,6 +233,13 @@ const PlatformDropdownComponent = ({
   }, [isVisible, controlledOpen, controlledOnOpenChange]);
 
   if (Platform.OS === "ios") {
+    if (disabled) {
+      return (
+        <View style={{ opacity: 0.5 }} pointerEvents='none'>
+          {trigger || <Text className='text-white'>Open Menu</Text>}
+        </View>
+      );
+    }
     return (
       <Host style={expoUIConfig?.hostStyle}>
         <ContextMenu>
@@ -225,6 +253,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 +322,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>
@@ -316,8 +362,14 @@ const PlatformDropdownComponent = ({
   };
 
   return (
-    <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
-      {trigger || <Text className='text-white'>Open Menu</Text>}
+    <TouchableOpacity
+      onPress={handlePress}
+      activeOpacity={0.7}
+      disabled={disabled}
+    >
+      <View style={disabled ? { opacity: 0.5 } : undefined}>
+        {trigger || <Text className='text-white'>Open Menu</Text>}
+      </View>
     </TouchableOpacity>
   );
 };

components/PlayButton.tsx

@@ -2,14 +2,13 @@ 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";
 import { Alert, Platform, TouchableOpacity, View } from "react-native";
 import CastContext, {
   CastButton,
-  MediaStreamType,
+  MediaPlayerState,
   PlayServicesState,
   useMediaStatus,
   useRemoteMediaClient,
@@ -24,15 +23,16 @@ 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";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { buildCastMediaInfo } from "@/utils/casting/mediaInfo";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { chromecast } from "@/utils/profiles/chromecast";
 import { chromecasth265 } from "@/utils/profiles/chromecasth265";
@@ -44,7 +44,6 @@ import type { SelectedOptions } from "./ItemContent";
 interface Props extends React.ComponentProps<typeof TouchableOpacity> {
   item: BaseItemDto;
   selectedOptions: SelectedOptions;
-  isOffline?: boolean;
   colors?: ThemeColors;
 }
 
@@ -54,9 +53,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();
@@ -111,7 +110,11 @@ export const PlayButton: React.FC<Props> = ({
       return;
     }
 
-    const options = ["Chromecast", "Device", "Cancel"];
+    const options = [
+      t("casting_player.chromecast"),
+      t("casting_player.device"),
+      t("casting_player.cancel"),
+    ];
     const cancelButtonIndex = 2;
     showActionSheetWithOptions(
       {
@@ -120,9 +123,14 @@ export const PlayButton: React.FC<Props> = ({
       },
       async (selectedIndex: number | undefined) => {
         if (!api) return;
-        const currentTitle = mediaStatus?.mediaInfo?.metadata?.title;
+        // Compare item IDs AND check if media is actually playing (not stopped/idle)
+        const currentContentId = mediaStatus?.mediaInfo?.contentId;
+        const isMediaActive =
+          mediaStatus?.playerState === MediaPlayerState.PLAYING ||
+          mediaStatus?.playerState === MediaPlayerState.PAUSED ||
+          mediaStatus?.playerState === MediaPlayerState.BUFFERING;
         const isOpeningCurrentlyPlayingMedia =
-          currentTitle && currentTitle === item?.Name;
+          isMediaActive && currentContentId && currentContentId === item?.Id;
 
         switch (selectedIndex) {
           case 0:
@@ -175,8 +183,6 @@ export const PlayButton: React.FC<Props> = ({
                     subtitleStreamIndex: selectedOptions.subtitleIndex,
                   });
 
-                  console.log("URL: ", data?.url, enableH265);
-
                   if (!data?.url) {
                     console.warn("No URL returned from getStreamUrl", data);
                     Alert.alert(
@@ -186,74 +192,16 @@ export const PlayButton: React.FC<Props> = ({
                     return;
                   }
 
-                  // Calculate start time in seconds from playback position
                   const startTimeSeconds =
                     (item?.UserData?.PlaybackPositionTicks ?? 0) / 10000000;
 
-                  // Calculate stream duration in seconds from runtime
-                  const streamDurationSeconds = item.RunTimeTicks
-                    ? item.RunTimeTicks / 10000000
-                    : undefined;
-
                   client
                     .loadMedia({
-                      mediaInfo: {
-                        contentId: item.Id,
-                        contentUrl: data?.url,
-                        contentType: "video/mp4",
-                        streamType: MediaStreamType.BUFFERED,
-                        streamDuration: streamDurationSeconds,
-                        metadata:
-                          item.Type === "Episode"
-                            ? {
-                                type: "tvShow",
-                                title: item.Name || "",
-                                episodeNumber: item.IndexNumber || 0,
-                                seasonNumber: item.ParentIndexNumber || 0,
-                                seriesTitle: item.SeriesName || "",
-                                images: [
-                                  {
-                                    url: getParentBackdropImageUrl({
-                                      api,
-                                      item,
-                                      quality: 90,
-                                      width: 2000,
-                                    })!,
-                                  },
-                                ],
-                              }
-                            : item.Type === "Movie"
-                              ? {
-                                  type: "movie",
-                                  title: item.Name || "",
-                                  subtitle: item.Overview || "",
-                                  images: [
-                                    {
-                                      url: getPrimaryImageUrl({
-                                        api,
-                                        item,
-                                        quality: 90,
-                                        width: 2000,
-                                      })!,
-                                    },
-                                  ],
-                                }
-                              : {
-                                  type: "generic",
-                                  title: item.Name || "",
-                                  subtitle: item.Overview || "",
-                                  images: [
-                                    {
-                                      url: getPrimaryImageUrl({
-                                        api,
-                                        item,
-                                        quality: 90,
-                                        width: 2000,
-                                      })!,
-                                    },
-                                  ],
-                                },
-                      },
+                      mediaInfo: buildCastMediaInfo({
+                        item,
+                        streamUrl: data.url,
+                        api,
+                      }),
                       startTime: startTimeSeconds,
                     })
                     .then(() => {
@@ -261,10 +209,13 @@ export const PlayButton: React.FC<Props> = ({
                       if (isOpeningCurrentlyPlayingMedia) {
                         return;
                       }
-                      CastContext.showExpandedControls();
+                      router.push("/casting-player");
+                    })
+                    .catch((err) => {
+                      console.error("[PlayButton] loadMedia failed:", err);
                     });
                 } catch (e) {
-                  console.log(e);
+                  console.error("[PlayButton] Cast error:", e);
                 }
               }
             });
@@ -300,6 +251,19 @@ export const PlayButton: React.FC<Props> = ({
     // Check if item is downloaded
     const downloadedItem = item.Id ? getDownloadedItemById(item.Id) : undefined;
 
+    // If already in offline mode, play downloaded file directly
+    if (isOffline && downloadedItem) {
+      const queryParams = new URLSearchParams({
+        itemId: item.Id!,
+        offline: "true",
+        playbackPosition:
+          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
+      });
+      goToPlayer(queryParams.toString());
+      return;
+    }
+
+    // If online but file is downloaded, ask user which version to play
     if (downloadedItem) {
       if (Platform.OS === "android") {
         // Show bottom sheet for Android

components/PlayButton.tv.tsx

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

components/PlayedStatus.tsx

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

components/apple-tv-carousel/AppleTVCarousel.tsx

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

components/casting/CastingMiniPlayer.tsx

@@ -0,0 +1,457 @@
+/**
+ * Unified Casting Mini Player
+ * Works with all supported casting protocols
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { Image } from "expo-image";
+import { router } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Dimensions, Pressable, View } from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import {
+  MediaPlayerState,
+  useCastDevice,
+  useMediaStatus,
+  useRemoteMediaClient,
+} from "react-native-google-cast";
+import Animated, {
+  SlideInDown,
+  SlideOutDown,
+  useSharedValue,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { useTrickplay } from "@/hooks/useTrickplay";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import {
+  formatTime,
+  formatTrickplayTime,
+  getPosterUrl,
+} from "@/utils/casting/helpers";
+import { CASTING_CONSTANTS } from "@/utils/casting/types";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
+
+export const CastingMiniPlayer: React.FC = () => {
+  const api = useAtomValue(apiAtom);
+  const insets = useSafeAreaInsets();
+  const castDevice = useCastDevice();
+  const mediaStatus = useMediaStatus();
+  const remoteMediaClient = useRemoteMediaClient();
+
+  const currentItem = useMemo(() => {
+    return mediaStatus?.mediaInfo?.customData as BaseItemDto | undefined;
+  }, [mediaStatus?.mediaInfo?.customData]);
+
+  // Trickplay support - pass currentItem as BaseItemDto or null
+  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
+    currentItem || null,
+  );
+  const [trickplayTime, setTrickplayTime] = useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+  const [scrubPercentage, setScrubPercentage] = useState(0);
+  const isScrubbing = useRef(false);
+
+  // Slider shared values
+  const sliderProgress = useSharedValue(0);
+  const sliderMin = useSharedValue(0);
+  const sliderMax = useSharedValue(100);
+
+  // Live progress state that updates every second when playing
+  const [liveProgress, setLiveProgress] = useState(
+    mediaStatus?.streamPosition || 0,
+  );
+
+  // Track baseline for elapsed-time computation
+  const baselinePositionRef = useRef(mediaStatus?.streamPosition || 0);
+  const baselineTimestampRef = useRef(Date.now());
+
+  // Sync live progress with mediaStatus and poll every second when playing
+  useEffect(() => {
+    // Resync baseline whenever mediaStatus reports a new position
+    if (mediaStatus?.streamPosition !== undefined) {
+      baselinePositionRef.current = mediaStatus.streamPosition;
+      baselineTimestampRef.current = Date.now();
+      setLiveProgress(mediaStatus.streamPosition);
+    }
+
+    // Update based on elapsed real time when playing
+    const interval = setInterval(() => {
+      if (mediaStatus?.playerState === MediaPlayerState.PLAYING) {
+        const elapsed =
+          ((Date.now() - baselineTimestampRef.current) *
+            (mediaStatus.playbackRate || 1)) /
+          1000;
+        setLiveProgress(baselinePositionRef.current + elapsed);
+      } else if (mediaStatus?.streamPosition !== undefined) {
+        // Sync with actual position when paused/buffering
+        baselinePositionRef.current = mediaStatus.streamPosition;
+        baselineTimestampRef.current = Date.now();
+        setLiveProgress(mediaStatus.streamPosition);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [
+    mediaStatus?.playerState,
+    mediaStatus?.streamPosition,
+    mediaStatus?.playbackRate,
+  ]);
+
+  const progress = liveProgress * 1000; // Convert to ms
+  const duration = (mediaStatus?.mediaInfo?.streamDuration || 0) * 1000;
+  const isPlaying = mediaStatus?.playerState === MediaPlayerState.PLAYING;
+
+  // Update slider max value when duration changes
+  useEffect(() => {
+    if (duration > 0) {
+      sliderMax.value = duration;
+    }
+  }, [duration, sliderMax]);
+
+  // Sync slider progress with live progress (when not scrubbing)
+  useEffect(() => {
+    if (!isScrubbing.current && progress >= 0) {
+      sliderProgress.value = progress;
+    }
+  }, [progress, sliderProgress]);
+
+  // For episodes, use series poster; for other content, use item poster
+  const posterUrl = useMemo(() => {
+    if (!api?.basePath || !currentItem) return null;
+
+    if (
+      currentItem.Type === "Episode" &&
+      currentItem.SeriesId &&
+      currentItem.ParentIndexNumber !== undefined &&
+      currentItem.SeasonId
+    ) {
+      // Build series poster URL using SeriesId and series-level image tag
+      const imageTag = currentItem.SeriesPrimaryImageTag || "";
+      const tagParam = imageTag ? `&tag=${imageTag}` : "";
+      return `${api.basePath}/Items/${currentItem.SeriesId}/Images/Primary?fillHeight=120&fillWidth=80&quality=96${tagParam}`;
+    }
+
+    // For non-episodes, use item's own poster
+    return getPosterUrl(
+      api.basePath,
+      currentItem.Id,
+      currentItem.ImageTags?.Primary,
+      80,
+      120,
+    );
+  }, [api?.basePath, currentItem]);
+
+  // Hide mini player when:
+  // - No cast device connected
+  // - No media info (currentItem)
+  // - No media status
+  // - Media is stopped (IDLE state)
+  // - Media is unknown state
+  const playerState = mediaStatus?.playerState;
+  const isMediaStopped = playerState === MediaPlayerState.IDLE;
+
+  if (!castDevice || !currentItem || !mediaStatus || isMediaStopped) {
+    return null;
+  }
+
+  const protocolColor = "#a855f7"; // Streamyfin purple
+  const TAB_BAR_HEIGHT = 80; // Standard tab bar height
+
+  const handlePress = () => {
+    router.push("/casting-player");
+  };
+
+  const handleTogglePlayPause = () => {
+    if (isPlaying) {
+      remoteMediaClient?.pause()?.catch((error: unknown) => {
+        console.error("[CastingMiniPlayer] Pause error:", error);
+      });
+    } else {
+      remoteMediaClient?.play()?.catch((error: unknown) => {
+        console.error("[CastingMiniPlayer] Play error:", error);
+      });
+    }
+  };
+
+  return (
+    <Animated.View
+      entering={SlideInDown.duration(CASTING_CONSTANTS.ANIMATION_DURATION)}
+      exiting={SlideOutDown.duration(CASTING_CONSTANTS.ANIMATION_DURATION)}
+      style={{
+        position: "absolute",
+        bottom: TAB_BAR_HEIGHT + insets.bottom,
+        left: 0,
+        right: 0,
+        backgroundColor: "#1a1a1a",
+        borderTopWidth: 1,
+        borderTopColor: "#333",
+        zIndex: 100,
+      }}
+    >
+      {/* Interactive progress slider with trickplay */}
+      <View style={{ paddingHorizontal: 8, paddingTop: 4 }}>
+        <Slider
+          style={{ width: "100%", height: 20 }}
+          progress={sliderProgress}
+          minimumValue={sliderMin}
+          maximumValue={sliderMax}
+          theme={{
+            maximumTrackTintColor: "#333",
+            minimumTrackTintColor: protocolColor,
+            bubbleBackgroundColor: protocolColor,
+            bubbleTextColor: "#fff",
+          }}
+          onSlidingStart={() => {
+            isScrubbing.current = true;
+          }}
+          onValueChange={(value) => {
+            // Calculate trickplay preview
+            const progressInTicks = msToTicks(value);
+            calculateTrickplayUrl(progressInTicks);
+
+            // Update time display for trickplay bubble
+            const progressInSeconds = Math.floor(
+              ticksToSeconds(progressInTicks),
+            );
+            const hours = Math.floor(progressInSeconds / 3600);
+            const minutes = Math.floor((progressInSeconds % 3600) / 60);
+            const seconds = progressInSeconds % 60;
+            setTrickplayTime({ hours, minutes, seconds });
+
+            // Track scrub percentage for bubble positioning
+            if (duration > 0) {
+              setScrubPercentage(value / duration);
+            }
+          }}
+          onSlidingComplete={(value) => {
+            isScrubbing.current = false;
+            // Seek to the position (value is in milliseconds, convert to seconds)
+            const positionSeconds = value / 1000;
+            if (remoteMediaClient && duration > 0) {
+              remoteMediaClient
+                .seek({ position: positionSeconds })
+                .catch((error) => {
+                  console.error("[Mini Player] Seek error:", error);
+                });
+            }
+          }}
+          renderBubble={() => {
+            // Calculate bubble position with edge clamping
+            const screenWidth = Dimensions.get("window").width;
+            const sliderPadding = 8;
+            const thumbWidth = 10; // matches thumbWidth prop on Slider
+            const sliderWidth = screenWidth - sliderPadding * 2;
+            // Adjust thumb position to account for thumb width affecting travel range
+            const effectiveTrackWidth = sliderWidth - thumbWidth;
+            const thumbPosition =
+              thumbWidth / 2 + scrubPercentage * effectiveTrackWidth;
+
+            if (!trickPlayUrl || !trickplayInfo) {
+              // Show simple time bubble when no trickplay
+              const timeBubbleWidth = 70;
+              const minLeft = -thumbPosition;
+              const maxLeft = sliderWidth - thumbPosition - timeBubbleWidth;
+              const centeredLeft = -timeBubbleWidth / 2;
+              const clampedLeft = Math.max(
+                minLeft,
+                Math.min(maxLeft, centeredLeft),
+              );
+
+              return (
+                <View
+                  style={{
+                    position: "absolute",
+                    bottom: 12,
+                    left: clampedLeft,
+                    backgroundColor: protocolColor,
+                    paddingHorizontal: 8,
+                    paddingVertical: 4,
+                    borderRadius: 4,
+                  }}
+                >
+                  <Text
+                    style={{ color: "#fff", fontSize: 11, fontWeight: "600" }}
+                  >
+                    {formatTrickplayTime(trickplayTime)}
+                  </Text>
+                </View>
+              );
+            }
+
+            const { x, y, url } = trickPlayUrl;
+            const tileWidth = 140; // Smaller preview for mini player
+            const tileHeight = tileWidth / (trickplayInfo.aspectRatio ?? 1.78);
+
+            // Calculate clamped position for trickplay preview
+            const minLeft = -thumbPosition;
+            const maxLeft = sliderWidth - thumbPosition - tileWidth;
+            const centeredLeft = -tileWidth / 2;
+            const clampedLeft = Math.max(
+              minLeft,
+              Math.min(maxLeft, centeredLeft),
+            );
+
+            return (
+              <View
+                style={{
+                  position: "absolute",
+                  bottom: 12,
+                  left: clampedLeft,
+                  width: tileWidth,
+                  alignItems: "center",
+                }}
+              >
+                {/* Trickplay image preview */}
+                <View
+                  style={{
+                    width: tileWidth,
+                    height: tileHeight,
+                    borderRadius: 6,
+                    overflow: "hidden",
+                    backgroundColor: "#1a1a1a",
+                  }}
+                >
+                  <Image
+                    cachePolicy='memory-disk'
+                    style={{
+                      width: tileWidth * (trickplayInfo.data?.TileWidth ?? 1),
+                      height:
+                        (tileWidth / (trickplayInfo.aspectRatio ?? 1.78)) *
+                        (trickplayInfo.data?.TileHeight ?? 1),
+                      transform: [
+                        { translateX: -x * tileWidth },
+                        { translateY: -y * tileHeight },
+                      ],
+                    }}
+                    source={{ uri: url }}
+                    contentFit='cover'
+                  />
+                </View>
+                {/* Time overlay */}
+                <View
+                  style={{
+                    position: "absolute",
+                    bottom: 2,
+                    left: 2,
+                    backgroundColor: "rgba(0, 0, 0, 0.7)",
+                    paddingHorizontal: 4,
+                    paddingVertical: 1,
+                    borderRadius: 3,
+                  }}
+                >
+                  <Text
+                    style={{ color: "#fff", fontSize: 10, fontWeight: "600" }}
+                  >
+                    {formatTrickplayTime(trickplayTime)}
+                  </Text>
+                </View>
+              </View>
+            );
+          }}
+          sliderHeight={3}
+          thumbWidth={10}
+          panHitSlop={{ top: 20, bottom: 20, left: 5, right: 5 }}
+        />
+      </View>
+
+      <Pressable onPress={handlePress}>
+        {/* Content */}
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            padding: 12,
+            paddingTop: 6,
+            gap: 12,
+          }}
+        >
+          {/* Poster */}
+          {posterUrl && (
+            <Image
+              source={{ uri: posterUrl }}
+              style={{
+                width: 40,
+                height: 60,
+                borderRadius: 4,
+              }}
+              contentFit='cover'
+            />
+          )}
+
+          {/* Info */}
+          <View style={{ flex: 1 }}>
+            <Text
+              style={{
+                color: "white",
+                fontSize: 14,
+                fontWeight: "600",
+              }}
+              numberOfLines={1}
+            >
+              {currentItem.Name}
+            </Text>
+            {currentItem.SeriesName && (
+              <Text
+                style={{
+                  color: "#999",
+                  fontSize: 12,
+                }}
+                numberOfLines={1}
+              >
+                {currentItem.SeriesName}
+              </Text>
+            )}
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 8,
+                marginTop: 2,
+              }}
+            >
+              <Ionicons name='tv' size={12} color={protocolColor} />
+              <Text
+                style={{
+                  color: protocolColor,
+                  fontSize: 11,
+                }}
+                numberOfLines={1}
+              >
+                {castDevice.friendlyName || "Chromecast"}
+              </Text>
+              <Text
+                style={{
+                  color: "#666",
+                  fontSize: 11,
+                }}
+              >
+                {formatTime(progress)} / {formatTime(duration)}
+              </Text>
+            </View>
+          </View>
+
+          {/* Play/Pause button */}
+          <Pressable
+            onPress={(e) => {
+              e.stopPropagation();
+              handleTogglePlayPause();
+            }}
+            style={{ padding: 8 }}
+          >
+            <Ionicons
+              name={isPlaying ? "pause" : "play"}
+              size={28}
+              color='white'
+            />
+          </Pressable>
+        </View>
+      </Pressable>
+    </Animated.View>
+  );
+};

components/chromecast/ChromecastConnectionMenu.tsx

@@ -0,0 +1,321 @@
+/**
+ * Chromecast Connection Menu
+ * Shows device info, volume control, and disconnect option
+ * Simple menu for when connected but not actively controlling playback
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Modal, Pressable, View } from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { useCastDevice, useCastSession } from "react-native-google-cast";
+import { useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+
+interface ChromecastConnectionMenuProps {
+  visible: boolean;
+  onClose: () => void;
+  onDisconnect?: () => Promise<void>;
+}
+
+export const ChromecastConnectionMenu: React.FC<
+  ChromecastConnectionMenuProps
+> = ({ visible, onClose, onDisconnect }) => {
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+  const castDevice = useCastDevice();
+  const castSession = useCastSession();
+
+  // Volume state - use refs to avoid triggering re-renders during sliding
+  const [displayVolume, setDisplayVolume] = useState(50);
+  const [isMuted, setIsMuted] = useState(false);
+  const isMutedRef = useRef(false);
+  const volumeValue = useSharedValue(50);
+  const minimumValue = useSharedValue(0);
+  const maximumValue = useSharedValue(100);
+  const isSliding = useRef(false);
+  const lastSetVolume = useRef(50);
+
+  const protocolColor = "#a855f7";
+
+  // Get initial volume and mute state when menu opens
+  useEffect(() => {
+    if (!visible || !castSession) return;
+
+    // Get initial states
+    const fetchInitialState = async () => {
+      try {
+        const vol = await castSession.getVolume();
+        if (vol !== undefined) {
+          const percent = Math.round(vol * 100);
+          setDisplayVolume(percent);
+          volumeValue.value = percent;
+          lastSetVolume.current = percent;
+        }
+        const muted = await castSession.isMute();
+        isMutedRef.current = muted;
+        setIsMuted(muted);
+      } catch {
+        // Ignore errors
+      }
+    };
+    fetchInitialState();
+
+    // Poll for external volume changes (physical buttons) - only when not sliding
+    const interval = setInterval(async () => {
+      if (isSliding.current) return;
+
+      try {
+        const vol = await castSession.getVolume();
+        if (vol !== undefined) {
+          const percent = Math.round(vol * 100);
+          // Only update if external change detected (not our own change)
+          if (Math.abs(percent - lastSetVolume.current) > 2) {
+            setDisplayVolume(percent);
+            volumeValue.value = percent;
+            lastSetVolume.current = percent;
+          }
+        }
+        const muted = await castSession.isMute();
+        if (muted !== isMutedRef.current) {
+          isMutedRef.current = muted;
+          setIsMuted(muted);
+        }
+      } catch {
+        // Ignore errors
+      }
+    }, 1000); // Poll less frequently
+
+    return () => clearInterval(interval);
+  }, [visible, castSession, volumeValue]);
+
+  // Volume change during sliding - update display only, don't call API
+  const handleVolumeChange = useCallback((value: number) => {
+    const rounded = Math.round(value);
+    setDisplayVolume(rounded);
+  }, []);
+
+  // Volume change complete - call API
+  const handleVolumeComplete = useCallback(
+    async (value: number) => {
+      isSliding.current = false;
+      const rounded = Math.round(value);
+      setDisplayVolume(rounded);
+      lastSetVolume.current = rounded;
+
+      try {
+        if (castSession) {
+          await castSession.setVolume(rounded / 100);
+        }
+      } catch (error) {
+        console.error("[Connection Menu] Volume error:", error);
+      }
+    },
+    [castSession],
+  );
+
+  // Toggle mute
+  const handleToggleMute = useCallback(async () => {
+    if (!castSession) return;
+    try {
+      const newMute = !isMuted;
+      await castSession.setMute(newMute);
+      isMutedRef.current = newMute;
+      setIsMuted(newMute);
+    } catch (error) {
+      console.error("[Connection Menu] Mute error:", error);
+    }
+  }, [castSession, isMuted]);
+
+  // Disconnect
+  const handleDisconnect = useCallback(async () => {
+    try {
+      if (onDisconnect) {
+        await onDisconnect();
+      }
+    } catch (error) {
+      console.error("[Connection Menu] Disconnect error:", error);
+    } finally {
+      onClose();
+    }
+  }, [onDisconnect, onClose]);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType='slide'
+      onRequestClose={onClose}
+    >
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <Pressable
+          style={{
+            flex: 1,
+            backgroundColor: "rgba(0, 0, 0, 0.9)",
+            justifyContent: "flex-end",
+          }}
+          onPress={onClose}
+        >
+          <Pressable
+            style={{
+              backgroundColor: "#1a1a1a",
+              borderTopLeftRadius: 20,
+              borderTopRightRadius: 20,
+              paddingBottom: insets.bottom + 16,
+            }}
+            onPress={(e) => e.stopPropagation()}
+          >
+            {/* Header with device name */}
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: 16,
+                borderBottomWidth: 1,
+                borderBottomColor: "#333",
+              }}
+            >
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+              >
+                <View
+                  style={{
+                    width: 40,
+                    height: 40,
+                    borderRadius: 20,
+                    backgroundColor: protocolColor,
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <Ionicons name='tv' size={20} color='white' />
+                </View>
+                <View>
+                  <Text
+                    style={{ color: "white", fontSize: 16, fontWeight: "600" }}
+                  >
+                    {castDevice?.friendlyName || t("casting_player.chromecast")}
+                  </Text>
+                  <Text style={{ color: protocolColor, fontSize: 12 }}>
+                    {t("casting_player.connected")}
+                  </Text>
+                </View>
+              </View>
+              <Pressable onPress={onClose} style={{ padding: 8 }}>
+                <Ionicons name='close' size={24} color='white' />
+              </Pressable>
+            </View>
+
+            {/* Volume Control */}
+            <View style={{ padding: 16 }}>
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  marginBottom: 12,
+                }}
+              >
+                <Text style={{ color: "#999", fontSize: 12 }}>
+                  {t("casting_player.volume")}
+                </Text>
+                <Text style={{ color: "white", fontSize: 14 }}>
+                  {isMuted ? t("casting_player.muted") : `${displayVolume}%`}
+                </Text>
+              </View>
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+              >
+                <Pressable
+                  onPress={handleToggleMute}
+                  style={{
+                    padding: 8,
+                    borderRadius: 20,
+                    backgroundColor: isMuted ? protocolColor : "transparent",
+                  }}
+                >
+                  <Ionicons
+                    name={isMuted ? "volume-mute" : "volume-low"}
+                    size={20}
+                    color={isMuted ? "white" : "#999"}
+                  />
+                </Pressable>
+                <View style={{ flex: 1 }}>
+                  <Slider
+                    style={{ width: "100%", height: 40 }}
+                    progress={volumeValue}
+                    minimumValue={minimumValue}
+                    maximumValue={maximumValue}
+                    theme={{
+                      disableMinTrackTintColor: "#333",
+                      maximumTrackTintColor: "#333",
+                      minimumTrackTintColor: isMuted ? "#666" : protocolColor,
+                      bubbleBackgroundColor: protocolColor,
+                    }}
+                    onSlidingStart={() => {
+                      isSliding.current = true;
+                    }}
+                    onValueChange={async (value) => {
+                      volumeValue.value = value;
+                      handleVolumeChange(value);
+                      // Unmute when adjusting volume - use ref to avoid
+                      // stale closure and prevent repeated async calls
+                      if (isMutedRef.current) {
+                        isMutedRef.current = false;
+                        setIsMuted(false);
+                        try {
+                          await castSession?.setMute(false);
+                        } catch (error: unknown) {
+                          console.error(
+                            "[ChromecastConnectionMenu] Failed to unmute:",
+                            error,
+                          );
+                          isMutedRef.current = true;
+                          setIsMuted(true); // Rollback on failure
+                        }
+                      }
+                    }}
+                    onSlidingComplete={handleVolumeComplete}
+                    panHitSlop={{ top: 20, bottom: 20, left: 0, right: 0 }}
+                  />
+                </View>
+                <Ionicons
+                  name='volume-high'
+                  size={20}
+                  color={isMuted ? "#666" : "#999"}
+                />
+              </View>
+            </View>
+
+            {/* Disconnect button */}
+            <View style={{ paddingHorizontal: 16 }}>
+              <Pressable
+                onPress={handleDisconnect}
+                style={{
+                  backgroundColor: protocolColor,
+                  padding: 14,
+                  borderRadius: 8,
+                  flexDirection: "row",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  gap: 8,
+                }}
+              >
+                <Ionicons name='power' size={20} color='white' />
+                <Text
+                  style={{ color: "white", fontSize: 14, fontWeight: "500" }}
+                >
+                  {t("casting_player.disconnect")}
+                </Text>
+              </Pressable>
+            </View>
+          </Pressable>
+        </Pressable>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+};

components/chromecast/ChromecastDeviceSheet.tsx

@@ -0,0 +1,348 @@
+/**
+ * Chromecast Device Info Sheet
+ * Shows device details, volume control, and disconnect option
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Modal, Pressable, View } from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { useCastSession } from "react-native-google-cast";
+import { useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+
+interface ChromecastDeviceSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  device: { friendlyName?: string } | null;
+  onDisconnect: () => Promise<void>;
+  volume?: number;
+  onVolumeChange?: (volume: number) => Promise<void>;
+}
+
+export const ChromecastDeviceSheet: React.FC<ChromecastDeviceSheetProps> = ({
+  visible,
+  onClose,
+  device,
+  onDisconnect,
+  volume = 0.5,
+  onVolumeChange,
+}) => {
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+  const [displayVolume, setDisplayVolume] = useState(Math.round(volume * 100));
+  const volumeValue = useSharedValue(volume * 100);
+  const minimumValue = useSharedValue(0);
+  const maximumValue = useSharedValue(100);
+  const castSession = useCastSession();
+  const volumeDebounceRef = useRef<NodeJS.Timeout | null>(null);
+  const [isMuted, setIsMuted] = useState(false);
+  const isSliding = useRef(false);
+  const lastSetVolume = useRef(Math.round(volume * 100));
+
+  // Sync volume slider with prop changes (updates from physical buttons)
+  // Skip updates while user is actively sliding to avoid overwriting drag
+  useEffect(() => {
+    if (isSliding.current) return;
+    volumeValue.value = volume * 100;
+    setDisplayVolume(Math.round(volume * 100));
+  }, [volume, volumeValue]);
+
+  // Poll for volume and mute updates when sheet is visible to catch physical button changes
+  useEffect(() => {
+    if (!visible || !castSession) return;
+
+    // Get initial mute state
+    castSession
+      .isMute()
+      .then(setIsMuted)
+      .catch(() => {});
+
+    // Poll CastSession for device volume and mute state (only when not sliding)
+    const interval = setInterval(async () => {
+      if (isSliding.current) return;
+
+      try {
+        const deviceVolume = await castSession.getVolume();
+        if (deviceVolume !== undefined) {
+          const volumePercent = Math.round(deviceVolume * 100);
+          // Only update if external change (physical buttons)
+          if (Math.abs(volumePercent - lastSetVolume.current) > 2) {
+            setDisplayVolume(volumePercent);
+            volumeValue.value = volumePercent;
+            lastSetVolume.current = volumePercent;
+          }
+        }
+
+        // Check mute state
+        const muteState = await castSession.isMute();
+        setIsMuted(muteState);
+      } catch {
+        // Ignore errors - device might be disconnected
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [visible, castSession, volumeValue]);
+
+  const handleDisconnect = async () => {
+    setIsDisconnecting(true);
+    try {
+      await onDisconnect();
+      onClose();
+    } catch (error) {
+      console.error("Failed to disconnect:", error);
+    } finally {
+      setIsDisconnecting(false);
+    }
+  };
+
+  const handleVolumeComplete = async (value: number) => {
+    const newVolume = value / 100;
+    setDisplayVolume(Math.round(value));
+    try {
+      // Use CastSession.setVolume for DEVICE volume control
+      // This works even when no media is playing, unlike setStreamVolume
+      if (castSession) {
+        await castSession.setVolume(newVolume);
+      } else if (onVolumeChange) {
+        // Fallback to prop method if session not available
+        await onVolumeChange(newVolume);
+      }
+    } catch (error) {
+      console.error("[Volume] Error setting volume:", error);
+    }
+  };
+
+  // Debounced volume update during sliding for smooth live feedback
+  const handleVolumeChange = useCallback(
+    (value: number) => {
+      setDisplayVolume(Math.round(value));
+
+      // Debounce the API call to avoid too many requests
+      if (volumeDebounceRef.current) {
+        clearTimeout(volumeDebounceRef.current);
+      }
+
+      volumeDebounceRef.current = setTimeout(async () => {
+        const newVolume = value / 100;
+        try {
+          if (castSession) {
+            await castSession.setVolume(newVolume);
+          }
+        } catch {
+          // Ignore errors during sliding
+        }
+      }, 150); // 150ms debounce
+    },
+    [castSession],
+  );
+
+  // Toggle mute state
+  const handleToggleMute = useCallback(async () => {
+    if (!castSession) return;
+    try {
+      const newMuteState = !isMuted;
+      await castSession.setMute(newMuteState);
+      setIsMuted(newMuteState);
+    } catch (error) {
+      console.error("[Volume] Error toggling mute:", error);
+    }
+  }, [castSession, isMuted]);
+
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (volumeDebounceRef.current) {
+        clearTimeout(volumeDebounceRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType='slide'
+      onRequestClose={onClose}
+    >
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <Pressable
+          style={{
+            flex: 1,
+            backgroundColor: "rgba(0, 0, 0, 0.85)",
+            justifyContent: "flex-end",
+          }}
+          onPress={onClose}
+        >
+          <Pressable
+            style={{
+              backgroundColor: "#1a1a1a",
+              borderTopLeftRadius: 16,
+              borderTopRightRadius: 16,
+              paddingBottom: insets.bottom + 16,
+            }}
+            onPress={(e) => e.stopPropagation()}
+          >
+            {/* Header */}
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: 16,
+                borderBottomWidth: 1,
+                borderBottomColor: "#333",
+              }}
+            >
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+              >
+                <Ionicons name='tv' size={24} color='#a855f7' />
+                <Text
+                  style={{ color: "white", fontSize: 18, fontWeight: "600" }}
+                >
+                  {t("casting_player.chromecast")}
+                </Text>
+              </View>
+              <Pressable onPress={onClose} style={{ padding: 8 }}>
+                <Ionicons name='close' size={24} color='white' />
+              </Pressable>
+            </View>
+
+            {/* Device info */}
+            <View style={{ padding: 16 }}>
+              <View style={{ marginBottom: 20 }}>
+                <Text style={{ color: "#999", fontSize: 12, marginBottom: 4 }}>
+                  {t("casting_player.device_name")}
+                </Text>
+                <Text
+                  style={{ color: "white", fontSize: 16, fontWeight: "500" }}
+                >
+                  {device?.friendlyName || t("casting_player.unknown_device")}
+                </Text>
+              </View>
+              {/* Volume control */}
+              <View style={{ marginBottom: 24 }}>
+                <View
+                  style={{
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBottom: 12,
+                  }}
+                >
+                  <Text style={{ color: "#999", fontSize: 12 }}>
+                    {t("casting_player.volume")}
+                  </Text>
+                  <Text style={{ color: "white", fontSize: 14 }}>
+                    {isMuted ? t("casting_player.muted") : `${displayVolume}%`}
+                  </Text>
+                </View>
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 12,
+                  }}
+                >
+                  {/* Mute button */}
+                  <Pressable
+                    onPress={handleToggleMute}
+                    style={{
+                      padding: 8,
+                      borderRadius: 20,
+                      backgroundColor: isMuted ? "#a855f7" : "transparent",
+                    }}
+                  >
+                    <Ionicons
+                      name={isMuted ? "volume-mute" : "volume-low"}
+                      size={20}
+                      color={isMuted ? "white" : "#999"}
+                    />
+                  </Pressable>
+                  <View style={{ flex: 1 }}>
+                    <Slider
+                      style={{ width: "100%", height: 40 }}
+                      progress={volumeValue}
+                      minimumValue={minimumValue}
+                      maximumValue={maximumValue}
+                      theme={{
+                        disableMinTrackTintColor: "#333",
+                        maximumTrackTintColor: "#333",
+                        minimumTrackTintColor: isMuted ? "#666" : "#a855f7",
+                        bubbleBackgroundColor: "#a855f7",
+                      }}
+                      onSlidingStart={async () => {
+                        isSliding.current = true;
+                        // Auto-unmute when user starts adjusting volume
+                        if (isMuted && castSession) {
+                          setIsMuted(false);
+                          try {
+                            await castSession.setMute(false);
+                          } catch (error) {
+                            console.error("[Volume] Failed to unmute:", error);
+                            setIsMuted(true); // Rollback on failure
+                          }
+                        }
+                      }}
+                      onValueChange={(value) => {
+                        volumeValue.value = value;
+                        handleVolumeChange(value);
+                      }}
+                      onSlidingComplete={(value) => {
+                        isSliding.current = false;
+                        lastSetVolume.current = Math.round(value);
+                        handleVolumeComplete(value);
+                      }}
+                      panHitSlop={{ top: 20, bottom: 20, left: 0, right: 0 }}
+                    />
+                  </View>
+                  <Ionicons
+                    name='volume-high'
+                    size={20}
+                    color={isMuted ? "#666" : "#999"}
+                  />
+                </View>
+              </View>
+
+              {/* Disconnect button */}
+              <Pressable
+                onPress={handleDisconnect}
+                disabled={isDisconnecting}
+                style={{
+                  backgroundColor: "#a855f7",
+                  padding: 16,
+                  borderRadius: 8,
+                  flexDirection: "row",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  gap: 8,
+                  opacity: isDisconnecting ? 0.5 : 1,
+                }}
+              >
+                <Ionicons
+                  name='power'
+                  size={20}
+                  color='white'
+                  style={{ marginTop: 2 }}
+                />
+                <Text
+                  style={{ color: "white", fontSize: 16, fontWeight: "600" }}
+                >
+                  {isDisconnecting
+                    ? t("casting_player.disconnecting")
+                    : t("casting_player.stop_casting")}
+                </Text>
+              </Pressable>
+            </View>
+          </Pressable>
+        </Pressable>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+};

components/chromecast/ChromecastEpisodeList.tsx

@@ -0,0 +1,351 @@
+/**
+ * Episode List for Chromecast Player
+ * Displays list of episodes for TV shows with thumbnails
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import type { Api } from "@jellyfin/sdk";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { Image } from "expo-image";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FlatList, Modal, Pressable, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { truncateTitle } from "@/utils/casting/helpers";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+
+interface ChromecastEpisodeListProps {
+  visible: boolean;
+  onClose: () => void;
+  currentItem: BaseItemDto | null;
+  episodes: BaseItemDto[];
+  onSelectEpisode: (episode: BaseItemDto) => void;
+  api: Api | null;
+}
+
+export const ChromecastEpisodeList: React.FC<ChromecastEpisodeListProps> = ({
+  visible,
+  onClose,
+  currentItem,
+  episodes,
+  onSelectEpisode,
+  api,
+}) => {
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+  const flatListRef = useRef<FlatList>(null);
+  const [selectedSeason, setSelectedSeason] = useState<number | null>(null);
+  const scrollRetryCountRef = useRef(0);
+  const scrollRetryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const MAX_SCROLL_RETRIES = 3;
+
+  // Cleanup pending retry timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (scrollRetryTimeoutRef.current) {
+        clearTimeout(scrollRetryTimeoutRef.current);
+        scrollRetryTimeoutRef.current = null;
+      }
+      scrollRetryCountRef.current = 0;
+    };
+  }, []);
+
+  // Get unique seasons from episodes
+  const seasons = useMemo(() => {
+    const seasonSet = new Set<number>();
+    for (const ep of episodes) {
+      if (ep.ParentIndexNumber !== undefined && ep.ParentIndexNumber !== null) {
+        seasonSet.add(ep.ParentIndexNumber);
+      }
+    }
+    return Array.from(seasonSet).sort((a, b) => a - b);
+  }, [episodes]);
+
+  // Filter episodes by selected season and exclude virtual episodes
+  const filteredEpisodes = useMemo(() => {
+    let eps = episodes;
+
+    // Filter by season if selected
+    if (selectedSeason !== null) {
+      eps = eps.filter((ep) => ep.ParentIndexNumber === selectedSeason);
+    }
+
+    // Filter out virtual episodes (episodes without actual video files)
+    // LocationType === "Virtual" means the episode doesn't have a media file
+    eps = eps.filter((ep) => ep.LocationType !== "Virtual");
+
+    return eps;
+  }, [episodes, selectedSeason]);
+
+  // Set initial season to current episode's season
+  useEffect(() => {
+    if (currentItem?.ParentIndexNumber !== undefined) {
+      setSelectedSeason(currentItem.ParentIndexNumber);
+    }
+  }, [currentItem]);
+
+  useEffect(() => {
+    // Reset retry counter when visibility or data changes
+    scrollRetryCountRef.current = 0;
+    if (scrollRetryTimeoutRef.current) {
+      clearTimeout(scrollRetryTimeoutRef.current);
+    }
+
+    if (visible && currentItem && filteredEpisodes.length > 0) {
+      const currentIndex = filteredEpisodes.findIndex(
+        (ep) => ep.Id === currentItem.Id,
+      );
+      if (currentIndex !== -1 && flatListRef.current) {
+        // Delay to ensure FlatList is rendered
+        const timeoutId = setTimeout(() => {
+          flatListRef.current?.scrollToIndex({
+            index: currentIndex,
+            animated: true,
+            viewPosition: 0.5, // Center the item
+          });
+        }, 300);
+        return () => {
+          clearTimeout(timeoutId);
+          if (scrollRetryTimeoutRef.current) {
+            clearTimeout(scrollRetryTimeoutRef.current);
+          }
+        };
+      }
+    }
+  }, [visible, currentItem, filteredEpisodes]);
+
+  const renderEpisode = ({ item }: { item: BaseItemDto }) => {
+    const isCurrentEpisode = item.Id === currentItem?.Id;
+
+    return (
+      <Pressable
+        onPress={() => {
+          onSelectEpisode(item);
+          onClose();
+        }}
+        style={{
+          flexDirection: "row",
+          padding: 12,
+          backgroundColor: isCurrentEpisode ? "#a855f7" : "transparent",
+          borderRadius: 8,
+          marginBottom: 8,
+        }}
+      >
+        {/* Thumbnail */}
+        <View
+          style={{
+            width: 120,
+            height: 68,
+            borderRadius: 4,
+            overflow: "hidden",
+            backgroundColor: "#1a1a1a",
+          }}
+        >
+          {(() => {
+            const imageUrl =
+              api && item.Id ? getPrimaryImageUrl({ api, item }) : null;
+            if (imageUrl) {
+              return (
+                <Image
+                  source={{ uri: imageUrl }}
+                  style={{ width: "100%", height: "100%" }}
+                  contentFit='cover'
+                />
+              );
+            }
+            return (
+              <View
+                style={{
+                  flex: 1,
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <Ionicons name='film-outline' size={32} color='#333' />
+              </View>
+            );
+          })()}
+        </View>
+
+        {/* Episode info */}
+        <View style={{ flex: 1, marginLeft: 12, justifyContent: "center" }}>
+          <Text
+            style={{
+              color: "white",
+              fontSize: 14,
+              fontWeight: "600",
+              marginBottom: 4,
+            }}
+            numberOfLines={1}
+          >
+            {item.IndexNumber != null ? `${item.IndexNumber}. ` : ""}
+            {truncateTitle(item.Name || t("casting_player.unknown"), 30)}
+          </Text>
+          {item.Overview && (
+            <Text
+              style={{
+                color: "#999",
+                fontSize: 12,
+                marginBottom: 4,
+              }}
+              numberOfLines={2}
+            >
+              {item.Overview}
+            </Text>
+          )}
+          <View style={{ flexDirection: "row", gap: 8, alignItems: "center" }}>
+            {item.ParentIndexNumber !== undefined &&
+              item.IndexNumber !== undefined && (
+                <Text
+                  style={{ color: "#a855f7", fontSize: 11, fontWeight: "600" }}
+                >
+                  S{String(item.ParentIndexNumber).padStart(2, "0")}:E
+                  {String(item.IndexNumber).padStart(2, "0")}
+                </Text>
+              )}
+            {item.ProductionYear && (
+              <Text style={{ color: "#666", fontSize: 11 }}>
+                {item.ProductionYear}
+              </Text>
+            )}
+            {item.RunTimeTicks && (
+              <Text style={{ color: "#666", fontSize: 11 }}>
+                {Math.round(item.RunTimeTicks / 600000000)}{" "}
+                {t("casting_player.minutes_short")}
+              </Text>
+            )}
+          </View>
+        </View>
+
+        {isCurrentEpisode && (
+          <View
+            style={{
+              justifyContent: "center",
+              marginLeft: 8,
+            }}
+          >
+            <Ionicons name='play-circle' size={24} color='white' />
+          </View>
+        )}
+      </Pressable>
+    );
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType='slide'
+      onRequestClose={onClose}
+    >
+      <Pressable
+        style={{
+          flex: 1,
+          backgroundColor: "rgba(0, 0, 0, 0.85)",
+        }}
+        onPress={onClose}
+      >
+        <Pressable
+          style={{
+            flex: 1,
+            paddingTop: insets.top,
+          }}
+          onPress={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <View
+            style={{
+              paddingHorizontal: 16,
+              paddingVertical: 12,
+              borderBottomWidth: 1,
+              borderBottomColor: "#333",
+            }}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: seasons.length > 1 ? 12 : 0,
+              }}
+            >
+              <Text style={{ color: "white", fontSize: 18, fontWeight: "600" }}>
+                {t("casting_player.episodes")}
+              </Text>
+              <Pressable onPress={onClose} style={{ padding: 8 }}>
+                <Ionicons name='close' size={24} color='white' />
+              </Pressable>
+            </View>
+
+            {/* Season selector */}
+            {seasons.length > 1 && (
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={{ gap: 8 }}
+              >
+                {seasons.map((season) => (
+                  <Pressable
+                    key={season}
+                    onPress={() => setSelectedSeason(season)}
+                    style={{
+                      paddingHorizontal: 16,
+                      paddingVertical: 8,
+                      borderRadius: 20,
+                      backgroundColor:
+                        selectedSeason === season ? "#a855f7" : "#1a1a1a",
+                    }}
+                  >
+                    <Text
+                      style={{
+                        color: "white",
+                        fontSize: 14,
+                        fontWeight: selectedSeason === season ? "600" : "400",
+                      }}
+                    >
+                      {t("casting_player.season", { number: season })}
+                    </Text>
+                  </Pressable>
+                ))}
+              </ScrollView>
+            )}
+          </View>
+
+          {/* Episode list */}
+          <FlatList
+            ref={flatListRef}
+            data={filteredEpisodes}
+            renderItem={renderEpisode}
+            keyExtractor={(item, index) => item.Id || `episode-${index}`}
+            contentContainerStyle={{
+              padding: 16,
+              paddingBottom: insets.bottom + 16,
+            }}
+            showsVerticalScrollIndicator={false}
+            onScrollToIndexFailed={(info) => {
+              // Bounded retry for scroll failures
+              if (
+                scrollRetryCountRef.current >= MAX_SCROLL_RETRIES ||
+                info.index >= filteredEpisodes.length
+              ) {
+                return;
+              }
+              scrollRetryCountRef.current += 1;
+              if (scrollRetryTimeoutRef.current) {
+                clearTimeout(scrollRetryTimeoutRef.current);
+              }
+              scrollRetryTimeoutRef.current = setTimeout(() => {
+                flatListRef.current?.scrollToIndex({
+                  index: info.index,
+                  animated: true,
+                  viewPosition: 0.5,
+                });
+              }, 500);
+            }}
+          />
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};

components/chromecast/ChromecastSettingsMenu.tsx

@@ -0,0 +1,347 @@
+/**
+ * Chromecast Settings Menu
+ * Allows users to configure audio, subtitles, quality, and playback speed
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Modal, Pressable, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import type {
+  AudioTrack,
+  MediaSource,
+  SubtitleTrack,
+} from "@/utils/casting/types";
+
+interface ChromecastSettingsMenuProps {
+  visible: boolean;
+  onClose: () => void;
+  item: BaseItemDto;
+  mediaSources: MediaSource[];
+  selectedMediaSource: MediaSource | null;
+  onMediaSourceChange: (source: MediaSource) => void;
+  audioTracks: AudioTrack[];
+  selectedAudioTrack: AudioTrack | null;
+  onAudioTrackChange: (track: AudioTrack) => void;
+  subtitleTracks: SubtitleTrack[];
+  selectedSubtitleTrack: SubtitleTrack | null;
+  onSubtitleTrackChange: (track: SubtitleTrack | null) => void;
+  playbackSpeed: number;
+  onPlaybackSpeedChange: (speed: number) => void;
+}
+
+const PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+
+export const ChromecastSettingsMenu: React.FC<ChromecastSettingsMenuProps> = ({
+  visible,
+  onClose,
+  item: _item, // Reserved for future use (technical info display)
+  mediaSources,
+  selectedMediaSource,
+  onMediaSourceChange,
+  audioTracks,
+  selectedAudioTrack,
+  onAudioTrackChange,
+  subtitleTracks,
+  selectedSubtitleTrack,
+  onSubtitleTrackChange,
+  playbackSpeed,
+  onPlaybackSpeedChange,
+}) => {
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+  const [expandedSection, setExpandedSection] = useState<string | null>(null);
+
+  const toggleSection = (section: string) => {
+    setExpandedSection(expandedSection === section ? null : section);
+  };
+
+  const renderSectionHeader = (
+    title: string,
+    icon: keyof typeof Ionicons.glyphMap,
+    sectionKey: string,
+  ) => (
+    <Pressable
+      onPress={() => toggleSection(sectionKey)}
+      style={{
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: "#333",
+      }}
+    >
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+        <Ionicons name={icon} size={20} color='white' />
+        <Text style={{ color: "white", fontSize: 16, fontWeight: "500" }}>
+          {title}
+        </Text>
+      </View>
+      <Ionicons
+        name={expandedSection === sectionKey ? "chevron-up" : "chevron-down"}
+        size={20}
+        color='#999'
+      />
+    </Pressable>
+  );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType='slide'
+      onRequestClose={onClose}
+    >
+      <Pressable
+        style={{
+          flex: 1,
+          backgroundColor: "rgba(0, 0, 0, 0.85)",
+          justifyContent: "flex-end",
+        }}
+        onPress={onClose}
+      >
+        <Pressable
+          style={{
+            backgroundColor: "#1a1a1a",
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            maxHeight: "80%",
+            paddingBottom: insets.bottom,
+          }}
+          onPress={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: 16,
+              borderBottomWidth: 1,
+              borderBottomColor: "#333",
+            }}
+          >
+            <Text style={{ color: "white", fontSize: 18, fontWeight: "600" }}>
+              {t("casting_player.playback_settings")}
+            </Text>
+            <Pressable onPress={onClose} style={{ padding: 8 }}>
+              <Ionicons name='close' size={24} color='white' />
+            </Pressable>
+          </View>
+
+          <ScrollView>
+            {/* Quality/Media Source - only show when sources available */}
+            {mediaSources.length > 0 &&
+              renderSectionHeader(
+                t("casting_player.quality"),
+                "film-outline",
+                "quality",
+              )}
+            {mediaSources.length > 0 && expandedSection === "quality" && (
+              <View style={{ paddingVertical: 8 }}>
+                {mediaSources.map((source) => (
+                  <Pressable
+                    key={source.id}
+                    onPress={() => {
+                      onMediaSourceChange(source);
+                      setExpandedSection(null);
+                    }}
+                    style={{
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      padding: 16,
+                      backgroundColor:
+                        selectedMediaSource?.id === source.id
+                          ? "#2a2a2a"
+                          : "transparent",
+                    }}
+                  >
+                    <View>
+                      <Text style={{ color: "white", fontSize: 15 }}>
+                        {source.name}
+                      </Text>
+                      {source.bitrate && (
+                        <Text
+                          style={{ color: "#999", fontSize: 13, marginTop: 2 }}
+                        >
+                          {Math.round(source.bitrate / 1000000)} Mbps
+                        </Text>
+                      )}
+                    </View>
+                    {selectedMediaSource?.id === source.id && (
+                      <Ionicons name='checkmark' size={20} color='#a855f7' />
+                    )}
+                  </Pressable>
+                ))}
+              </View>
+            )}
+
+            {/* Audio Tracks - only show if more than one track */}
+            {audioTracks.length > 1 &&
+              renderSectionHeader(
+                t("casting_player.audio"),
+                "musical-notes",
+                "audio",
+              )}
+            {audioTracks.length > 1 && expandedSection === "audio" && (
+              <View style={{ paddingVertical: 8 }}>
+                {audioTracks.map((track) => (
+                  <Pressable
+                    key={track.index}
+                    onPress={() => {
+                      onAudioTrackChange(track);
+                      setExpandedSection(null);
+                    }}
+                    style={{
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      padding: 16,
+                      backgroundColor:
+                        selectedAudioTrack?.index === track.index
+                          ? "#2a2a2a"
+                          : "transparent",
+                    }}
+                  >
+                    <View>
+                      <Text style={{ color: "white", fontSize: 15 }}>
+                        {track.displayTitle ||
+                          track.language ||
+                          t("casting_player.unknown")}
+                      </Text>
+                      {track.codec && (
+                        <Text
+                          style={{ color: "#999", fontSize: 13, marginTop: 2 }}
+                        >
+                          {track.codec.toUpperCase()}
+                        </Text>
+                      )}
+                    </View>
+                    {selectedAudioTrack?.index === track.index && (
+                      <Ionicons name='checkmark' size={20} color='#a855f7' />
+                    )}
+                  </Pressable>
+                ))}
+              </View>
+            )}
+
+            {/* Subtitle Tracks - only show if subtitles available */}
+            {subtitleTracks.length > 0 &&
+              renderSectionHeader(
+                t("casting_player.subtitles"),
+                "text",
+                "subtitles",
+              )}
+            {subtitleTracks.length > 0 && expandedSection === "subtitles" && (
+              <View style={{ paddingVertical: 8 }}>
+                <Pressable
+                  onPress={() => {
+                    onSubtitleTrackChange(null);
+                    setExpandedSection(null);
+                  }}
+                  style={{
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    padding: 16,
+                    backgroundColor:
+                      selectedSubtitleTrack === null
+                        ? "#2a2a2a"
+                        : "transparent",
+                  }}
+                >
+                  <Text style={{ color: "white", fontSize: 15 }}>
+                    {t("casting_player.none")}
+                  </Text>
+                  {selectedSubtitleTrack === null && (
+                    <Ionicons name='checkmark' size={20} color='#a855f7' />
+                  )}
+                </Pressable>
+                {subtitleTracks.map((track) => (
+                  <Pressable
+                    key={track.index}
+                    onPress={() => {
+                      onSubtitleTrackChange(track);
+                      setExpandedSection(null);
+                    }}
+                    style={{
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      padding: 16,
+                      backgroundColor:
+                        selectedSubtitleTrack?.index === track.index
+                          ? "#2a2a2a"
+                          : "transparent",
+                    }}
+                  >
+                    <View>
+                      <Text style={{ color: "white", fontSize: 15 }}>
+                        {track.displayTitle ||
+                          track.language ||
+                          t("casting_player.unknown")}
+                      </Text>
+                      {(track.codec || track.isForced) && (
+                        <Text
+                          style={{ color: "#999", fontSize: 13, marginTop: 2 }}
+                        >
+                          {track.codec ? track.codec.toUpperCase() : ""}
+                          {track.isForced && ` • ${t("casting_player.forced")}`}
+                        </Text>
+                      )}
+                    </View>
+                    {selectedSubtitleTrack?.index === track.index && (
+                      <Ionicons name='checkmark' size={20} color='#a855f7' />
+                    )}
+                  </Pressable>
+                ))}
+              </View>
+            )}
+
+            {/* Playback Speed */}
+            {renderSectionHeader(
+              t("casting_player.playback_speed"),
+              "speedometer",
+              "speed",
+            )}
+            {expandedSection === "speed" && (
+              <View style={{ paddingVertical: 8 }}>
+                {PLAYBACK_SPEEDS.map((speed) => (
+                  <Pressable
+                    key={speed}
+                    onPress={() => {
+                      onPlaybackSpeedChange(speed);
+                      setExpandedSection(null);
+                    }}
+                    style={{
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      padding: 16,
+                      backgroundColor:
+                        Math.abs(playbackSpeed - speed) < 0.01
+                          ? "#2a2a2a"
+                          : "transparent",
+                    }}
+                  >
+                    <Text style={{ color: "white", fontSize: 15 }}>
+                      {speed === 1 ? t("casting_player.normal") : `${speed}x`}
+                    </Text>
+                    {Math.abs(playbackSpeed - speed) < 0.01 && (
+                      <Ionicons name='checkmark' size={20} color='#a855f7' />
+                    )}
+                  </Pressable>
+                ))}
+              </View>
+            )}
+          </ScrollView>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};

components/chromecast/hooks/useChromecastSegments.ts

@@ -0,0 +1,171 @@
+/**
+ * Hook for managing Chromecast segments (intro, credits, recap, commercial, preview)
+ * Integrates with autoskip API for segment detection
+ */
+
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useAtomValue } from "jotai";
+import { useCallback, useMemo } from "react";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { isWithinSegment } from "@/utils/casting/helpers";
+import type { ChromecastSegmentData } from "@/utils/chromecast/options";
+import { useSegments } from "@/utils/segments";
+
+export const useChromecastSegments = (
+  item: BaseItemDto | null,
+  currentProgressMs: number,
+  isOffline = false,
+) => {
+  const api = useAtomValue(apiAtom);
+  const { settings } = useSettings();
+
+  // Fetch segments from autoskip API
+  const { data: segmentData } = useSegments(
+    item?.Id || "",
+    isOffline,
+    undefined, // downloadedFiles parameter
+    api,
+  );
+
+  // Parse segments into usable format
+  const segments = useMemo<ChromecastSegmentData>(() => {
+    if (!segmentData) {
+      return {
+        intro: null,
+        credits: null,
+        recap: null,
+        commercial: [],
+        preview: [],
+      };
+    }
+
+    const intro =
+      segmentData.introSegments && segmentData.introSegments.length > 0
+        ? {
+            start: segmentData.introSegments[0].startTime,
+            end: segmentData.introSegments[0].endTime,
+          }
+        : null;
+
+    const credits =
+      segmentData.creditSegments && segmentData.creditSegments.length > 0
+        ? {
+            start: segmentData.creditSegments[0].startTime,
+            end: segmentData.creditSegments[0].endTime,
+          }
+        : null;
+
+    const recap =
+      segmentData.recapSegments && segmentData.recapSegments.length > 0
+        ? {
+            start: segmentData.recapSegments[0].startTime,
+            end: segmentData.recapSegments[0].endTime,
+          }
+        : null;
+
+    const commercial = (segmentData.commercialSegments || []).map((seg) => ({
+      start: seg.startTime,
+      end: seg.endTime,
+    }));
+
+    const preview = (segmentData.previewSegments || []).map((seg) => ({
+      start: seg.startTime,
+      end: seg.endTime,
+    }));
+
+    return { intro, credits, recap, commercial, preview };
+  }, [segmentData]);
+
+  // Check which segment we're currently in
+  // currentProgressMs is in milliseconds; isWithinSegment() converts ms→seconds internally
+  // before comparing with segment times (which are in seconds from the autoskip API)
+  const currentSegment = useMemo(() => {
+    if (isWithinSegment(currentProgressMs, segments.intro)) {
+      return { type: "intro" as const, segment: segments.intro };
+    }
+    if (isWithinSegment(currentProgressMs, segments.credits)) {
+      return { type: "credits" as const, segment: segments.credits };
+    }
+    if (isWithinSegment(currentProgressMs, segments.recap)) {
+      return { type: "recap" as const, segment: segments.recap };
+    }
+    for (const commercial of segments.commercial) {
+      if (isWithinSegment(currentProgressMs, commercial)) {
+        return { type: "commercial" as const, segment: commercial };
+      }
+    }
+    for (const preview of segments.preview) {
+      if (isWithinSegment(currentProgressMs, preview)) {
+        return { type: "preview" as const, segment: preview };
+      }
+    }
+    return null;
+  }, [currentProgressMs, segments]);
+
+  // Skip functions
+  const skipIntro = useCallback(
+    async (seekFn: (positionMs: number) => Promise<void>): Promise<void> => {
+      if (segments.intro) {
+        await seekFn(segments.intro.end * 1000);
+      }
+    },
+    [segments.intro],
+  );
+
+  const skipCredits = useCallback(
+    async (seekFn: (positionMs: number) => Promise<void>): Promise<void> => {
+      if (segments.credits) {
+        await seekFn(segments.credits.end * 1000);
+      }
+    },
+    [segments.credits],
+  );
+
+  const skipSegment = useCallback(
+    async (seekFn: (positionMs: number) => Promise<void>): Promise<void> => {
+      if (currentSegment?.segment) {
+        await seekFn(currentSegment.segment.end * 1000);
+      }
+    },
+    [currentSegment],
+  );
+
+  // Auto-skip logic based on settings
+  const shouldAutoSkip = useMemo(() => {
+    if (!currentSegment) return false;
+
+    switch (currentSegment.type) {
+      case "intro":
+        return settings?.skipIntro === "auto";
+      case "credits":
+        return settings?.skipOutro === "auto";
+      case "recap":
+        return settings?.skipRecap === "auto";
+      case "commercial":
+        return settings?.skipCommercial === "auto";
+      case "preview":
+        return settings?.skipPreview === "auto";
+      default:
+        return false;
+    }
+  }, [
+    currentSegment,
+    settings?.skipIntro,
+    settings?.skipOutro,
+    settings?.skipRecap,
+    settings?.skipCommercial,
+    settings?.skipPreview,
+  ]);
+
+  return {
+    segments,
+    currentSegment,
+    skipIntro,
+    skipCredits,
+    skipSegment,
+    shouldAutoSkip,
+    hasIntro: !!segments.intro,
+    hasCredits: !!segments.credits,
+  };
+};

components/common/HeaderBackButton.tsx

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

components/common/JellyseerrItemRouter.tsx

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

components/common/TouchableItemRouter.tsx

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

components/downloads/DownloadCard.tsx

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

components/downloads/EpisodeCard.tsx

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

components/downloads/MovieCard.tsx

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

components/downloads/SeriesCard.tsx

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

components/home/Favorites.tsx

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

components/home/Home.tsx

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

components/home/HomeWithCarousel.tsx

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

components/home/LargeMovieCarousel.tsx

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

components/home/ScrollingCollectionList.tsx

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

components/home/StreamystatsPromotedWatchlists.tsx

@@ -4,8 +4,10 @@ import type {
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi, getSystemApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { ScrollView, View, type ViewProps } from "react-native";
 import { SectionHeader } from "@/components/common/SectionHeader";
 import { Text } from "@/components/common/Text";
@@ -33,6 +35,8 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({
   const api = useAtomValue(apiAtom);
   const user = useAtomValue(userAtom);
   const { settings } = useSettings();
+  const router = useRouter();
+  const { t } = useTranslation();
 
   const { data: items, isLoading } = useQuery({
     queryKey: [
@@ -84,11 +88,23 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({
     return items?.map((_, index) => index * ITEM_WIDTH) ?? [];
   }, [items]);
 
+  const handleSeeAll = () => {
+    router.push({
+      pathname: "/(auth)/(tabs)/(watchlists)/[watchlistId]",
+      params: { watchlistId: watchlist.id.toString() },
+    } as any);
+  };
+
   if (!isLoading && (!items || items.length === 0)) return null;
 
   return (
     <View {...props}>
-      <SectionHeader title={watchlist.name} />
+      <SectionHeader
+        title={watchlist.name}
+        actionLabel={t("common.seeAll", { defaultValue: "See all" })}
+        actionDisabled={isLoading}
+        onPressAction={handleSeeAll}
+      />
       {isLoading ? (
         <View className='flex flex-row gap-2 px-4'>
           {[1, 2, 3].map((i) => (

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(() => {
@@ -50,7 +47,7 @@ export const ItemPeopleSections: React.FC<Props> = ({
 
       return (
         <MoreMoviesWithActor
-          key={person.Id}
+          key={`${person.Id}-${idx}`}
           currentItem={item}
           actorId={person.Id}
           actorName={person.Name}

components/jellyseerr/PersonPoster.tsx

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

components/jellyseerr/discover/CompanySlide.tsx

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

components/jellyseerr/discover/GenreSlide.tsx

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

components/library/LibraryItemCard.tsx

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

components/music/MiniPlayerBar.tsx

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

components/music/MusicAlbumCard.tsx

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

components/music/MusicAlbumRowCard.tsx

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

components/music/MusicArtistCard.tsx

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

components/music/MusicPlaylistCard.tsx

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

components/music/PlaylistOptionsSheet.tsx

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

components/music/TrackOptionsSheet.tsx

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

components/series/CastAndCrew.tsx

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

components/series/CurrentSeries.tsx

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

components/series/EpisodeTitleHeader.tsx

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

components/series/NextItemButton.tsx

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

components/series/SeasonDropdown.tsx

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

components/series/SeasonEpisodesCarousel.tsx

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

components/series/SeasonPicker.tsx

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

components/settings/AppearanceSettings.tsx

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

components/settings/Dashboard.tsx

@@ -1,6 +1,6 @@
-import { useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
+import useRouter from "@/hooks/useAppRouter";
 import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";

components/settings/LocalNetworkSettings.tsx

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

components/settings/OtherSettings.tsx

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

components/settings/PlaybackControlsSettings.tsx

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

components/settings/PluginSettings.tsx

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

components/video-player/controls/BottomControls.tsx

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

components/video-player/controls/ContinueWatchingOverlay.tsx

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

components/video-player/controls/Controls.tsx

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

components/video-player/controls/EpisodeList.tsx

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

components/video-player/controls/HeaderControls.tsx

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

components/video-player/controls/TechnicalInfoOverlay.tsx

@@ -0,0 +1,277 @@
+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(
+  ({ visible, getTechnicalInfo, playMethod, transcodeReasons }) => {
+    const { settings } = useSettings();
+    const insets = useSafeAreaInsets();
+    const [info, setInfo] = useState<TechnicalInfo | null>(null);
+
+    const opacity = useSharedValue(0);
+
+    // Animate visibility based on visible prop only (stays visible regardless of controls)
+    useEffect(() => {
+      opacity.value = withTiming(visible ? 1 : 0, {
+        duration: 300,
+        easing: Easing.out(Easing.quad),
+      });
+    }, [visible, opacity]);
+
+    // Fetch technical info periodically when visible
+    const fetchInfo = useCallback(async () => {
+      try {
+        const data = await getTechnicalInfo();
+        setInfo(data);
+      } catch (_error) {
+        // Silently fail - the info is optional
+      }
+    }, [getTechnicalInfo]);
+
+    useEffect(() => {
+      if (!visible) {
+        return;
+      }
+
+      // Fetch immediately
+      fetchInfo();
+
+      // Then fetch every 2 seconds
+      const interval = setInterval(fetchInfo, 2000);
+      return () => clearInterval(interval);
+    }, [visible, fetchInfo]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      opacity: opacity.value,
+    }));
+
+    // Hide on TV platforms
+    if (Platform.isTV) return null;
+
+    // Don't render if not visible
+    if (!visible) return null;
+
+    return (
+      <Animated.View
+        style={[
+          styles.container,
+          animatedStyle,
+          {
+            top:
+              (settings?.safeAreaInControlsEnabled ?? true)
+                ? insets.top + HEADER_LAYOUT.CONTAINER_PADDING + 4
+                : HEADER_LAYOUT.CONTAINER_PADDING + 4,
+            left:
+              (settings?.safeAreaInControlsEnabled ?? true)
+                ? insets.left + HEADER_LAYOUT.CONTAINER_PADDING + 20
+                : HEADER_LAYOUT.CONTAINER_PADDING + 20,
+          },
+        ]}
+        pointerEvents='none'
+      >
+        <View style={styles.infoBox}>
+          {playMethod && (
+            <Text
+              style={[
+                styles.infoText,
+                { color: getPlayMethodColor(playMethod) },
+              ]}
+            >
+              {getPlayMethodLabel(playMethod)}
+            </Text>
+          )}
+          {transcodeReasons && transcodeReasons.length > 0 && (
+            <Text style={[styles.infoText, styles.reasonText]}>
+              {transcodeReasons.map(formatTranscodeReason).join(", ")}
+            </Text>
+          )}
+          {info?.videoWidth && info?.videoHeight && (
+            <Text style={styles.infoText}>
+              {info.videoWidth}x{info.videoHeight}
+            </Text>
+          )}
+          {info?.videoCodec && (
+            <Text style={styles.infoText}>
+              Video: {formatCodec(info.videoCodec)}
+              {info.fps ? ` @ ${formatFps(info.fps)} fps` : ""}
+            </Text>
+          )}
+          {info?.audioCodec && (
+            <Text style={styles.infoText}>
+              Audio: {formatCodec(info.audioCodec)}
+            </Text>
+          )}
+          {(info?.videoBitrate || info?.audioBitrate) && (
+            <Text style={styles.infoText}>
+              Bitrate:{" "}
+              {info.videoBitrate
+                ? formatBitrate(info.videoBitrate)
+                : info.audioBitrate
+                  ? formatBitrate(info.audioBitrate)
+                  : "N/A"}
+            </Text>
+          )}
+          {info?.cacheSeconds !== undefined && (
+            <Text style={styles.infoText}>
+              Buffer: {info.cacheSeconds.toFixed(1)}s
+            </Text>
+          )}
+          {info?.droppedFrames !== undefined && info.droppedFrames > 0 && (
+            <Text style={[styles.infoText, styles.warningText]}>
+              Dropped: {info.droppedFrames} frames
+            </Text>
+          )}
+          {!info && !playMethod && (
+            <Text style={styles.infoText}>Loading...</Text>
+          )}
+        </View>
+      </Animated.View>
+    );
+  },
+);
+
+TechnicalInfoOverlay.displayName = "TechnicalInfoOverlay";
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    zIndex: 15,
+  },
+  infoBox: {
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minWidth: 150,
+  },
+  infoText: {
+    color: "white",
+    fontSize: 12,
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    lineHeight: 18,
+  },
+  warningText: {
+    color: "#ff9800",
+  },
+  reasonText: {
+    color: "#fbbf24",
+    fontSize: 10,
+  },
+});

components/video-player/controls/constants.ts

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

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

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

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

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

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

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