fix(android): building and video playing with correct aspect ratio

.claude/commands/reflect.md

@@ -1,37 +0,0 @@
----
-description: Reflect on this session to extract and store learned facts about the codebase
----
-
-Analyze the current conversation to extract useful facts that should be remembered for future sessions. Focus on:
-
-1. **Corrections**: Things the user corrected you about
-2. **Clarifications**: Misunderstandings about how the codebase works
-3. **Patterns**: Important conventions or patterns you learned
-4. **Gotchas**: Surprising behaviors or edge cases discovered
-5. **Locations**: Files or code that was hard to find
-
-## Instructions
-
-1. Read the existing facts file at `.claude/learned-facts.md`
-2. Review this conversation for learnings worth preserving
-3. For each new fact:
-   - Write it concisely (1-2 sentences max)
-   - Include context for why it matters
-   - Add today's date
-4. Skip facts that duplicate existing entries
-5. Append new facts to `.claude/learned-facts.md`
-
-## Fact Format
-
-Use this format for each fact:
-```
-- **[Brief Topic]**: [Concise description of the fact] _(YYYY-MM-DD)_
-```
-
-## Example Facts
-
-- **State management**: Use Jotai atoms for global state, NOT React Context - atoms are in `utils/atoms/` _(2025-01-09)_
-- **Package manager**: Always use `bun`, never npm or yarn - the project is configured for bun only _(2025-01-09)_
-- **TV platform**: Check `Platform.isTV` for TV-specific code paths, not just OS checks _(2025-01-09)_
-
-After updating the file, summarize what facts you added (or note if nothing new was learned this session).

.claude/learned-facts.md

@@ -1,43 +0,0 @@
-# Learned Facts
-
-This file contains facts about the codebase learned from past sessions. These are things Claude got wrong or needed clarification on, stored here to prevent the same mistakes in future sessions.
-
-This file is auto-imported into CLAUDE.md and loaded at the start of each session.
-
-## Facts
-
-<!-- New facts will be appended below this line -->
-
-- **Native bottom tabs + useRouter conflict**: When using `@bottom-tabs/react-navigation` with Expo Router, avoid using the `useRouter()` hook in components rendered at the provider level (outside the tab navigator). The hook subscribes to navigation state changes and can cause unexpected tab switches. Use the static `router` import from `expo-router` instead. _(2025-01-09)_
-
-- **IntroSheet rendering location**: The `IntroSheet` component is rendered inside `IntroSheetProvider` which wraps the entire navigation stack. Any hooks in IntroSheet that interact with navigation state can affect the native bottom tabs. _(2025-01-09)_
-
-- **Intro modal trigger location**: The intro modal trigger logic should be in the `Home.tsx` component, not in the tabs `_layout.tsx`. Triggering modals from tab layout can interfere with native bottom tabs navigation. _(2025-01-09)_
-
-- **Tab folder naming**: The tab folders use underscore prefix naming like `(_home)` instead of just `(home)` based on the project's file structure conventions. _(2025-01-09)_
-
-- **macOS header buttons fix**: Header buttons (`headerRight`/`headerLeft`) don't respond to touches on macOS Catalyst builds when using standard React Native `TouchableOpacity`. Fix by using `Pressable` from `react-native-gesture-handler` instead. The library is already installed and `GestureHandlerRootView` wraps the app. _(2026-01-10)_
-
-- **Header button locations**: Header buttons are defined in multiple places: `app/(auth)/(tabs)/(home)/_layout.tsx` (SettingsButton, SessionsButton, back buttons), `components/common/HeaderBackButton.tsx` (reusable), `components/Chromecast.tsx`, `components/RoundButton.tsx`, and dynamically via `navigation.setOptions()` in `components/home/Home.tsx` and `app/(auth)/(tabs)/(home)/downloads/index.tsx`. _(2026-01-10)_
-
-- **useNetworkAwareQueryClient limitations**: The `useNetworkAwareQueryClient` hook uses `Object.create(queryClient)` which breaks QueryClient methods that use JavaScript private fields (like `getQueriesData`, `setQueriesData`, `setQueryData`). Only use it when you ONLY need `invalidateQueries`. For cache manipulation, use standard `useQueryClient` from `@tanstack/react-query`. _(2026-01-10)_
-
-- **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)_
-
-- **MPV tvOS player exit freeze**: On tvOS, `mpv_terminate_destroy` can deadlock if called while blocking the main thread (e.g., via `queue.sync`). The fix is to run `mpv_terminate_destroy` on `DispatchQueue.global()` asynchronously, allowing it to access main thread for AVFoundation/GPU cleanup. Send `quit` command and drain events first. Located in `modules/mpv-player/ios/MPVLayerRenderer.swift`. _(2026-01-22)_
-
-- **MPV avfoundation-composite-osd ordering**: On tvOS, the `avfoundation-composite-osd` option MUST be set immediately after `vo=avfoundation`, before any `hwdec` options. Skipping or reordering this causes the app to freeze when exiting the player. Set to "no" on tvOS (prevents gray tint), "yes" on iOS (for PiP subtitle support). _(2026-01-22)_
-
-- **Thread-safe state for stop flags**: When using flags like `isStopping` that control loop termination across threads, the setter must be synchronous (`stateQueue.sync`) not async, otherwise the value may not be visible to other threads in time. _(2026-01-22)_
-
-- **TV modals must use navigation pattern**: On TV, never use overlay/absolute-positioned modals (like `TVOptionSelector` at the page level). They don't handle the back button correctly. Always use the navigation-based modal pattern: Jotai atom + hook that calls `router.push()` + page in `app/(auth)/`. Use the existing `useTVOptionModal` hook and `tv-option-modal.tsx` page for option selection. `TVOptionSelector` is only appropriate as a sub-selector *within* a navigation-based modal page. _(2026-01-24)_
-
-- **TV grid layout pattern**: For TV grids, use ScrollView with flexWrap instead of FlatList/FlashList with numColumns. FlatList's numColumns divides width evenly among columns which causes inconsistent item sizing. Use `flexDirection: "row"`, `flexWrap: "wrap"`, `justifyContent: "center"`, and `gap` for spacing. _(2026-01-25)_
-
-- **TV horizontal padding standard**: TV pages should use `TV_HORIZONTAL_PADDING = 60` to match other TV pages like Home, Search, etc. The old `TV_SCALE_PADDING = 20` was too small. _(2026-01-25)_
-
-- **Native SwiftUI view sizing**: When creating Expo native modules with SwiftUI views, the view needs explicit dimensions. Use a `width` prop passed from React Native, set an explicit `.frame(width:height:)` in SwiftUI, and override `intrinsicContentSize` in the ExpoView wrapper to report the correct size to React Native's layout system. Using `.aspectRatio(contentMode: .fit)` alone causes inconsistent sizing. _(2026-01-25)_
-
-- **Streamystats components location**: Streamystats TV components are at `components/home/StreamystatsRecommendations.tv.tsx` and `components/home/StreamystatsPromotedWatchlists.tv.tsx`. The watchlist detail page (which shows items in a grid) is at `app/(auth)/(tabs)/(watchlists)/[watchlistId].tsx`. _(2026-01-25)_

.github/crowdin.yml

@@ -0,0 +1,12 @@
+"project_id_env": "CROWDIN_PROJECT_ID"
+"api_token_env": "CROWDIN_PERSONAL_TOKEN"
+"base_path": "."
+
+"preserve_hierarchy": true
+
+"files": [
+  {
+    "source": "translations/en.json",
+    "translation": "translations/%two_letters_code%.json"
+  }
+]

.github/workflows/build-apps.yml

@@ -20,20 +20,8 @@ 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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -41,12 +29,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -60,7 +48,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: |
             ~/.gradle/caches
@@ -73,7 +61,7 @@ jobs:
         run: bun run prebuild
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -88,7 +76,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         with:
           name: streamyfin-android-phone-apk-${{ env.DATE_TAG }}
           path: |
@@ -103,20 +91,8 @@ 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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -124,12 +100,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -143,7 +119,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: |
             ~/.gradle/caches
@@ -156,7 +132,7 @@ jobs:
         run: bun run prebuild:tv
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -171,7 +147,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         with:
           name: streamyfin-android-tv-apk-${{ env.DATE_TAG }}
           path: |
@@ -187,7 +163,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -195,12 +171,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
@@ -218,7 +194,7 @@ jobs:
       - name: 🔧 Setup Xcode
         uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
         with:
-          xcode-version: "26.2"
+          xcode-version: "26.0.1"
 
       - name: 🏗️ Setup EAS
         uses: expo/expo-github-action@main
@@ -227,6 +203,9 @@ 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
@@ -236,69 +215,12 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload IPA artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         with:
           name: streamyfin-ios-phone-ipa-${{ env.DATE_TAG }}
           path: build-*.ipa
           retention-days: 7
 
-  build-ios-phone-unsigned:
-    if: (!contains(github.event.head_commit.message, '[skip ci]'))
-    runs-on: macos-26
-    name: 🍎 Build iOS IPA (Phone - Unsigned)
-    permissions:
-      contents: read
-
-    steps:
-      - name: 📥 Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-        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@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
-        with:
-          bun-version: latest
-
-      - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
-        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'))
@@ -349,6 +271,9 @@ 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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         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@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10
+        uses: github/codeql-action/init@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended,security-and-quality
 
       - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10
+        uses: github/codeql-action/autobuild@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10
+        uses: github/codeql-action/analyze@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3

.github/workflows/crowdin.yml

@@ -23,12 +23,12 @@ jobs:
 
     steps:
       - name: 📥 Checkout Repository
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           fetch-depth: 0
 
       - name: 🌐 Sync Translations with Crowdin
-        uses: crowdin/github-action@60debf382ee245b21794321190ad0501db89d8c1 # v2.13.0
+        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
         with:
           upload_sources: true
           upload_translations: true
@@ -40,12 +40,11 @@ jobs:
           pull_request_base_branch_name: "develop"
           pull_request_labels: "🌐 translation"
           # Quality control options
-          skip_untranslated_strings: false
-          skip_untranslated_files: false
+          skip_untranslated_strings: true
           export_only_approved: false
           # Commit customization
           commit_message: "feat(i18n): update translations from Crowdin"
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.CROWDIN_GITHUB_TOKEN }}
           CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
           CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         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@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           submodules: recursive
           fetch-depth: 0
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
         with:
           node-version: '24.x'
 
       - name: "🍞 Setup Bun"
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
           bun-version: latest
 

.github/workflows/notification.yml

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

.github/workflows/stale.yml

@@ -0,0 +1,49 @@
+name: 🕒 Handle Stale Issues
+
+on:
+  schedule:
+    # Runs daily at 1:30 AM UTC (3:30 AM CEST - France time)
+    - cron: "30 1 * * *"
+
+jobs:
+  stale-issues:
+    name: 🗑️ Cleanup Stale Issues
+    runs-on: ubuntu-24.04
+    permissions:
+      issues: write
+      pull-requests: write
+
+    steps:
+      - name: 🔄 Mark/Close Stale Issues
+        uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
+        with:
+          # Global settings
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          operations-per-run: 500  # Increase if you have >1000 issues
+          enable-statistics: true
+
+          # Issue configuration
+          days-before-issue-stale: 90
+          days-before-issue-close: 7
+          stale-issue-label: "🕰️ stale"
+          exempt-issue-labels: "Roadmap v1,help needed,enhancement"
+
+          # Notifications messages
+          stale-issue-message: |
+            ⏳ This issue has been automatically marked as **stale** because it has had no activity for 90 days.
+
+            **Next steps:**
+            - If this is still relevant, add a comment to keep it open
+            - Otherwise, it will be closed in 7 days
+
+            Thank you for your contributions! 🙌
+
+          close-issue-message: |
+            🚮 This issue has been automatically closed due to inactivity (7 days since being marked stale).
+
+            **Need to reopen?**
+            Click "Reopen" and add a comment explaining why this should stay open.
+
+          # Disable PR handling
+          days-before-pr-stale: -1
+          days-before-pr-close: -1

.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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.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@271a8d0340265f705b14b6d32b9829c1cb33d45e #v7.0.8
         with:
           add-paths: .github/ISSUE_TEMPLATE/bug_report.yml
           branch: ci-update-bug-report

.gitignore

@@ -19,7 +19,7 @@ web-build/
 /androidtv
 
 # Module-specific Builds
-modules/mpv-player/android/build
+modules/vlc-player/android/build
 modules/player/android
 modules/hls-downloader/android/build
 
@@ -50,6 +50,8 @@ npm-debug.*
 .idea/
 .ruby-lsp
 .cursor/
+.claude/
+CLAUDE.md
 
 # Environment and Configuration
 expo-env.d.ts
@@ -64,11 +66,7 @@ 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/settings.local.json

CLAUDE.md

@@ -1,7 +1,5 @@
 # CLAUDE.md
 
-@.claude/learned-facts.md
-
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
 ## Project Overview
@@ -77,21 +75,6 @@ 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
@@ -134,213 +117,3 @@ import { apiAtom } from "@/providers/JellyfinProvider";
 - TV version uses `:tv` suffix for scripts
 - Platform checks: `Platform.isTV`, `Platform.OS === "android"` or `"ios"`
 - Some features disabled on TV (e.g., notifications, Chromecast)
-- **TV Design**: Don't use purple accent colors on TV. Use white for focused states and `expo-blur` (`BlurView`) for backgrounds/overlays.
-- **TV Typography**: Use `TVTypography` from `@/components/tv/TVTypography` for all text on TV. It provides consistent font sizes optimized for TV viewing distance.
-- **TV Button Sizing**: Ensure buttons placed next to each other have the same size for visual consistency.
-- **TV Focus Scale Padding**: Add sufficient padding around focusable items in tables/rows/columns/lists. The focus scale animation (typically 1.05x) will clip against parent containers without proper padding. Use `overflow: "visible"` on containers and add padding to prevent clipping.
-- **TV Modals**: Never use overlay/absolute-positioned modals on TV as they don't handle the back button correctly. Instead, use the navigation-based modal pattern: create a Jotai atom for state, a hook that sets the atom and calls `router.push()`, and a page file in `app/(auth)/` that reads the atom and clears it on unmount. You must also add a `Stack.Screen` entry in `app/_layout.tsx` with `presentation: "transparentModal"` and `animation: "fade"` for the modal to render correctly as an overlay. See `useTVRequestModal` + `tv-request-modal.tsx` for reference.
-
-### TV Component Rendering Pattern
-
-**IMPORTANT**: The `.tv.tsx` file suffix only works for **pages** in the `app/` directory (resolved by Expo Router). It does NOT work for components - Metro bundler doesn't resolve platform-specific suffixes for component imports.
-
-**Pattern for TV-specific components**:
-```typescript
-// In page file (e.g., app/login.tsx)
-import { Platform } from "react-native";
-import { Login } from "@/components/login/Login";
-import { TVLogin } from "@/components/login/TVLogin";
-
-const LoginPage: React.FC = () => {
-  if (Platform.isTV) {
-    return <TVLogin />;
-  }
-  return <Login />;
-};
-
-export default LoginPage;
-```
-
-- Create separate component files for mobile and TV (e.g., `MyComponent.tsx` and `TVMyComponent.tsx`)
-- Use `Platform.isTV` to conditionally render the appropriate component
-- TV components typically use `TVInput`, `TVServerCard`, and other TV-prefixed components with focus handling
-
-### TV Option Selector Pattern (Dropdowns/Multi-select)
-
-For dropdown/select components on TV, use a **bottom sheet with horizontal scrolling**. This pattern is ideal for TV because:
-- Horizontal scrolling is natural for TV remotes (left/right D-pad)
-- Bottom sheet takes minimal screen space
-- Focus-based navigation works reliably
-
-**Key implementation details:**
-
-1. **Use absolute positioning instead of Modal** - React Native's `Modal` breaks the TV focus chain. Use an absolutely positioned `View` overlay instead:
-```typescript
-<View style={{
-  position: "absolute",
-  top: 0, left: 0, right: 0, bottom: 0,
-  backgroundColor: "rgba(0, 0, 0, 0.5)",
-  justifyContent: "flex-end",
-  zIndex: 1000,
-}}>
-  <BlurView intensity={80} tint="dark" style={{ borderTopLeftRadius: 24, borderTopRightRadius: 24 }}>
-    {/* Content */}
-  </BlurView>
-</View>
-```
-
-2. **Horizontal ScrollView with focusable cards**:
-```typescript
-<ScrollView
-  horizontal
-  showsHorizontalScrollIndicator={false}
-  style={{ overflow: "visible" }}
-  contentContainerStyle={{ paddingHorizontal: 48, paddingVertical: 10, gap: 12 }}
->
-  {options.map((option, index) => (
-    <TVOptionCard
-      key={index}
-      hasTVPreferredFocus={index === selectedIndex}
-      onPress={() => { onSelect(option.value); onClose(); }}
-      // ...
-    />
-  ))}
-</ScrollView>
-```
-
-3. **Focus handling on cards** - Use `Pressable` with `onFocus`/`onBlur` and `hasTVPreferredFocus`:
-```typescript
-<Pressable
-  onPress={onPress}
-  onFocus={() => { setFocused(true); animateTo(1.05); }}
-  onBlur={() => { setFocused(false); animateTo(1); }}
-  hasTVPreferredFocus={hasTVPreferredFocus}
->
-  <Animated.View style={{ transform: [{ scale }], backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.08)" }}>
-    <Text style={{ color: focused ? "#000" : "#fff" }}>{label}</Text>
-  </Animated.View>
-</Pressable>
-```
-
-4. **Add padding for scale animations** - When items scale on focus, add enough padding (`overflow: "visible"` + `paddingVertical`) so scaled items don't clip.
-
-**Reference implementation**: See `TVOptionSelector` and `TVOptionCard` in `components/ItemContent.tv.tsx`
-
-### TV Focus Management for Overlays/Modals
-
-**CRITICAL**: When displaying overlays (bottom sheets, modals, dialogs) on TV, you must explicitly disable focus on all background elements. Without this, the TV focus engine will rapidly switch between overlay and background elements, causing a focus loop that freezes navigation.
-
-**Solution**: Add a `disabled` prop to every focusable component and pass `disabled={isModalOpen}` when an overlay is visible:
-
-```typescript
-// 1. Track modal state
-const [openModal, setOpenModal] = useState<ModalType | null>(null);
-const isModalOpen = openModal !== null;
-
-// 2. Each focusable component accepts disabled prop
-const TVFocusableButton: React.FC<{
-  onPress: () => void;
-  disabled?: boolean;
-}> = ({ onPress, disabled }) => (
-  <Pressable
-    onPress={onPress}
-    disabled={disabled}
-    focusable={!disabled}
-    hasTVPreferredFocus={isFirst && !disabled}
-  >
-    {/* content */}
-  </Pressable>
-);
-
-// 3. Pass disabled to all background components when modal is open
-<TVFocusableButton onPress={handlePress} disabled={isModalOpen} />
-```
-
-**Reference implementation**: See `settings.tv.tsx` for complete example with `TVSettingsOptionButton`, `TVSettingsToggle`, `TVSettingsStepper`, etc.
-
-### TV Focus Flickering Between Zones (Lists with Headers)
-
-When you have a page with multiple focusable zones (e.g., a filter bar above a grid), the TV focus engine can rapidly flicker between elements when navigating between zones. This is a known issue with React Native TV.
-
-**Solutions:**
-
-1. **Use FlatList instead of FlashList for TV** - FlashList has known focus issues on TV platforms. Use regular FlatList with `Platform.isTV` check:
-```typescript
-{Platform.isTV ? (
-  <FlatList
-    data={items}
-    renderItem={renderTVItem}
-    removeClippedSubviews={false}
-    // ...
-  />
-) : (
-  <FlashList data={items} renderItem={renderItem} />
-)}
-```
-
-2. **Add `removeClippedSubviews={false}`** - Prevents the list from unmounting off-screen items, which can cause focus to "fall through" to other elements.
-
-3. **Only ONE element should have `hasTVPreferredFocus`** - Never have multiple elements competing for initial focus. Choose one element (usually the first filter button or first list item) to have preferred focus:
-```typescript
-// ✅ Good - only first filter button has preferred focus
-<TVFilterButton hasTVPreferredFocus={index === 0} />
-<TVFocusablePoster /> // No hasTVPreferredFocus
-
-// ❌ Bad - both compete for focus
-<TVFilterButton hasTVPreferredFocus />
-<TVFocusablePoster hasTVPreferredFocus={index === 0} />
-```
-
-4. **Keep headers/filter bars outside the list** - Instead of using `ListHeaderComponent`, render the filter bar as a separate View above the FlatList:
-```typescript
-<View style={{ flex: 1 }}>
-  {/* Filter bar - separate from list */}
-  <View style={{ flexDirection: "row", gap: 12 }}>
-    <TVFilterButton />
-    <TVFilterButton />
-  </View>
-
-  {/* Grid */}
-  <FlatList data={items} renderItem={renderTVItem} />
-</View>
-```
-
-5. **Avoid multiple scrollable containers** - Don't use ScrollView for the filter bar if you have a FlatList below. Use a simple View instead to prevent focus conflicts between scrollable containers.
-
-**Reference implementation**: See `app/(auth)/(tabs)/(libraries)/[libraryId].tsx` for the TV filter bar + grid pattern.
-
-### TV Focus Guide Navigation (Non-Adjacent Sections)
-
-When you need focus to navigate between sections that aren't geometrically aligned (e.g., left-aligned buttons to a horizontal ScrollView), use `TVFocusGuideView` with the `destinations` prop:
-
-```typescript
-// 1. Track destination with useState (NOT useRef - won't trigger re-renders)
-const [firstCardRef, setFirstCardRef] = useState<View | null>(null);
-
-// 2. Place invisible focus guide between sections
-{firstCardRef && (
-  <TVFocusGuideView
-    destinations={[firstCardRef]}
-    style={{ height: 1, width: "100%" }}
-  />
-)}
-
-// 3. Target component must use forwardRef
-const MyCard = React.forwardRef<View, Props>(({ ... }, ref) => (
-  <Pressable ref={ref} ...>
-    ...
-  </Pressable>
-));
-
-// 4. Pass state setter as callback ref to first item
-{items.map((item, index) => (
-  <MyCard
-    ref={index === 0 ? setFirstCardRef : undefined}
-    ...
-  />
-))}
-```
-
-**For detailed documentation and bidirectional navigation patterns, see [docs/tv-focus-guide.md](docs/tv-focus-guide.md)**
-
-**Reference implementation**: See `components/ItemContent.tv.tsx` for bidirectional focus navigation between playback options and cast list.

README.md

@@ -5,12 +5,6 @@
   <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.**
 
 ---
@@ -60,11 +54,6 @@ The Jellyfin Plugin for Streamyfin is a plugin you install into Jellyfin that ho
 
 Chromecast support is currently under development. Video casting is already available, and we're actively working on adding subtitle support and additional features.
 
-### 🎬 MPV Player
-
-Streamyfin uses [MPV](https://mpv.io/) as its primary video player on all platforms, powered by [MPVKit](https://github.com/mpvkit/MPVKit). MPV is a powerful, open-source media player known for its wide format support and high-quality playback.
-Thanks to [@Alexk2309](https://github.com/Alexk2309) for the hard work building the native MPV module in Streamyfin.
-
 ### 🔍 Jellysearch
 
 [Jellysearch](https://gitlab.com/DomiStyle/jellysearch) works with Streamyfin
@@ -241,7 +230,6 @@ We also thank all other developers who have contributed to Streamyfin, your effo
 
 A special mention to the following people and projects for their contributions:
 
-- [@Alexk2309](https://github.com/Alexk2309) for building the native MPV module that integrates [MPVKit](https://github.com/mpvkit/MPVKit) with React Native
 - [Reiverr](https://github.com/aleksilassila/reiverr) for invaluable help with understanding the Jellyfin API
 - [Jellyfin TS SDK](https://github.com/jellyfin/jellyfin-sdk-typescript) for providing the TypeScript SDK
 - [Seerr](https://github.com/seerr-team/seerr) for enabling API integration with their project

app.config.js

@@ -6,6 +6,9 @@ module.exports = ({ config }) => {
       "react-native-google-cast",
       { useDefaultExpandedMediaControls: true },
     ]);
+
+    // KSPlayer for iOS (GPU acceleration + native PiP)
+    config.plugins.push("./plugins/withKSPlayer.js");
   }
 
   // Only override googleServicesFile if env var is set

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.52.0",
+    "version": "0.51.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -17,29 +17,24 @@
         "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
         },
         "UISupportsTrueScreenSizeOnMac": true,
         "UIFileSharingEnabled": true,
-        "LSSupportsOpeningDocumentsInPlace": true,
-        "AVInitialRouteSharingPolicy": "LongFormAudio"
+        "LSSupportsOpeningDocumentsInPlace": true
       },
       "config": {
         "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"
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 92,
+      "versionCode": 90,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon-android-plain.png",
         "monochromeImage": "./assets/images/icon-android-themed.png",
@@ -49,30 +44,13 @@
       "permissions": [
         "android.permission.FOREGROUND_SERVICE",
         "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK",
-        "android.permission.WRITE_SETTINGS",
-        "android.permission.ACCESS_FINE_LOCATION"
+        "android.permission.WRITE_SETTINGS"
       ],
       "blockedPermissions": ["android.permission.ACTIVITY_RECOGNITION"],
       "googleServicesFile": "./google-services.json"
     },
     "plugins": [
-      [
-        "@react-native-tvos/config-tv",
-        {
-          "appleTVImages": {
-            "icon": "./assets/images/icon-tvos.png",
-            "iconSmall": "./assets/images/icon-tvos-small.png",
-            "iconSmall2x": "./assets/images/icon-tvos-small-2x.png",
-            "topShelf": "./assets/images/icon-tvos-topshelf.png",
-            "topShelf2x": "./assets/images/icon-tvos-topshelf-2x.png",
-            "topShelfWide": "./assets/images/icon-tvos-topshelf-wide.png",
-            "topShelfWide2x": "./assets/images/icon-tvos-topshelf-wide-2x.png"
-          },
-          "infoPlist": {
-            "UIAppSupportsHDR": true
-          }
-        }
-      ],
+      "@react-native-tvos/config-tv",
       "expo-router",
       "expo-font",
       "./plugins/withExcludeMedia3Dash.js",
@@ -80,8 +58,7 @@
         "expo-build-properties",
         {
           "ios": {
-            "deploymentTarget": "15.6",
-            "useFrameworks": "static"
+            "deploymentTarget": "15.6"
           },
           "android": {
             "buildArchs": ["arm64-v8a", "x86_64"],
@@ -89,7 +66,7 @@
             "targetSdkVersion": 35,
             "buildToolsVersion": "35.0.0",
             "kotlinVersion": "2.0.21",
-            "minSdkVersion": 26,
+            "minSdkVersion": 24,
             "usesCleartextTraffic": true,
             "packagingOptions": {
               "jniLibs": {
@@ -107,6 +84,12 @@
           "initialOrientation": "DEFAULT"
         }
       ],
+      [
+        "expo-sensors",
+        {
+          "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
+        }
+      ],
       "expo-localization",
       "expo-asset",
       [
@@ -137,16 +120,7 @@
       ["./plugins/withChangeNativeAndroidTextToWhite.js"],
       ["./plugins/withAndroidManifest.js"],
       ["./plugins/withTrustLocalCerts.js"],
-      ["./plugins/withGradleProperties.js"],
-      ["./plugins/withTVOSAppIcon.js"],
-      ["./plugins/withTVXcodeEnv.js"],
-      [
-        "./plugins/withGitPod.js",
-        {
-          "podName": "MPVKit-GPL",
-          "podspecUrl": "https://raw.githubusercontent.com/streamyfin/MPVKit/0.40.0-av/MPVKit-GPL.podspec"
-        }
-      ]
+      ["./plugins/withGradleProperties.js"]
     ],
     "experiments": {
       "typedRoutes": true

app/(auth)/(tabs)/(custom-links)/_layout.tsx

@@ -9,7 +9,7 @@ export default function CustomMenuLayout() {
       <Stack.Screen
         name='index'
         options={{
-          headerShown: !Platform.isTV,
+          headerShown: Platform.OS !== "ios",
           headerLargeTitle: true,
           headerTitle: t("tabs.custom_links"),
           headerBlurEffect: "none",

app/(auth)/(tabs)/(custom-links)/index.tsx

@@ -29,7 +29,7 @@ export default function menuLinks() {
       );
       const config = response?.data;
 
-      if (!config || !Object.hasOwn(config, "menuLinks")) {
+      if (!config && !Object.hasOwn(config, "menuLinks")) {
         console.error("Menu links not found");
         return;
       }

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

@@ -2,7 +2,6 @@ import { useCallback, useState } from "react";
 import { Platform, RefreshControl, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Favorites } from "@/components/home/Favorites";
-import { Favorites as TVFavorites } from "@/components/home/Favorites.tv";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 
 export default function favorites() {
@@ -16,10 +15,6 @@ export default function favorites() {
   }, []);
   const insets = useSafeAreaInsets();
 
-  if (Platform.isTV) {
-    return <TVFavorites />;
-  }
-
   return (
     <ScrollView
       nestedScrollEnabled

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

@@ -1,10 +1,8 @@
 import { Feather, Ionicons } from "@expo/vector-icons";
-import { Stack } from "expo-router";
+import { Stack, useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
-import { Pressable } from "react-native-gesture-handler";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
-import useRouter from "@/hooks/useAppRouter";
 
 const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");
 
@@ -43,18 +41,37 @@ export default function IndexLayout() {
       <Stack.Screen
         name='downloads/index'
         options={{
-          headerShown: !Platform.isTV,
+          headerShown: true,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           title: t("home.downloads.downloads_title"),
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name='downloads/[seriesId]'
+        options={{
+          headerShown: true,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          title: t("home.downloads.tvseries"),
+          headerLeft: () => (
+            <TouchableOpacity
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
           ),
         }}
       />
@@ -62,18 +79,18 @@ export default function IndexLayout() {
         name='sessions/index'
         options={{
           title: t("home.sessions.title"),
-          headerShown: !Platform.isTV,
+          headerShown: true,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -81,18 +98,17 @@ export default function IndexLayout() {
         name='settings'
         options={{
           title: t("home.settings.settings_title"),
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -100,18 +116,17 @@ export default function IndexLayout() {
         name='settings/playback-controls/page'
         options={{
           title: t("home.settings.playback_controls.title"),
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -119,18 +134,17 @@ export default function IndexLayout() {
         name='settings/audio-subtitles/page'
         options={{
           title: t("home.settings.audio_subtitles.title"),
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -138,18 +152,17 @@ export default function IndexLayout() {
         name='settings/appearance/page'
         options={{
           title: t("home.settings.appearance.title"),
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -157,18 +170,17 @@ export default function IndexLayout() {
         name='settings/music/page'
         options={{
           title: t("home.settings.music.title"),
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -176,18 +188,17 @@ export default function IndexLayout() {
         name='settings/appearance/hide-libraries/page'
         options={{
           title: t("home.settings.other.hide_libraries"),
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -195,18 +206,17 @@ export default function IndexLayout() {
         name='settings/plugins/page'
         options={{
           title: t("home.settings.plugins.plugins_title"),
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -214,18 +224,17 @@ export default function IndexLayout() {
         name='settings/plugins/marlin-search/page'
         options={{
           title: "Marlin Search",
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -233,18 +242,17 @@ export default function IndexLayout() {
         name='settings/plugins/jellyseerr/page'
         options={{
           title: "Jellyseerr",
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -252,18 +260,17 @@ export default function IndexLayout() {
         name='settings/plugins/streamystats/page'
         options={{
           title: "Streamystats",
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -271,18 +278,17 @@ export default function IndexLayout() {
         name='settings/plugins/kefinTweaks/page'
         options={{
           title: "KefinTweaks",
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -290,18 +296,17 @@ export default function IndexLayout() {
         name='settings/intro/page'
         options={{
           title: t("home.settings.intro.title"),
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -309,38 +314,31 @@ export default function IndexLayout() {
         name='settings/logs/page'
         options={{
           title: t("home.settings.logs.logs_title"),
-          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
       <Stack.Screen
-        name='settings/network/page'
+        name='intro/page'
         options={{
-          title: t("home.settings.network.title"),
-          headerShown: !Platform.isTV,
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
+          headerShown: false,
+          title: "",
           headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
+          presentation: "modal",
         }}
       />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
@@ -351,11 +349,11 @@ export default function IndexLayout() {
         options={{
           title: "",
           headerLeft: () => (
-            <Pressable onPress={() => _router.back()} className='pl-0.5'>
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
-          headerShown: !Platform.isTV,
+          headerShown: true,
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
@@ -369,13 +367,13 @@ const SettingsButton = () => {
   const router = useRouter();
 
   return (
-    <Pressable
+    <TouchableOpacity
       onPress={() => {
         router.push("/(auth)/settings");
       }}
     >
       <Feather name='settings' color={"white"} size={22} />
-    </Pressable>
+    </TouchableOpacity>
   );
 };
 
@@ -384,7 +382,7 @@ const SessionsButton = () => {
   const { sessions = [] } = useSessions({} as useSessionsProps);
 
   return (
-    <Pressable
+    <TouchableOpacity
       onPress={() => {
         router.push("/(auth)/sessions");
       }}
@@ -395,6 +393,6 @@ const SessionsButton = () => {
         color={sessions.length === 0 ? "white" : "#9333ea"}
         size={28}
       />
-    </Pressable>
+    </TouchableOpacity>
   );
 };

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

@@ -0,0 +1,181 @@
+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,10 +1,15 @@
 import { BottomSheetModal } from "@gorhom/bottom-sheet";
-import { useNavigation } from "expo-router";
+import { useNavigation, useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, Platform, ScrollView, View } from "react-native";
-import { Pressable } from "react-native-gesture-handler";
+import {
+  Alert,
+  Platform,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
@@ -13,10 +18,8 @@ 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";
 
@@ -100,12 +103,12 @@ export default function page() {
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <Pressable
+        <TouchableOpacity
           onPress={bottomSheetModalRef.current?.present}
           className='px-2'
         >
           <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
-        </Pressable>
+        </TouchableOpacity>
       ),
     });
   }, [downloadedFiles]);
@@ -163,99 +166,145 @@ export default function page() {
     );
 
   return (
-    <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'>
+    <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'>
                 <Text className='text-lg font-bold'>
-                  {t("home.downloads.movies")}
+                  {t("home.downloads.queue")}
                 </Text>
-                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                  <Text className='text-xs font-bold'>{movies?.length}</Text>
-                </View>
-              </View>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                <View className='px-4 flex flex-row'>
-                  {movies?.map((item) => (
-                    <TouchableItemRouter item={item.item} 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 className='text-xs opacity-70 text-red-600'>
+                  {t("home.downloads.queue_hint")}
                 </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>
-              <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 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}
                     >
-                      <SeriesCard
-                        items={items.map((i) => i.item)}
-                        key={items[0].item.SeriesId}
-                      />
-                    </View>
+                      <View>
+                        <Text className='font-semibold'>{q.item.Name}</Text>
+                        <Text className='text-xs opacity-50'>
+                          {q.item.Type}
+                        </Text>
+                      </View>
+                      <TouchableOpacity
+                        onPress={() => {
+                          removeProcess(q.id);
+                          setQueue((prev) => {
+                            if (!prev) return [];
+                            return [...prev.filter((i) => i.id !== q.id)];
+                          });
+                        }}
+                      >
+                        <Ionicons name='close' size={24} color='red' />
+                      </TouchableOpacity>
+                    </TouchableOpacity>
                   ))}
                 </View>
-              </ScrollView>
-            </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}
+                {queue.length === 0 && (
+                  <Text className='opacity-50'>
+                    {t("home.downloads.no_items_in_queue")}
                   </Text>
-                </View>
-              </View>
-              <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> */}
+
+          <ActiveDownloads />
         </View>
-      </ScrollView>
-    </OfflineModeProvider>
+
+        {movies.length > 0 && (
+          <View className='mb-4'>
+            <View className='flex flex-row items-center justify-between mb-2 px-4'>
+              <Text className='text-lg font-bold'>
+                {t("home.downloads.movies")}
+              </Text>
+              <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                <Text className='text-xs font-bold'>{movies?.length}</Text>
+              </View>
+            </View>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+              <View className='px-4 flex flex-row'>
+                {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}
+                </Text>
+              </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)}
+                      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>
+            </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>
+                ))}
+              </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>
   );
 }

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

@@ -1,6 +1,15 @@
+import { useSettings } from "@/utils/atoms/settings";
 import { Home } from "../../../../components/home/Home";
+import { HomeWithCarousel } from "../../../../components/home/HomeWithCarousel";
 
 const Index = () => {
+  const { settings } = useSettings();
+  const showLargeHomeCarousel = settings.showLargeHomeCarousel ?? false;
+
+  if (showLargeHomeCarousel) {
+    return <HomeWithCarousel />;
+  }
+
   return <Home />;
 };
 

app/(auth)/(tabs)/(home)/intro/page.tsx

@@ -0,0 +1,154 @@
+import { Feather, Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { useFocusEffect, useRouter } from "expo-router";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Linking, Platform, TouchableOpacity, View } from "react-native";
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import { storage } from "@/utils/mmkv";
+
+export default function page() {
+  const router = useRouter();
+  const { t } = useTranslation();
+
+  useFocusEffect(
+    useCallback(() => {
+      storage.set("hasShownIntro", true);
+    }, []),
+  );
+
+  return (
+    <View
+      className={`bg-neutral-900 h-full ${Platform.isTV ? "py-5 space-y-4" : "py-16 space-y-8"} px-4`}
+    >
+      <View>
+        <Text className='text-3xl font-bold text-center mb-2'>
+          {t("home.intro.welcome_to_streamyfin")}
+        </Text>
+        <Text className='text-center'>
+          {t("home.intro.a_free_and_open_source_client_for_jellyfin")}
+        </Text>
+      </View>
+
+      <View>
+        <Text className='text-lg font-bold'>
+          {t("home.intro.features_title")}
+        </Text>
+        <Text className='text-xs'>{t("home.intro.features_description")}</Text>
+        <View className='flex flex-row items-center mt-4'>
+          <Image
+            source={require("@/assets/icons/jellyseerr-logo.svg")}
+            style={{
+              width: 50,
+              height: 50,
+            }}
+          />
+          <View className='shrink ml-2'>
+            <Text className='font-bold mb-1'>Jellyseerr</Text>
+            <Text className='shrink text-xs'>
+              {t("home.intro.jellyseerr_feature_description")}
+            </Text>
+          </View>
+        </View>
+        {!Platform.isTV && (
+          <>
+            <View className='flex flex-row items-center mt-4'>
+              <View
+                style={{
+                  width: 50,
+                  height: 50,
+                }}
+                className='flex items-center justify-center'
+              >
+                <Ionicons
+                  name='cloud-download-outline'
+                  size={32}
+                  color='white'
+                />
+              </View>
+              <View className='shrink ml-2'>
+                <Text className='font-bold mb-1'>
+                  {t("home.intro.downloads_feature_title")}
+                </Text>
+                <Text className='shrink text-xs'>
+                  {t("home.intro.downloads_feature_description")}
+                </Text>
+              </View>
+            </View>
+            <View className='flex flex-row items-center mt-4'>
+              <View
+                style={{
+                  width: 50,
+                  height: 50,
+                }}
+                className='flex items-center justify-center'
+              >
+                <Feather name='cast' size={28} color={"white"} />
+              </View>
+              <View className='shrink ml-2'>
+                <Text className='font-bold mb-1'>Chromecast</Text>
+                <Text className='shrink text-xs'>
+                  {t("home.intro.chromecast_feature_description")}
+                </Text>
+              </View>
+            </View>
+          </>
+        )}
+        <View className='flex flex-row items-center mt-4'>
+          <View
+            style={{
+              width: 50,
+              height: 50,
+            }}
+            className='flex items-center justify-center'
+          >
+            <Feather name='settings' size={28} color={"white"} />
+          </View>
+          <View className='shrink ml-2'>
+            <Text className='font-bold mb-1'>
+              {t("home.intro.centralised_settings_plugin_title")}
+            </Text>
+            <View className='flex-row flex-wrap items-baseline'>
+              <Text className='shrink text-xs'>
+                {t("home.intro.centralised_settings_plugin_description")}{" "}
+              </Text>
+              <TouchableOpacity
+                onPress={() => {
+                  Linking.openURL(
+                    "https://github.com/streamyfin/jellyfin-plugin-streamyfin",
+                  );
+                }}
+              >
+                <Text className='text-xs text-purple-600 underline'>
+                  {t("home.intro.read_more")}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View>
+        <Button
+          onPress={() => {
+            router.back();
+          }}
+          className='mt-4'
+        >
+          {t("home.intro.done_button")}
+        </Button>
+        <TouchableOpacity
+          onPress={() => {
+            router.back();
+            router.push("/settings");
+          }}
+          className='mt-4'
+        >
+          <Text className='text-purple-600 text-center'>
+            {t("home.intro.go_to_settings_button")}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { useNavigation } from "expo-router";
+import { useNavigation, useRouter } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
 import { useEffect } from "react";
@@ -11,14 +11,9 @@ 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";
 
-// TV-specific settings component
-const SettingsTV = Platform.isTV ? require("./settings.tv").default : null;
-
-// Mobile settings component
-function SettingsMobile() {
+export default function settings() {
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const [_user] = useAtom(userAtom);
@@ -95,11 +90,6 @@ function SettingsMobile() {
               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
@@ -108,17 +98,8 @@ function SettingsMobile() {
           </ListGroup>
         </View>
 
-        <StorageSettings />
+        {!Platform.isTV && <StorageSettings />}
       </View>
     </ScrollView>
   );
 }
-
-export default function settings() {
-  // Use TV settings component on TV platforms
-  if (Platform.isTV && SettingsTV) {
-    return <SettingsTV />;
-  }
-
-  return <SettingsMobile />;
-}

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

@@ -1,449 +0,0 @@
-import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
-import { useAtom } from "jotai";
-import { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import type { TVOptionItem } from "@/components/tv";
-import {
-  TVLogoutButton,
-  TVSectionHeader,
-  TVSettingsOptionButton,
-  TVSettingsRow,
-  TVSettingsStepper,
-  TVSettingsTextInput,
-  TVSettingsToggle,
-} from "@/components/tv";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import { useTVOptionModal } from "@/hooks/useTVOptionModal";
-import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
-import {
-  AudioTranscodeMode,
-  TVTypographyScale,
-  useSettings,
-} from "@/utils/atoms/settings";
-
-export default function SettingsTV() {
-  const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
-  const { settings, updateSettings } = useSettings();
-  const { logout } = useJellyfin();
-  const [user] = useAtom(userAtom);
-  const [api] = useAtom(apiAtom);
-  const { showOptions } = useTVOptionModal();
-  const typography = useScaledTVTypography();
-
-  // Local state for OpenSubtitles API key (only commit on blur)
-  const [openSubtitlesApiKey, setOpenSubtitlesApiKey] = useState(
-    settings.openSubtitlesApiKey || "",
-  );
-
-  const currentAudioTranscode =
-    settings.audioTranscodeMode || AudioTranscodeMode.Auto;
-  const currentSubtitleMode =
-    settings.subtitleMode || SubtitlePlaybackMode.Default;
-  const currentAlignX = settings.mpvSubtitleAlignX ?? "center";
-  const currentAlignY = settings.mpvSubtitleAlignY ?? "bottom";
-  const currentTypographyScale =
-    settings.tvTypographyScale || TVTypographyScale.Default;
-
-  // Audio transcoding options
-  const audioTranscodeModeOptions: TVOptionItem<AudioTranscodeMode>[] = useMemo(
-    () => [
-      {
-        label: t("home.settings.audio.transcode_mode.auto"),
-        value: AudioTranscodeMode.Auto,
-        selected: currentAudioTranscode === AudioTranscodeMode.Auto,
-      },
-      {
-        label: t("home.settings.audio.transcode_mode.stereo"),
-        value: AudioTranscodeMode.ForceStereo,
-        selected: currentAudioTranscode === AudioTranscodeMode.ForceStereo,
-      },
-      {
-        label: t("home.settings.audio.transcode_mode.5_1"),
-        value: AudioTranscodeMode.Allow51,
-        selected: currentAudioTranscode === AudioTranscodeMode.Allow51,
-      },
-      {
-        label: t("home.settings.audio.transcode_mode.passthrough"),
-        value: AudioTranscodeMode.AllowAll,
-        selected: currentAudioTranscode === AudioTranscodeMode.AllowAll,
-      },
-    ],
-    [t, currentAudioTranscode],
-  );
-
-  // Subtitle mode options
-  const subtitleModeOptions: TVOptionItem<SubtitlePlaybackMode>[] = useMemo(
-    () => [
-      {
-        label: t("home.settings.subtitles.modes.Default"),
-        value: SubtitlePlaybackMode.Default,
-        selected: currentSubtitleMode === SubtitlePlaybackMode.Default,
-      },
-      {
-        label: t("home.settings.subtitles.modes.Smart"),
-        value: SubtitlePlaybackMode.Smart,
-        selected: currentSubtitleMode === SubtitlePlaybackMode.Smart,
-      },
-      {
-        label: t("home.settings.subtitles.modes.OnlyForced"),
-        value: SubtitlePlaybackMode.OnlyForced,
-        selected: currentSubtitleMode === SubtitlePlaybackMode.OnlyForced,
-      },
-      {
-        label: t("home.settings.subtitles.modes.Always"),
-        value: SubtitlePlaybackMode.Always,
-        selected: currentSubtitleMode === SubtitlePlaybackMode.Always,
-      },
-      {
-        label: t("home.settings.subtitles.modes.None"),
-        value: SubtitlePlaybackMode.None,
-        selected: currentSubtitleMode === SubtitlePlaybackMode.None,
-      },
-    ],
-    [t, currentSubtitleMode],
-  );
-
-  // MPV alignment options
-  const alignXOptions: TVOptionItem<string>[] = useMemo(
-    () => [
-      { label: "Left", value: "left", selected: currentAlignX === "left" },
-      {
-        label: "Center",
-        value: "center",
-        selected: currentAlignX === "center",
-      },
-      { label: "Right", value: "right", selected: currentAlignX === "right" },
-    ],
-    [currentAlignX],
-  );
-
-  const alignYOptions: TVOptionItem<string>[] = useMemo(
-    () => [
-      { label: "Top", value: "top", selected: currentAlignY === "top" },
-      {
-        label: "Center",
-        value: "center",
-        selected: currentAlignY === "center",
-      },
-      {
-        label: "Bottom",
-        value: "bottom",
-        selected: currentAlignY === "bottom",
-      },
-    ],
-    [currentAlignY],
-  );
-
-  // Typography scale options
-  const typographyScaleOptions: TVOptionItem<TVTypographyScale>[] = useMemo(
-    () => [
-      {
-        label: t("home.settings.appearance.text_size_small"),
-        value: TVTypographyScale.Small,
-        selected: currentTypographyScale === TVTypographyScale.Small,
-      },
-      {
-        label: t("home.settings.appearance.text_size_default"),
-        value: TVTypographyScale.Default,
-        selected: currentTypographyScale === TVTypographyScale.Default,
-      },
-      {
-        label: t("home.settings.appearance.text_size_large"),
-        value: TVTypographyScale.Large,
-        selected: currentTypographyScale === TVTypographyScale.Large,
-      },
-      {
-        label: t("home.settings.appearance.text_size_extra_large"),
-        value: TVTypographyScale.ExtraLarge,
-        selected: currentTypographyScale === TVTypographyScale.ExtraLarge,
-      },
-    ],
-    [t, currentTypographyScale],
-  );
-
-  // Get display labels for option buttons
-  const audioTranscodeLabel = useMemo(() => {
-    const option = audioTranscodeModeOptions.find((o) => o.selected);
-    return option?.label || t("home.settings.audio.transcode_mode.auto");
-  }, [audioTranscodeModeOptions, t]);
-
-  const subtitleModeLabel = useMemo(() => {
-    const option = subtitleModeOptions.find((o) => o.selected);
-    return option?.label || t("home.settings.subtitles.modes.Default");
-  }, [subtitleModeOptions, t]);
-
-  const alignXLabel = useMemo(() => {
-    const option = alignXOptions.find((o) => o.selected);
-    return option?.label || "Center";
-  }, [alignXOptions]);
-
-  const alignYLabel = useMemo(() => {
-    const option = alignYOptions.find((o) => o.selected);
-    return option?.label || "Bottom";
-  }, [alignYOptions]);
-
-  const typographyScaleLabel = useMemo(() => {
-    const option = typographyScaleOptions.find((o) => o.selected);
-    return option?.label || t("home.settings.appearance.text_size_default");
-  }, [typographyScaleOptions, t]);
-
-  return (
-    <View style={{ flex: 1, backgroundColor: "#000000" }}>
-      <View style={{ flex: 1 }}>
-        <ScrollView
-          style={{ flex: 1 }}
-          contentContainerStyle={{
-            paddingTop: insets.top + 120,
-            paddingBottom: insets.bottom + 60,
-            paddingHorizontal: insets.left + 80,
-          }}
-          showsVerticalScrollIndicator={false}
-        >
-          {/* Header */}
-          <Text
-            style={{
-              fontSize: typography.title,
-              fontWeight: "bold",
-              color: "#FFFFFF",
-              marginBottom: 8,
-            }}
-          >
-            {t("home.settings.settings_title")}
-          </Text>
-
-          {/* Audio Section */}
-          <TVSectionHeader title={t("home.settings.audio.audio_title")} />
-          <TVSettingsOptionButton
-            label={t("home.settings.audio.transcode_mode.title")}
-            value={audioTranscodeLabel}
-            onPress={() =>
-              showOptions({
-                title: t("home.settings.audio.transcode_mode.title"),
-                options: audioTranscodeModeOptions,
-                onSelect: (value) =>
-                  updateSettings({ audioTranscodeMode: value }),
-              })
-            }
-            isFirst
-          />
-
-          {/* Subtitles Section */}
-          <TVSectionHeader
-            title={t("home.settings.subtitles.subtitle_title")}
-          />
-          <TVSettingsOptionButton
-            label={t("home.settings.subtitles.subtitle_mode")}
-            value={subtitleModeLabel}
-            onPress={() =>
-              showOptions({
-                title: t("home.settings.subtitles.subtitle_mode"),
-                options: subtitleModeOptions,
-                onSelect: (value) => updateSettings({ subtitleMode: value }),
-              })
-            }
-          />
-          <TVSettingsToggle
-            label={t("home.settings.subtitles.set_subtitle_track")}
-            value={settings.rememberSubtitleSelections}
-            onToggle={(value) =>
-              updateSettings({ rememberSubtitleSelections: value })
-            }
-          />
-          <TVSettingsStepper
-            label={t("home.settings.subtitles.subtitle_size")}
-            value={settings.subtitleSize / 100}
-            onDecrease={() => {
-              const newValue = Math.max(0.3, settings.subtitleSize / 100 - 0.1);
-              updateSettings({ subtitleSize: Math.round(newValue * 100) });
-            }}
-            onIncrease={() => {
-              const newValue = Math.min(1.5, settings.subtitleSize / 100 + 0.1);
-              updateSettings({ subtitleSize: Math.round(newValue * 100) });
-            }}
-            formatValue={(v) => `${v.toFixed(1)}x`}
-          />
-
-          {/* MPV Subtitles Section */}
-          <TVSectionHeader title='MPV Subtitle Settings' />
-          <TVSettingsStepper
-            label='Subtitle Scale'
-            value={settings.mpvSubtitleScale ?? 1.0}
-            onDecrease={() => {
-              const newValue = Math.max(
-                0.5,
-                (settings.mpvSubtitleScale ?? 1.0) - 0.1,
-              );
-              updateSettings({
-                mpvSubtitleScale: Math.round(newValue * 10) / 10,
-              });
-            }}
-            onIncrease={() => {
-              const newValue = Math.min(
-                2.0,
-                (settings.mpvSubtitleScale ?? 1.0) + 0.1,
-              );
-              updateSettings({
-                mpvSubtitleScale: Math.round(newValue * 10) / 10,
-              });
-            }}
-            formatValue={(v) => `${v.toFixed(1)}x`}
-          />
-          <TVSettingsStepper
-            label='Vertical Margin'
-            value={settings.mpvSubtitleMarginY ?? 0}
-            onDecrease={() => {
-              const newValue = Math.max(
-                0,
-                (settings.mpvSubtitleMarginY ?? 0) - 5,
-              );
-              updateSettings({ mpvSubtitleMarginY: newValue });
-            }}
-            onIncrease={() => {
-              const newValue = Math.min(
-                100,
-                (settings.mpvSubtitleMarginY ?? 0) + 5,
-              );
-              updateSettings({ mpvSubtitleMarginY: newValue });
-            }}
-          />
-          <TVSettingsOptionButton
-            label='Horizontal Alignment'
-            value={alignXLabel}
-            onPress={() =>
-              showOptions({
-                title: "Horizontal Alignment",
-                options: alignXOptions,
-                onSelect: (value) =>
-                  updateSettings({
-                    mpvSubtitleAlignX: value as "left" | "center" | "right",
-                  }),
-              })
-            }
-          />
-          <TVSettingsOptionButton
-            label='Vertical Alignment'
-            value={alignYLabel}
-            onPress={() =>
-              showOptions({
-                title: "Vertical Alignment",
-                options: alignYOptions,
-                onSelect: (value) =>
-                  updateSettings({
-                    mpvSubtitleAlignY: value as "top" | "center" | "bottom",
-                  }),
-              })
-            }
-          />
-
-          {/* OpenSubtitles Section */}
-          <TVSectionHeader
-            title={
-              t("home.settings.subtitles.opensubtitles_title") ||
-              "OpenSubtitles"
-            }
-          />
-          <Text
-            style={{
-              color: "#9CA3AF",
-              fontSize: typography.callout - 2,
-              marginBottom: 16,
-              marginLeft: 8,
-            }}
-          >
-            {t("home.settings.subtitles.opensubtitles_hint") ||
-              "Enter your OpenSubtitles API key to enable client-side subtitle search as a fallback when your Jellyfin server doesn't have a subtitle provider configured."}
-          </Text>
-          <TVSettingsTextInput
-            label={
-              t("home.settings.subtitles.opensubtitles_api_key") || "API Key"
-            }
-            value={openSubtitlesApiKey}
-            placeholder={
-              t("home.settings.subtitles.opensubtitles_api_key_placeholder") ||
-              "Enter API key..."
-            }
-            onChangeText={setOpenSubtitlesApiKey}
-            onBlur={() => updateSettings({ openSubtitlesApiKey })}
-            secureTextEntry
-          />
-          <Text
-            style={{
-              color: "#6B7280",
-              fontSize: typography.callout - 4,
-              marginTop: 8,
-              marginLeft: 8,
-            }}
-          >
-            {t("home.settings.subtitles.opensubtitles_get_key") ||
-              "Get your free API key at opensubtitles.com/en/consumers"}
-          </Text>
-
-          {/* Appearance Section */}
-          <TVSectionHeader title={t("home.settings.appearance.title")} />
-          <TVSettingsOptionButton
-            label={t("home.settings.appearance.text_size")}
-            value={typographyScaleLabel}
-            onPress={() =>
-              showOptions({
-                title: t("home.settings.appearance.text_size"),
-                options: typographyScaleOptions,
-                onSelect: (value) =>
-                  updateSettings({ tvTypographyScale: value }),
-              })
-            }
-          />
-          <TVSettingsToggle
-            label={t(
-              "home.settings.appearance.merge_next_up_continue_watching",
-            )}
-            value={settings.mergeNextUpAndContinueWatching}
-            onToggle={(value) =>
-              updateSettings({ mergeNextUpAndContinueWatching: value })
-            }
-          />
-          <TVSettingsToggle
-            label={t("home.settings.appearance.show_home_backdrop")}
-            value={settings.showHomeBackdrop}
-            onToggle={(value) => updateSettings({ showHomeBackdrop: value })}
-          />
-          <TVSettingsToggle
-            label={t("home.settings.appearance.show_hero_carousel")}
-            value={settings.showTVHeroCarousel}
-            onToggle={(value) => updateSettings({ showTVHeroCarousel: value })}
-          />
-          <TVSettingsToggle
-            label={t("home.settings.appearance.show_series_poster_on_episode")}
-            value={settings.showSeriesPosterOnEpisode}
-            onToggle={(value) =>
-              updateSettings({ showSeriesPosterOnEpisode: value })
-            }
-          />
-
-          {/* User Section */}
-          <TVSectionHeader
-            title={t("home.settings.user_info.user_info_title")}
-          />
-          <TVSettingsRow
-            label={t("home.settings.user_info.user")}
-            value={user?.Name || "-"}
-            showChevron={false}
-          />
-          <TVSettingsRow
-            label={t("home.settings.user_info.server")}
-            value={api?.basePath || "-"}
-            showChevron={false}
-          />
-
-          {/* Logout Button */}
-          <View style={{ marginTop: 48, alignItems: "center" }}>
-            <TVLogoutButton onPress={logout} />
-          </View>
-        </ScrollView>
-      </View>
-    </View>
-  );
-}

app/(auth)/(tabs)/(home)/settings/audio-subtitles/page.tsx

@@ -2,7 +2,6 @@ import { Platform, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AudioToggles } from "@/components/settings/AudioToggles";
 import { MediaProvider } from "@/components/settings/MediaContext";
-import { MpvSubtitleSettings } from "@/components/settings/MpvSubtitleSettings";
 import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
 
 export default function AudioSubtitlesPage() {
@@ -23,7 +22,6 @@ export default function AudioSubtitlesPage() {
         <MediaProvider>
           <AudioToggles className='mb-4' />
           <SubtitleToggles className='mb-4' />
-          <MpvSubtitleSettings className='mb-4' />
         </MediaProvider>
       </View>
     </ScrollView>

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

@@ -1,13 +1,13 @@
+import { useRouter } from "expo-router";
 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 { useIntroSheet } from "@/providers/IntroSheetProvider";
 import { storage } from "@/utils/mmkv";
 
 export default function IntroPage() {
-  const { showIntro } = useIntroSheet();
+  const router = useRouter();
   const insets = useSafeAreaInsets();
   const { t } = useTranslation();
 
@@ -26,7 +26,7 @@ export default function IntroPage() {
         <ListGroup title={t("home.settings.intro.title")}>
           <ListItem
             onPress={() => {
-              showIntro();
+              router.push("/intro/page");
             }}
             title={t("home.settings.intro.show_intro")}
           />

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

@@ -1,22 +1,13 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useQuery } from "@tanstack/react-query";
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, View } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { toast } from "sonner-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 { useHaptic } from "@/hooks/useHaptic";
-import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
-import {
-  clearCache,
-  clearPermanentDownloads,
-  getStorageStats,
-} from "@/providers/AudioStorage";
 import { useSettings } from "@/utils/atoms/settings";
 
 const CACHE_SIZE_OPTIONS = [
@@ -38,40 +29,6 @@ export default function MusicSettingsPage() {
   const insets = useSafeAreaInsets();
   const { settings, updateSettings, pluginSettings } = useSettings();
   const { t } = useTranslation();
-  const queryClient = useNetworkAwareQueryClient();
-  const successHapticFeedback = useHaptic("success");
-  const errorHapticFeedback = useHaptic("error");
-
-  const { data: musicCacheStats } = useQuery({
-    queryKey: ["musicCacheStats"],
-    queryFn: () => getStorageStats(),
-  });
-
-  const onClearMusicCacheClicked = useCallback(async () => {
-    try {
-      await clearCache();
-      queryClient.invalidateQueries({ queryKey: ["musicCacheStats"] });
-      queryClient.invalidateQueries({ queryKey: ["appSize"] });
-      successHapticFeedback();
-      toast.success(t("home.settings.storage.music_cache_cleared"));
-    } catch (_e) {
-      errorHapticFeedback();
-      toast.error(t("home.settings.toasts.error_deleting_files"));
-    }
-  }, [queryClient, successHapticFeedback, errorHapticFeedback, t]);
-
-  const onDeleteDownloadedSongsClicked = useCallback(async () => {
-    try {
-      await clearPermanentDownloads();
-      queryClient.invalidateQueries({ queryKey: ["musicCacheStats"] });
-      queryClient.invalidateQueries({ queryKey: ["appSize"] });
-      successHapticFeedback();
-      toast.success(t("home.settings.storage.downloaded_songs_deleted"));
-    } catch (_e) {
-      errorHapticFeedback();
-      toast.error(t("home.settings.toasts.error_deleting_files"));
-    }
-  }, [queryClient, successHapticFeedback, errorHapticFeedback, t]);
 
   const cacheSizeOptions = useMemo(
     () => [
@@ -214,37 +171,6 @@ export default function MusicSettingsPage() {
             </ListItem>
           </ListGroup>
         </View>
-
-        {!Platform.isTV && (
-          <View className='mt-4'>
-            <ListGroup
-              title={t("home.settings.storage.music_cache_title")}
-              description={
-                <Text className='text-[#8E8D91] text-xs'>
-                  {t("home.settings.storage.music_cache_description")}
-                </Text>
-              }
-            >
-              <ListItem
-                onPress={onClearMusicCacheClicked}
-                title={t("home.settings.storage.clear_music_cache")}
-                subtitle={t("home.settings.storage.music_cache_size", {
-                  size: (musicCacheStats?.cacheSize ?? 0).bytesToReadable(),
-                })}
-              />
-            </ListGroup>
-            <ListGroup>
-              <ListItem
-                textColor='red'
-                onPress={onDeleteDownloadedSongsClicked}
-                title={t("home.settings.storage.delete_all_downloaded_songs")}
-                subtitle={t("home.settings.storage.downloaded_songs_size", {
-                  size: (musicCacheStats?.permanentSize ?? 0).bytesToReadable(),
-                })}
-              />
-            </ListGroup>
-          </View>
-        )}
       </View>
     </ScrollView>
   );

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

@@ -1,48 +0,0 @@
-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/plugins/marlin-search/page.tsx

@@ -1,3 +1,4 @@
+import { useQueryClient } from "@tanstack/react-query";
 import { useNavigation } from "expo-router";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -15,7 +16,6 @@ import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
 import DisabledSetting from "@/components/settings/DisabledSetting";
-import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useSettings } from "@/utils/atoms/settings";
 
 export default function page() {
@@ -26,7 +26,7 @@ export default function page() {
   const insets = useSafeAreaInsets();
 
   const { settings, updateSettings, pluginSettings } = useSettings();
-  const queryClient = useNetworkAwareQueryClient();
+  const queryClient = useQueryClient();
 
   const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
 

app/(auth)/(tabs)/(home)/settings/plugins/streamystats/page.tsx

@@ -1,3 +1,4 @@
+import { useQueryClient } from "@tanstack/react-query";
 import { useNavigation } from "expo-router";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,7 +15,6 @@ import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
-import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useSettings } from "@/utils/atoms/settings";
 
 export default function page() {
@@ -28,7 +28,7 @@ export default function page() {
     pluginSettings,
     refreshStreamyfinPluginSettings,
   } = useSettings();
-  const queryClient = useNetworkAwareQueryClient();
+  const queryClient = useQueryClient();
 
   // Local state for all editable fields
   const [url, setUrl] = useState<string>(settings?.streamyStatsServerUrl || "");

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

@@ -15,29 +15,14 @@ import { useAtom } from "jotai";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FlatList, Platform, useWindowDimensions, View } from "react-native";
+import { FlatList, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
-import {
-  getItemNavigation,
-  TouchableItemRouter,
-} from "@/components/common/TouchableItemRouter";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
-import { Loader } from "@/components/Loader";
 import { ItemPoster } from "@/components/posters/ItemPoster";
-import MoviePoster, {
-  TV_POSTER_WIDTH,
-} from "@/components/posters/MoviePoster.tv";
-import SeriesPoster from "@/components/posters/SeriesPoster.tv";
-import {
-  TVFilterButton,
-  TVFocusablePoster,
-  TVItemCardText,
-} from "@/components/tv";
-import useRouter from "@/hooks/useAppRouter";
-import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
@@ -51,10 +36,6 @@ import {
   tagsFilterAtom,
   yearFilterAtom,
 } from "@/utils/atoms/filters";
-import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
-
-const TV_ITEM_GAP = 16;
-const TV_SCALE_PADDING = 20;
 
 const page: React.FC = () => {
   const searchParams = useLocalSearchParams();
@@ -63,15 +44,11 @@ const page: React.FC = () => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const navigation = useNavigation();
-  const router = useRouter();
-  const { showOptions } = useTVOptionModal();
-  const { width: screenWidth } = useWindowDimensions();
   const [orientation, _setOrientation] = useState(
     ScreenOrientation.Orientation.PORTRAIT_UP,
   );
 
   const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
 
   const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
   const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
@@ -79,7 +56,7 @@ const page: React.FC = () => {
   const [sortBy, setSortBy] = useAtom(sortByAtom);
   const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
 
-  const { data: collection, isLoading: isCollectionLoading } = useQuery({
+  const { data: collection } = useQuery({
     queryKey: ["collection", collectionId],
     queryFn: async () => {
       if (!api) return null;
@@ -94,46 +71,6 @@ const page: React.FC = () => {
     staleTime: 60 * 1000,
   });
 
-  // TV Filter queries
-  const { data: tvGenreOptions } = useQuery({
-    queryKey: ["filters", "Genres", "tvGenreFilter", collectionId],
-    queryFn: async () => {
-      if (!api) return [];
-      const response = await getFilterApi(api).getQueryFiltersLegacy({
-        userId: user?.Id,
-        parentId: collectionId,
-      });
-      return response.data.Genres || [];
-    },
-    enabled: Platform.isTV && !!api && !!user?.Id && !!collectionId,
-  });
-
-  const { data: tvYearOptions } = useQuery({
-    queryKey: ["filters", "Years", "tvYearFilter", collectionId],
-    queryFn: async () => {
-      if (!api) return [];
-      const response = await getFilterApi(api).getQueryFiltersLegacy({
-        userId: user?.Id,
-        parentId: collectionId,
-      });
-      return response.data.Years || [];
-    },
-    enabled: Platform.isTV && !!api && !!user?.Id && !!collectionId,
-  });
-
-  const { data: tvTagOptions } = useQuery({
-    queryKey: ["filters", "Tags", "tvTagFilter", collectionId],
-    queryFn: async () => {
-      if (!api) return [];
-      const response = await getFilterApi(api).getQueryFiltersLegacy({
-        userId: user?.Id,
-        parentId: collectionId,
-      });
-      return response.data.Tags || [];
-    },
-    enabled: Platform.isTV && !!api && !!user?.Id && !!collectionId,
-  });
-
   useEffect(() => {
     navigation.setOptions({ title: collection?.Name || "" });
     setSortOrder([SortOrderOption.Ascending]);
@@ -150,18 +87,6 @@ const page: React.FC = () => {
     setSortBy([sortByOption]);
   }, [navigation, collection]);
 
-  // Calculate columns for TV grid
-  const nrOfCols = useMemo(() => {
-    if (Platform.isTV) {
-      const itemWidth = TV_POSTER_WIDTH + TV_ITEM_GAP;
-      return Math.max(
-        1,
-        Math.floor((screenWidth - TV_SCALE_PADDING * 2) / itemWidth),
-      );
-    }
-    return orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5;
-  }, [screenWidth, orientation]);
-
   const fetchItems = useCallback(
     async ({
       pageParam,
@@ -173,7 +98,7 @@ const page: React.FC = () => {
       const response = await getItemsApi(api).getItems({
         userId: user?.Id,
         parentId: collectionId,
-        limit: Platform.isTV ? 36 : 18,
+        limit: 18,
         startIndex: pageParam,
         // Set one ordering at a time. As collections do not work with correctly with multiple.
         sortBy: [sortBy[0]],
@@ -198,7 +123,6 @@ const page: React.FC = () => {
       api,
       user?.Id,
       collection,
-      collectionId,
       selectedGenres,
       selectedYears,
       selectedTags,
@@ -207,40 +131,39 @@ const page: React.FC = () => {
     ],
   );
 
-  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
-    useInfiniteQuery({
-      queryKey: [
-        "collection-items",
-        collectionId,
-        selectedGenres,
-        selectedYears,
-        selectedTags,
-        sortBy,
-        sortOrder,
-      ],
-      queryFn: fetchItems,
-      getNextPageParam: (lastPage, pages) => {
-        if (
-          !lastPage?.Items ||
-          !lastPage?.TotalRecordCount ||
-          lastPage?.TotalRecordCount === 0
-        )
-          return undefined;
-
-        const totalItems = lastPage.TotalRecordCount;
-        const accumulatedItems = pages.reduce(
-          (acc, curr) => acc + (curr?.Items?.length || 0),
-          0,
-        );
-
-        if (accumulatedItems < totalItems) {
-          return lastPage?.Items?.length * pages.length;
-        }
+  const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: [
+      "collection-items",
+      collection,
+      selectedGenres,
+      selectedYears,
+      selectedTags,
+      sortBy,
+      sortOrder,
+    ],
+    queryFn: fetchItems,
+    getNextPageParam: (lastPage, pages) => {
+      if (
+        !lastPage?.Items ||
+        !lastPage?.TotalRecordCount ||
+        lastPage?.TotalRecordCount === 0
+      )
         return undefined;
-      },
-      initialPageParam: 0,
-      enabled: !!api && !!user?.Id && !!collection,
-    });
+
+      const totalItems = lastPage.TotalRecordCount;
+      const accumulatedItems = pages.reduce(
+        (acc, curr) => acc + (curr?.Items?.length || 0),
+        0,
+      );
+
+      if (accumulatedItems < totalItems) {
+        return lastPage?.Items?.length * pages.length;
+      }
+      return undefined;
+    },
+    initialPageParam: 0,
+    enabled: !!api && !!user?.Id && !!collection,
+  });
 
   const flatData = useMemo(() => {
     return (
@@ -272,6 +195,7 @@ const page: React.FC = () => {
           }}
         >
           <ItemPoster item={item} />
+          {/* <MoviePoster item={item} /> */}
           <ItemCardText item={item} />
         </View>
       </TouchableItemRouter>
@@ -279,39 +203,10 @@ const page: React.FC = () => {
     [orientation],
   );
 
-  const renderTVItem = useCallback(
-    ({ item }: { item: BaseItemDto }) => {
-      const handlePress = () => {
-        const navTarget = getItemNavigation(item, "(home)");
-        router.push(navTarget as any);
-      };
-
-      return (
-        <View
-          style={{
-            marginRight: TV_ITEM_GAP,
-            marginBottom: TV_ITEM_GAP,
-            width: TV_POSTER_WIDTH,
-          }}
-        >
-          <TVFocusablePoster onPress={handlePress}>
-            {item.Type === "Movie" && <MoviePoster item={item} />}
-            {(item.Type === "Series" || item.Type === "Episode") && (
-              <SeriesPoster item={item} />
-            )}
-            {item.Type !== "Movie" &&
-              item.Type !== "Series" &&
-              item.Type !== "Episode" && <MoviePoster item={item} />}
-          </TVFocusablePoster>
-          <TVItemCardText item={item} />
-        </View>
-      );
-    },
-    [router],
-  );
-
   const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
 
+  const _insets = useSafeAreaInsets();
+
   const ListHeaderComponent = useCallback(
     () => (
       <FlatList
@@ -477,315 +372,48 @@ const page: React.FC = () => {
     ],
   );
 
-  // TV Filter options - with "All" option for clearable filters
-  const tvGenreFilterOptions = useMemo(
-    (): TVOptionItem<string>[] => [
-      {
-        label: t("library.filters.all"),
-        value: "__all__",
-        selected: selectedGenres.length === 0,
-      },
-      ...(tvGenreOptions || []).map((genre) => ({
-        label: genre,
-        value: genre,
-        selected: selectedGenres.includes(genre),
-      })),
-    ],
-    [tvGenreOptions, selectedGenres, t],
-  );
-
-  const tvYearFilterOptions = useMemo(
-    (): TVOptionItem<string>[] => [
-      {
-        label: t("library.filters.all"),
-        value: "__all__",
-        selected: selectedYears.length === 0,
-      },
-      ...(tvYearOptions || []).map((year) => ({
-        label: String(year),
-        value: String(year),
-        selected: selectedYears.includes(String(year)),
-      })),
-    ],
-    [tvYearOptions, selectedYears, t],
-  );
-
-  const tvTagFilterOptions = useMemo(
-    (): TVOptionItem<string>[] => [
-      {
-        label: t("library.filters.all"),
-        value: "__all__",
-        selected: selectedTags.length === 0,
-      },
-      ...(tvTagOptions || []).map((tag) => ({
-        label: tag,
-        value: tag,
-        selected: selectedTags.includes(tag),
-      })),
-    ],
-    [tvTagOptions, selectedTags, t],
-  );
-
-  const tvSortByOptions = useMemo(
-    (): TVOptionItem<SortByOption>[] =>
-      sortOptions.map((option) => ({
-        label: option.value,
-        value: option.key,
-        selected: sortBy[0] === option.key,
-      })),
-    [sortBy],
-  );
-
-  const tvSortOrderOptions = useMemo(
-    (): TVOptionItem<SortOrderOption>[] =>
-      sortOrderOptions.map((option) => ({
-        label: option.value,
-        value: option.key,
-        selected: sortOrder[0] === option.key,
-      })),
-    [sortOrder],
-  );
-
-  // TV Filter handlers using navigation-based modal
-  const handleShowGenreFilter = useCallback(() => {
-    showOptions({
-      title: t("library.filters.genres"),
-      options: tvGenreFilterOptions,
-      onSelect: (value: string) => {
-        if (value === "__all__") {
-          setSelectedGenres([]);
-        } else if (selectedGenres.includes(value)) {
-          setSelectedGenres(selectedGenres.filter((g) => g !== value));
-        } else {
-          setSelectedGenres([...selectedGenres, value]);
-        }
-      },
-    });
-  }, [showOptions, t, tvGenreFilterOptions, selectedGenres, setSelectedGenres]);
-
-  const handleShowYearFilter = useCallback(() => {
-    showOptions({
-      title: t("library.filters.years"),
-      options: tvYearFilterOptions,
-      onSelect: (value: string) => {
-        if (value === "__all__") {
-          setSelectedYears([]);
-        } else if (selectedYears.includes(value)) {
-          setSelectedYears(selectedYears.filter((y) => y !== value));
-        } else {
-          setSelectedYears([...selectedYears, value]);
-        }
-      },
-    });
-  }, [showOptions, t, tvYearFilterOptions, selectedYears, setSelectedYears]);
-
-  const handleShowTagFilter = useCallback(() => {
-    showOptions({
-      title: t("library.filters.tags"),
-      options: tvTagFilterOptions,
-      onSelect: (value: string) => {
-        if (value === "__all__") {
-          setSelectedTags([]);
-        } else if (selectedTags.includes(value)) {
-          setSelectedTags(selectedTags.filter((tag) => tag !== value));
-        } else {
-          setSelectedTags([...selectedTags, value]);
-        }
-      },
-    });
-  }, [showOptions, t, tvTagFilterOptions, selectedTags, setSelectedTags]);
-
-  const handleShowSortByFilter = useCallback(() => {
-    showOptions({
-      title: t("library.filters.sort_by"),
-      options: tvSortByOptions,
-      onSelect: (value: SortByOption) => {
-        setSortBy([value]);
-      },
-    });
-  }, [showOptions, t, tvSortByOptions, setSortBy]);
-
-  const handleShowSortOrderFilter = useCallback(() => {
-    showOptions({
-      title: t("library.filters.sort_order"),
-      options: tvSortOrderOptions,
-      onSelect: (value: SortOrderOption) => {
-        setSortOrder([value]);
-      },
-    });
-  }, [showOptions, t, tvSortOrderOptions, setSortOrder]);
-
-  // TV filter bar state
-  const hasActiveFilters =
-    selectedGenres.length > 0 ||
-    selectedYears.length > 0 ||
-    selectedTags.length > 0;
-
-  const resetAllFilters = useCallback(() => {
-    setSelectedGenres([]);
-    setSelectedYears([]);
-    setSelectedTags([]);
-  }, [setSelectedGenres, setSelectedYears, setSelectedTags]);
-
-  if (isLoading || isCollectionLoading) {
-    return (
-      <View className='w-full h-full flex items-center justify-center'>
-        <Loader />
-      </View>
-    );
-  }
-
   if (!collection) return null;
 
-  // Mobile return
-  if (!Platform.isTV) {
-    return (
-      <FlashList
-        ListEmptyComponent={
-          <View className='flex flex-col items-center justify-center h-full'>
-            <Text className='font-bold text-xl text-neutral-500'>
-              {t("search.no_results")}
-            </Text>
-          </View>
-        }
-        extraData={[
-          selectedGenres,
-          selectedYears,
-          selectedTags,
-          sortBy,
-          sortOrder,
-        ]}
-        contentInsetAdjustmentBehavior='automatic'
-        data={flatData}
-        renderItem={renderItem}
-        keyExtractor={keyExtractor}
-        numColumns={nrOfCols}
-        onEndReached={() => {
-          if (hasNextPage) {
-            fetchNextPage();
-          }
-        }}
-        onEndReachedThreshold={0.5}
-        ListHeaderComponent={ListHeaderComponent}
-        contentContainerStyle={{ paddingBottom: 24 }}
-        ItemSeparatorComponent={() => (
-          <View
-            style={{
-              width: 10,
-              height: 10,
-            }}
-          />
-        )}
-      />
-    );
-  }
-
-  // TV return with filter bar
   return (
-    <View style={{ flex: 1 }}>
-      {/* Filter bar */}
-      <View
-        style={{
-          flexDirection: "row",
-          flexWrap: "nowrap",
-          marginTop: insets.top + 100,
-          paddingBottom: 8,
-          paddingHorizontal: TV_SCALE_PADDING,
-          gap: 12,
-        }}
-      >
-        {hasActiveFilters && (
-          <TVFilterButton
-            label=''
-            value={t("library.filters.reset")}
-            onPress={resetAllFilters}
-            hasActiveFilter
-          />
-        )}
-        <TVFilterButton
-          label={t("library.filters.genres")}
-          value={
-            selectedGenres.length > 0
-              ? `${selectedGenres.length} selected`
-              : t("library.filters.all")
-          }
-          onPress={handleShowGenreFilter}
-          hasTVPreferredFocus={!hasActiveFilters}
-          hasActiveFilter={selectedGenres.length > 0}
-        />
-        <TVFilterButton
-          label={t("library.filters.years")}
-          value={
-            selectedYears.length > 0
-              ? `${selectedYears.length} selected`
-              : t("library.filters.all")
-          }
-          onPress={handleShowYearFilter}
-          hasActiveFilter={selectedYears.length > 0}
-        />
-        <TVFilterButton
-          label={t("library.filters.tags")}
-          value={
-            selectedTags.length > 0
-              ? `${selectedTags.length} selected`
-              : t("library.filters.all")
-          }
-          onPress={handleShowTagFilter}
-          hasActiveFilter={selectedTags.length > 0}
-        />
-        <TVFilterButton
-          label={t("library.filters.sort_by")}
-          value={sortOptions.find((o) => o.key === sortBy[0])?.value || ""}
-          onPress={handleShowSortByFilter}
-        />
-        <TVFilterButton
-          label={t("library.filters.sort_order")}
-          value={
-            sortOrderOptions.find((o) => o.key === sortOrder[0])?.value || ""
-          }
-          onPress={handleShowSortOrderFilter}
-        />
-      </View>
-
-      {/* Grid */}
-      <FlatList
-        key={`${orientation}-${nrOfCols}`}
-        ListEmptyComponent={
-          <View className='flex flex-col items-center justify-center h-full'>
-            <Text className='font-bold text-xl text-neutral-500'>
-              {t("search.no_results")}
-            </Text>
-          </View>
+    <FlashList
+      ListEmptyComponent={
+        <View className='flex flex-col items-center justify-center h-full'>
+          <Text className='font-bold text-xl text-neutral-500'>
+            {t("search.no_results")}
+          </Text>
+        </View>
+      }
+      extraData={[
+        selectedGenres,
+        selectedYears,
+        selectedTags,
+        sortBy,
+        sortOrder,
+      ]}
+      contentInsetAdjustmentBehavior='automatic'
+      data={flatData}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      numColumns={
+        orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5
+      }
+      onEndReached={() => {
+        if (hasNextPage) {
+          fetchNextPage();
         }
-        contentInsetAdjustmentBehavior='automatic'
-        data={flatData}
-        renderItem={renderTVItem}
-        extraData={[orientation, nrOfCols]}
-        keyExtractor={keyExtractor}
-        numColumns={nrOfCols}
-        removeClippedSubviews={false}
-        onEndReached={() => {
-          if (hasNextPage) {
-            fetchNextPage();
-          }
-        }}
-        onEndReachedThreshold={1}
-        contentContainerStyle={{
-          paddingBottom: 24,
-          paddingLeft: TV_SCALE_PADDING,
-          paddingRight: TV_SCALE_PADDING,
-          paddingTop: 20,
-        }}
-        ItemSeparatorComponent={() => (
-          <View
-            style={{
-              width: 10,
-              height: 10,
-            }}
-          />
-        )}
-      />
-    </View>
+      }}
+      onEndReachedThreshold={0.5}
+      ListHeaderComponent={ListHeaderComponent}
+      contentContainerStyle={{ paddingBottom: 24 }}
+      ItemSeparatorComponent={() => (
+        <View
+          style={{
+            width: 10,
+            height: 10,
+          }}
+        />
+      )}
+    />
   );
 };
 

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

@@ -3,8 +3,9 @@ import { useLocalSearchParams } from "expo-router";
 import type React from "react";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
+import { View } from "react-native";
 import Animated, {
+  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -12,11 +13,6 @@ import Animated, {
 import { Text } from "@/components/common/Text";
 import { ItemContent } from "@/components/ItemContent";
 import { useItemQuery } from "@/hooks/useItemQuery";
-import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
-
-const ItemContentSkeletonTV = Platform.isTV
-  ? require("@/components/ItemContentSkeleton.tv").ItemContentSkeletonTV
-  : null;
 
 const Page: React.FC = () => {
   const { id } = useLocalSearchParams() as { id: string };
@@ -27,11 +23,7 @@ const Page: React.FC = () => {
 
   // Exclude MediaSources/MediaStreams from initial fetch for faster loading
   // (especially important for plugins like Gelato)
-  const {
-    data: item,
-    isError,
-    isLoading,
-  } = useItemQuery(id, isOffline, undefined, [
+  const { data: item, isError } = useItemQuery(id, isOffline, undefined, [
     ItemFields.MediaSources,
     ItemFields.MediaSourceCount,
     ItemFields.MediaStreams,
@@ -47,14 +39,33 @@ const Page: React.FC = () => {
     };
   });
 
-  // Fast fade out when item loads (no setTimeout delay)
+  const fadeOut = (callback: any) => {
+    setTimeout(() => {
+      opacity.value = withTiming(0, { duration: 500 }, (finished) => {
+        if (finished) {
+          runOnJS(callback)();
+        }
+      });
+    }, 100);
+  };
+
+  const fadeIn = (callback: any) => {
+    setTimeout(() => {
+      opacity.value = withTiming(1, { duration: 500 }, (finished) => {
+        if (finished) {
+          runOnJS(callback)();
+        }
+      });
+    }, 100);
+  };
+
   useEffect(() => {
     if (item) {
-      opacity.value = withTiming(0, { duration: 150 });
+      fadeOut(() => {});
     } else {
-      opacity.value = withTiming(1, { duration: 150 });
+      fadeIn(() => {});
     }
-  }, [item, opacity]);
+  }, [item]);
 
   if (isError)
     return (
@@ -64,50 +75,39 @@ const Page: React.FC = () => {
     );
 
   return (
-    <OfflineModeProvider isOffline={isOffline}>
-      <View className='flex flex-1 relative'>
-        {/* Always render ItemContent - it handles loading state internally on TV */}
+    <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}
-          isLoading={isLoading}
         />
-
-        {/* Skeleton overlay - fades out when content loads */}
-        {!item && (
-          <Animated.View
-            pointerEvents={"none"}
-            style={[animatedStyle]}
-            className='absolute top-0 left-0 flex flex-col items-start h-screen w-screen z-50 bg-black'
-          >
-            {Platform.isTV && ItemContentSkeletonTV ? (
-              <ItemContentSkeletonTV />
-            ) : (
-              <View style={{ paddingHorizontal: 16, width: "100%" }}>
-                <View
-                  style={{
-                    height: 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' />
-              </View>
-            )}
-          </Animated.View>
-        )}
-      </View>
-    </OfflineModeProvider>
+      )}
+    </View>
   );
 };
 

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

@@ -8,7 +8,7 @@ import {
 } from "@gorhom/bottom-sheet";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation } from "expo-router";
+import { useLocalSearchParams, useNavigation, useRouter } from "expo-router";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -21,14 +21,12 @@ import { GenreTags } from "@/components/GenreTags";
 import Cast from "@/components/jellyseerr/Cast";
 import DetailFacts from "@/components/jellyseerr/DetailFacts";
 import RequestModal from "@/components/jellyseerr/RequestModal";
-import { TVJellyseerrPage } from "@/components/jellyseerr/tv";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
 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";
@@ -53,8 +51,7 @@ import type {
 } from "@/utils/jellyseerr/server/models/Search";
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 
-// Mobile page component
-const MobilePage: React.FC = () => {
+const Page: React.FC = () => {
   const insets = useSafeAreaInsets();
   const params = useLocalSearchParams();
   const { t } = useTranslation();
@@ -544,12 +541,4 @@ const MobilePage: React.FC = () => {
   );
 };
 
-// Platform-conditional page component
-const Page: React.FC = () => {
-  if (Platform.isTV) {
-    return <TVJellyseerrPage />;
-  }
-  return <MobilePage />;
-};
-
 export default Page;

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/artist/[artistId].tsx

@@ -227,7 +227,7 @@ export default function ArtistDetailScreen() {
           {section.type === "albums" ? (
             <HorizontalScroll
               data={section.data}
-              height={178}
+              height={200}
               keyExtractor={(item) => item.Id!}
               renderItem={(item) => <MusicAlbumCard album={item} />}
             />

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx

@@ -8,7 +8,12 @@ import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import {
+  ActivityIndicator,
+  Dimensions,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
@@ -25,7 +30,8 @@ import { getAudioStreamUrl } from "@/utils/jellyfin/audio/getAudioStreamUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { runtimeTicksToMinutes } from "@/utils/time";
 
-const ARTWORK_SIZE = 120;
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+const ARTWORK_SIZE = SCREEN_WIDTH * 0.5;
 
 export default function PlaylistDetailScreen() {
   const { playlistId } = useLocalSearchParams<{ playlistId: string }>();

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

@@ -6,7 +6,7 @@ import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
+import { View } from "react-native";
 import { InfiniteHorizontalScroll } from "@/components/common/InfiniteHorizontalScroll";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
@@ -15,7 +15,6 @@ import { Loader } from "@/components/Loader";
 import { MoviesTitleHeader } from "@/components/movies/MoviesTitleHeader";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
-import { TVActorPage } from "@/components/persons/TVActorPage";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
@@ -24,16 +23,6 @@ import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 const page: React.FC = () => {
   const local = useLocalSearchParams();
   const { personId } = local as { personId: string };
-
-  // Render TV-optimized page on TV platforms
-  if (Platform.isTV) {
-    return <TVActorPage personId={personId} />;
-  }
-
-  return <MobileActorPage personId={personId} />;
-};
-
-const MobileActorPage: React.FC<{ personId: string }> = ({ personId }) => {
   const { t } = useTranslation();
 
   const [api] = useAtom(apiAtom);

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

@@ -14,127 +14,86 @@ import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { NextUp } from "@/components/series/NextUp";
 import { SeasonPicker } from "@/components/series/SeasonPicker";
 import { SeriesHeader } from "@/components/series/SeriesHeader";
-import { TVSeriesPage } from "@/components/series/TVSeriesPage";
-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,
-    offline: offlineParam,
-  } = params as {
+  const { id: seriesId, seasonIndex } = 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, isOffline, downloadedItems.length],
-    queryFn: async () => {
-      if (isOffline) {
-        return buildOfflineSeriesFromEpisodes(getDownloadedItems(), seriesId);
-      }
-      return await getUserItemData({
+    queryKey: ["series", seriesId],
+    queryFn: async () =>
+      await getUserItemData({
         api,
         userId: user?.Id,
         itemId: seriesId,
-      });
-    },
-    staleTime: isOffline ? Infinity : 60 * 1000,
-    refetchInterval: !isOffline && Platform.isTV ? 60 * 1000 : undefined,
-    enabled: isOffline || (!!api && !!user?.Id),
+      }),
+    staleTime: 60 * 1000,
   });
 
-  // For offline mode, use stored base64 image
-  const base64Image = useMemo(() => {
-    if (isOffline) {
-      return storage.getString(seriesId);
-    }
-    return null;
-  }, [isOffline, seriesId]);
+  const backdropUrl = useMemo(
+    () =>
+      getBackdropUrl({
+        api,
+        item,
+        quality: 90,
+        width: 1000,
+      }),
+    [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 logoUrl = useMemo(
+    () =>
+      getLogoImageUrlById({
+        api,
+        item,
+      }),
+    [item],
+  );
 
   const { data: allEpisodes, isLoading } = useQuery({
-    queryKey: ["AllEpisodes", seriesId, isOffline, downloadedItems.length],
+    queryKey: ["AllEpisodes", item?.Id],
     queryFn: async () => {
-      if (isOffline) {
-        return getDownloadedEpisodesForSeries(getDownloadedItems(), seriesId);
-      }
-      if (!api || !user?.Id) return [];
+      if (!api || !user?.Id || !item?.Id) return [];
 
       const res = await getTvShowsApi(api).getEpisodes({
-        seriesId: seriesId,
+        seriesId: item.Id,
         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: isOffline ? Infinity : 60 * 1000,
-    refetchInterval: !isOffline && Platform.isTV ? 60 * 1000 : undefined,
-    enabled: isOffline || (!!api && !!user?.Id),
+    staleTime: 60,
+    enabled: !!api && !!user?.Id && !!item?.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 && (
@@ -155,77 +114,49 @@ const page: React.FC = () => {
               />
             )}
           </View>
-        ) : null,
+        ),
     });
-  }, [allEpisodes, isLoading, item, isOffline]);
+  }, [allEpisodes, isLoading, item]);
 
-  // For offline mode, we can show the page even without backdropUrl
-  if (!item || (!isOffline && !backdropUrl)) return null;
-
-  // TV version
-  if (Platform.isTV) {
-    return (
-      <OfflineModeProvider isOffline={isOffline}>
-        <TVSeriesPage
-          item={item}
-          allEpisodes={allEpisodes}
-          isLoading={isLoading}
-        />
-      </OfflineModeProvider>
-    );
-  }
+  if (!item || !backdropUrl) return null;
 
   return (
-    <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)} />
+    <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} />
         </View>
-      </ParallaxScrollView>
-    </OfflineModeProvider>
+        <SeasonPicker item={item} initialSeasonIndex={Number(seasonIndex)} />
+      </View>
+    </ParallaxScrollView>
   );
 };
 

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

@@ -15,37 +15,16 @@ import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  useWindowDimensions,
-  View,
-} from "react-native";
+import { FlatList, useWindowDimensions, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
-import {
-  getItemNavigation,
-  TouchableItemRouter,
-} from "@/components/common/TouchableItemRouter";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
 import { ItemPoster } from "@/components/posters/ItemPoster";
-import MoviePoster, {
-  TV_POSTER_WIDTH,
-} from "@/components/posters/MoviePoster.tv";
-import SeriesPoster from "@/components/posters/SeriesPoster.tv";
-import {
-  TVFilterButton,
-  TVFocusablePoster,
-  TVItemCardText,
-} from "@/components/tv";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import useRouter from "@/hooks/useAppRouter";
 import { useOrientation } from "@/hooks/useOrientation";
-import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
@@ -69,22 +48,11 @@ import {
   yearFilterAtom,
 } from "@/utils/atoms/filters";
 import { useSettings } from "@/utils/atoms/settings";
-import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
-
-const TV_ITEM_GAP = 20;
-const TV_HORIZONTAL_PADDING = 60;
-const _TV_SCALE_PADDING = 20;
 
 const Page = () => {
-  const searchParams = useLocalSearchParams() as {
-    libraryId: string;
-    sortBy?: string;
-    sortOrder?: string;
-    filterBy?: string;
-  };
-  const { libraryId } = searchParams;
+  const searchParams = useLocalSearchParams();
+  const { libraryId } = searchParams as { libraryId: string };
 
-  const typography = useScaledTVTypography();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const { width: screenWidth } = useWindowDimensions();
@@ -106,77 +74,25 @@ const Page = () => {
   const { orientation } = useOrientation();
 
   const { t } = useTranslation();
-  const router = useRouter();
-  const { showOptions } = useTVOptionModal();
-
-  // TV Filter queries
-  const { data: tvGenreOptions } = useQuery({
-    queryKey: ["filters", "Genres", "tvGenreFilter", libraryId],
-    queryFn: async () => {
-      if (!api) return [];
-      const response = await getFilterApi(api).getQueryFiltersLegacy({
-        userId: user?.Id,
-        parentId: libraryId,
-      });
-      return response.data.Genres || [];
-    },
-    enabled: Platform.isTV && !!api && !!user?.Id && !!libraryId,
-  });
-
-  const { data: tvYearOptions } = useQuery({
-    queryKey: ["filters", "Years", "tvYearFilter", libraryId],
-    queryFn: async () => {
-      if (!api) return [];
-      const response = await getFilterApi(api).getQueryFiltersLegacy({
-        userId: user?.Id,
-        parentId: libraryId,
-      });
-      return response.data.Years || [];
-    },
-    enabled: Platform.isTV && !!api && !!user?.Id && !!libraryId,
-  });
-
-  const { data: tvTagOptions } = useQuery({
-    queryKey: ["filters", "Tags", "tvTagFilter", libraryId],
-    queryFn: async () => {
-      if (!api) return [];
-      const response = await getFilterApi(api).getQueryFiltersLegacy({
-        userId: user?.Id,
-        parentId: libraryId,
-      });
-      return response.data.Tags || [];
-    },
-    enabled: Platform.isTV && !!api && !!user?.Id && !!libraryId,
-  });
 
   useEffect(() => {
-    // Check for URL params first (from "See All" navigation)
-    const urlSortBy = searchParams.sortBy as SortByOption | undefined;
-    const urlSortOrder = searchParams.sortOrder as SortOrderOption | undefined;
-    const urlFilterBy = searchParams.filterBy as FilterByOption | undefined;
-
-    // Apply sortOrder: URL param > saved preference > default
-    if (urlSortOrder && Object.values(SortOrderOption).includes(urlSortOrder)) {
-      _setSortOrder([urlSortOrder]);
+    const sop = getSortOrderPreference(libraryId, sortOrderPreference);
+    if (sop) {
+      _setSortOrder([sop]);
     } else {
-      const sop = getSortOrderPreference(libraryId, sortOrderPreference);
-      _setSortOrder([sop || SortOrderOption.Ascending]);
+      _setSortOrder([SortOrderOption.Ascending]);
     }
-
-    // Apply sortBy: URL param > saved preference > default
-    if (urlSortBy && Object.values(SortByOption).includes(urlSortBy)) {
-      _setSortBy([urlSortBy]);
+    const obp = getSortByPreference(libraryId, sortByPreference);
+    if (obp) {
+      _setSortBy([obp]);
     } else {
-      const obp = getSortByPreference(libraryId, sortByPreference);
-      _setSortBy([obp || SortByOption.SortName]);
+      _setSortBy([SortByOption.SortName]);
     }
-
-    // Apply filterBy: URL param > saved preference > default
-    if (urlFilterBy && Object.values(FilterByOption).includes(urlFilterBy)) {
-      _setFilterBy([urlFilterBy]);
+    const fp = getFilterByPreference(libraryId, filterByPreference);
+    if (fp) {
+      _setFilterBy([fp]);
     } else {
-      const fp = getFilterByPreference(libraryId, filterByPreference);
-      _setFilterBy(fp ? [fp] : []);
+      _setFilterBy([]);
     }
   }, [
     libraryId,
@@ -186,9 +102,6 @@ const Page = () => {
     _setSortBy,
     filterByPreference,
     _setFilterBy,
-    searchParams.sortBy,
-    searchParams.sortOrder,
-    searchParams.filterBy,
   ]);
 
   const setSortBy = useCallback(
@@ -231,10 +144,6 @@ const Page = () => {
   );
 
   const nrOfCols = useMemo(() => {
-    if (Platform.isTV) {
-      // TV uses flexWrap, so nrOfCols is just for mobile
-      return 1;
-    }
     if (screenWidth < 300) return 2;
     if (screenWidth < 500) return 3;
     if (screenWidth < 800) return 5;
@@ -282,10 +191,6 @@ 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({
@@ -395,37 +300,7 @@ const Page = () => {
         </View>
       </TouchableItemRouter>
     ),
-    [orientation, nrOfCols],
-  );
-
-  const renderTVItem = useCallback(
-    (item: BaseItemDto) => {
-      const handlePress = () => {
-        const navTarget = getItemNavigation(item, "(libraries)");
-        router.push(navTarget as any);
-      };
-
-      return (
-        <View
-          key={item.Id}
-          style={{
-            width: TV_POSTER_WIDTH,
-          }}
-        >
-          <TVFocusablePoster onPress={handlePress}>
-            {item.Type === "Movie" && <MoviePoster item={item} />}
-            {(item.Type === "Series" || item.Type === "Episode") && (
-              <SeriesPoster item={item} />
-            )}
-            {item.Type !== "Movie" &&
-              item.Type !== "Series" &&
-              item.Type !== "Episode" && <MoviePoster item={item} />}
-          </TVFocusablePoster>
-          <TVItemCardText item={item} />
-        </View>
-      );
-    },
-    [router],
+    [orientation],
   );
 
   const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
@@ -612,188 +487,6 @@ const Page = () => {
     ],
   );
 
-  // TV Filter bar header
-  const hasActiveFilters =
-    selectedGenres.length > 0 ||
-    selectedYears.length > 0 ||
-    selectedTags.length > 0 ||
-    filterBy.length > 0;
-
-  const resetAllFilters = useCallback(() => {
-    setSelectedGenres([]);
-    setSelectedYears([]);
-    setSelectedTags([]);
-    _setFilterBy([]);
-  }, [setSelectedGenres, setSelectedYears, setSelectedTags, _setFilterBy]);
-
-  // TV Filter options - with "All" option for clearable filters
-  const tvGenreFilterOptions = useMemo(
-    (): TVOptionItem<string>[] => [
-      {
-        label: t("library.filters.all"),
-        value: "__all__",
-        selected: selectedGenres.length === 0,
-      },
-      ...(tvGenreOptions || []).map((genre) => ({
-        label: genre,
-        value: genre,
-        selected: selectedGenres.includes(genre),
-      })),
-    ],
-    [tvGenreOptions, selectedGenres, t],
-  );
-
-  const tvYearFilterOptions = useMemo(
-    (): TVOptionItem<string>[] => [
-      {
-        label: t("library.filters.all"),
-        value: "__all__",
-        selected: selectedYears.length === 0,
-      },
-      ...(tvYearOptions || []).map((year) => ({
-        label: String(year),
-        value: String(year),
-        selected: selectedYears.includes(String(year)),
-      })),
-    ],
-    [tvYearOptions, selectedYears, t],
-  );
-
-  const tvTagFilterOptions = useMemo(
-    (): TVOptionItem<string>[] => [
-      {
-        label: t("library.filters.all"),
-        value: "__all__",
-        selected: selectedTags.length === 0,
-      },
-      ...(tvTagOptions || []).map((tag) => ({
-        label: tag,
-        value: tag,
-        selected: selectedTags.includes(tag),
-      })),
-    ],
-    [tvTagOptions, selectedTags, t],
-  );
-
-  const tvSortByOptions = useMemo(
-    (): TVOptionItem<SortByOption>[] =>
-      sortOptions.map((option) => ({
-        label: option.value,
-        value: option.key,
-        selected: sortBy[0] === option.key,
-      })),
-    [sortBy],
-  );
-
-  const tvSortOrderOptions = useMemo(
-    (): TVOptionItem<SortOrderOption>[] =>
-      sortOrderOptions.map((option) => ({
-        label: option.value,
-        value: option.key,
-        selected: sortOrder[0] === option.key,
-      })),
-    [sortOrder],
-  );
-
-  const tvFilterByOptions = useMemo(
-    (): TVOptionItem<string>[] => [
-      {
-        label: t("library.filters.all"),
-        value: "__all__",
-        selected: filterBy.length === 0,
-      },
-      ...generalFilters.map((option) => ({
-        label: option.value,
-        value: option.key,
-        selected: filterBy.includes(option.key),
-      })),
-    ],
-    [filterBy, generalFilters, t],
-  );
-
-  // TV Filter handlers using navigation-based modal
-  const handleShowGenreFilter = useCallback(() => {
-    showOptions({
-      title: t("library.filters.genres"),
-      options: tvGenreFilterOptions,
-      onSelect: (value: string) => {
-        if (value === "__all__") {
-          setSelectedGenres([]);
-        } else if (selectedGenres.includes(value)) {
-          setSelectedGenres(selectedGenres.filter((g) => g !== value));
-        } else {
-          setSelectedGenres([...selectedGenres, value]);
-        }
-      },
-    });
-  }, [showOptions, t, tvGenreFilterOptions, selectedGenres, setSelectedGenres]);
-
-  const handleShowYearFilter = useCallback(() => {
-    showOptions({
-      title: t("library.filters.years"),
-      options: tvYearFilterOptions,
-      onSelect: (value: string) => {
-        if (value === "__all__") {
-          setSelectedYears([]);
-        } else if (selectedYears.includes(value)) {
-          setSelectedYears(selectedYears.filter((y) => y !== value));
-        } else {
-          setSelectedYears([...selectedYears, value]);
-        }
-      },
-    });
-  }, [showOptions, t, tvYearFilterOptions, selectedYears, setSelectedYears]);
-
-  const handleShowTagFilter = useCallback(() => {
-    showOptions({
-      title: t("library.filters.tags"),
-      options: tvTagFilterOptions,
-      onSelect: (value: string) => {
-        if (value === "__all__") {
-          setSelectedTags([]);
-        } else if (selectedTags.includes(value)) {
-          setSelectedTags(selectedTags.filter((tag) => tag !== value));
-        } else {
-          setSelectedTags([...selectedTags, value]);
-        }
-      },
-    });
-  }, [showOptions, t, tvTagFilterOptions, selectedTags, setSelectedTags]);
-
-  const handleShowSortByFilter = useCallback(() => {
-    showOptions({
-      title: t("library.filters.sort_by"),
-      options: tvSortByOptions,
-      onSelect: (value: SortByOption) => {
-        setSortBy([value]);
-      },
-    });
-  }, [showOptions, t, tvSortByOptions, setSortBy]);
-
-  const handleShowSortOrderFilter = useCallback(() => {
-    showOptions({
-      title: t("library.filters.sort_order"),
-      options: tvSortOrderOptions,
-      onSelect: (value: SortOrderOption) => {
-        setSortOrder([value]);
-      },
-    });
-  }, [showOptions, t, tvSortOrderOptions, setSortOrder]);
-
-  const handleShowFilterByFilter = useCallback(() => {
-    showOptions({
-      title: t("library.filters.filter_by"),
-      options: tvFilterByOptions,
-      onSelect: (value: string) => {
-        if (value === "__all__") {
-          _setFilterBy([]);
-        } else {
-          setFilter([value as FilterByOption]);
-        }
-      },
-    });
-  }, [showOptions, t, tvFilterByOptions, setFilter, _setFilterBy]);
-
   const insets = useSafeAreaInsets();
 
   if (isLoading || isLibraryLoading)
@@ -803,176 +496,43 @@ const Page = () => {
       </View>
     );
 
-  // Mobile return
-  if (!Platform.isTV) {
-    return (
-      <FlashList
-        key={orientation}
-        ListEmptyComponent={
-          <View className='flex flex-col items-center justify-center h-full'>
-            <Text className='font-bold text-xl text-neutral-500'>
-              {t("library.no_results")}
-            </Text>
-          </View>
-        }
-        contentInsetAdjustmentBehavior='automatic'
-        data={flatData}
-        renderItem={renderItem}
-        extraData={[orientation, nrOfCols]}
-        keyExtractor={keyExtractor}
-        numColumns={nrOfCols}
-        onEndReached={() => {
-          if (hasNextPage) {
-            fetchNextPage();
-          }
-        }}
-        onEndReachedThreshold={1}
-        ListHeaderComponent={ListHeaderComponent}
-        contentContainerStyle={{
-          paddingBottom: 24,
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
-        }}
-        ItemSeparatorComponent={() => (
-          <View
-            style={{
-              width: 10,
-              height: 10,
-            }}
-          />
-        )}
-      />
-    );
-  }
-
-  // TV return with filter bar
   return (
-    <ScrollView
-      style={{ flex: 1 }}
-      contentContainerStyle={{
-        paddingTop: insets.top + 100,
-        paddingBottom: insets.bottom + 60,
-        paddingHorizontal: insets.left + TV_HORIZONTAL_PADDING,
-      }}
-      onScroll={({ nativeEvent }) => {
-        // Load more when near bottom
-        const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
-        const isNearBottom =
-          layoutMeasurement.height + contentOffset.y >=
-          contentSize.height - 500;
-        if (isNearBottom && hasNextPage && !isFetching) {
-          fetchNextPage();
-        }
-      }}
-      scrollEventThrottle={400}
-    >
-      {/* Filter bar */}
-      <View
-        style={{
-          flexDirection: "row",
-          flexWrap: "nowrap",
-          justifyContent: "center",
-          paddingBottom: 24,
-          gap: 12,
-        }}
-      >
-        {hasActiveFilters && (
-          <TVFilterButton
-            label=''
-            value={t("library.filters.reset")}
-            onPress={resetAllFilters}
-            hasActiveFilter
-          />
-        )}
-        <TVFilterButton
-          label={t("library.filters.genres")}
-          value={
-            selectedGenres.length > 0
-              ? `${selectedGenres.length} selected`
-              : t("library.filters.all")
-          }
-          onPress={handleShowGenreFilter}
-          hasTVPreferredFocus={!hasActiveFilters}
-          hasActiveFilter={selectedGenres.length > 0}
-        />
-        <TVFilterButton
-          label={t("library.filters.years")}
-          value={
-            selectedYears.length > 0
-              ? `${selectedYears.length} selected`
-              : t("library.filters.all")
-          }
-          onPress={handleShowYearFilter}
-          hasActiveFilter={selectedYears.length > 0}
-        />
-        <TVFilterButton
-          label={t("library.filters.tags")}
-          value={
-            selectedTags.length > 0
-              ? `${selectedTags.length} selected`
-              : t("library.filters.all")
-          }
-          onPress={handleShowTagFilter}
-          hasActiveFilter={selectedTags.length > 0}
-        />
-        <TVFilterButton
-          label={t("library.filters.sort_by")}
-          value={sortOptions.find((o) => o.key === sortBy[0])?.value || ""}
-          onPress={handleShowSortByFilter}
-        />
-        <TVFilterButton
-          label={t("library.filters.sort_order")}
-          value={
-            sortOrderOptions.find((o) => o.key === sortOrder[0])?.value || ""
-          }
-          onPress={handleShowSortOrderFilter}
-        />
-        <TVFilterButton
-          label={t("library.filters.filter_by")}
-          value={
-            filterBy.length > 0
-              ? generalFilters.find((o) => o.key === filterBy[0])?.value || ""
-              : t("library.filters.all")
-          }
-          onPress={handleShowFilterByFilter}
-          hasActiveFilter={filterBy.length > 0}
-        />
-      </View>
-
-      {/* Grid with flexWrap */}
-      {flatData.length === 0 ? (
-        <View
-          style={{
-            flex: 1,
-            justifyContent: "center",
-            alignItems: "center",
-            paddingTop: 100,
-          }}
-        >
-          <Text style={{ fontSize: typography.body, color: "#737373" }}>
+    <FlashList
+      key={orientation}
+      ListEmptyComponent={
+        <View className='flex flex-col items-center justify-center h-full'>
+          <Text className='font-bold text-xl text-neutral-500'>
             {t("library.no_results")}
           </Text>
         </View>
-      ) : (
+      }
+      contentInsetAdjustmentBehavior='automatic'
+      data={flatData}
+      renderItem={renderItem}
+      extraData={[orientation, nrOfCols]}
+      keyExtractor={keyExtractor}
+      numColumns={nrOfCols}
+      onEndReached={() => {
+        if (hasNextPage) {
+          fetchNextPage();
+        }
+      }}
+      onEndReachedThreshold={1}
+      ListHeaderComponent={ListHeaderComponent}
+      contentContainerStyle={{
+        paddingBottom: 24,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+      ItemSeparatorComponent={() => (
         <View
           style={{
-            flexDirection: "row",
-            flexWrap: "wrap",
-            justifyContent: "center",
-            gap: TV_ITEM_GAP,
+            width: 10,
+            height: 10,
           }}
-        >
-          {flatData.map((item) => renderTVItem(item))}
-        </View>
+        />
       )}
-
-      {/* Loading indicator */}
-      {isFetching && (
-        <View style={{ paddingVertical: 20 }}>
-          <Loader />
-        </View>
-      )}
-    </ScrollView>
+    />
   );
 };
 

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

@@ -1,11 +1,109 @@
-import { Platform } from "react-native";
-import { Libraries } from "@/components/library/Libraries";
-import { TVLibraries } from "@/components/library/TVLibraries";
+import {
+  getUserLibraryApi,
+  getUserViewsApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { LibraryItemCard } from "@/components/library/LibraryItemCard";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
 
-export default function LibrariesPage() {
-  if (Platform.isTV) {
-    return <TVLibraries />;
-  }
+export default function index() {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const queryClient = useQueryClient();
+  const { settings } = useSettings();
 
-  return <Libraries />;
+  const { t } = useTranslation();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["user-views", user?.Id],
+    queryFn: async () => {
+      const response = await getUserViewsApi(api!).getUserViews({
+        userId: user?.Id,
+      });
+
+      return response.data.Items || null;
+    },
+    staleTime: 60,
+  });
+
+  const libraries = useMemo(
+    () =>
+      data
+        ?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!))
+        .filter((l) => l.CollectionType !== "books") || [],
+    [data, settings?.hiddenLibraries],
+  );
+
+  useEffect(() => {
+    for (const item of data || []) {
+      queryClient.prefetchQuery({
+        queryKey: ["library", item.Id],
+        queryFn: async () => {
+          if (!item.Id || !user?.Id || !api) return null;
+          const response = await getUserLibraryApi(api).getItem({
+            itemId: item.Id,
+            userId: user?.Id,
+          });
+          return response.data;
+        },
+        staleTime: 60 * 1000,
+      });
+    }
+  }, [data]);
+
+  const insets = useSafeAreaInsets();
+
+  if (isLoading)
+    return (
+      <View className='justify-center items-center h-full'>
+        <Loader />
+      </View>
+    );
+
+  if (!libraries)
+    return (
+      <View className='h-full w-full flex justify-center items-center'>
+        <Text className='text-lg text-neutral-500'>
+          {t("library.no_libraries_found")}
+        </Text>
+      </View>
+    );
+
+  return (
+    <FlashList
+      extraData={settings}
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingTop: Platform.OS === "android" ? 17 : 0,
+        paddingHorizontal: settings?.libraryOptions?.display === "row" ? 0 : 17,
+        paddingBottom: 150,
+        paddingLeft: insets.left + 17,
+        paddingRight: insets.right + 17,
+      }}
+      data={libraries}
+      renderItem={({ item }) => <LibraryItemCard library={item} />}
+      keyExtractor={(item) => item.Id || ""}
+      ItemSeparatorComponent={() =>
+        settings?.libraryOptions?.display === "row" ? (
+          <View
+            style={{
+              height: StyleSheet.hairlineWidth,
+            }}
+            className='bg-neutral-800 mx-2 my-4'
+          />
+        ) : (
+          <View className='h-4' />
+        )
+      }
+    />
+  );
 }

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

@@ -13,7 +13,8 @@ import { useTranslation } from "react-i18next";
 const { Navigator } = createMaterialTopTabNavigator();
 
 const TAB_LABEL_FONT_SIZE = 13;
-const TAB_ITEM_HORIZONTAL_PADDING = 12;
+const TAB_ITEM_HORIZONTAL_PADDING = 18;
+const TAB_ITEM_MIN_WIDTH = 110;
 
 export const Tab = withLayoutContext<
   MaterialTopTabNavigationOptions,
@@ -47,6 +48,7 @@ const Layout = () => {
           },
           tabBarItemStyle: {
             width: "auto",
+            minWidth: TAB_ITEM_MIN_WIDTH,
             paddingHorizontal: TAB_ITEM_HORIZONTAL_PADDING,
           },
           tabBarStyle: { backgroundColor: "black" },

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

@@ -6,11 +6,11 @@ import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { RefreshControl, View } from "react-native";
+import { Dimensions, RefreshControl, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
-import { MusicAlbumRowCard } from "@/components/music/MusicAlbumRowCard";
+import { MusicAlbumCard } from "@/components/music/MusicAlbumCard";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 
 const ITEMS_PER_PAGE = 40;
@@ -65,6 +65,13 @@ export default function AlbumsScreen() {
     return data?.pages.flatMap((page) => page.items) || [];
   }, [data]);
 
+  const numColumns = 2;
+  const screenWidth = Dimensions.get("window").width;
+  const gap = 12;
+  const padding = 16;
+  const itemWidth =
+    (screenWidth - padding * 2 - gap * (numColumns - 1)) / numColumns;
+
   const handleEndReached = useCallback(() => {
     if (hasNextPage && !isFetchingNextPage) {
       fetchNextPage();
@@ -91,10 +98,11 @@ export default function AlbumsScreen() {
     <View className='flex-1 bg-black'>
       <FlashList
         data={albums}
+        numColumns={numColumns}
         contentContainerStyle={{
           paddingBottom: insets.bottom + 100,
-          paddingTop: 8,
-          paddingHorizontal: 16,
+          paddingTop: 16,
+          paddingHorizontal: padding,
         }}
         refreshControl={
           <RefreshControl
@@ -105,7 +113,17 @@ export default function AlbumsScreen() {
         }
         onEndReached={handleEndReached}
         onEndReachedThreshold={0.5}
-        renderItem={({ item }) => <MusicAlbumRowCard album={item} />}
+        renderItem={({ item, index }) => (
+          <View
+            style={{
+              width: itemWidth,
+              marginRight: index % numColumns === 0 ? gap : 0,
+              marginBottom: gap,
+            }}
+          >
+            <MusicAlbumCard album={item} width={itemWidth} />
+          </View>
+        )}
         keyExtractor={(item) => item.Id!}
         ListFooterComponent={
           isFetchingNextPage ? (

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

@@ -6,7 +6,7 @@ import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { RefreshControl, View } from "react-native";
+import { Dimensions, RefreshControl, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
@@ -71,6 +71,13 @@ export default function ArtistsScreen() {
     return data?.pages.flatMap((page) => page.items) || [];
   }, [data]);
 
+  const numColumns = 3;
+  const screenWidth = Dimensions.get("window").width;
+  const gap = 12;
+  const padding = 16;
+  const itemWidth =
+    (screenWidth - padding * 2 - gap * (numColumns - 1)) / numColumns;
+
   const handleEndReached = useCallback(() => {
     if (hasNextPage && !isFetchingNextPage) {
       fetchNextPage();
@@ -128,10 +135,11 @@ export default function ArtistsScreen() {
     <View className='flex-1 bg-black'>
       <FlashList
         data={artists}
+        numColumns={numColumns}
         contentContainerStyle={{
           paddingBottom: insets.bottom + 100,
-          paddingTop: 8,
-          paddingHorizontal: 16,
+          paddingTop: 16,
+          paddingHorizontal: padding,
         }}
         refreshControl={
           <RefreshControl
@@ -142,7 +150,17 @@ export default function ArtistsScreen() {
         }
         onEndReached={handleEndReached}
         onEndReachedThreshold={0.5}
-        renderItem={({ item }) => <MusicArtistCard artist={item} />}
+        renderItem={({ item, index }) => (
+          <View
+            style={{
+              width: itemWidth,
+              marginRight: index % numColumns !== numColumns - 1 ? gap : 0,
+              marginBottom: gap,
+            }}
+          >
+            <MusicArtistCard artist={item} size={itemWidth} />
+          </View>
+        )}
         keyExtractor={(item) => item.Id!}
         ListFooterComponent={
           isFetchingNextPage ? (

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

@@ -7,17 +7,17 @@ import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { RefreshControl, TouchableOpacity, View } from "react-native";
+import {
+  Dimensions,
+  RefreshControl,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
 import { MusicPlaylistCard } from "@/components/music/MusicPlaylistCard";
-import {
-  type PlaylistSortOption,
-  type PlaylistSortOrder,
-  PlaylistSortSheet,
-} from "@/components/music/PlaylistSortSheet";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 
 const ITEMS_PER_PAGE = 40;
@@ -36,20 +36,9 @@ export default function PlaylistsScreen() {
   const { t } = useTranslation();
 
   const [createModalOpen, setCreateModalOpen] = useState(false);
-  const [sortSheetOpen, setSortSheetOpen] = useState(false);
-  const [sortBy, setSortBy] = useState<PlaylistSortOption>("SortName");
-  const [sortOrder, setSortOrder] = useState<PlaylistSortOrder>("Ascending");
 
   const isReady = Boolean(api && user?.Id && libraryId);
 
-  const handleSortChange = useCallback(
-    (newSortBy: PlaylistSortOption, newSortOrder: PlaylistSortOrder) => {
-      setSortBy(newSortBy);
-      setSortOrder(newSortOrder);
-    },
-    [],
-  );
-
   useLayoutEffect(() => {
     navigation.setOptions({
       headerRight: () => (
@@ -74,13 +63,13 @@ export default function PlaylistsScreen() {
     isFetchingNextPage,
     refetch,
   } = useInfiniteQuery({
-    queryKey: ["music-playlists", libraryId, user?.Id, sortBy, sortOrder],
+    queryKey: ["music-playlists", libraryId, user?.Id],
     queryFn: async ({ pageParam = 0 }) => {
       const response = await getItemsApi(api!).getItems({
         userId: user?.Id,
         includeItemTypes: ["Playlist"],
-        sortBy: [sortBy],
-        sortOrder: [sortOrder],
+        sortBy: ["SortName"],
+        sortOrder: ["Ascending"],
         limit: ITEMS_PER_PAGE,
         startIndex: pageParam,
         recursive: true,
@@ -104,6 +93,13 @@ export default function PlaylistsScreen() {
     return data?.pages.flatMap((page) => page.items) || [];
   }, [data]);
 
+  const numColumns = 2;
+  const screenWidth = Dimensions.get("window").width;
+  const gap = 12;
+  const padding = 16;
+  const itemWidth =
+    (screenWidth - padding * 2 - gap * (numColumns - 1)) / numColumns;
+
   const handleEndReached = useCallback(() => {
     if (hasNextPage && !isFetchingNextPage) {
       fetchNextPage();
@@ -175,10 +171,11 @@ export default function PlaylistsScreen() {
     <View className='flex-1 bg-black'>
       <FlashList
         data={playlists}
+        numColumns={numColumns}
         contentContainerStyle={{
           paddingBottom: insets.bottom + 100,
-          paddingTop: 8,
-          paddingHorizontal: 16,
+          paddingTop: 16,
+          paddingHorizontal: padding,
         }}
         refreshControl={
           <RefreshControl
@@ -189,26 +186,17 @@ export default function PlaylistsScreen() {
         }
         onEndReached={handleEndReached}
         onEndReachedThreshold={0.5}
-        ListHeaderComponent={
-          <TouchableOpacity
-            onPress={() => setSortSheetOpen(true)}
-            className='flex-row items-center mb-2 py-1'
+        renderItem={({ item, index }) => (
+          <View
+            style={{
+              width: itemWidth,
+              marginRight: index % numColumns === 0 ? gap : 0,
+              marginBottom: gap,
+            }}
           >
-            <Ionicons name='swap-vertical' size={18} color='#9334E9' />
-            <Text className='text-purple-500 text-sm ml-1.5'>
-              {t(
-                `music.sort.${sortBy === "SortName" ? "alphabetical" : "date_created"}`,
-              )}
-            </Text>
-            <Ionicons
-              name={sortOrder === "Ascending" ? "arrow-up" : "arrow-down"}
-              size={14}
-              color='#9334E9'
-              style={{ marginLeft: 4 }}
-            />
-          </TouchableOpacity>
-        }
-        renderItem={({ item }) => <MusicPlaylistCard playlist={item} />}
+            <MusicPlaylistCard playlist={item} width={itemWidth} />
+          </View>
+        )}
         keyExtractor={(item) => item.Id!}
         ListFooterComponent={
           isFetchingNextPage ? (
@@ -222,13 +210,6 @@ export default function PlaylistsScreen() {
         open={createModalOpen}
         setOpen={setCreateModalOpen}
       />
-      <PlaylistSortSheet
-        open={sortSheetOpen}
-        setOpen={setSortSheetOpen}
-        sortBy={sortBy}
-        sortOrder={sortOrder}
-        onSortChange={handleSortChange}
-      />
     </View>
   );
 }

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

@@ -290,7 +290,7 @@ export default function SuggestionsScreen() {
             {section.type === "albums" ? (
               <HorizontalScroll
                 data={section.data}
-                height={178}
+                height={200}
                 keyExtractor={(item) => item.Id!}
                 renderItem={(item) => <MusicAlbumCard album={item} />}
               />

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

@@ -3,13 +3,10 @@ import type {
   BaseItemKind,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useAsyncDebouncer } from "@tanstack/react-pacer";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation, useSegments } from "expo-router";
+import { router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import { orderBy, uniqBy } from "lodash";
 import {
   useCallback,
   useEffect,
@@ -22,12 +19,11 @@ import {
 import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useDebounce } from "use-debounce";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
+import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
-import {
-  getItemNavigation,
-  TouchableItemRouter,
-} from "@/components/common/TouchableItemRouter";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import {
   JellyseerrSearchSort,
@@ -39,19 +35,10 @@ 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 { TVSearchPage } from "@/components/search/TVSearchPage";
-import useRouter from "@/hooks/useAppRouter";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { MediaType } from "@/utils/jellyseerr/server/constants/media";
-import type {
-  MovieResult,
-  PersonResult,
-  TvResult,
-} from "@/utils/jellyseerr/server/models/Search";
 import { createStreamystatsApi } from "@/utils/streamystats";
 
 type SearchType = "Library" | "Discover";
@@ -68,9 +55,6 @@ const exampleSearches = [
 export default function search() {
   const params = useLocalSearchParams();
   const insets = useSafeAreaInsets();
-  const router = useRouter();
-  const segments = useSegments();
-  const from = (segments as string[])[2] || "(search)";
 
   const [user] = useAtom(userAtom);
 
@@ -84,23 +68,7 @@ export default function search() {
   const [searchType, setSearchType] = useState<SearchType>("Library");
   const [search, setSearch] = useState<string>("");
 
-  const [debouncedSearch, setDebouncedSearch] = useState("");
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  const searchDebouncer = useAsyncDebouncer(
-    async (query: string) => {
-      // Cancel previous in-flight requests
-      abortControllerRef.current?.abort();
-      abortControllerRef.current = new AbortController();
-      setDebouncedSearch(query);
-      return query;
-    },
-    { wait: 200 },
-  );
-
-  useEffect(() => {
-    searchDebouncer.maybeExecute(search);
-  }, [search]);
+  const [debouncedSearch] = useDebounce(search, 500);
 
   const [api] = useAtom(apiAtom);
 
@@ -130,11 +98,9 @@ export default function search() {
     async ({
       types,
       query,
-      signal,
     }: {
       types: BaseItemKind[];
       query: string;
-      signal?: AbortSignal;
     }): Promise<BaseItemDto[]> => {
       if (!api || !query) {
         return [];
@@ -142,16 +108,13 @@ export default function search() {
 
       try {
         if (searchEngine === "Jellyfin") {
-          const searchApi = await getItemsApi(api).getItems(
-            {
-              searchTerm: query,
-              limit: 10,
-              includeItemTypes: types,
-              recursive: true,
-              userId: user?.Id,
-            },
-            { signal },
-          );
+          const searchApi = await getItemsApi(api).getItems({
+            searchTerm: query,
+            limit: 10,
+            includeItemTypes: types,
+            recursive: true,
+            userId: user?.Id,
+          });
 
           return (searchApi.data.Items as BaseItemDto[]) || [];
         }
@@ -180,7 +143,6 @@ export default function search() {
             query,
             searchType as "movies" | "series" | "episodes" | "actors" | "media",
             10,
-            signal,
           );
 
           const allIds: string[] = [
@@ -195,13 +157,10 @@ export default function search() {
             return [];
           }
 
-          const itemsResponse = await getItemsApi(api).getItems(
-            {
-              ids: allIds,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-            },
-            { signal },
-          );
+          const itemsResponse = await getItemsApi(api).getItems({
+            ids: allIds,
+            enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+          });
 
           return (itemsResponse.data.Items as BaseItemDto[]) || [];
         }
@@ -211,11 +170,13 @@ export default function search() {
           return [];
         }
 
-        const url = `${settings.marlinServerUrl}/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
+        const url = `${
+          settings.marlinServerUrl
+        }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
           .map((type) => encodeURIComponent(type))
           .join("&includeItemTypes=")}`;
 
-        const response1 = await axios.get(url, { signal });
+        const response1 = await axios.get(url);
 
         const ids = response1.data.ids;
 
@@ -223,65 +184,19 @@ export default function search() {
           return [];
         }
 
-        const response2 = await getItemsApi(api).getItems(
-          {
-            ids,
-            enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-          },
-          { signal },
-        );
+        const response2 = await getItemsApi(api).getItems({
+          ids,
+          enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+        });
 
         return (response2.data.Items as BaseItemDto[]) || [];
-      } catch (error) {
-        // Silently handle aborted requests
-        if (error instanceof Error && error.name === "AbortError") {
-          return [];
-        }
+      } catch (_error) {
         return [];
       }
     },
     [api, searchEngine, settings, user?.Id],
   );
 
-  // Separate search function for music types - always uses Jellyfin since Streamystats doesn't support music
-  const jellyfinSearchFn = useCallback(
-    async ({
-      types,
-      query,
-      signal,
-    }: {
-      types: BaseItemKind[];
-      query: string;
-      signal?: AbortSignal;
-    }): Promise<BaseItemDto[]> => {
-      if (!api || !query) {
-        return [];
-      }
-
-      try {
-        const searchApi = await getItemsApi(api).getItems(
-          {
-            searchTerm: query,
-            limit: 10,
-            includeItemTypes: types,
-            recursive: true,
-            userId: user?.Id,
-          },
-          { signal },
-        );
-
-        return (searchApi.data.Items as BaseItemDto[]) || [];
-      } catch (error) {
-        // Silently handle aborted requests
-        if (error instanceof Error && error.name === "AbortError") {
-          return [];
-        }
-        return [];
-      }
-    },
-    [api, user?.Id],
-  );
-
   type HeaderSearchBarRef = {
     focus: () => void;
     blur: () => void;
@@ -328,7 +243,6 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Movie"],
-        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -339,7 +253,6 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Series"],
-        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -350,7 +263,6 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Episode"],
-        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -361,7 +273,6 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["BoxSet"],
-        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -372,52 +283,6 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Person"],
-        signal: abortControllerRef.current?.signal,
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  // Music search queries - always use Jellyfin since Streamystats doesn't support music
-  const { data: artists, isFetching: l9 } = useQuery({
-    queryKey: ["search", "artists", debouncedSearch],
-    queryFn: () =>
-      jellyfinSearchFn({
-        query: debouncedSearch,
-        types: ["MusicArtist"],
-        signal: abortControllerRef.current?.signal,
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  const { data: albums, isFetching: l10 } = useQuery({
-    queryKey: ["search", "albums", debouncedSearch],
-    queryFn: () =>
-      jellyfinSearchFn({
-        query: debouncedSearch,
-        types: ["MusicAlbum"],
-        signal: abortControllerRef.current?.signal,
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  const { data: songs, isFetching: l11 } = useQuery({
-    queryKey: ["search", "songs", debouncedSearch],
-    queryFn: () =>
-      jellyfinSearchFn({
-        query: debouncedSearch,
-        types: ["Audio"],
-        signal: abortControllerRef.current?.signal,
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  const { data: playlists, isFetching: l12 } = useQuery({
-    queryKey: ["search", "playlists", debouncedSearch],
-    queryFn: () =>
-      jellyfinSearchFn({
-        query: debouncedSearch,
-        types: ["Playlist"],
-        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -428,200 +293,13 @@ export default function search() {
       episodes?.length ||
       series?.length ||
       collections?.length ||
-      actors?.length ||
-      artists?.length ||
-      albums?.length ||
-      songs?.length ||
-      playlists?.length
+      actors?.length
     );
-  }, [
-    episodes,
-    movies,
-    series,
-    collections,
-    actors,
-    artists,
-    albums,
-    songs,
-    playlists,
-  ]);
+  }, [episodes, movies, series, collections, actors]);
 
   const loading = useMemo(() => {
-    return l1 || l2 || l3 || l7 || l8 || l9 || l10 || l11 || l12;
-  }, [l1, l2, l3, l7, l8, l9, l10, l11, l12]);
-
-  // TV item press handler
-  const handleItemPress = useCallback(
-    (item: BaseItemDto) => {
-      const navigation = getItemNavigation(item, from);
-      router.push(navigation as any);
-    },
-    [from, router],
-  );
-
-  // Jellyseerr search for TV
-  const { data: jellyseerrTVResults, isFetching: jellyseerrTVLoading } =
-    useQuery({
-      queryKey: ["search", "jellyseerr", "tv", debouncedSearch],
-      queryFn: async () => {
-        const params = {
-          query: new URLSearchParams(debouncedSearch || "").toString(),
-        };
-        return await Promise.all([
-          jellyseerrApi?.search({ ...params, page: 1 }),
-          jellyseerrApi?.search({ ...params, page: 2 }),
-          jellyseerrApi?.search({ ...params, page: 3 }),
-          jellyseerrApi?.search({ ...params, page: 4 }),
-        ]).then((all) =>
-          uniqBy(
-            all.flatMap((v) => v?.results || []),
-            "id",
-          ),
-        );
-      },
-      enabled:
-        Platform.isTV &&
-        !!jellyseerrApi &&
-        searchType === "Discover" &&
-        debouncedSearch.length > 0,
-    });
-
-  // Process Jellyseerr results for TV
-  const jellyseerrMovieResults = useMemo(
-    () =>
-      orderBy(
-        jellyseerrTVResults?.filter(
-          (r) => r.mediaType === MediaType.MOVIE,
-        ) as MovieResult[],
-        [(m) => m?.title?.toLowerCase() === debouncedSearch.toLowerCase()],
-        "desc",
-      ),
-    [jellyseerrTVResults, debouncedSearch],
-  );
-
-  const jellyseerrTvResults = useMemo(
-    () =>
-      orderBy(
-        jellyseerrTVResults?.filter(
-          (r) => r.mediaType === MediaType.TV,
-        ) as TvResult[],
-        [(t) => t?.name?.toLowerCase() === debouncedSearch.toLowerCase()],
-        "desc",
-      ),
-    [jellyseerrTVResults, debouncedSearch],
-  );
-
-  const jellyseerrPersonResults = useMemo(
-    () =>
-      orderBy(
-        jellyseerrTVResults?.filter(
-          (r) => r.mediaType === "person",
-        ) as PersonResult[],
-        [(p) => p?.name?.toLowerCase() === debouncedSearch.toLowerCase()],
-        "desc",
-      ),
-    [jellyseerrTVResults, debouncedSearch],
-  );
-
-  const jellyseerrTVNoResults = useMemo(() => {
-    return (
-      !jellyseerrMovieResults?.length &&
-      !jellyseerrTvResults?.length &&
-      !jellyseerrPersonResults?.length
-    );
-  }, [jellyseerrMovieResults, jellyseerrTvResults, jellyseerrPersonResults]);
-
-  // Fetch discover settings for TV (when no search query in Discover mode)
-  const { data: discoverSliders } = useQuery({
-    queryKey: ["search", "jellyseerr", "discoverSettings", "tv"],
-    queryFn: async () => jellyseerrApi?.discoverSettings(),
-    enabled:
-      Platform.isTV &&
-      !!jellyseerrApi &&
-      searchType === "Discover" &&
-      debouncedSearch.length === 0,
-  });
-
-  // TV Jellyseerr press handlers
-  const handleJellyseerrMoviePress = useCallback(
-    (item: MovieResult) => {
-      router.push({
-        pathname: "/(auth)/(tabs)/(search)/jellyseerr/page",
-        params: {
-          mediaTitle: item.title,
-          releaseYear: String(new Date(item.releaseDate || "").getFullYear()),
-          canRequest: "true",
-          posterSrc: jellyseerrApi?.imageProxy(item.posterPath) || "",
-          mediaType: MediaType.MOVIE,
-          id: String(item.id),
-          backdropPath: item.backdropPath || "",
-          overview: item.overview || "",
-        },
-      });
-    },
-    [router, jellyseerrApi],
-  );
-
-  const handleJellyseerrTvPress = useCallback(
-    (item: TvResult) => {
-      router.push({
-        pathname: "/(auth)/(tabs)/(search)/jellyseerr/page",
-        params: {
-          mediaTitle: item.name,
-          releaseYear: String(new Date(item.firstAirDate || "").getFullYear()),
-          canRequest: "true",
-          posterSrc: jellyseerrApi?.imageProxy(item.posterPath) || "",
-          mediaType: MediaType.TV,
-          id: String(item.id),
-          backdropPath: item.backdropPath || "",
-          overview: item.overview || "",
-        },
-      });
-    },
-    [router, jellyseerrApi],
-  );
-
-  const handleJellyseerrPersonPress = useCallback(
-    (item: PersonResult) => {
-      router.push(`/(auth)/jellyseerr/person/${item.id}` as any);
-    },
-    [router],
-  );
-
-  // Render TV search page
-  if (Platform.isTV) {
-    return (
-      <TVSearchPage
-        search={search}
-        setSearch={setSearch}
-        debouncedSearch={debouncedSearch}
-        movies={movies}
-        series={series}
-        episodes={episodes}
-        collections={collections}
-        actors={actors}
-        artists={artists}
-        albums={albums}
-        songs={songs}
-        playlists={playlists}
-        loading={loading}
-        noResults={noResults}
-        onItemPress={handleItemPress}
-        searchType={searchType}
-        setSearchType={setSearchType}
-        showDiscover={!!jellyseerrApi}
-        jellyseerrMovies={jellyseerrMovieResults}
-        jellyseerrTv={jellyseerrTvResults}
-        jellyseerrPersons={jellyseerrPersonResults}
-        jellyseerrLoading={jellyseerrTVLoading}
-        jellyseerrNoResults={jellyseerrTVNoResults}
-        onJellyseerrMoviePress={handleJellyseerrMoviePress}
-        onJellyseerrTvPress={handleJellyseerrTvPress}
-        onJellyseerrPersonPress={handleJellyseerrPersonPress}
-        discoverSliders={discoverSliders}
-      />
-    );
-  }
+    return l1 || l2 || l3 || l7 || l8;
+  }, [l1, l2, l3, l7, l8]);
 
   return (
     <ScrollView
@@ -630,9 +308,28 @@ export default function search() {
       contentContainerStyle={{
         paddingLeft: insets.left,
         paddingRight: insets.right,
-        paddingBottom: 60,
       }}
     >
+      {/* <View
+        className='flex flex-col'
+        style={{
+          marginTop: Platform.OS === "android" ? 16 : 0,
+        }}
+      > */}
+      {Platform.isTV && (
+        <Input
+          placeholder={t("search.search")}
+          onChangeText={(text) => {
+            router.setParams({ q: "" });
+            setSearch(text);
+          }}
+          keyboardType='default'
+          returnKeyType='done'
+          autoCapitalize='none'
+          clearButtonMode='while-editing'
+          maxLength={500}
+        />
+      )}
       <View
         className='flex flex-col'
         style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
@@ -749,172 +446,6 @@ export default function search() {
                 </TouchableItemRouter>
               )}
             />
-            {/* Music search results */}
-            <SearchItemWrapper
-              items={artists}
-              header={t("search.artists")}
-              renderItem={(item: BaseItemDto) => {
-                const imageUrl = getPrimaryImageUrl({ api, item });
-                return (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className='flex flex-col w-24 mr-2 items-center'
-                  >
-                    <View
-                      style={{
-                        width: 80,
-                        height: 80,
-                        borderRadius: 40,
-                        overflow: "hidden",
-                        backgroundColor: "#1a1a1a",
-                      }}
-                    >
-                      {imageUrl ? (
-                        <Image
-                          source={{ uri: imageUrl }}
-                          style={{ width: "100%", height: "100%" }}
-                          contentFit='cover'
-                        />
-                      ) : (
-                        <View className='flex-1 items-center justify-center bg-neutral-800'>
-                          <Text className='text-xl'>👤</Text>
-                        </View>
-                      )}
-                    </View>
-                    <Text numberOfLines={2} className='mt-2 text-center'>
-                      {item.Name}
-                    </Text>
-                  </TouchableItemRouter>
-                );
-              }}
-            />
-            <SearchItemWrapper
-              items={albums}
-              header={t("search.albums")}
-              renderItem={(item: BaseItemDto) => {
-                const imageUrl = getPrimaryImageUrl({ api, item });
-                return (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className='flex flex-col w-28 mr-2'
-                  >
-                    <View
-                      style={{
-                        width: 112,
-                        height: 112,
-                        borderRadius: 8,
-                        overflow: "hidden",
-                        backgroundColor: "#1a1a1a",
-                      }}
-                    >
-                      {imageUrl ? (
-                        <Image
-                          source={{ uri: imageUrl }}
-                          style={{ width: "100%", height: "100%" }}
-                          contentFit='cover'
-                        />
-                      ) : (
-                        <View className='flex-1 items-center justify-center bg-neutral-800'>
-                          <Text className='text-4xl'>🎵</Text>
-                        </View>
-                      )}
-                    </View>
-                    <Text numberOfLines={2} className='mt-2'>
-                      {item.Name}
-                    </Text>
-                    <Text className='opacity-50 text-xs' numberOfLines={1}>
-                      {item.AlbumArtist || item.Artists?.join(", ")}
-                    </Text>
-                  </TouchableItemRouter>
-                );
-              }}
-            />
-            <SearchItemWrapper
-              items={songs}
-              header={t("search.songs")}
-              renderItem={(item: BaseItemDto) => {
-                const imageUrl = getPrimaryImageUrl({ api, item });
-                return (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className='flex flex-col w-28 mr-2'
-                  >
-                    <View
-                      style={{
-                        width: 112,
-                        height: 112,
-                        borderRadius: 8,
-                        overflow: "hidden",
-                        backgroundColor: "#1a1a1a",
-                      }}
-                    >
-                      {imageUrl ? (
-                        <Image
-                          source={{ uri: imageUrl }}
-                          style={{ width: "100%", height: "100%" }}
-                          contentFit='cover'
-                        />
-                      ) : (
-                        <View className='flex-1 items-center justify-center bg-neutral-800'>
-                          <Text className='text-4xl'>🎵</Text>
-                        </View>
-                      )}
-                    </View>
-                    <Text numberOfLines={2} className='mt-2'>
-                      {item.Name}
-                    </Text>
-                    <Text className='opacity-50 text-xs' numberOfLines={1}>
-                      {item.Artists?.join(", ") || item.AlbumArtist}
-                    </Text>
-                  </TouchableItemRouter>
-                );
-              }}
-            />
-            <SearchItemWrapper
-              items={playlists}
-              header={t("search.playlists")}
-              renderItem={(item: BaseItemDto) => {
-                const imageUrl = getPrimaryImageUrl({ api, item });
-                return (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className='flex flex-col w-28 mr-2'
-                  >
-                    <View
-                      style={{
-                        width: 112,
-                        height: 112,
-                        borderRadius: 8,
-                        overflow: "hidden",
-                        backgroundColor: "#1a1a1a",
-                      }}
-                    >
-                      {imageUrl ? (
-                        <Image
-                          source={{ uri: imageUrl }}
-                          style={{ width: "100%", height: "100%" }}
-                          contentFit='cover'
-                        />
-                      ) : (
-                        <View className='flex-1 items-center justify-center bg-neutral-800'>
-                          <Text className='text-4xl'>🎶</Text>
-                        </View>
-                      )}
-                    </View>
-                    <Text numberOfLines={2} className='mt-2'>
-                      {item.Name}
-                    </Text>
-                    <Text className='opacity-50 text-xs'>
-                      {item.ChildCount} tracks
-                    </Text>
-                  </TouchableItemRouter>
-                );
-              }}
-            />
           </View>
         ) : (
           <JellyserrIndexPage

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

@@ -1,21 +0,0 @@
-import { Stack } from "expo-router";
-import { useTranslation } from "react-i18next";
-import { Platform } from "react-native";
-
-export default function SettingsLayout() {
-  const { t } = useTranslation();
-  return (
-    <Stack>
-      <Stack.Screen
-        name='index'
-        options={{
-          headerShown: !Platform.isTV,
-          headerTitle: t("tabs.settings"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-        }}
-      />
-    </Stack>
-  );
-}

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

@@ -1,5 +0,0 @@
-import SettingsTV from "@/app/(auth)/(tabs)/(home)/settings.tv";
-
-export default function SettingsTabScreen() {
-  return <SettingsTV />;
-}

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

@@ -1,16 +1,14 @@
 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 } from "expo-router";
+import { useLocalSearchParams, useNavigation, useRouter } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   Alert,
-  Platform,
   RefreshControl,
-  ScrollView,
   TouchableOpacity,
   useWindowDimensions,
   View,
@@ -18,19 +16,9 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { HeaderBackButton } from "@/components/common/HeaderBackButton";
 import { Text } from "@/components/common/Text";
-import {
-  getItemNavigation,
-  TouchableItemRouter,
-} from "@/components/common/TouchableItemRouter";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import { ItemPoster } from "@/components/posters/ItemPoster";
-import MoviePoster, {
-  TV_POSTER_WIDTH,
-} from "@/components/posters/MoviePoster.tv";
-import SeriesPoster from "@/components/posters/SeriesPoster.tv";
-import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import useRouter from "@/hooks/useAppRouter";
 import { useOrientation } from "@/hooks/useOrientation";
 import {
   useDeleteWatchlist,
@@ -43,36 +31,7 @@ import {
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { userAtom } from "@/providers/JellyfinProvider";
 
-const TV_ITEM_GAP = 20;
-const TV_HORIZONTAL_PADDING = 60;
-
-type Typography = ReturnType<typeof useScaledTVTypography>;
-
-const TVItemCardText: React.FC<{
-  item: BaseItemDto;
-  typography: Typography;
-}> = ({ item, typography }) => (
-  <View style={{ marginTop: 12 }}>
-    <Text
-      numberOfLines={1}
-      style={{ fontSize: typography.callout, color: "#FFFFFF" }}
-    >
-      {item.Name}
-    </Text>
-    <Text
-      style={{
-        fontSize: typography.callout - 2,
-        color: "#9CA3AF",
-        marginTop: 2,
-      }}
-    >
-      {item.ProductionYear}
-    </Text>
-  </View>
-);
-
 export default function WatchlistDetailScreen() {
-  const typography = useScaledTVTypography();
   const { t } = useTranslation();
   const router = useRouter();
   const navigation = useNavigation();
@@ -87,8 +46,6 @@ export default function WatchlistDetailScreen() {
     : undefined;
 
   const nrOfCols = useMemo(() => {
-    // TV uses flexWrap, so nrOfCols is just for mobile
-    if (Platform.isTV) return 1;
     if (screenWidth < 300) return 2;
     if (screenWidth < 500) return 3;
     if (screenWidth < 800) return 5;
@@ -195,36 +152,6 @@ export default function WatchlistDetailScreen() {
     [removeFromWatchlist, watchlistIdNum, watchlist?.name, t],
   );
 
-  const renderTVItem = useCallback(
-    (item: BaseItemDto, index: number) => {
-      const handlePress = () => {
-        const navigation = getItemNavigation(item, "(watchlists)");
-        router.push(navigation as any);
-      };
-
-      return (
-        <View
-          key={item.Id}
-          style={{
-            width: TV_POSTER_WIDTH,
-          }}
-        >
-          <TVFocusablePoster
-            onPress={handlePress}
-            hasTVPreferredFocus={index === 0}
-          >
-            {item.Type === "Movie" && <MoviePoster item={item} />}
-            {(item.Type === "Series" || item.Type === "Episode") && (
-              <SeriesPoster item={item} />
-            )}
-          </TVFocusablePoster>
-          <TVItemCardText item={item} typography={typography} />
-        </View>
-      );
-    },
-    [router, typography],
-  );
-
   const renderItem = useCallback(
     ({ item, index }: { item: BaseItemDto; index: number }) => (
       <TouchableItemRouter
@@ -338,120 +265,6 @@ export default function WatchlistDetailScreen() {
     );
   }
 
-  // TV layout with ScrollView + flexWrap
-  if (Platform.isTV) {
-    return (
-      <ScrollView
-        style={{ flex: 1 }}
-        contentContainerStyle={{
-          paddingTop: insets.top + 100,
-          paddingBottom: insets.bottom + 60,
-          paddingHorizontal: insets.left + TV_HORIZONTAL_PADDING,
-        }}
-      >
-        {/* Header */}
-        <View
-          style={{
-            alignItems: "center",
-            marginBottom: 32,
-            paddingBottom: 24,
-            borderBottomWidth: 1,
-            borderBottomColor: "rgba(255,255,255,0.1)",
-          }}
-        >
-          {watchlist.description && (
-            <Text
-              style={{
-                fontSize: typography.body,
-                color: "#9CA3AF",
-                marginBottom: 16,
-                textAlign: "center",
-              }}
-            >
-              {watchlist.description}
-            </Text>
-          )}
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              gap: 24,
-            }}
-          >
-            <View
-              style={{ flexDirection: "row", alignItems: "center", gap: 8 }}
-            >
-              <Ionicons name='film-outline' size={20} color='#9ca3af' />
-              <Text style={{ fontSize: typography.callout, color: "#9CA3AF" }}>
-                {items?.length ?? 0}{" "}
-                {(items?.length ?? 0) === 1
-                  ? t("watchlists.item")
-                  : t("watchlists.items")}
-              </Text>
-            </View>
-            <View
-              style={{ flexDirection: "row", alignItems: "center", gap: 8 }}
-            >
-              <Ionicons
-                name={
-                  watchlist.isPublic ? "globe-outline" : "lock-closed-outline"
-                }
-                size={20}
-                color='#9ca3af'
-              />
-              <Text style={{ fontSize: typography.callout, color: "#9CA3AF" }}>
-                {watchlist.isPublic
-                  ? t("watchlists.public")
-                  : t("watchlists.private")}
-              </Text>
-            </View>
-            {!isOwner && (
-              <Text style={{ fontSize: typography.callout, color: "#737373" }}>
-                {t("watchlists.by_owner")}
-              </Text>
-            )}
-          </View>
-        </View>
-
-        {/* Grid with flexWrap */}
-        {!items || items.length === 0 ? (
-          <View
-            style={{
-              flex: 1,
-              justifyContent: "center",
-              alignItems: "center",
-              paddingTop: 100,
-            }}
-          >
-            <Ionicons name='film-outline' size={48} color='#4b5563' />
-            <Text
-              style={{
-                fontSize: typography.body,
-                color: "#9CA3AF",
-                textAlign: "center",
-                marginTop: 16,
-              }}
-            >
-              {t("watchlists.empty_watchlist")}
-            </Text>
-          </View>
-        ) : (
-          <View
-            style={{
-              flexDirection: "row",
-              flexWrap: "wrap",
-              justifyContent: "center",
-              gap: TV_ITEM_GAP,
-            }}
-          >
-            {items.map((item, index) => renderTVItem(item, index))}
-          </View>
-        )}
-      </ScrollView>
-    );
-  }
-
-  // Mobile layout with FlashList
   return (
     <FlashList
       key={orientation}

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

@@ -1,10 +1,8 @@
 import { Ionicons } from "@expo/vector-icons";
-import { Stack } from "expo-router";
+import { Stack, useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
-import { Platform } from "react-native";
-import { Pressable } from "react-native-gesture-handler";
+import { Platform, TouchableOpacity } from "react-native";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
-import useRouter from "@/hooks/useAppRouter";
 import { useStreamystatsEnabled } from "@/hooks/useWatchlists";
 
 export default function WatchlistsLayout() {
@@ -24,14 +22,14 @@ export default function WatchlistsLayout() {
           headerShadowVisible: false,
           headerRight: streamystatsEnabled
             ? () => (
-                <Pressable
+                <TouchableOpacity
                   onPress={() =>
                     router.push("/(auth)/(tabs)/(watchlists)/create")
                   }
                   className='p-1.5'
                 >
                   <Ionicons name='add' size={24} color='white' />
-                </Pressable>
+                </TouchableOpacity>
               )
             : undefined,
         }}
@@ -40,7 +38,7 @@ export default function WatchlistsLayout() {
         name='[watchlistId]'
         options={{
           title: "",
-          headerShown: !Platform.isTV,
+          headerShown: true,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
@@ -51,7 +49,7 @@ export default function WatchlistsLayout() {
         options={{
           title: t("watchlists.create_title"),
           presentation: "modal",
-          headerShown: !Platform.isTV,
+          headerShown: true,
           headerStyle: { backgroundColor: "#171717" },
           headerTintColor: "white",
           contentStyle: { backgroundColor: "#171717" },
@@ -62,7 +60,7 @@ export default function WatchlistsLayout() {
         options={{
           title: t("watchlists.edit_title"),
           presentation: "modal",
-          headerShown: !Platform.isTV,
+          headerShown: true,
           headerStyle: { backgroundColor: "#171717" },
           headerTintColor: "white",
           contentStyle: { backgroundColor: "#171717" },

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

@@ -1,4 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
+import { useRouter } from "expo-router";
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -14,7 +15,6 @@ 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 } from "expo-router";
+import { useLocalSearchParams, useRouter } from "expo-router";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -15,7 +15,6 @@ 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,5 +1,6 @@
 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";
@@ -7,7 +8,6 @@ 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

@@ -7,21 +7,17 @@ import type {
   ParamListBase,
   TabNavigationState,
 } from "@react-navigation/native";
-import { withLayoutContext } from "expo-router";
+import { useFocusEffect, useRouter, withLayoutContext } from "expo-router";
+import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
+import { MiniPlayerBar } from "@/components/music/MiniPlayerBar";
+import { MusicPlaybackEngine } from "@/components/music/MusicPlaybackEngine";
 import { Colors } from "@/constants/Colors";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
-
-// Music components are not available on tvOS (TrackPlayer not supported)
-const MiniPlayerBar = Platform.isTV
-  ? () => null
-  : require("@/components/music/MiniPlayerBar").MiniPlayerBar;
-const MusicPlaybackEngine = Platform.isTV
-  ? () => null
-  : require("@/components/music/MusicPlaybackEngine").MusicPlaybackEngine;
+import { storage } from "@/utils/mmkv";
 
 const { Navigator } = createNativeBottomTabNavigator();
 
@@ -35,6 +31,22 @@ export const NativeTabs = withLayoutContext<
 export default function TabLayout() {
   const { settings } = useSettings();
   const { t } = useTranslation();
+  const router = useRouter();
+
+  useFocusEffect(
+    useCallback(() => {
+      const hasShownIntro = storage.getBoolean("hasShownIntro");
+      if (!hasShownIntro) {
+        const timer = setTimeout(() => {
+          router.push("/intro/page");
+        }, 1000);
+
+        return () => {
+          clearTimeout(timer);
+        };
+      }
+    }, []),
+  );
 
   return (
     <View style={{ flex: 1 }}>
@@ -123,17 +135,6 @@ export default function TabLayout() {
                 : (_e) => ({ sfSymbol: "list.dash.fill" }),
           }}
         />
-        <NativeTabs.Screen
-          name='(settings)'
-          options={{
-            title: t("tabs.settings"),
-            tabBarItemHidden: !Platform.isTV,
-            tabBarIcon:
-              Platform.OS === "android"
-                ? (_e) => require("@/assets/icons/list.png")
-                : (_e) => ({ sfSymbol: "gearshape.fill" }),
-          }}
-        />
       </NativeTabs>
       <MiniPlayerBar />
       <MusicPlaybackEngine />

app/(auth)/now-playing.tsx

@@ -1,19 +1,12 @@
-import { ExpoAvRoutePickerView } from "@douglowder/expo-av-route-picker-view";
 import { Ionicons } from "@expo/vector-icons";
-import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import type {
   BaseItemDto,
   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,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   ActivityIndicator,
   Dimensions,
@@ -27,20 +20,11 @@ import DraggableFlatList, {
   type RenderItemParams,
   ScaleDecorator,
 } from "react-native-draggable-flatlist";
-import { CastButton, CastState } from "react-native-google-cast";
 import { useSharedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import TextTicker from "react-native-text-ticker";
-import type { VolumeResult } from "react-native-volume-manager";
 import { Badge } from "@/components/Badge";
 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";
+import { apiAtom } from "@/providers/JellyfinProvider";
 import {
   type RepeatMode,
   useMusicPlayer,
@@ -48,11 +32,6 @@ import {
 import { formatBitrate } from "@/utils/bitrate";
 import { formatDuration } from "@/utils/time";
 
-// Conditionally require VolumeManager (not available on TV)
-const VolumeManager = Platform.isTV
-  ? null
-  : require("react-native-volume-manager");
-
 const formatFileSize = (bytes?: number | null) => {
   if (!bytes) return null;
   const sizes = ["B", "KB", "MB", "GB"];
@@ -73,22 +52,9 @@ type ViewMode = "player" | "queue";
 
 export default function NowPlayingScreen() {
   const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const [viewMode, setViewMode] = useState<ViewMode>("player");
-  const [trackOptionsOpen, setTrackOptionsOpen] = useState(false);
-  const [playlistPickerOpen, setPlaylistPickerOpen] = useState(false);
-  const [createPlaylistOpen, setCreatePlaylistOpen] = useState(false);
-
-  const {
-    isConnected: isCastConnected,
-    castQueue,
-    castState,
-  } = useMusicCast({
-    api,
-    userId: user?.Id,
-  });
 
   const {
     currentTrack,
@@ -112,13 +78,8 @@ export default function NowPlayingScreen() {
     removeFromQueue,
     reorderQueue,
     stop,
-    pause,
   } = useMusicPlayer();
 
-  const { isFavorite, toggleFavorite } = useFavorite(
-    currentTrack ?? ({ Id: "" } as BaseItemDto),
-  );
-
   const sliderProgress = useSharedValue(0);
   const sliderMin = useSharedValue(0);
   const sliderMax = useSharedValue(1);
@@ -131,21 +92,6 @@ export default function NowPlayingScreen() {
     sliderMax.value = duration > 0 ? duration : 1;
   }, [duration, sliderMax]);
 
-  // Auto-cast queue when Chromecast becomes connected and pause local playback
-  const prevCastState = useRef<CastState | null | undefined>(null);
-  useEffect(() => {
-    if (
-      castState === CastState.CONNECTED &&
-      prevCastState.current !== CastState.CONNECTED &&
-      queue.length > 0
-    ) {
-      // Just connected - pause local playback and cast the queue
-      pause();
-      castQueue({ queue, startIndex: queueIndex });
-    }
-    prevCastState.current = castState;
-  }, [castState, queue, queueIndex, castQueue, pause]);
-
   const imageUrl = useMemo(() => {
     if (!api || !currentTrack) return null;
     const albumId = currentTrack.AlbumId || currentTrack.ParentId;
@@ -160,17 +106,11 @@ export default function NowPlayingScreen() {
     return formatDuration(progressTicks);
   }, [progress]);
 
-  const _durationText = useMemo(() => {
+  const durationText = useMemo(() => {
     const durationTicks = duration * 10000000;
     return formatDuration(durationTicks);
   }, [duration]);
 
-  const remainingText = useMemo(() => {
-    const remaining = Math.max(0, duration - progress);
-    const remainingTicks = remaining * 10000000;
-    return `-${formatDuration(remainingTicks)}`;
-  }, [duration, progress]);
-
   const handleSliderComplete = useCallback(
     (value: number) => {
       seek(value);
@@ -194,18 +134,6 @@ export default function NowPlayingScreen() {
     setRepeatMode(nextMode);
   }, [repeatMode, setRepeatMode]);
 
-  const handleOptionsPress = useCallback(() => {
-    setTrackOptionsOpen(true);
-  }, []);
-
-  const handleAddToPlaylist = useCallback(() => {
-    setPlaylistPickerOpen(true);
-  }, []);
-
-  const handleCreateNewPlaylist = useCallback(() => {
-    setCreatePlaylistOpen(true);
-  }, []);
-
   const getRepeatIcon = (): string => {
     switch (repeatMode) {
       case "one":
@@ -222,133 +150,108 @@ export default function NowPlayingScreen() {
 
   if (!currentTrack) {
     return (
-      <BottomSheetModalProvider>
-        <View
-          className='flex-1 bg-[#121212] items-center justify-center'
-          style={{
-            paddingTop: Platform.OS === "android" ? insets.top : 0,
-            paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
-          }}
-        >
-          <Text className='text-neutral-500'>No track playing</Text>
-        </View>
-      </BottomSheetModalProvider>
-    );
-  }
-
-  return (
-    <BottomSheetModalProvider>
       <View
-        className='flex-1 bg-[#121212]'
+        className='flex-1 bg-[#121212] items-center justify-center'
         style={{
           paddingTop: Platform.OS === "android" ? insets.top : 0,
           paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
         }}
       >
-        {/* Header */}
-        <View className='flex-row items-center justify-between px-4 pt-3 pb-2'>
-          <TouchableOpacity
-            onPress={handleClose}
-            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            className='p-2'
-          >
-            <Ionicons name='chevron-down' size={28} color='white' />
-          </TouchableOpacity>
-
-          <View className='flex-row'>
-            <TouchableOpacity
-              onPress={() => setViewMode("player")}
-              className='px-3 py-1'
-            >
-              <Text
-                className={
-                  viewMode === "player"
-                    ? "text-white font-semibold"
-                    : "text-neutral-500"
-                }
-              >
-                Now Playing
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => setViewMode("queue")}
-              className='px-3 py-1'
-            >
-              <Text
-                className={
-                  viewMode === "queue"
-                    ? "text-white font-semibold"
-                    : "text-neutral-500"
-                }
-              >
-                Queue ({queue.length})
-              </Text>
-            </TouchableOpacity>
-          </View>
-          {/* Empty placeholder to balance header layout */}
-          <View className='p-2' style={{ width: 44 }} />
-        </View>
-
-        {viewMode === "player" ? (
-          <PlayerView
-            api={api}
-            currentTrack={currentTrack}
-            imageUrl={imageUrl}
-            sliderProgress={sliderProgress}
-            sliderMin={sliderMin}
-            sliderMax={sliderMax}
-            progressText={progressText}
-            remainingText={remainingText}
-            isPlaying={isPlaying}
-            isLoading={isLoading}
-            repeatMode={repeatMode}
-            shuffleEnabled={shuffleEnabled}
-            canGoNext={canGoNext}
-            canGoPrevious={canGoPrevious}
-            onSliderComplete={handleSliderComplete}
-            onTogglePlayPause={togglePlayPause}
-            onNext={next}
-            onPrevious={previous}
-            onCycleRepeat={cycleRepeatMode}
-            onToggleShuffle={toggleShuffle}
-            getRepeatIcon={getRepeatIcon}
-            mediaSource={mediaSource}
-            isTranscoding={isTranscoding}
-            isFavorite={isFavorite}
-            onToggleFavorite={toggleFavorite}
-            onOptionsPress={handleOptionsPress}
-            isCastConnected={isCastConnected}
-          />
-        ) : (
-          <QueueView
-            api={api}
-            queue={queue}
-            queueIndex={queueIndex}
-            onJumpToIndex={jumpToIndex}
-            onRemoveFromQueue={removeFromQueue}
-            onReorderQueue={reorderQueue}
-          />
-        )}
-
-        <TrackOptionsSheet
-          open={trackOptionsOpen}
-          setOpen={setTrackOptionsOpen}
-          track={currentTrack}
-          onAddToPlaylist={handleAddToPlaylist}
-        />
-        <PlaylistPickerSheet
-          open={playlistPickerOpen}
-          setOpen={setPlaylistPickerOpen}
-          trackToAdd={currentTrack}
-          onCreateNew={handleCreateNewPlaylist}
-        />
-        <CreatePlaylistModal
-          open={createPlaylistOpen}
-          setOpen={setCreatePlaylistOpen}
-          initialTrackId={currentTrack?.Id}
-        />
+        <Text className='text-neutral-500'>No track playing</Text>
       </View>
-    </BottomSheetModalProvider>
+    );
+  }
+
+  return (
+    <View
+      className='flex-1 bg-[#121212]'
+      style={{
+        paddingTop: Platform.OS === "android" ? insets.top : 0,
+        paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
+      }}
+    >
+      {/* Header */}
+      <View className='flex-row items-center justify-between px-4 pt-3 pb-2'>
+        <TouchableOpacity
+          onPress={handleClose}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          className='p-2'
+        >
+          <Ionicons name='chevron-down' size={28} color='white' />
+        </TouchableOpacity>
+
+        <View className='flex-row'>
+          <TouchableOpacity
+            onPress={() => setViewMode("player")}
+            className='px-3 py-1'
+          >
+            <Text
+              className={
+                viewMode === "player"
+                  ? "text-white font-semibold"
+                  : "text-neutral-500"
+              }
+            >
+              Now Playing
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => setViewMode("queue")}
+            className='px-3 py-1'
+          >
+            <Text
+              className={
+                viewMode === "queue"
+                  ? "text-white font-semibold"
+                  : "text-neutral-500"
+              }
+            >
+              Queue ({queue.length})
+            </Text>
+          </TouchableOpacity>
+        </View>
+        <View style={{ width: 16 }} />
+      </View>
+
+      {viewMode === "player" ? (
+        <PlayerView
+          api={api}
+          currentTrack={currentTrack}
+          imageUrl={imageUrl}
+          sliderProgress={sliderProgress}
+          sliderMin={sliderMin}
+          sliderMax={sliderMax}
+          progressText={progressText}
+          durationText={durationText}
+          isPlaying={isPlaying}
+          isLoading={isLoading}
+          repeatMode={repeatMode}
+          shuffleEnabled={shuffleEnabled}
+          canGoNext={canGoNext}
+          canGoPrevious={canGoPrevious}
+          onSliderComplete={handleSliderComplete}
+          onTogglePlayPause={togglePlayPause}
+          onNext={next}
+          onPrevious={previous}
+          onCycleRepeat={cycleRepeatMode}
+          onToggleShuffle={toggleShuffle}
+          getRepeatIcon={getRepeatIcon}
+          queue={queue}
+          queueIndex={queueIndex}
+          mediaSource={mediaSource}
+          isTranscoding={isTranscoding}
+        />
+      ) : (
+        <QueueView
+          api={api}
+          queue={queue}
+          queueIndex={queueIndex}
+          onJumpToIndex={jumpToIndex}
+          onRemoveFromQueue={removeFromQueue}
+          onReorderQueue={reorderQueue}
+        />
+      )}
+    </View>
   );
 }
 
@@ -360,7 +263,7 @@ interface PlayerViewProps {
   sliderMin: any;
   sliderMax: any;
   progressText: string;
-  remainingText: string;
+  durationText: string;
   isPlaying: boolean;
   isLoading: boolean;
   repeatMode: RepeatMode;
@@ -374,12 +277,10 @@ interface PlayerViewProps {
   onCycleRepeat: () => void;
   onToggleShuffle: () => void;
   getRepeatIcon: () => string;
+  queue: BaseItemDto[];
+  queueIndex: number;
   mediaSource: MediaSourceInfo | null;
   isTranscoding: boolean;
-  isFavorite: boolean | undefined;
-  onToggleFavorite: () => void;
-  onOptionsPress: () => void;
-  isCastConnected: boolean;
 }
 
 const PlayerView: React.FC<PlayerViewProps> = ({
@@ -389,7 +290,7 @@ const PlayerView: React.FC<PlayerViewProps> = ({
   sliderMin,
   sliderMax,
   progressText,
-  remainingText,
+  durationText,
   isPlaying,
   isLoading,
   repeatMode,
@@ -403,42 +304,15 @@ const PlayerView: React.FC<PlayerViewProps> = ({
   onCycleRepeat,
   onToggleShuffle,
   getRepeatIcon,
+  queue,
+  queueIndex,
   mediaSource,
   isTranscoding,
-  isFavorite,
-  onToggleFavorite,
-  onOptionsPress,
-  isCastConnected,
 }) => {
   const audioStream = useMemo(() => {
     return mediaSource?.MediaStreams?.find((stream) => stream.Type === "Audio");
   }, [mediaSource]);
 
-  // Volume slider state
-  const volumeProgress = useSharedValue(0);
-  const volumeMin = useSharedValue(0);
-  const volumeMax = useSharedValue(1);
-  const isTv = Platform.isTV;
-
-  useEffect(() => {
-    if (isTv || !VolumeManager) return;
-    // Get initial volume
-    VolumeManager.getVolume().then(({ volume }: { volume: number }) => {
-      volumeProgress.value = volume;
-    });
-    // Listen to volume changes
-    const listener = VolumeManager.addVolumeListener((result: VolumeResult) => {
-      volumeProgress.value = result.volume;
-    });
-    return () => listener.remove();
-  }, [isTv, volumeProgress]);
-
-  const handleVolumeChange = useCallback((value: number) => {
-    if (VolumeManager) {
-      VolumeManager.setVolume(value);
-    }
-  }, []);
-
   const fileSize = formatFileSize(mediaSource?.Size);
   const codec = audioStream?.Codec?.toUpperCase();
   const bitrate = formatBitrate(audioStream?.BitRate);
@@ -479,60 +353,19 @@ const PlayerView: React.FC<PlayerViewProps> = ({
         )}
       </View>
 
-      {/* Track info with actions */}
+      {/* Track info */}
       <View className='mb-6'>
-        <View className='flex-row items-start justify-between'>
-          <View className='flex-1 mr-4'>
-            <TextTicker
-              style={{ color: "white", fontSize: 24, fontWeight: "bold" }}
-              duration={Math.max(4000, (currentTrack.Name?.length || 0) * 250)}
-              loop
-              bounce={false}
-              repeatSpacer={80}
-              marqueeDelay={1500}
-              scroll={false}
-              animationType='scroll'
-              easing={(t) => t}
-            >
-              {currentTrack.Name}
-            </TextTicker>
-            <TextTicker
-              style={{ color: "#a3a3a3", fontSize: 18 }}
-              duration={Math.max(
-                4000,
-                (
-                  currentTrack.Artists?.join(", ") ||
-                  currentTrack.AlbumArtist ||
-                  ""
-                ).length * 250,
-              )}
-              loop
-              bounce={false}
-              repeatSpacer={80}
-              marqueeDelay={2000}
-              scroll={false}
-              animationType='scroll'
-              easing={(t) => t}
-            >
-              {currentTrack.Artists?.join(", ") || currentTrack.AlbumArtist}
-            </TextTicker>
-          </View>
-          <TouchableOpacity
-            onPress={onToggleFavorite}
-            className='p-2'
-            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            activeOpacity={0.7}
-          >
-            <Ionicons
-              name={isFavorite ? "heart" : "heart-outline"}
-              size={24}
-              color={isFavorite ? "#ec4899" : "white"}
-            />
-          </TouchableOpacity>
-          <TouchableOpacity onPress={onOptionsPress} className='p-2'>
-            <Ionicons name='ellipsis-horizontal' size={24} color='white' />
-          </TouchableOpacity>
-        </View>
+        <Text numberOfLines={1} className='text-white text-2xl font-bold'>
+          {currentTrack.Name}
+        </Text>
+        <Text numberOfLines={1} className='text-purple-400 text-lg mt-1'>
+          {currentTrack.Artists?.join(", ") || currentTrack.AlbumArtist}
+        </Text>
+        {currentTrack.Album && (
+          <Text numberOfLines={1} className='text-neutral-500 text-sm mt-1'>
+            {currentTrack.Album}
+          </Text>
+        )}
 
         {/* Audio Stats */}
         {hasAudioStats && (
@@ -562,36 +395,28 @@ const PlayerView: React.FC<PlayerViewProps> = ({
       <View className='mb-4'>
         <Slider
           theme={{
-            maximumTrackTintColor: "rgba(255,255,255,0.2)",
-            minimumTrackTintColor: "#fff",
-            bubbleBackgroundColor: "#fff",
-            bubbleTextColor: "#666",
+            maximumTrackTintColor: "#333",
+            minimumTrackTintColor: "#9334E9",
+            bubbleBackgroundColor: "#9334E9",
+            bubbleTextColor: "#fff",
           }}
           progress={sliderProgress}
           minimumValue={sliderMin}
           maximumValue={sliderMax}
           onSlidingComplete={onSliderComplete}
-          renderThumb={() => null}
-          sliderHeight={8}
-          containerStyle={{ borderRadius: 100 }}
+          thumbWidth={16}
+          sliderHeight={6}
+          containerStyle={{ borderRadius: 10 }}
           renderBubble={() => null}
         />
-        <View className='flex flex-row justify-between mt-2'>
+        <View className='flex flex-row justify-between px-1 mt-2'>
           <Text className='text-neutral-500 text-xs'>{progressText}</Text>
-          <Text className='text-neutral-500 text-xs'>{remainingText}</Text>
+          <Text className='text-neutral-500 text-xs'>{durationText}</Text>
         </View>
       </View>
 
-      {/* Main Controls with Shuffle & Repeat */}
-      <View className='flex flex-row items-center justify-center mb-6'>
-        <TouchableOpacity onPress={onToggleShuffle} className='p-3'>
-          <Ionicons
-            name='shuffle'
-            size={24}
-            color={shuffleEnabled ? "#9334E9" : "#666"}
-          />
-        </TouchableOpacity>
-
+      {/* Main Controls */}
+      <View className='flex flex-row items-center justify-center mb-2'>
         <TouchableOpacity
           onPress={onPrevious}
           disabled={!canGoPrevious || isLoading}
@@ -604,7 +429,7 @@ const PlayerView: React.FC<PlayerViewProps> = ({
         <TouchableOpacity
           onPress={onTogglePlayPause}
           disabled={isLoading}
-          className='mx-4 bg-white rounded-full p-4'
+          className='mx-8 bg-white rounded-full p-4'
         >
           {isLoading ? (
             <ActivityIndicator size={36} color='#121212' />
@@ -626,75 +451,38 @@ const PlayerView: React.FC<PlayerViewProps> = ({
         >
           <Ionicons name='play-skip-forward' size={32} color='white' />
         </TouchableOpacity>
+      </View>
 
-        <TouchableOpacity onPress={onCycleRepeat} className='p-3 relative'>
+      {/* Shuffle & Repeat Controls */}
+      <View className='flex flex-row items-center justify-center mb-2'>
+        <TouchableOpacity onPress={onToggleShuffle} className='p-3 mx-4'>
+          <Ionicons
+            name='shuffle'
+            size={24}
+            color={shuffleEnabled ? "#9334E9" : "#666"}
+          />
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={onCycleRepeat} className='p-3 mx-4 relative'>
           <Ionicons
             name={getRepeatIcon() as any}
             size={24}
             color={repeatMode !== "off" ? "#9334E9" : "#666"}
           />
           {repeatMode === "one" && (
-            <View className='absolute right-0 top-1 bg-purple-600 rounded-full w-4 h-4 items-center justify-center'>
+            <View className='absolute right-0 bg-purple-600 rounded-full w-4 h-4 items-center justify-center'>
               <Text className='text-white text-[10px] font-bold'>1</Text>
             </View>
           )}
         </TouchableOpacity>
       </View>
 
-      {/* Volume Slider */}
-      {!isTv && VolumeManager && (
-        <View className='flex-row items-center mb-6'>
-          <Ionicons name='volume-low' size={20} color='#666' />
-          <View className='flex-1 mx-3'>
-            <Slider
-              theme={{
-                maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                minimumTrackTintColor: "#fff",
-              }}
-              progress={volumeProgress}
-              minimumValue={volumeMin}
-              maximumValue={volumeMax}
-              onSlidingComplete={handleVolumeChange}
-              renderThumb={() => null}
-              sliderHeight={8}
-              containerStyle={{ borderRadius: 100 }}
-              renderBubble={() => null}
-            />
-          </View>
-          <Ionicons name='volume-high' size={20} color='#666' />
-        </View>
-      )}
-
-      {/* AirPlay & Chromecast Buttons */}
-      {!isTv && (
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: 32,
-            marginBottom: 16,
-          }}
-        >
-          {/* AirPlay (iOS only) */}
-          {Platform.OS === "ios" && (
-            <View style={{ transform: [{ scale: 2.8 }] }}>
-              <ExpoAvRoutePickerView
-                style={{ width: 24, height: 24 }}
-                tintColor='#666666'
-                activeTintColor='#9334E9'
-              />
-            </View>
-          )}
-          {/* Chromecast */}
-          <CastButton
-            style={{
-              width: 24,
-              height: 24,
-              tintColor: isCastConnected ? "#9334E9" : "#666",
-              transform: [{ translateY: 1 }],
-            }}
-          />
+      {/* Queue info */}
+      {queue.length > 1 && (
+        <View className='items-center mb-4'>
+          <Text className='text-neutral-500 text-sm'>
+            {queueIndex + 1} of {queue.length}
+          </Text>
         </View>
       )}
     </ScrollView>

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

@@ -1,171 +0,0 @@
-import { BlurView } from "expo-blur";
-import { useAtomValue } from "jotai";
-import { useEffect, useMemo, useRef, useState } from "react";
-import {
-  Animated,
-  Easing,
-  ScrollView,
-  StyleSheet,
-  TVFocusGuideView,
-  View,
-} from "react-native";
-import { Text } from "@/components/common/Text";
-import { TVOptionCard } from "@/components/tv";
-import useRouter from "@/hooks/useAppRouter";
-import { tvOptionModalAtom } from "@/utils/atoms/tvOptionModal";
-import { store } from "@/utils/store";
-
-export default function TVOptionModal() {
-  const router = useRouter();
-  const modalState = useAtomValue(tvOptionModalAtom);
-
-  const [isReady, setIsReady] = useState(false);
-  const firstCardRef = useRef<View>(null);
-
-  const overlayOpacity = useRef(new Animated.Value(0)).current;
-  const sheetTranslateY = useRef(new Animated.Value(200)).current;
-
-  const initialSelectedIndex = useMemo(() => {
-    if (!modalState?.options) return 0;
-    const idx = modalState.options.findIndex((o) => o.selected);
-    return idx >= 0 ? idx : 0;
-  }, [modalState?.options]);
-
-  // Animate in on mount and cleanup atom on unmount
-  useEffect(() => {
-    overlayOpacity.setValue(0);
-    sheetTranslateY.setValue(200);
-
-    Animated.parallel([
-      Animated.timing(overlayOpacity, {
-        toValue: 1,
-        duration: 250,
-        easing: Easing.out(Easing.quad),
-        useNativeDriver: true,
-      }),
-      Animated.timing(sheetTranslateY, {
-        toValue: 0,
-        duration: 300,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-    ]).start();
-
-    // Delay focus setup to allow layout
-    const timer = setTimeout(() => setIsReady(true), 100);
-    return () => {
-      clearTimeout(timer);
-      // Clear the atom on unmount to prevent stale callbacks from being retained
-      store.set(tvOptionModalAtom, null);
-    };
-  }, [overlayOpacity, sheetTranslateY]);
-
-  // Request focus on the first card when ready
-  useEffect(() => {
-    if (isReady && firstCardRef.current) {
-      const timer = setTimeout(() => {
-        (firstCardRef.current as any)?.requestTVFocus?.();
-      }, 50);
-      return () => clearTimeout(timer);
-    }
-  }, [isReady]);
-
-  const handleSelect = (value: any) => {
-    modalState?.onSelect(value);
-    store.set(tvOptionModalAtom, null);
-    router.back();
-  };
-
-  // If no modal state, just go back (shouldn't happen in normal usage)
-  if (!modalState) {
-    return null;
-  }
-
-  const { title, options, cardWidth = 160, cardHeight = 75 } = modalState;
-
-  return (
-    <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
-      <Animated.View
-        style={[
-          styles.sheetContainer,
-          { transform: [{ translateY: sheetTranslateY }] },
-        ]}
-      >
-        <BlurView intensity={80} tint='dark' style={styles.blurContainer}>
-          <TVFocusGuideView
-            autoFocus
-            trapFocusUp
-            trapFocusDown
-            trapFocusLeft
-            trapFocusRight
-            style={styles.content}
-          >
-            <Text style={styles.title}>{title}</Text>
-            {isReady && (
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                style={styles.scrollView}
-                contentContainerStyle={styles.scrollContent}
-              >
-                {options.map((option, index) => (
-                  <TVOptionCard
-                    key={index}
-                    ref={
-                      index === initialSelectedIndex ? firstCardRef : undefined
-                    }
-                    label={option.label}
-                    sublabel={option.sublabel}
-                    selected={option.selected}
-                    hasTVPreferredFocus={index === initialSelectedIndex}
-                    onPress={() => handleSelect(option.value)}
-                    width={cardWidth}
-                    height={cardHeight}
-                  />
-                ))}
-              </ScrollView>
-            )}
-          </TVFocusGuideView>
-        </BlurView>
-      </Animated.View>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "flex-end",
-  },
-  sheetContainer: {
-    width: "100%",
-  },
-  blurContainer: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    overflow: "hidden",
-  },
-  content: {
-    paddingTop: 24,
-    paddingBottom: 50,
-    overflow: "visible",
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: "500",
-    color: "rgba(255,255,255,0.6)",
-    marginBottom: 16,
-    paddingHorizontal: 48,
-    textTransform: "uppercase",
-    letterSpacing: 1,
-  },
-  scrollView: {
-    overflow: "visible",
-  },
-  scrollContent: {
-    paddingHorizontal: 48,
-    paddingVertical: 20,
-    gap: 12,
-  },
-});

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

@@ -1,496 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { useQuery } from "@tanstack/react-query";
-import { BlurView } from "expo-blur";
-import { useAtomValue } from "jotai";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Animated,
-  Easing,
-  ScrollView,
-  StyleSheet,
-  TVFocusGuideView,
-  View,
-} from "react-native";
-import { Text } from "@/components/common/Text";
-import { TVRequestOptionRow } from "@/components/jellyseerr/tv/TVRequestOptionRow";
-import { TVToggleOptionRow } from "@/components/jellyseerr/tv/TVToggleOptionRow";
-import { TVButton, TVOptionSelector } from "@/components/tv";
-import type { TVOptionItem } from "@/components/tv/TVOptionSelector";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import useRouter from "@/hooks/useAppRouter";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { tvRequestModalAtom } from "@/utils/atoms/tvRequestModal";
-import type {
-  QualityProfile,
-  RootFolder,
-  Tag,
-} from "@/utils/jellyseerr/server/api/servarr/base";
-import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
-import { store } from "@/utils/store";
-
-export default function TVRequestModalPage() {
-  const typography = useScaledTVTypography();
-  const router = useRouter();
-  const modalState = useAtomValue(tvRequestModalAtom);
-  const { t } = useTranslation();
-  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
-
-  const [isReady, setIsReady] = useState(false);
-  const [requestOverrides, setRequestOverrides] = useState<MediaRequestBody>({
-    mediaId: modalState?.id ? Number(modalState.id) : 0,
-    mediaType: modalState?.mediaType,
-    userId: jellyseerrUser?.id,
-  });
-
-  const [activeSelector, setActiveSelector] = useState<
-    "profile" | "folder" | "user" | null
-  >(null);
-
-  const overlayOpacity = useRef(new Animated.Value(0)).current;
-  const sheetTranslateY = useRef(new Animated.Value(200)).current;
-
-  // Animate in on mount
-  useEffect(() => {
-    overlayOpacity.setValue(0);
-    sheetTranslateY.setValue(200);
-
-    Animated.parallel([
-      Animated.timing(overlayOpacity, {
-        toValue: 1,
-        duration: 250,
-        easing: Easing.out(Easing.quad),
-        useNativeDriver: true,
-      }),
-      Animated.timing(sheetTranslateY, {
-        toValue: 0,
-        duration: 300,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-    ]).start();
-
-    const timer = setTimeout(() => setIsReady(true), 100);
-    return () => {
-      clearTimeout(timer);
-      store.set(tvRequestModalAtom, null);
-    };
-  }, [overlayOpacity, sheetTranslateY]);
-
-  const { data: serviceSettings } = useQuery({
-    queryKey: ["jellyseerr", "request", modalState?.mediaType, "service"],
-    queryFn: async () =>
-      jellyseerrApi?.service(
-        modalState?.mediaType === "movie" ? "radarr" : "sonarr",
-      ),
-    enabled: !!jellyseerrApi && !!jellyseerrUser && !!modalState,
-  });
-
-  const { data: users } = useQuery({
-    queryKey: ["jellyseerr", "users"],
-    queryFn: async () =>
-      jellyseerrApi?.user({ take: 1000, sort: "displayname" }),
-    enabled: !!jellyseerrApi && !!jellyseerrUser && !!modalState,
-  });
-
-  const defaultService = useMemo(
-    () => serviceSettings?.find?.((v) => v.isDefault),
-    [serviceSettings],
-  );
-
-  const { data: defaultServiceDetails } = useQuery({
-    queryKey: [
-      "jellyseerr",
-      "request",
-      modalState?.mediaType,
-      "service",
-      "details",
-      defaultService?.id,
-    ],
-    queryFn: async () => {
-      setRequestOverrides((prev) => ({
-        ...prev,
-        serverId: defaultService?.id,
-      }));
-      return jellyseerrApi?.serviceDetails(
-        modalState?.mediaType === "movie" ? "radarr" : "sonarr",
-        defaultService!.id,
-      );
-    },
-    enabled:
-      !!jellyseerrApi && !!jellyseerrUser && !!defaultService && !!modalState,
-  });
-
-  const defaultProfile: QualityProfile | undefined = useMemo(
-    () =>
-      defaultServiceDetails?.profiles.find(
-        (p) => p.id === defaultServiceDetails.server?.activeProfileId,
-      ),
-    [defaultServiceDetails],
-  );
-
-  const defaultFolder: RootFolder | undefined = useMemo(
-    () =>
-      defaultServiceDetails?.rootFolders.find(
-        (f) => f.path === defaultServiceDetails.server?.activeDirectory,
-      ),
-    [defaultServiceDetails],
-  );
-
-  const defaultTags: Tag[] = useMemo(() => {
-    return (
-      defaultServiceDetails?.tags.filter((t) =>
-        defaultServiceDetails?.server.activeTags?.includes(t.id),
-      ) ?? []
-    );
-  }, [defaultServiceDetails]);
-
-  const pathTitleExtractor = (item: RootFolder) =>
-    `${item.path} (${item.freeSpace.bytesToReadable()})`;
-
-  // Option builders
-  const qualityProfileOptions: TVOptionItem<number>[] = useMemo(
-    () =>
-      defaultServiceDetails?.profiles.map((profile) => ({
-        label: profile.name,
-        value: profile.id,
-        selected:
-          (requestOverrides.profileId || defaultProfile?.id) === profile.id,
-      })) || [],
-    [
-      defaultServiceDetails?.profiles,
-      defaultProfile,
-      requestOverrides.profileId,
-    ],
-  );
-
-  const rootFolderOptions: TVOptionItem<string>[] = useMemo(
-    () =>
-      defaultServiceDetails?.rootFolders.map((folder) => ({
-        label: pathTitleExtractor(folder),
-        value: folder.path,
-        selected:
-          (requestOverrides.rootFolder || defaultFolder?.path) === folder.path,
-      })) || [],
-    [
-      defaultServiceDetails?.rootFolders,
-      defaultFolder,
-      requestOverrides.rootFolder,
-    ],
-  );
-
-  const userOptions: TVOptionItem<number>[] = useMemo(
-    () =>
-      users?.map((user) => ({
-        label: user.displayName,
-        value: user.id,
-        selected: (requestOverrides.userId || jellyseerrUser?.id) === user.id,
-      })) || [],
-    [users, jellyseerrUser, requestOverrides.userId],
-  );
-
-  const tagItems = useMemo(() => {
-    return (
-      defaultServiceDetails?.tags.map((tag) => ({
-        id: tag.id,
-        label: tag.label,
-        selected:
-          requestOverrides.tags?.includes(tag.id) ||
-          defaultTags.some((dt) => dt.id === tag.id),
-      })) ?? []
-    );
-  }, [defaultServiceDetails?.tags, defaultTags, requestOverrides.tags]);
-
-  // Selected display values
-  const selectedProfileName = useMemo(() => {
-    const profile = defaultServiceDetails?.profiles.find(
-      (p) => p.id === (requestOverrides.profileId || defaultProfile?.id),
-    );
-    return profile?.name || defaultProfile?.name || t("jellyseerr.select");
-  }, [
-    defaultServiceDetails?.profiles,
-    requestOverrides.profileId,
-    defaultProfile,
-    t,
-  ]);
-
-  const selectedFolderName = useMemo(() => {
-    const folder = defaultServiceDetails?.rootFolders.find(
-      (f) => f.path === (requestOverrides.rootFolder || defaultFolder?.path),
-    );
-    return folder
-      ? pathTitleExtractor(folder)
-      : defaultFolder
-        ? pathTitleExtractor(defaultFolder)
-        : t("jellyseerr.select");
-  }, [
-    defaultServiceDetails?.rootFolders,
-    requestOverrides.rootFolder,
-    defaultFolder,
-    t,
-  ]);
-
-  const selectedUserName = useMemo(() => {
-    const user = users?.find(
-      (u) => u.id === (requestOverrides.userId || jellyseerrUser?.id),
-    );
-    return (
-      user?.displayName || jellyseerrUser?.displayName || t("jellyseerr.select")
-    );
-  }, [users, requestOverrides.userId, jellyseerrUser, t]);
-
-  // Handlers
-  const handleProfileChange = useCallback((profileId: number) => {
-    setRequestOverrides((prev) => ({ ...prev, profileId }));
-    setActiveSelector(null);
-  }, []);
-
-  const handleFolderChange = useCallback((rootFolder: string) => {
-    setRequestOverrides((prev) => ({ ...prev, rootFolder }));
-    setActiveSelector(null);
-  }, []);
-
-  const handleUserChange = useCallback((userId: number) => {
-    setRequestOverrides((prev) => ({ ...prev, userId }));
-    setActiveSelector(null);
-  }, []);
-
-  const handleTagToggle = useCallback(
-    (tagId: number) => {
-      setRequestOverrides((prev) => {
-        const currentTags = prev.tags || defaultTags.map((t) => t.id);
-        const hasTag = currentTags.includes(tagId);
-        return {
-          ...prev,
-          tags: hasTag
-            ? currentTags.filter((id) => id !== tagId)
-            : [...currentTags, tagId],
-        };
-      });
-    },
-    [defaultTags],
-  );
-
-  const handleRequest = useCallback(() => {
-    if (!modalState) return;
-
-    const body = {
-      is4k: defaultService?.is4k || defaultServiceDetails?.server.is4k,
-      profileId: defaultProfile?.id,
-      rootFolder: defaultFolder?.path,
-      tags: defaultTags.map((t) => t.id),
-      ...modalState.requestBody,
-      ...requestOverrides,
-    };
-
-    const seasonTitle =
-      modalState.requestBody?.seasons?.length === 1
-        ? t("jellyseerr.season_number", {
-            season_number: modalState.requestBody.seasons[0],
-          })
-        : modalState.requestBody?.seasons &&
-            modalState.requestBody.seasons.length > 1
-          ? t("jellyseerr.season_all")
-          : undefined;
-
-    requestMedia(
-      seasonTitle ? `${modalState.title}, ${seasonTitle}` : modalState.title,
-      body,
-      () => {
-        modalState.onRequested();
-        router.back();
-      },
-    );
-  }, [
-    modalState,
-    requestOverrides,
-    defaultProfile,
-    defaultFolder,
-    defaultTags,
-    defaultService,
-    defaultServiceDetails,
-    requestMedia,
-    router,
-    t,
-  ]);
-
-  if (!modalState) {
-    return null;
-  }
-
-  const isDataLoaded = defaultService && defaultServiceDetails && users;
-
-  return (
-    <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
-      <Animated.View
-        style={[
-          styles.sheetContainer,
-          { transform: [{ translateY: sheetTranslateY }] },
-        ]}
-      >
-        <BlurView intensity={80} tint='dark' style={styles.blurContainer}>
-          <TVFocusGuideView
-            autoFocus
-            trapFocusUp
-            trapFocusDown
-            trapFocusLeft
-            trapFocusRight
-            style={styles.content}
-          >
-            <Text style={[styles.heading, { fontSize: typography.heading }]}>
-              {t("jellyseerr.advanced")}
-            </Text>
-            <Text style={[styles.subtitle, { fontSize: typography.callout }]}>
-              {modalState.title}
-            </Text>
-
-            {isDataLoaded && isReady ? (
-              <ScrollView
-                style={styles.scrollView}
-                showsVerticalScrollIndicator={false}
-              >
-                <View style={styles.optionsContainer}>
-                  <TVRequestOptionRow
-                    label={t("jellyseerr.quality_profile")}
-                    value={selectedProfileName}
-                    onPress={() => setActiveSelector("profile")}
-                    hasTVPreferredFocus
-                  />
-                  <TVRequestOptionRow
-                    label={t("jellyseerr.root_folder")}
-                    value={selectedFolderName}
-                    onPress={() => setActiveSelector("folder")}
-                  />
-                  <TVRequestOptionRow
-                    label={t("jellyseerr.request_as")}
-                    value={selectedUserName}
-                    onPress={() => setActiveSelector("user")}
-                  />
-
-                  {tagItems.length > 0 && (
-                    <TVToggleOptionRow
-                      label={t("jellyseerr.tags")}
-                      items={tagItems}
-                      onToggle={handleTagToggle}
-                    />
-                  )}
-                </View>
-              </ScrollView>
-            ) : (
-              <View style={styles.loadingContainer}>
-                <Text style={styles.loadingText}>{t("common.loading")}</Text>
-              </View>
-            )}
-
-            {isReady && (
-              <View style={styles.buttonContainer}>
-                <TVButton
-                  onPress={handleRequest}
-                  variant='secondary'
-                  disabled={!isDataLoaded}
-                >
-                  <Ionicons
-                    name='add'
-                    size={22}
-                    color='#FFFFFF'
-                    style={{ marginRight: 8 }}
-                  />
-                  <Text
-                    style={[
-                      styles.buttonText,
-                      { fontSize: typography.callout },
-                    ]}
-                  >
-                    {t("jellyseerr.request_button")}
-                  </Text>
-                </TVButton>
-              </View>
-            )}
-          </TVFocusGuideView>
-        </BlurView>
-      </Animated.View>
-
-      {/* Sub-selectors */}
-      <TVOptionSelector
-        visible={activeSelector === "profile"}
-        title={t("jellyseerr.quality_profile")}
-        options={qualityProfileOptions}
-        onSelect={handleProfileChange}
-        onClose={() => setActiveSelector(null)}
-        cancelLabel={t("jellyseerr.cancel")}
-      />
-      <TVOptionSelector
-        visible={activeSelector === "folder"}
-        title={t("jellyseerr.root_folder")}
-        options={rootFolderOptions}
-        onSelect={handleFolderChange}
-        onClose={() => setActiveSelector(null)}
-        cancelLabel={t("jellyseerr.cancel")}
-        cardWidth={280}
-      />
-      <TVOptionSelector
-        visible={activeSelector === "user"}
-        title={t("jellyseerr.request_as")}
-        options={userOptions}
-        onSelect={handleUserChange}
-        onClose={() => setActiveSelector(null)}
-        cancelLabel={t("jellyseerr.cancel")}
-      />
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "flex-end",
-  },
-  sheetContainer: {
-    width: "100%",
-  },
-  blurContainer: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    overflow: "hidden",
-  },
-  content: {
-    paddingTop: 24,
-    paddingBottom: 50,
-    paddingHorizontal: 44,
-    overflow: "visible",
-  },
-  heading: {
-    fontWeight: "bold",
-    color: "#FFFFFF",
-    marginBottom: 8,
-  },
-  subtitle: {
-    color: "rgba(255,255,255,0.6)",
-    marginBottom: 24,
-  },
-  scrollView: {
-    maxHeight: 320,
-    overflow: "visible",
-  },
-  optionsContainer: {
-    gap: 12,
-    paddingVertical: 8,
-    paddingHorizontal: 4,
-  },
-  loadingContainer: {
-    height: 200,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  loadingText: {
-    color: "rgba(255,255,255,0.5)",
-  },
-  buttonContainer: {
-    marginTop: 24,
-  },
-  buttonText: {
-    fontWeight: "bold",
-    color: "#FFFFFF",
-  },
-});

app/(auth)/tv-season-select-modal.tsx

@@ -1,446 +0,0 @@
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import { BlurView } from "expo-blur";
-import { useAtomValue } from "jotai";
-import { orderBy } from "lodash";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Animated,
-  Easing,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  TVFocusGuideView,
-  View,
-} from "react-native";
-import { Text } from "@/components/common/Text";
-import { TVButton } from "@/components/tv";
-import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import useRouter from "@/hooks/useAppRouter";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { useTVRequestModal } from "@/hooks/useTVRequestModal";
-import { tvSeasonSelectModalAtom } from "@/utils/atoms/tvSeasonSelectModal";
-import {
-  MediaStatus,
-  MediaType,
-} from "@/utils/jellyseerr/server/constants/media";
-import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
-import { store } from "@/utils/store";
-
-interface TVSeasonToggleCardProps {
-  season: {
-    id: number;
-    seasonNumber: number;
-    episodeCount: number;
-    status: MediaStatus;
-  };
-  selected: boolean;
-  onToggle: () => void;
-  canRequest: boolean;
-  hasTVPreferredFocus?: boolean;
-}
-
-const TVSeasonToggleCard: React.FC<TVSeasonToggleCardProps> = ({
-  season,
-  selected,
-  onToggle,
-  canRequest,
-  hasTVPreferredFocus,
-}) => {
-  const { t } = useTranslation();
-  const { focused, handleFocus, handleBlur, animatedStyle } =
-    useTVFocusAnimation({ scaleAmount: 1.08 });
-
-  // Get status icon and color based on MediaStatus
-  const getStatusIcon = (): {
-    icon: keyof typeof MaterialCommunityIcons.glyphMap;
-    color: string;
-  } | null => {
-    switch (season.status) {
-      case MediaStatus.PROCESSING:
-        return { icon: "clock", color: "#6366f1" };
-      case MediaStatus.AVAILABLE:
-        return { icon: "check", color: "#22c55e" };
-      case MediaStatus.PENDING:
-        return { icon: "bell", color: "#eab308" };
-      case MediaStatus.PARTIALLY_AVAILABLE:
-        return { icon: "minus", color: "#22c55e" };
-      case MediaStatus.BLACKLISTED:
-        return { icon: "eye-off", color: "#ef4444" };
-      default:
-        return canRequest ? { icon: "plus", color: "#22c55e" } : null;
-    }
-  };
-
-  const statusInfo = getStatusIcon();
-  const isDisabled = !canRequest;
-
-  return (
-    <Pressable
-      onPress={canRequest ? onToggle : undefined}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      disabled={isDisabled}
-      focusable={!isDisabled}
-      hasTVPreferredFocus={hasTVPreferredFocus}
-    >
-      <Animated.View
-        style={[
-          animatedStyle,
-          styles.seasonCard,
-          {
-            backgroundColor: focused
-              ? "#FFFFFF"
-              : selected
-                ? "rgba(255,255,255,0.2)"
-                : "rgba(255,255,255,0.08)",
-            borderWidth: focused ? 0 : 1,
-            borderColor: selected
-              ? "rgba(255,255,255,0.4)"
-              : "rgba(255,255,255,0.1)",
-            opacity: isDisabled ? 0.5 : 1,
-          },
-        ]}
-      >
-        {/* Checkmark for selected */}
-        <View style={styles.checkmarkContainer}>
-          {selected && (
-            <Ionicons
-              name='checkmark-circle'
-              size={24}
-              color={focused ? "#22c55e" : "#FFFFFF"}
-            />
-          )}
-        </View>
-
-        {/* Season info */}
-        <View style={styles.seasonInfo}>
-          <Text
-            style={[
-              styles.seasonTitle,
-              { color: focused ? "#000000" : "#FFFFFF" },
-            ]}
-            numberOfLines={1}
-          >
-            {t("jellyseerr.season_number", {
-              season_number: season.seasonNumber,
-            })}
-          </Text>
-          <View style={styles.episodeRow}>
-            <Text
-              style={[
-                styles.episodeCount,
-                {
-                  color: focused ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.6)",
-                },
-              ]}
-            >
-              {t("jellyseerr.number_episodes", {
-                episode_number: season.episodeCount,
-              })}
-            </Text>
-            {statusInfo && (
-              <View
-                style={[
-                  styles.statusBadge,
-                  { backgroundColor: statusInfo.color },
-                ]}
-              >
-                <MaterialCommunityIcons
-                  name={statusInfo.icon}
-                  size={14}
-                  color='#FFFFFF'
-                />
-              </View>
-            )}
-          </View>
-        </View>
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-export default function TVSeasonSelectModalPage() {
-  const typography = useScaledTVTypography();
-  const router = useRouter();
-  const modalState = useAtomValue(tvSeasonSelectModalAtom);
-  const { t } = useTranslation();
-  const { requestMedia } = useJellyseerr();
-  const { showRequestModal } = useTVRequestModal();
-
-  // Selected seasons - initially select all requestable (UNKNOWN status) seasons
-  const [selectedSeasons, setSelectedSeasons] = useState<Set<number>>(
-    new Set(),
-  );
-
-  const overlayOpacity = useRef(new Animated.Value(0)).current;
-  const sheetTranslateY = useRef(new Animated.Value(200)).current;
-
-  // Initialize selected seasons when modal state changes
-  useEffect(() => {
-    if (modalState?.seasons) {
-      const requestableSeasons = modalState.seasons
-        .filter((s) => s.status === MediaStatus.UNKNOWN && s.seasonNumber !== 0)
-        .map((s) => s.seasonNumber);
-      setSelectedSeasons(new Set(requestableSeasons));
-    }
-  }, [modalState?.seasons]);
-
-  // Animate in on mount
-  useEffect(() => {
-    overlayOpacity.setValue(0);
-    sheetTranslateY.setValue(200);
-
-    Animated.parallel([
-      Animated.timing(overlayOpacity, {
-        toValue: 1,
-        duration: 250,
-        easing: Easing.out(Easing.quad),
-        useNativeDriver: true,
-      }),
-      Animated.timing(sheetTranslateY, {
-        toValue: 0,
-        duration: 300,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-    ]).start();
-
-    return () => {
-      store.set(tvSeasonSelectModalAtom, null);
-    };
-  }, [overlayOpacity, sheetTranslateY]);
-
-  // Sort seasons by season number (ascending)
-  const sortedSeasons = useMemo(() => {
-    if (!modalState?.seasons) return [];
-    return orderBy(
-      modalState.seasons.filter((s) => s.seasonNumber !== 0),
-      "seasonNumber",
-      "asc",
-    );
-  }, [modalState?.seasons]);
-
-  // Find the index of the first requestable season for initial focus
-  const firstRequestableIndex = useMemo(() => {
-    return sortedSeasons.findIndex((s) => s.status === MediaStatus.UNKNOWN);
-  }, [sortedSeasons]);
-
-  const handleToggleSeason = useCallback((seasonNumber: number) => {
-    setSelectedSeasons((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(seasonNumber)) {
-        newSet.delete(seasonNumber);
-      } else {
-        newSet.add(seasonNumber);
-      }
-      return newSet;
-    });
-  }, []);
-
-  const handleRequestSelected = useCallback(() => {
-    if (!modalState || selectedSeasons.size === 0) return;
-
-    const seasonsArray = Array.from(selectedSeasons);
-    const body: MediaRequestBody = {
-      mediaId: modalState.mediaId,
-      mediaType: MediaType.TV,
-      tvdbId: modalState.tvdbId,
-      seasons: seasonsArray,
-    };
-
-    if (modalState.hasAdvancedRequestPermission) {
-      // Close this modal and open the advanced request modal
-      router.back();
-      showRequestModal({
-        requestBody: body,
-        title: modalState.title,
-        id: modalState.mediaId,
-        mediaType: MediaType.TV,
-        onRequested: modalState.onRequested,
-      });
-      return;
-    }
-
-    // Build the title based on selected seasons
-    const seasonTitle =
-      seasonsArray.length === 1
-        ? t("jellyseerr.season_number", { season_number: seasonsArray[0] })
-        : seasonsArray.length === sortedSeasons.length
-          ? t("jellyseerr.season_all")
-          : t("jellyseerr.n_selected", { count: seasonsArray.length });
-
-    requestMedia(`${modalState.title}, ${seasonTitle}`, body, () => {
-      modalState.onRequested();
-      router.back();
-    });
-  }, [
-    modalState,
-    selectedSeasons,
-    sortedSeasons.length,
-    requestMedia,
-    router,
-    t,
-    showRequestModal,
-  ]);
-
-  if (!modalState) {
-    return null;
-  }
-
-  return (
-    <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
-      <Animated.View
-        style={[
-          styles.sheetContainer,
-          { transform: [{ translateY: sheetTranslateY }] },
-        ]}
-      >
-        <BlurView intensity={80} tint='dark' style={styles.blurContainer}>
-          <TVFocusGuideView
-            autoFocus
-            trapFocusUp
-            trapFocusDown
-            trapFocusLeft
-            trapFocusRight
-            style={styles.content}
-          >
-            <Text style={[styles.heading, { fontSize: typography.heading }]}>
-              {t("jellyseerr.select_seasons")}
-            </Text>
-            <Text style={[styles.subtitle, { fontSize: typography.callout }]}>
-              {modalState.title}
-            </Text>
-
-            {/* Season cards horizontal scroll */}
-            <ScrollView
-              horizontal
-              showsHorizontalScrollIndicator={false}
-              style={styles.scrollView}
-              contentContainerStyle={styles.scrollContent}
-            >
-              {sortedSeasons.map((season, index) => {
-                const canRequestSeason = season.status === MediaStatus.UNKNOWN;
-                return (
-                  <TVSeasonToggleCard
-                    key={season.id}
-                    season={season}
-                    selected={selectedSeasons.has(season.seasonNumber)}
-                    onToggle={() => handleToggleSeason(season.seasonNumber)}
-                    canRequest={canRequestSeason}
-                    hasTVPreferredFocus={index === firstRequestableIndex}
-                  />
-                );
-              })}
-            </ScrollView>
-
-            {/* Request button */}
-            <View style={styles.buttonContainer}>
-              <TVButton
-                onPress={handleRequestSelected}
-                variant='secondary'
-                disabled={selectedSeasons.size === 0}
-              >
-                <Ionicons
-                  name='add'
-                  size={22}
-                  color='#FFFFFF'
-                  style={{ marginRight: 8 }}
-                />
-                <Text
-                  style={[styles.buttonText, { fontSize: typography.callout }]}
-                >
-                  {t("jellyseerr.request_selected")}
-                  {selectedSeasons.size > 0 && ` (${selectedSeasons.size})`}
-                </Text>
-              </TVButton>
-            </View>
-          </TVFocusGuideView>
-        </BlurView>
-      </Animated.View>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "flex-end",
-  },
-  sheetContainer: {
-    width: "100%",
-  },
-  blurContainer: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    overflow: "hidden",
-  },
-  content: {
-    paddingTop: 24,
-    paddingBottom: 50,
-    paddingHorizontal: 44,
-    overflow: "visible",
-  },
-  heading: {
-    fontWeight: "bold",
-    color: "#FFFFFF",
-    marginBottom: 8,
-  },
-  subtitle: {
-    color: "rgba(255,255,255,0.6)",
-    marginBottom: 24,
-  },
-  scrollView: {
-    overflow: "visible",
-  },
-  scrollContent: {
-    paddingVertical: 12,
-    paddingHorizontal: 4,
-    gap: 16,
-  },
-  seasonCard: {
-    width: 160,
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    borderRadius: 12,
-    shadowColor: "#fff",
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.2,
-    shadowRadius: 8,
-  },
-  checkmarkContainer: {
-    height: 24,
-    marginBottom: 8,
-  },
-  seasonInfo: {
-    flex: 1,
-  },
-  seasonTitle: {
-    fontWeight: "600",
-    marginBottom: 4,
-  },
-  episodeRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  episodeCount: {
-    fontSize: 14,
-  },
-  statusBadge: {
-    width: 22,
-    height: 22,
-    borderRadius: 11,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  buttonContainer: {
-    marginTop: 24,
-  },
-  buttonText: {
-    fontWeight: "bold",
-    color: "#FFFFFF",
-  },
-});

app/(auth)/tv-series-season-modal.tsx

@@ -1,190 +0,0 @@
-import { BlurView } from "expo-blur";
-import { useAtomValue } from "jotai";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Animated,
-  Easing,
-  ScrollView,
-  StyleSheet,
-  TVFocusGuideView,
-  View,
-} from "react-native";
-import { Text } from "@/components/common/Text";
-import { TVCancelButton, TVOptionCard } from "@/components/tv";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import useRouter from "@/hooks/useAppRouter";
-import { tvSeriesSeasonModalAtom } from "@/utils/atoms/tvSeriesSeasonModal";
-import { store } from "@/utils/store";
-
-export default function TVSeriesSeasonModalPage() {
-  const typography = useScaledTVTypography();
-  const router = useRouter();
-  const modalState = useAtomValue(tvSeriesSeasonModalAtom);
-  const { t } = useTranslation();
-
-  const [isReady, setIsReady] = useState(false);
-  const firstCardRef = useRef<View>(null);
-
-  const overlayOpacity = useRef(new Animated.Value(0)).current;
-  const sheetTranslateY = useRef(new Animated.Value(200)).current;
-
-  const initialSelectedIndex = useMemo(() => {
-    if (!modalState?.seasons) return 0;
-    const idx = modalState.seasons.findIndex((o) => o.selected);
-    return idx >= 0 ? idx : 0;
-  }, [modalState?.seasons]);
-
-  // Animate in on mount
-  useEffect(() => {
-    overlayOpacity.setValue(0);
-    sheetTranslateY.setValue(200);
-
-    Animated.parallel([
-      Animated.timing(overlayOpacity, {
-        toValue: 1,
-        duration: 250,
-        easing: Easing.out(Easing.quad),
-        useNativeDriver: true,
-      }),
-      Animated.timing(sheetTranslateY, {
-        toValue: 0,
-        duration: 300,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-    ]).start();
-
-    const timer = setTimeout(() => setIsReady(true), 100);
-    return () => {
-      clearTimeout(timer);
-      store.set(tvSeriesSeasonModalAtom, null);
-    };
-  }, [overlayOpacity, sheetTranslateY]);
-
-  // Focus on the selected card when ready
-  useEffect(() => {
-    if (isReady && firstCardRef.current) {
-      const timer = setTimeout(() => {
-        (firstCardRef.current as any)?.requestTVFocus?.();
-      }, 50);
-      return () => clearTimeout(timer);
-    }
-  }, [isReady]);
-
-  const handleSelect = (seasonIndex: number) => {
-    if (modalState?.onSeasonSelect) {
-      modalState.onSeasonSelect(seasonIndex);
-    }
-    router.back();
-  };
-
-  const handleCancel = () => {
-    router.back();
-  };
-
-  if (!modalState) {
-    return null;
-  }
-
-  return (
-    <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
-      <Animated.View
-        style={[
-          styles.sheetContainer,
-          { transform: [{ translateY: sheetTranslateY }] },
-        ]}
-      >
-        <BlurView intensity={80} tint='dark' style={styles.blurContainer}>
-          <TVFocusGuideView
-            autoFocus
-            trapFocusUp
-            trapFocusDown
-            trapFocusLeft
-            trapFocusRight
-            style={styles.content}
-          >
-            <Text style={[styles.title, { fontSize: typography.callout }]}>
-              {t("item_card.select_season")}
-            </Text>
-
-            {isReady && (
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                style={styles.scrollView}
-                contentContainerStyle={styles.scrollContent}
-              >
-                {modalState.seasons.map((season, index) => (
-                  <TVOptionCard
-                    key={season.value}
-                    ref={
-                      index === initialSelectedIndex ? firstCardRef : undefined
-                    }
-                    label={season.label}
-                    selected={season.selected}
-                    hasTVPreferredFocus={index === initialSelectedIndex}
-                    onPress={() => handleSelect(season.value)}
-                    width={180}
-                    height={85}
-                  />
-                ))}
-              </ScrollView>
-            )}
-
-            {isReady && (
-              <View style={styles.cancelButtonContainer}>
-                <TVCancelButton
-                  onPress={handleCancel}
-                  label={t("common.cancel")}
-                />
-              </View>
-            )}
-          </TVFocusGuideView>
-        </BlurView>
-      </Animated.View>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "flex-end",
-  },
-  sheetContainer: {
-    width: "100%",
-  },
-  blurContainer: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    overflow: "hidden",
-  },
-  content: {
-    paddingTop: 24,
-    paddingBottom: 50,
-    overflow: "visible",
-  },
-  title: {
-    fontWeight: "500",
-    color: "rgba(255,255,255,0.6)",
-    marginBottom: 16,
-    paddingHorizontal: 48,
-    textTransform: "uppercase",
-    letterSpacing: 1,
-  },
-  scrollView: {
-    overflow: "visible",
-  },
-  scrollContent: {
-    paddingHorizontal: 48,
-    paddingVertical: 20,
-    gap: 12,
-  },
-  cancelButtonContainer: {
-    marginTop: 16,
-    paddingHorizontal: 48,
-    alignItems: "flex-start",
-  },
-});

app/_layout.tsx

@@ -1,20 +1,17 @@
 import "@/augmentations";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import NetInfo from "@react-native-community/netinfo";
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
-import { onlineManager, QueryClient } from "@tanstack/react-query";
+import { QueryClient } from "@tanstack/react-query";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import * as BackgroundTask from "expo-background-task";
 import * as Device from "expo-device";
 import { Platform } from "react-native";
 import { GlobalModal } from "@/components/GlobalModal";
-
 import i18n from "@/i18n";
 import { DownloadProvider } from "@/providers/DownloadProvider";
 import { GlobalModalProvider } from "@/providers/GlobalModalProvider";
-import { IntroSheetProvider } from "@/providers/IntroSheetProvider";
 import {
   apiAtom,
   getOrSetDeviceId,
@@ -23,7 +20,6 @@ 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 {
@@ -49,7 +45,7 @@ import type {
   NotificationResponse,
 } from "expo-notifications/build/Notifications.types";
 import type { ExpoPushToken } from "expo-notifications/build/Tokens.types";
-import { Stack, useSegments } from "expo-router";
+import { router, 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";
@@ -58,9 +54,8 @@ 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 as jotaiStore, store } from "@/utils/store";
+import { store } from "@/utils/store";
 import "react-native-reanimated";
 import { Toaster } from "sonner-native";
 
@@ -83,9 +78,14 @@ SplashScreen.setOptions({
   fade: true,
 });
 
-function useNotificationObserver() {
-  const router = useRouter();
+function redirect(notification: typeof Notifications.Notification) {
+  const url = notification.request.content.data?.url;
+  if (url) {
+    router.push(url);
+  }
+}
 
+function useNotificationObserver() {
   useEffect(() => {
     if (Platform.isTV) return;
 
@@ -96,17 +96,14 @@ function useNotificationObserver() {
         if (!isMounted || !response?.notification) {
           return;
         }
-        const url = response?.notification.request.content.data?.url;
-        if (url) {
-          router.push(url);
-        }
+        redirect(response?.notification);
       },
     );
 
     return () => {
       isMounted = false;
     };
-  }, [router]);
+  }, []);
 }
 
 if (!Platform.isTV) {
@@ -179,7 +176,7 @@ export default function RootLayout() {
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <JotaiProvider store={jotaiStore}>
+      <JotaiProvider>
         <ActionSheetProvider>
           <I18nextProvider i18n={i18n}>
             <Layout />
@@ -190,29 +187,11 @@ export default function RootLayout() {
   );
 }
 
-// Set up online manager for network-aware query behavior
-onlineManager.setEventListener((setOnline) => {
-  return NetInfo.addEventListener((state) => {
-    setOnline(!!state.isConnected);
-  });
-});
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 0, // Always stale - triggers background refetch on mount
-      gcTime: 1000 * 60 * 60 * 24, // 24 hours - keep in cache for offline
-      networkMode: "offlineFirst", // Return cache first, refetch if online
-      refetchOnMount: true, // Refetch when component mounts
-      refetchOnReconnect: true, // Refetch when network reconnects
-      refetchOnWindowFocus: false, // Not needed for mobile
-      retry: (failureCount) => {
-        if (!onlineManager.isOnline()) return false;
-        return failureCount < 3;
-      },
-    },
-    mutations: {
-      networkMode: "online", // Only run mutations when online
+      staleTime: 30000, // 30 seconds - data is fresh
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours - keep in cache for persistence
     },
   },
 });
@@ -231,7 +210,6 @@ function Layout() {
   const [user] = useAtom(userAtom);
   const [api] = useAtom(apiAtom);
   const _segments = useSegments();
-  const router = useRouter();
 
   useEffect(() => {
     i18n.changeLanguage(
@@ -324,6 +302,9 @@ 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);
@@ -383,119 +364,75 @@ function Layout() {
       }}
     >
       <JellyfinProvider>
-        <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.Screen
-                                  name='(auth)/tv-option-modal'
-                                  options={{
-                                    headerShown: false,
-                                    presentation: "transparentModal",
-                                    animation: "fade",
-                                  }}
-                                />
-                                <Stack.Screen
-                                  name='(auth)/tv-subtitle-modal'
-                                  options={{
-                                    headerShown: false,
-                                    presentation: "transparentModal",
-                                    animation: "fade",
-                                  }}
-                                />
-                                <Stack.Screen
-                                  name='(auth)/tv-request-modal'
-                                  options={{
-                                    headerShown: false,
-                                    presentation: "transparentModal",
-                                    animation: "fade",
-                                  }}
-                                />
-                                <Stack.Screen
-                                  name='(auth)/tv-season-select-modal'
-                                  options={{
-                                    headerShown: false,
-                                    presentation: "transparentModal",
-                                    animation: "fade",
-                                  }}
-                                />
-                                <Stack.Screen
-                                  name='(auth)/tv-series-season-modal'
-                                  options={{
-                                    headerShown: false,
-                                    presentation: "transparentModal",
-                                    animation: "fade",
-                                  }}
-                                />
-                              </Stack>
-                              <Toaster
-                                duration={4000}
-                                toastOptions={{
-                                  style: {
-                                    backgroundColor: "#262626",
-                                    borderColor: "#363639",
-                                    borderWidth: 1,
-                                  },
-                                  titleStyle: {
-                                    color: "white",
-                                  },
-                                }}
-                                closeButton
-                              />
-                              {!Platform.isTV && <GlobalModal />}
-                            </ThemeProvider>
-                          </IntroSheetProvider>
-                        </BottomSheetModalProvider>
-                      </GlobalModalProvider>
-                    </MusicPlayerProvider>
-                  </DownloadProvider>
-                </WebSocketProvider>
-              </LogProvider>
-            </PlaySettingsProvider>
-          </NetworkStatusProvider>
-        </ServerUrlProvider>
+        <NetworkStatusProvider>
+          <PlaySettingsProvider>
+            <LogProvider>
+              <WebSocketProvider>
+                <DownloadProvider>
+                  <MusicPlayerProvider>
+                    <GlobalModalProvider>
+                      <BottomSheetModalProvider>
+                        <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
+                          />
+                          <GlobalModal />
+                        </ThemeProvider>
+                      </BottomSheetModalProvider>
+                    </GlobalModalProvider>
+                  </MusicPlayerProvider>
+                </DownloadProvider>
+              </WebSocketProvider>
+            </LogProvider>
+          </PlaySettingsProvider>
+        </NetworkStatusProvider>
       </JellyfinProvider>
     </PersistQueryClientProvider>
   );

app/login.tsx

@@ -1,13 +1,547 @@
-import { Platform } from "react-native";
-import { Login } from "@/components/login/Login";
-import { TVLogin } from "@/components/login/TVLogin";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import type { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
+import { Image } from "expo-image";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import { t } from "i18next";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useState } from "react";
+import {
+  Alert,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { z } from "zod";
+import { Button } from "@/components/Button";
+import { Input } from "@/components/common/Input";
+import { Text } from "@/components/common/Text";
+import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
+import { PreviousServersList } from "@/components/PreviousServersList";
+import { Colors } from "@/constants/Colors";
+import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
 
-const LoginPage: React.FC = () => {
-  if (Platform.isTV) {
-    return <TVLogin />;
+const CredentialsSchema = z.object({
+  username: z.string().min(1, t("login.username_required")),
+});
+
+const Login: React.FC = () => {
+  const api = useAtomValue(apiAtom);
+  const navigation = useNavigation();
+  const params = useLocalSearchParams();
+  const { setServer, login, removeServer, initiateQuickConnect } =
+    useJellyfin();
+
+  const {
+    apiUrl: _apiUrl,
+    username: _username,
+    password: _password,
+  } = params as { apiUrl: string; username: string; password: string };
+
+  const [loadingServerCheck, setLoadingServerCheck] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [serverURL, setServerURL] = useState<string>(_apiUrl || "");
+  const [serverName, setServerName] = useState<string>("");
+  const [credentials, setCredentials] = useState<{
+    username: string;
+    password: string;
+  }>({
+    username: _username || "",
+    password: _password || "",
+  });
+
+  /**
+   * A way to auto login based on a link
+   */
+  useEffect(() => {
+    (async () => {
+      if (_apiUrl) {
+        await setServer({
+          address: _apiUrl,
+        });
+
+        // Wait for server setup and state updates to complete
+        setTimeout(() => {
+          if (_username && _password) {
+            setCredentials({ username: _username, password: _password });
+            login(_username, _password);
+          }
+        }, 0);
+      }
+    })();
+  }, [_apiUrl, _username, _password]);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerTitle: serverName,
+      headerLeft: () =>
+        api?.basePath ? (
+          <TouchableOpacity
+            onPress={() => {
+              removeServer();
+            }}
+            className='flex flex-row items-center pr-2 pl-1'
+          >
+            <Ionicons name='chevron-back' size={18} color={Colors.primary} />
+            <Text className=' ml-1 text-purple-600'>
+              {t("login.change_server")}
+            </Text>
+          </TouchableOpacity>
+        ) : null,
+    });
+  }, [serverName, navigation, api?.basePath]);
+
+  const handleLogin = async () => {
+    Keyboard.dismiss();
+
+    setLoading(true);
+    try {
+      const result = CredentialsSchema.safeParse(credentials);
+      if (result.success) {
+        await login(credentials.username, credentials.password);
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        Alert.alert(t("login.connection_failed"), error.message);
+      } else {
+        Alert.alert(
+          t("login.connection_failed"),
+          t("login.an_unexpected_error_occured"),
+        );
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * Checks the availability and validity of a Jellyfin server URL.
+   *
+   * This function attempts to connect to a Jellyfin server using the provided URL.
+   * It tries both HTTPS and HTTP protocols, with a timeout to handle long 404 responses.
+   *
+   * @param {string} url - The base URL of the Jellyfin server to check.
+   * @returns {Promise<string | undefined>} A Promise that resolves to:
+   *   - The full URL (including protocol) if a valid Jellyfin server is found.
+   *   - undefined if no valid server is found at the given URL.
+   *
+   * Side effects:
+   * - Sets loadingServerCheck state to true at the beginning and false at the end.
+   * - Logs errors and timeout information to the console.
+   */
+  const checkUrl = useCallback(async (url: string) => {
+    setLoadingServerCheck(true);
+    const baseUrl = url.replace(/^https?:\/\//i, "");
+    const protocols = ["https", "http"];
+    try {
+      return checkHttp(baseUrl, protocols);
+    } catch (e) {
+      if (e instanceof Error && e.message === "Server too old") {
+        throw e;
+      }
+      return undefined;
+    } finally {
+      setLoadingServerCheck(false);
+    }
+  }, []);
+
+  async function checkHttp(baseUrl: string, protocols: string[]) {
+    for (const protocol of protocols) {
+      try {
+        const response = await fetch(
+          `${protocol}://${baseUrl}/System/Info/Public`,
+          {
+            mode: "cors",
+          },
+        );
+        if (response.ok) {
+          const data = (await response.json()) as PublicSystemInfo;
+          const serverVersion = data.Version?.split(".");
+          if (serverVersion && +serverVersion[0] <= 10) {
+            if (+serverVersion[1] < 10) {
+              Alert.alert(
+                t("login.too_old_server_text"),
+                t("login.too_old_server_description"),
+              );
+              throw new Error("Server too old");
+            }
+          }
+          setServerName(data.ServerName || "");
+          return `${protocol}://${baseUrl}`;
+        }
+      } catch (e) {
+        if (e instanceof Error && e.message === "Server too old") {
+          throw e;
+        }
+      }
+    }
+    return undefined;
   }
+  /**
+   * Handles the connection attempt to a Jellyfin server.
+   *
+   * This function trims the input URL, checks its validity using the `checkUrl` function,
+   * and sets the server address if a valid connection is established.
+   *
+   * @param {string} url - The URL of the Jellyfin server to connect to.
+   *
+   * @returns {Promise<void>}
+   *
+   * Side effects:
+   * - Calls `checkUrl` to validate the server URL.
+   * - Shows an alert if the connection fails.
+   * - Sets the server address using `setServer` if the connection is successful.
+   *
+   */
+  const handleConnect = useCallback(async (url: string) => {
+    url = url.trim().replace(/\/$/, "");
+    try {
+      const result = await checkUrl(url);
+      if (result === undefined) {
+        Alert.alert(
+          t("login.connection_failed"),
+          t("login.could_not_connect_to_server"),
+        );
+        return;
+      }
+      await setServer({ address: result });
+    } catch {}
+  }, []);
 
-  return <Login />;
+  const handleQuickConnect = async () => {
+    try {
+      const code = await initiateQuickConnect();
+      if (code) {
+        Alert.alert(
+          t("login.quick_connect"),
+          t("login.enter_code_to_login", { code: code }),
+          [
+            {
+              text: t("login.got_it"),
+            },
+          ],
+        );
+      }
+    } catch (_error) {
+      Alert.alert(
+        t("login.error_title"),
+        t("login.failed_to_initiate_quick_connect"),
+      );
+    }
+  };
+
+  return Platform.isTV ? (
+    // TV layout
+    <SafeAreaView className='flex-1 bg-black'>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ flex: 1 }}
+      >
+        {api?.basePath ? (
+          // ------------ Username/Password view ------------
+          <View className='flex-1 items-center justify-center'>
+            {/* Safe centered column with max width so TV doesn’t stretch too far */}
+            <View className='w-[92%] max-w-[900px] px-2 -mt-12'>
+              <Text className='text-3xl font-bold text-white mb-1'>
+                {serverName ? (
+                  <>
+                    {`${t("login.login_to_title")} `}
+                    <Text className='text-purple-500'>{serverName}</Text>
+                  </>
+                ) : (
+                  t("login.login_title")
+                )}
+              </Text>
+              <Text className='text-xs text-neutral-400 mb-6'>
+                {api.basePath}
+              </Text>
+
+              {/* Username */}
+              <Input
+                placeholder={t("login.username_placeholder")}
+                onChangeText={(text: string) =>
+                  setCredentials((prev) => ({ ...prev, username: text }))
+                }
+                onEndEditing={(e) => {
+                  const newValue = e.nativeEvent.text;
+                  if (newValue && newValue !== credentials.username) {
+                    setCredentials((prev) => ({ ...prev, username: newValue }));
+                  }
+                }}
+                value={credentials.username}
+                keyboardType='default'
+                returnKeyType='done'
+                autoCapitalize='none'
+                textContentType='oneTimeCode'
+                clearButtonMode='while-editing'
+                maxLength={500}
+                extraClassName='mb-4'
+                autoFocus={false}
+                blurOnSubmit={true}
+              />
+
+              {/* Password */}
+              <Input
+                placeholder={t("login.password_placeholder")}
+                onChangeText={(text: string) =>
+                  setCredentials((prev) => ({ ...prev, password: text }))
+                }
+                onEndEditing={(e) => {
+                  const newValue = e.nativeEvent.text;
+                  if (newValue && newValue !== credentials.password) {
+                    setCredentials((prev) => ({ ...prev, password: newValue }));
+                  }
+                }}
+                value={credentials.password}
+                secureTextEntry
+                keyboardType='default'
+                returnKeyType='done'
+                autoCapitalize='none'
+                textContentType='password'
+                clearButtonMode='while-editing'
+                maxLength={500}
+                extraClassName='mb-4'
+                autoFocus={false}
+                blurOnSubmit={true}
+              />
+
+              <View className='mt-4'>
+                <Button
+                  onPress={handleLogin}
+                  disabled={!credentials.username.trim()}
+                >
+                  {t("login.login_button")}
+                </Button>
+              </View>
+              <View className='mt-3'>
+                <Button
+                  onPress={handleQuickConnect}
+                  className='bg-neutral-800 border border-neutral-700'
+                >
+                  {t("login.quick_connect")}
+                </Button>
+              </View>
+            </View>
+          </View>
+        ) : (
+          // ------------ Server connect view ------------
+          <View className='flex-1 items-center justify-center'>
+            <View className='w-[92%] max-w-[900px] -mt-2'>
+              <View className='items-center mb-1'>
+                <Image
+                  source={require("@/assets/images/icon-ios-plain.png")}
+                  style={{ width: 110, height: 110 }}
+                  contentFit='contain'
+                />
+              </View>
+
+              <Text className='text-white text-4xl font-bold text-center'>
+                Streamyfin
+              </Text>
+              <Text className='text-neutral-400 text-base text-left mt-2 mb-1'>
+                {t("server.enter_url_to_jellyfin_server")}
+              </Text>
+
+              {/* Full-width Input with clear focus ring */}
+              <Input
+                aria-label='Server URL'
+                placeholder={t("server.server_url_placeholder")}
+                onChangeText={setServerURL}
+                value={serverURL}
+                keyboardType='url'
+                returnKeyType='done'
+                autoCapitalize='none'
+                textContentType='URL'
+                maxLength={500}
+                autoFocus={false}
+                blurOnSubmit={true}
+              />
+
+              {/* Full-width primary button */}
+              <View className='mt-4'>
+                <Button
+                  onPress={async () => {
+                    await handleConnect(serverURL);
+                  }}
+                >
+                  {t("server.connect_button")}
+                </Button>
+              </View>
+
+              {/* Lists stay full width but inside max width container */}
+              <View className='mt-2'>
+                <JellyfinServerDiscovery
+                  onServerSelect={async (server: any) => {
+                    setServerURL(server.address);
+                    if (server.serverName) setServerName(server.serverName);
+                    await handleConnect(server.address);
+                  }}
+                />
+                <PreviousServersList
+                  onServerSelect={async (s: any) => {
+                    await handleConnect(s.address);
+                  }}
+                />
+              </View>
+            </View>
+          </View>
+        )}
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  ) : (
+    // Mobile layout
+    <SafeAreaView style={{ flex: 1, paddingBottom: 16 }}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={{ flex: 1 }}
+      >
+        {api?.basePath ? (
+          <View className='flex flex-col flex-1 justify-center'>
+            <View className='px-4 w-full'>
+              <View className='flex flex-col space-y-2'>
+                <Text className='text-2xl font-bold -mb-2'>
+                  {serverName ? (
+                    <>
+                      {`${t("login.login_to_title")} `}
+                      <Text className='text-purple-600'>{serverName}</Text>
+                    </>
+                  ) : (
+                    t("login.login_title")
+                  )}
+                </Text>
+                <Text className='text-xs text-neutral-400'>{api.basePath}</Text>
+                <Input
+                  placeholder={t("login.username_placeholder")}
+                  onChangeText={(text) =>
+                    setCredentials((prev) => ({ ...prev, username: text }))
+                  }
+                  onEndEditing={(e) => {
+                    const newValue = e.nativeEvent.text;
+                    if (newValue && newValue !== credentials.username) {
+                      setCredentials((prev) => ({
+                        ...prev,
+                        username: newValue,
+                      }));
+                    }
+                  }}
+                  value={credentials.username}
+                  keyboardType='default'
+                  returnKeyType='done'
+                  autoCapitalize='none'
+                  // Changed from username to oneTimeCode because it is a known issue in RN
+                  // https://github.com/facebook/react-native/issues/47106#issuecomment-2521270037
+                  textContentType='oneTimeCode'
+                  clearButtonMode='while-editing'
+                  maxLength={500}
+                />
+
+                <Input
+                  placeholder={t("login.password_placeholder")}
+                  onChangeText={(text) =>
+                    setCredentials((prev) => ({ ...prev, password: text }))
+                  }
+                  onEndEditing={(e) => {
+                    const newValue = e.nativeEvent.text;
+                    if (newValue && newValue !== credentials.password) {
+                      setCredentials((prev) => ({
+                        ...prev,
+                        password: newValue,
+                      }));
+                    }
+                  }}
+                  value={credentials.password}
+                  secureTextEntry
+                  keyboardType='default'
+                  returnKeyType='done'
+                  autoCapitalize='none'
+                  textContentType='password'
+                  clearButtonMode='while-editing'
+                  maxLength={500}
+                />
+                <View className='flex flex-row items-center justify-between'>
+                  <Button
+                    onPress={handleLogin}
+                    loading={loading}
+                    disabled={!credentials.username.trim()}
+                    className='flex-1 mr-2'
+                  >
+                    {t("login.login_button")}
+                  </Button>
+                  <TouchableOpacity
+                    onPress={handleQuickConnect}
+                    className='p-2 bg-neutral-900 rounded-xl h-12 w-12 flex items-center justify-center'
+                  >
+                    <MaterialCommunityIcons
+                      name='cellphone-lock'
+                      size={24}
+                      color='white'
+                    />
+                  </TouchableOpacity>
+                </View>
+              </View>
+            </View>
+
+            <View className='absolute bottom-0 left-0 w-full px-4 mb-2' />
+          </View>
+        ) : (
+          <View className='flex flex-col flex-1 items-center justify-center w-full'>
+            <View className='flex flex-col gap-y-2 px-4 w-full -mt-36'>
+              <Image
+                style={{
+                  width: 100,
+                  height: 100,
+                  marginLeft: -23,
+                  marginBottom: -20,
+                }}
+                source={require("@/assets/images/icon-ios-plain.png")}
+              />
+              <Text className='text-3xl font-bold'>Streamyfin</Text>
+              <Text className='text-neutral-500'>
+                {t("server.enter_url_to_jellyfin_server")}
+              </Text>
+              <Input
+                aria-label='Server URL'
+                placeholder={t("server.server_url_placeholder")}
+                onChangeText={setServerURL}
+                value={serverURL}
+                keyboardType='url'
+                returnKeyType='done'
+                autoCapitalize='none'
+                textContentType='URL'
+                maxLength={500}
+              />
+              <Button
+                loading={loadingServerCheck}
+                disabled={loadingServerCheck}
+                onPress={async () => {
+                  await handleConnect(serverURL);
+                }}
+                className='w-full grow'
+              >
+                {t("server.connect_button")}
+              </Button>
+              <JellyfinServerDiscovery
+                onServerSelect={async (server) => {
+                  setServerURL(server.address);
+                  if (server.serverName) {
+                    setServerName(server.serverName);
+                  }
+                  await handleConnect(server.address);
+                }}
+              />
+              <PreviousServersList
+                onServerSelect={async (s) => {
+                  await handleConnect(s.address);
+                }}
+              />
+            </View>
+          </View>
+        )}
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
 };
 
-export default LoginPage;
+export default Login;

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.5/schema.json",
   "files": {
     "includes": [
       "**/*",

components/AccountsSheet.tsx

@@ -1,223 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
-import type React from "react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { Alert, Platform, TouchableOpacity, View } from "react-native";
-import { Swipeable } from "react-native-gesture-handler";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Colors } from "@/constants/Colors";
-import {
-  deleteAccountCredential,
-  type SavedServer,
-  type SavedServerAccount,
-} from "@/utils/secureCredentials";
-import { Button } from "./Button";
-import { Text } from "./common/Text";
-
-interface AccountsSheetProps {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  server: SavedServer | null;
-  onAccountSelect: (account: SavedServerAccount) => void;
-  onAddAccount: () => void;
-  onAccountDeleted?: () => void;
-}
-
-export const AccountsSheet: React.FC<AccountsSheetProps> = ({
-  open,
-  setOpen,
-  server,
-  onAccountSelect,
-  onAddAccount,
-  onAccountDeleted,
-}) => {
-  const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-
-  const isAndroid = Platform.OS === "android";
-  const snapPoints = useMemo(
-    () => (isAndroid ? ["100%"] : ["50%"]),
-    [isAndroid],
-  );
-
-  useEffect(() => {
-    if (open) {
-      bottomSheetModalRef.current?.present();
-    } else {
-      bottomSheetModalRef.current?.dismiss();
-    }
-  }, [open]);
-
-  const handleSheetChanges = useCallback(
-    (index: number) => {
-      if (index === -1) {
-        setOpen(false);
-      }
-    },
-    [setOpen],
-  );
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
-  const handleDeleteAccount = async (account: SavedServerAccount) => {
-    if (!server) return;
-
-    Alert.alert(
-      t("server.remove_saved_login"),
-      t("server.remove_account_description", { username: account.username }),
-      [
-        { text: t("common.cancel"), style: "cancel" },
-        {
-          text: t("common.remove"),
-          style: "destructive",
-          onPress: async () => {
-            await deleteAccountCredential(server.address, account.userId);
-            onAccountDeleted?.();
-          },
-        },
-      ],
-    );
-  };
-
-  const getSecurityIcon = (
-    securityType: SavedServerAccount["securityType"],
-  ): keyof typeof Ionicons.glyphMap => {
-    switch (securityType) {
-      case "pin":
-        return "keypad";
-      case "password":
-        return "lock-closed";
-      default:
-        return "key";
-    }
-  };
-
-  const renderRightActions = (account: SavedServerAccount) => (
-    <TouchableOpacity
-      onPress={() => handleDeleteAccount(account)}
-      className='bg-red-600 justify-center items-center px-5'
-    >
-      <Ionicons name='trash' size={20} color='white' />
-    </TouchableOpacity>
-  );
-
-  if (!server) return null;
-
-  return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
-      snapPoints={snapPoints}
-      onChange={handleSheetChanges}
-      handleIndicatorStyle={{ backgroundColor: "white" }}
-      backgroundStyle={{ backgroundColor: "#171717" }}
-      backdropComponent={renderBackdrop}
-    >
-      <BottomSheetView
-        style={{
-          flex: 1,
-          paddingLeft: Math.max(16, insets.left),
-          paddingRight: Math.max(16, insets.right),
-          paddingBottom: Math.max(16, insets.bottom),
-        }}
-      >
-        <View className='flex-1'>
-          {/* Header */}
-          <View className='mb-4'>
-            <Text className='font-bold text-2xl text-neutral-100'>
-              {t("server.select_account")}
-            </Text>
-            <Text className='text-neutral-400 mt-1'>
-              {server.name || server.address}
-            </Text>
-          </View>
-
-          {/* Account List */}
-          <View className='bg-neutral-800 rounded-xl overflow-hidden mb-4'>
-            {server.accounts.map((account, index) => (
-              <Swipeable
-                key={account.userId}
-                renderRightActions={() => renderRightActions(account)}
-                overshootRight={false}
-              >
-                <TouchableOpacity
-                  onPress={() => {
-                    setOpen(false);
-                    onAccountSelect(account);
-                  }}
-                  className={`flex-row items-center p-4 bg-neutral-800 ${
-                    index < server.accounts.length - 1
-                      ? "border-b border-neutral-700"
-                      : ""
-                  }`}
-                >
-                  {/* Avatar */}
-                  <View className='w-10 h-10 bg-neutral-700 rounded-full items-center justify-center mr-3'>
-                    <Ionicons name='person' size={20} color='white' />
-                  </View>
-
-                  {/* Account Info */}
-                  <View className='flex-1'>
-                    <Text className='text-neutral-100 font-medium'>
-                      {account.username}
-                    </Text>
-                    <Text className='text-neutral-500 text-sm'>
-                      {account.securityType === "none"
-                        ? t("save_account.no_protection")
-                        : account.securityType === "pin"
-                          ? t("save_account.pin_code")
-                          : t("save_account.password")}
-                    </Text>
-                  </View>
-
-                  {/* Security Icon */}
-                  <Ionicons
-                    name={getSecurityIcon(account.securityType)}
-                    size={18}
-                    color={Colors.primary}
-                  />
-                </TouchableOpacity>
-              </Swipeable>
-            ))}
-          </View>
-
-          {/* Hint */}
-          <Text className='text-xs text-neutral-500 mb-4 ml-1'>
-            {t("server.swipe_to_remove")}
-          </Text>
-
-          {/* Add Account Button */}
-          <Button
-            onPress={() => {
-              setOpen(false);
-              onAddAccount();
-            }}
-            color='purple'
-          >
-            <View className='flex-row items-center justify-center'>
-              <Ionicons name='add' size={20} color='white' />
-              <Text className='text-white font-semibold ml-2'>
-                {t("server.add_account")}
-              </Text>
-            </View>
-          </Button>
-        </View>
-      </BottomSheetView>
-    </BottomSheetModal>
-  );
-};

components/Badge.tsx

@@ -1,7 +1,4 @@
-import { BlurView } from "expo-blur";
-import { Platform, StyleSheet, View, type ViewProps } from "react-native";
-import { GlassEffectView } from "react-native-glass-effect-view";
-import { useScaledTVTypography } from "@/constants/TVTypography";
+import { View, type ViewProps } from "react-native";
 import { Text } from "./common/Text";
 
 interface Props extends ViewProps {
@@ -16,11 +13,16 @@ export const Badge: React.FC<Props> = ({
   variant = "purple",
   ...props
 }) => {
-  const typography = useScaledTVTypography();
-
-  const content = (
-    <View style={styles.content}>
-      {iconLeft && <View style={styles.iconLeft}>{iconLeft}</View>}
+  return (
+    <View
+      {...props}
+      className={`
+      rounded p-1 shrink grow-0 self-start flex flex-row items-center px-1.5
+      ${variant === "purple" && "bg-purple-600"}
+      ${variant === "gray" && "bg-neutral-800"}
+      `}
+    >
+      {iconLeft && <View className='mr-1'>{iconLeft}</View>}
       <Text
         className={`
           text-xs
@@ -31,104 +33,4 @@ export const Badge: React.FC<Props> = ({
       </Text>
     </View>
   );
-
-  if (Platform.OS === "ios" && !Platform.isTV) {
-    return (
-      <View {...props} style={[styles.container, props.style]}>
-        <GlassEffectView style={{ borderRadius: 100 }}>
-          {content}
-        </GlassEffectView>
-      </View>
-    );
-  }
-
-  // On TV, use BlurView for consistent styling
-  if (Platform.isTV) {
-    return (
-      <BlurView
-        intensity={10}
-        tint='light'
-        style={{
-          borderRadius: 8,
-          overflow: "hidden",
-          alignSelf: "flex-start",
-          flexShrink: 1,
-          flexGrow: 0,
-        }}
-      >
-        <View
-          style={[
-            {
-              paddingVertical: 10,
-              paddingHorizontal: 16,
-              flexDirection: "row",
-              alignItems: "center",
-              backgroundColor: "rgba(0,0,0,0.3)",
-            },
-            props.style,
-          ]}
-        >
-          {iconLeft && <View style={{ marginRight: 8 }}>{iconLeft}</View>}
-          <Text
-            style={{
-              fontSize: typography.callout,
-              color: "#E5E7EB",
-            }}
-          >
-            {text}
-          </Text>
-        </View>
-      </BlurView>
-    );
-  }
-
-  return (
-    <View
-      {...props}
-      style={[
-        {
-          borderRadius: 4,
-          padding: 4,
-          paddingHorizontal: 6,
-          flexShrink: 1,
-          flexGrow: 0,
-          alignSelf: "flex-start",
-          flexDirection: "row",
-          alignItems: "center",
-          backgroundColor: variant === "purple" ? "#9333ea" : "#262626",
-        },
-        props.style,
-      ]}
-    >
-      {iconLeft && <View style={{ marginRight: 4 }}>{iconLeft}</View>}
-      <Text
-        style={{
-          fontSize: 12,
-          color: "#fff",
-        }}
-      >
-        {text}
-      </Text>
-    </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/Button.tsx

@@ -122,7 +122,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
       onPress={onPress}
       onFocus={() => {
         setFocused(true);
-        animateTo(1.03);
+        animateTo(1.08);
       }}
       onBlur={() => {
         setFocused(false);
@@ -132,10 +132,10 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
       <Animated.View
         style={{
           transform: [{ scale }],
-          shadowColor: color === "black" ? "#ffffff" : "#a855f7",
+          shadowColor: "#a855f7",
           shadowOffset: { width: 0, height: 0 },
-          shadowOpacity: focused ? 0.5 : 0,
-          shadowRadius: focused ? 10 : 0,
+          shadowOpacity: focused ? 0.9 : 0,
+          shadowRadius: focused ? 18 : 0,
           elevation: focused ? 12 : 0, // Android glow
         }}
       >

components/Chromecast.tsx

@@ -1,7 +1,6 @@
 import { Feather } from "@expo/vector-icons";
 import { useCallback, useEffect } from "react";
-import { Platform } from "react-native";
-import { Pressable } from "react-native-gesture-handler";
+import { Platform, TouchableOpacity } from "react-native";
 import GoogleCast, {
   CastButton,
   CastContext,
@@ -45,7 +44,7 @@ export function Chromecast({
 
   if (Platform.OS === "ios") {
     return (
-      <Pressable
+      <TouchableOpacity
         className='mr-4'
         onPress={() => {
           if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
@@ -55,7 +54,7 @@ export function Chromecast({
       >
         <AndroidCastButton />
         <Feather name='cast' size={22} color={"white"} />
-      </Pressable>
+      </TouchableOpacity>
     );
   }
 

components/ContinueWatchingPoster.tv.tsx

@@ -1,188 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { Image } from "expo-image";
-import { useAtomValue } from "jotai";
-import type React from "react";
-import { useMemo } from "react";
-import { View } from "react-native";
-import {
-  GlassPosterView,
-  isGlassEffectAvailable,
-} from "@/modules/glass-poster";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { ProgressBar } from "./common/ProgressBar";
-import { WatchedIndicator } from "./WatchedIndicator";
-
-export const TV_LANDSCAPE_WIDTH = 400;
-
-type ContinueWatchingPosterProps = {
-  item: BaseItemDto;
-  useEpisodePoster?: boolean;
-  size?: "small" | "normal";
-  showPlayButton?: boolean;
-};
-
-const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
-  item,
-  useEpisodePoster = false,
-  // TV version uses fixed width, size prop kept for API compatibility
-  size: _size = "normal",
-  showPlayButton = false,
-}) => {
-  const api = useAtomValue(apiAtom);
-
-  const url = useMemo(() => {
-    if (!api) {
-      return;
-    }
-    if (item.Type === "Episode" && useEpisodePoster) {
-      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=700&quality=80`;
-    }
-    if (item.Type === "Episode") {
-      if (item.ParentBackdropItemId && item.ParentThumbImageTag) {
-        return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=700&quality=80&tag=${item.ParentThumbImageTag}`;
-      }
-      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=700&quality=80`;
-    }
-    if (item.Type === "Movie") {
-      if (item.ImageTags?.Thumb) {
-        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=700&quality=80&tag=${item.ImageTags?.Thumb}`;
-      }
-      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=700&quality=80`;
-    }
-    if (item.Type === "Program") {
-      if (item.ImageTags?.Thumb) {
-        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=700&quality=80&tag=${item.ImageTags?.Thumb}`;
-      }
-      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=700&quality=80`;
-    }
-
-    if (item.ImageTags?.Thumb) {
-      return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=700&quality=80&tag=${item.ImageTags?.Thumb}`;
-    }
-
-    return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=700&quality=80`;
-  }, [api, item, useEpisodePoster]);
-
-  const progress = useMemo(() => {
-    if (item.Type === "Program") {
-      if (!item.StartDate || !item.EndDate) {
-        return 0;
-      }
-      const startDate = new Date(item.StartDate);
-      const endDate = new Date(item.EndDate);
-      const now = new Date();
-      const total = endDate.getTime() - startDate.getTime();
-      if (total <= 0) {
-        return 0;
-      }
-      const elapsed = now.getTime() - startDate.getTime();
-      return (elapsed / total) * 100;
-    }
-    return item.UserData?.PlayedPercentage || 0;
-  }, [item]);
-
-  const isWatched = item.UserData?.Played === true;
-
-  // Use glass effect on tvOS 26+
-  const useGlass = isGlassEffectAvailable();
-
-  if (!url) {
-    return (
-      <View
-        style={{
-          width: TV_LANDSCAPE_WIDTH,
-          aspectRatio: 16 / 9,
-          borderRadius: 24,
-        }}
-      />
-    );
-  }
-
-  if (useGlass) {
-    return (
-      <View style={{ position: "relative" }}>
-        <GlassPosterView
-          imageUrl={url}
-          aspectRatio={16 / 9}
-          cornerRadius={24}
-          progress={progress}
-          showWatchedIndicator={isWatched}
-          isFocused={false}
-          width={TV_LANDSCAPE_WIDTH}
-          style={{ width: TV_LANDSCAPE_WIDTH }}
-        />
-        {showPlayButton && (
-          <View
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <Ionicons name='play-circle' size={56} color='white' />
-          </View>
-        )}
-      </View>
-    );
-  }
-
-  // Fallback for older tvOS versions
-  return (
-    <View
-      style={{
-        position: "relative",
-        width: TV_LANDSCAPE_WIDTH,
-        aspectRatio: 16 / 9,
-        borderRadius: 24,
-        overflow: "hidden",
-      }}
-    >
-      <View
-        style={{
-          width: "100%",
-          height: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <Image
-          key={item.Id}
-          id={item.Id}
-          source={{
-            uri: url,
-          }}
-          cachePolicy={"memory-disk"}
-          contentFit='cover'
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-        {showPlayButton && (
-          <View
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <Ionicons name='play-circle' size={56} color='white' />
-          </View>
-        )}
-      </View>
-      <WatchedIndicator item={item} />
-      <ProgressBar item={item} />
-    </View>
-  );
-};
-
-export default ContinueWatchingPoster;

components/DownloadItem.tsx

@@ -9,14 +9,13 @@ import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { type Href } from "expo-router";
+import { type Href, router } 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";
@@ -63,7 +62,6 @@ 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();
@@ -172,11 +170,9 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       firstItem.Type !== "Episode"
         ? "/downloads"
         : ({
-            pathname: "/series/[id]",
+            pathname: `/downloads/${firstItem.SeriesId}`,
             params: {
-              id: firstItem.SeriesId!,
-              seasonIndex: firstItem.ParentIndexNumber?.toString(),
-              offline: "true",
+              episodeSeasonIndex: firstItem.ParentIndexNumber,
             },
           } as Href),
     );
@@ -213,7 +209,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
           subtitleStreamIndex: subtitleIndex ?? -1,
           maxBitrate: selectedOptions?.bitrate || defaultBitrate,
           deviceId: api.deviceInfo.id,
-          audioMode: settings?.audioTranscodeMode,
         });
 
         return {
@@ -241,23 +236,11 @@ export const DownloadItems: React.FC<DownloadProps> = ({
           );
           continue;
         }
-        // Get the audio/subtitle indices that were used for this download
-        const downloadAudioIndex =
-          itemsNotDownloaded.length > 1
-            ? getDefaultPlaySettings(item, settings!).audioIndex
-            : selectedOptions?.audioIndex;
-        const downloadSubtitleIndex =
-          itemsNotDownloaded.length > 1
-            ? getDefaultPlaySettings(item, settings!).subtitleIndex
-            : selectedOptions?.subtitleIndex;
-
         await startBackgroundDownload(
           url,
           item,
           mediaSource,
           selectedOptions?.bitrate || defaultBitrate,
-          downloadAudioIndex,
-          downloadSubtitleIndex,
         );
       }
     },

components/GenreTags.tsx

@@ -1,16 +1,11 @@
 // GenreTags.tsx
-import { BlurView } from "expo-blur";
 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 { useScaledTVTypography } from "@/constants/TVTypography";
 import { Text } from "./common/Text";
 
 interface TagProps {
@@ -25,52 +20,6 @@ export const Tag: React.FC<
     textStyle?: StyleProp<TextStyle>;
   } & ViewProps
 > = ({ text, textClass, textStyle, ...props }) => {
-  // Hook must be called at the top level, before any conditional returns
-  const typography = useScaledTVTypography();
-
-  if (Platform.OS === "ios" && !Platform.isTV) {
-    return (
-      <View>
-        <GlassEffectView style={styles.glass}>
-          <View
-            style={{
-              paddingHorizontal: 8,
-              paddingVertical: 4,
-            }}
-          >
-            <Text>{text}</Text>
-          </View>
-        </GlassEffectView>
-      </View>
-    );
-  }
-
-  // TV-specific styling with blur background
-  if (Platform.isTV) {
-    return (
-      <BlurView
-        intensity={10}
-        tint='light'
-        style={{
-          borderRadius: 8,
-          overflow: "hidden",
-        }}
-      >
-        <View
-          style={{
-            paddingHorizontal: 16,
-            paddingVertical: 10,
-            backgroundColor: "rgba(0,0,0,0.3)",
-          }}
-        >
-          <Text style={{ fontSize: typography.callout, color: "#E5E7EB" }}>
-            {text}
-          </Text>
-        </View>
-      </BlurView>
-    );
-  }
-
   return (
     <View className='bg-neutral-800 rounded-full px-2 py-1' {...props}>
       <Text className={textClass} style={textStyle}>
@@ -80,16 +29,6 @@ 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 }) => {
@@ -97,8 +36,7 @@ export const Tags: React.FC<
 
   return (
     <View
-      className={`flex flex-row flex-wrap ${props.className}`}
-      style={{ gap: Platform.isTV ? 12 : 4 }}
+      className={`flex flex-row flex-wrap gap-1 ${props.className}`}
       {...props}
     >
       {tags.map((tag, idx) => (

components/IntroSheet.tsx

@@ -1,203 +0,0 @@
-import { Feather, Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
-import { Image } from "expo-image";
-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 {
-  present: () => void;
-  dismiss: () => void;
-}
-
-export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
-  const bottomSheetRef = useRef<BottomSheetModal>(null);
-  const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
-  const router = useRouter();
-
-  useImperativeHandle(ref, () => ({
-    present: () => {
-      storage.set("hasShownIntro", true);
-      bottomSheetRef.current?.present();
-    },
-    dismiss: () => {
-      bottomSheetRef.current?.dismiss();
-    },
-  }));
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
-  const handleDismiss = useCallback(() => {
-    bottomSheetRef.current?.dismiss();
-  }, []);
-
-  const handleGoToSettings = useCallback(() => {
-    bottomSheetRef.current?.dismiss();
-    router.push("/settings");
-  }, []);
-
-  return (
-    <BottomSheetModal
-      ref={bottomSheetRef}
-      enableDynamicSizing
-      backdropComponent={renderBackdrop}
-      backgroundStyle={{ backgroundColor: "#171717" }}
-      handleIndicatorStyle={{ backgroundColor: "#737373" }}
-    >
-      <BottomSheetScrollView
-        style={{
-          paddingLeft: Math.max(16, insets.left),
-          paddingRight: Math.max(16, insets.right),
-        }}
-      >
-        <View className={Platform.isTV ? "py-5 space-y-4" : "py-4 space-y-6"}>
-          <View>
-            <Text className='text-3xl font-bold text-center mb-2'>
-              {t("home.intro.welcome_to_streamyfin")}
-            </Text>
-            <Text className='text-center'>
-              {t("home.intro.a_free_and_open_source_client_for_jellyfin")}
-            </Text>
-          </View>
-
-          <View>
-            <Text className='text-lg font-bold'>
-              {t("home.intro.features_title")}
-            </Text>
-            <Text className='text-xs'>
-              {t("home.intro.features_description")}
-            </Text>
-            <View className='flex flex-row items-center mt-4'>
-              <Image
-                source={require("@/assets/icons/jellyseerr-logo.svg")}
-                style={{
-                  width: 50,
-                  height: 50,
-                }}
-              />
-              <View className='shrink ml-2'>
-                <Text className='font-bold mb-1'>Jellyseerr</Text>
-                <Text className='shrink text-xs'>
-                  {t("home.intro.jellyseerr_feature_description")}
-                </Text>
-              </View>
-            </View>
-            {!Platform.isTV && (
-              <>
-                <View className='flex flex-row items-center mt-4'>
-                  <View
-                    style={{
-                      width: 50,
-                      height: 50,
-                    }}
-                    className='flex items-center justify-center'
-                  >
-                    <Ionicons
-                      name='cloud-download-outline'
-                      size={32}
-                      color='white'
-                    />
-                  </View>
-                  <View className='shrink ml-2'>
-                    <Text className='font-bold mb-1'>
-                      {t("home.intro.downloads_feature_title")}
-                    </Text>
-                    <Text className='shrink text-xs'>
-                      {t("home.intro.downloads_feature_description")}
-                    </Text>
-                  </View>
-                </View>
-                <View className='flex flex-row items-center mt-4'>
-                  <View
-                    style={{
-                      width: 50,
-                      height: 50,
-                    }}
-                    className='flex items-center justify-center'
-                  >
-                    <Feather name='cast' size={28} color={"white"} />
-                  </View>
-                  <View className='shrink ml-2'>
-                    <Text className='font-bold mb-1'>Chromecast</Text>
-                    <Text className='shrink text-xs'>
-                      {t("home.intro.chromecast_feature_description")}
-                    </Text>
-                  </View>
-                </View>
-              </>
-            )}
-            <View className='flex flex-row items-center mt-4'>
-              <View
-                style={{
-                  width: 50,
-                  height: 50,
-                }}
-                className='flex items-center justify-center'
-              >
-                <Feather name='settings' size={28} color={"white"} />
-              </View>
-              <View className='shrink ml-2'>
-                <Text className='font-bold mb-1'>
-                  {t("home.intro.centralised_settings_plugin_title")}
-                </Text>
-                <View className='flex-row flex-wrap items-baseline'>
-                  <Text className='shrink text-xs'>
-                    {t(
-                      "home.intro.centralised_settings_plugin_description",
-                    )}{" "}
-                  </Text>
-                  <TouchableOpacity
-                    onPress={() => {
-                      Linking.openURL(
-                        "https://github.com/streamyfin/jellyfin-plugin-streamyfin",
-                      );
-                    }}
-                  >
-                    <Text className='text-xs text-purple-600 underline'>
-                      {t("home.intro.read_more")}
-                    </Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-            </View>
-          </View>
-
-          <View>
-            <Button onPress={handleDismiss} className='mt-4'>
-              {t("home.intro.done_button")}
-            </Button>
-            <TouchableOpacity onPress={handleGoToSettings} className='mt-4'>
-              <Text className='text-purple-600 text-center'>
-                {t("home.intro.go_to_settings_button")}
-              </Text>
-            </TouchableOpacity>
-          </View>
-
-          <View style={{ height: insets.bottom }} />
-        </View>
-      </BottomSheetScrollView>
-    </BottomSheetModal>
-  );
-});
-
-IntroSheet.displayName = "IntroSheet";

components/ItemContent.tsx

@@ -15,6 +15,7 @@ import { ItemPeopleSections } from "@/components/item/ItemPeopleSections";
 import { MediaSourceButton } from "@/components/MediaSourceButton";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
+// const PlayButton = !Platform.isTV ? require("@/components/PlayButton") : null;
 import { PlayButton } from "@/components/PlayButton";
 import { PlayedStatus } from "@/components/PlayedStatus";
 import { SimilarItems } from "@/components/SimilarItems";
@@ -25,7 +26,6 @@ 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";
@@ -35,9 +35,6 @@ import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
 import { PlayInRemoteSessionButton } from "./PlayInRemoteSession";
 
 const Chromecast = !Platform.isTV ? require("./Chromecast") : null;
-const ItemContentTV = Platform.isTV
-  ? require("./ItemContent.tv").ItemContentTV
-  : null;
 
 export type SelectedOptions = {
   bitrate: Bitrate;
@@ -47,243 +44,234 @@ export type SelectedOptions = {
 };
 
 interface ItemContentProps {
-  item?: BaseItemDto | null;
+  item: BaseItemDto;
+  isOffline: boolean;
   itemWithSources?: BaseItemDto | null;
-  isLoading?: boolean;
 }
 
-// Mobile-specific implementation
-const ItemContentMobile: React.FC<ItemContentProps> = ({
-  item,
-  itemWithSources,
-}) => {
-  const [api] = useAtom(apiAtom);
-  const isOffline = useOfflineMode();
-  const { settings } = useSettings();
-  const { orientation } = useOrientation();
-  const navigation = useNavigation();
-  const insets = useSafeAreaInsets();
-  const [user] = useAtom(userAtom);
+export const ItemContent: React.FC<ItemContentProps> = React.memo(
+  ({ item, isOffline, itemWithSources }) => {
+    const [api] = useAtom(apiAtom);
+    const { settings } = useSettings();
+    const { orientation } = useOrientation();
+    const navigation = useNavigation();
+    const insets = useSafeAreaInsets();
+    const [user] = useAtom(userAtom);
 
-  const itemColors = useImageColorsReturn({ item });
+    const itemColors = useImageColorsReturn({ item });
 
-  const [loadingLogo, setLoadingLogo] = useState(true);
-  const [headerHeight, setHeaderHeight] = useState(350);
+    const [loadingLogo, setLoadingLogo] = useState(true);
+    const [headerHeight, setHeaderHeight] = useState(350);
 
-  const [selectedOptions, setSelectedOptions] = useState<
-    SelectedOptions | undefined
-  >(undefined);
+    const [selectedOptions, setSelectedOptions] = useState<
+      SelectedOptions | undefined
+    >(undefined);
 
-  // Use itemWithSources for play settings since it has MediaSources data
-  const {
-    defaultAudioIndex,
-    defaultBitrate,
-    defaultMediaSource,
-    defaultSubtitleIndex,
-  } = useDefaultPlaySettings(itemWithSources ?? item, settings);
+    // Use itemWithSources for play settings since it has MediaSources data
+    const {
+      defaultAudioIndex,
+      defaultBitrate,
+      defaultMediaSource,
+      defaultSubtitleIndex,
+    } = useDefaultPlaySettings(itemWithSources ?? item, settings);
 
-  const logoUrl = useMemo(
-    () => (item ? getLogoImageUrlById({ api, item }) : null),
-    [api, item],
-  );
+    const logoUrl = useMemo(
+      () => (item ? getLogoImageUrlById({ api, item }) : null),
+      [api, item],
+    );
 
-  const onLogoLoad = React.useCallback(() => {
-    setLoadingLogo(false);
-  }, []);
+    const onLogoLoad = React.useCallback(() => {
+      setLoadingLogo(false);
+    }, []);
 
-  const loading = useMemo(() => {
-    return Boolean(logoUrl && loadingLogo);
-  }, [loadingLogo, logoUrl]);
+    const loading = useMemo(() => {
+      return Boolean(logoUrl && loadingLogo);
+    }, [loadingLogo, logoUrl]);
 
-  // Needs to automatically change the selected to the default values for default indexes.
-  useEffect(() => {
-    setSelectedOptions(() => ({
-      bitrate: defaultBitrate,
-      mediaSource: defaultMediaSource ?? undefined,
-      subtitleIndex: defaultSubtitleIndex ?? -1,
-      audioIndex: defaultAudioIndex,
-    }));
-  }, [
-    defaultAudioIndex,
-    defaultBitrate,
-    defaultSubtitleIndex,
-    defaultMediaSource,
-  ]);
+    // Needs to automatically change the selected to the default values for default indexes.
+    useEffect(() => {
+      setSelectedOptions(() => ({
+        bitrate: defaultBitrate,
+        mediaSource: defaultMediaSource ?? undefined,
+        subtitleIndex: defaultSubtitleIndex ?? -1,
+        audioIndex: defaultAudioIndex,
+      }));
+    }, [
+      defaultAudioIndex,
+      defaultBitrate,
+      defaultSubtitleIndex,
+      defaultMediaSource,
+    ]);
 
-  useEffect(() => {
-    if (!Platform.isTV && itemWithSources) {
-      navigation.setOptions({
-        headerRight: () =>
-          item &&
-          (Platform.OS === "ios" ? (
-            <View className='flex flex-row items-center pl-2'>
-              <Chromecast.Chromecast width={22} height={22} />
-              {item.Type !== "Program" && (
-                <View className='flex flex-row items-center'>
-                  {!Platform.isTV && (
-                    <DownloadSingleItem item={itemWithSources} size='large' />
-                  )}
-                  {user?.Policy?.IsAdministrator &&
-                    !settings.hideRemoteSessionButton && (
-                      <PlayInRemoteSessionButton item={item} size='large' />
+    useEffect(() => {
+      if (!Platform.isTV && itemWithSources) {
+        navigation.setOptions({
+          headerRight: () =>
+            item &&
+            (Platform.OS === "ios" ? (
+              <View className='flex flex-row items-center pl-2'>
+                <Chromecast.Chromecast width={22} height={22} />
+                {item.Type !== "Program" && (
+                  <View className='flex flex-row items-center'>
+                    {!Platform.isTV && (
+                      <DownloadSingleItem item={itemWithSources} size='large' />
                     )}
+                    {user?.Policy?.IsAdministrator &&
+                      !settings.hideRemoteSessionButton && (
+                        <PlayInRemoteSessionButton item={item} size='large' />
+                      )}
 
-                  <PlayedStatus items={[item]} size='large' />
-                  <AddToFavorites item={item} />
-                  {settings.streamyStatsServerUrl &&
-                    !settings.hideWatchlistsTab && (
-                      <AddToWatchlist item={item} />
-                    )}
-                </View>
-              )}
-            </View>
-          ) : (
-            <View className='flex flex-row items-center space-x-2'>
-              <Chromecast.Chromecast width={22} height={22} />
-              {item.Type !== "Program" && (
-                <View className='flex flex-row items-center space-x-2'>
-                  {!Platform.isTV && (
-                    <DownloadSingleItem item={itemWithSources} size='large' />
-                  )}
-                  {user?.Policy?.IsAdministrator &&
-                    !settings.hideRemoteSessionButton && (
-                      <PlayInRemoteSessionButton item={item} size='large' />
+                    <PlayedStatus items={[item]} size='large' />
+                    <AddToFavorites item={item} />
+                    {settings.streamyStatsServerUrl &&
+                      !settings.hideWatchlistsTab && (
+                        <AddToWatchlist item={item} />
+                      )}
+                  </View>
+                )}
+              </View>
+            ) : (
+              <View className='flex flex-row items-center space-x-2'>
+                <Chromecast.Chromecast width={22} height={22} />
+                {item.Type !== "Program" && (
+                  <View className='flex flex-row items-center space-x-2'>
+                    {!Platform.isTV && (
+                      <DownloadSingleItem item={itemWithSources} size='large' />
                     )}
+                    {user?.Policy?.IsAdministrator &&
+                      !settings.hideRemoteSessionButton && (
+                        <PlayInRemoteSessionButton item={item} size='large' />
+                      )}
 
-                  <PlayedStatus items={[item]} size='large' />
-                  <AddToFavorites item={item} />
-                  {settings.streamyStatsServerUrl &&
-                    !settings.hideWatchlistsTab && (
-                      <AddToWatchlist item={item} />
-                    )}
-                </View>
-              )}
-            </View>
-          )),
-      });
-    }
-  }, [
-    item,
-    navigation,
-    user,
-    itemWithSources,
-    settings.hideRemoteSessionButton,
-    settings.streamyStatsServerUrl,
-    settings.hideWatchlistsTab,
-  ]);
+                    <PlayedStatus items={[item]} size='large' />
+                    <AddToFavorites item={item} />
+                    {settings.streamyStatsServerUrl &&
+                      !settings.hideWatchlistsTab && (
+                        <AddToWatchlist item={item} />
+                      )}
+                  </View>
+                )}
+              </View>
+            )),
+        });
+      }
+    }, [
+      item,
+      navigation,
+      user,
+      itemWithSources,
+      settings.hideRemoteSessionButton,
+      settings.streamyStatsServerUrl,
+      settings.hideWatchlistsTab,
+    ]);
 
-  useEffect(() => {
-    if (item) {
-      if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
-        setHeaderHeight(230);
-      else if (item.Type === "Movie") setHeaderHeight(500);
-      else setHeaderHeight(350);
-    }
-  }, [item, orientation]);
+    useEffect(() => {
+      if (item) {
+        if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
+          setHeaderHeight(230);
+        else if (item.Type === "Movie") setHeaderHeight(500);
+        else setHeaderHeight(350);
+      }
+    }, [item, orientation]);
 
-  if (!item || !selectedOptions) return null;
+    if (!item || !selectedOptions) return null;
 
-  return (
-    <View
-      className='flex-1 relative'
-      style={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
-    >
-      <ParallaxScrollView
-        className='flex-1'
-        headerHeight={headerHeight}
-        headerImage={
-          <View style={[{ flex: 1 }]}>
-            <ItemImage
-              variant={
-                item.Type === "Movie" && logoUrl ? "Backdrop" : "Primary"
-              }
-              item={item}
-              style={{
-                width: "100%",
-                height: "100%",
-              }}
-            />
-          </View>
-        }
-        logo={
-          logoUrl ? (
-            <Image
-              source={{
-                uri: logoUrl,
-              }}
-              style={{
-                height: 130,
-                width: "100%",
-              }}
-              contentFit='contain'
-              onLoad={onLogoLoad}
-              onError={onLogoLoad}
-            />
-          ) : (
-            <View />
-          )
-        }
+    return (
+      <View
+        className='flex-1 relative'
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        }}
       >
-        <View className='flex flex-col bg-transparent shrink'>
-          <View className='flex flex-col px-4 w-full pt-2 mb-2 shrink'>
-            <ItemHeader item={item} className='mb-2' />
-
-            <View className='flex flex-row px-0 mb-2 justify-between space-x-2'>
-              <PlayButton
-                selectedOptions={selectedOptions}
+        <ParallaxScrollView
+          className='flex-1'
+          headerHeight={headerHeight}
+          headerImage={
+            <View style={[{ flex: 1 }]}>
+              <ItemImage
+                variant={
+                  item.Type === "Movie" && logoUrl ? "Backdrop" : "Primary"
+                }
                 item={item}
-                colors={itemColors}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                }}
               />
-              <View className='w-1' />
-              {!isOffline && (
-                <MediaSourceButton
+            </View>
+          }
+          logo={
+            logoUrl ? (
+              <Image
+                source={{
+                  uri: logoUrl,
+                }}
+                style={{
+                  height: 130,
+                  width: "100%",
+                }}
+                contentFit='contain'
+                onLoad={onLogoLoad}
+                onError={onLogoLoad}
+              />
+            ) : (
+              <View />
+            )
+          }
+        >
+          <View className='flex flex-col bg-transparent shrink'>
+            <View className='flex flex-col px-4 w-full pt-2 mb-2 shrink'>
+              <ItemHeader item={item} className='mb-2' />
+
+              <View className='flex flex-row px-0 mb-2 justify-between space-x-2'>
+                <PlayButton
                   selectedOptions={selectedOptions}
-                  setSelectedOptions={setSelectedOptions}
-                  item={itemWithSources}
+                  item={item}
+                  isOffline={isOffline}
                   colors={itemColors}
                 />
-              )}
+                <View className='w-1' />
+                {!isOffline && (
+                  <MediaSourceButton
+                    selectedOptions={selectedOptions}
+                    setSelectedOptions={setSelectedOptions}
+                    item={itemWithSources}
+                    colors={itemColors}
+                  />
+                )}
+              </View>
             </View>
-          </View>
-          {item.Type === "Episode" && (
-            <SeasonEpisodesCarousel item={item} loading={loading} />
-          )}
-
-          {!isOffline &&
-            selectedOptions.mediaSource?.MediaStreams &&
-            selectedOptions.mediaSource.MediaStreams.length > 0 && (
-              <ItemTechnicalDetails source={selectedOptions.mediaSource} />
+            {item.Type === "Episode" && (
+              <SeasonEpisodesCarousel
+                item={item}
+                loading={loading}
+                isOffline={isOffline}
+              />
             )}
 
-          <OverviewText text={item.Overview} className='px-4 mb-4' />
-
-          {item.Type !== "Program" && (
-            <>
-              {item.Type === "Episode" && !isOffline && (
-                <CurrentSeries item={item} className='mb-2' />
+            {!isOffline &&
+              selectedOptions.mediaSource?.MediaStreams &&
+              selectedOptions.mediaSource.MediaStreams.length > 0 && (
+                <ItemTechnicalDetails source={selectedOptions.mediaSource} />
               )}
 
-              <ItemPeopleSections item={item} />
+            <OverviewText text={item.Overview} className='px-4 mb-4' />
 
-              {!isOffline && <SimilarItems itemId={item.Id} />}
-            </>
-          )}
-        </View>
-      </ParallaxScrollView>
-    </View>
-  );
-};
+            {item.Type !== "Program" && (
+              <>
+                {item.Type === "Episode" && !isOffline && (
+                  <CurrentSeries item={item} className='mb-2' />
+                )}
 
-// Memoize the mobile component
-const MemoizedItemContentMobile = React.memo(ItemContentMobile);
+                <ItemPeopleSections item={item} isOffline={isOffline} />
 
-// Exported component that renders TV or mobile version based on platform
-export const ItemContent: React.FC<ItemContentProps> = (props) => {
-  if (Platform.isTV && ItemContentTV) {
-    return <ItemContentTV {...props} />;
-  }
-  return <MemoizedItemContentMobile {...props} />;
-};
+                {!isOffline && <SimilarItems itemId={item.Id} />}
+              </>
+            )}
+          </View>
+        </ParallaxScrollView>
+      </View>
+    );
+  },
+);

components/ItemContent.tv.tsx

@@ -1,873 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import type {
-  BaseItemDto,
-  MediaSourceInfo,
-  MediaStream,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { getTvShowsApi, getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { BlurView } from "expo-blur";
-import { Image } from "expo-image";
-import { useAtom } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useTranslation } from "react-i18next";
-import { Dimensions, ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { BITRATES, type Bitrate } from "@/components/BitrateSelector";
-import { ItemImage } from "@/components/common/ItemImage";
-import { Text } from "@/components/common/Text";
-import { getItemNavigation } from "@/components/common/TouchableItemRouter";
-import { GenreTags } from "@/components/GenreTags";
-import { TVEpisodeCard } from "@/components/series/TVEpisodeCard";
-import {
-  TVBackdrop,
-  TVButton,
-  TVCastCrewText,
-  TVCastSection,
-  TVFavoriteButton,
-  TVMetadataBadges,
-  TVOptionButton,
-  TVProgressBar,
-  TVRefreshButton,
-  TVSeriesNavigation,
-  TVTechnicalDetails,
-} from "@/components/tv";
-import type { Track } from "@/components/video-player/controls/types";
-import { useScaledTVTypography } from "@/constants/TVTypography";
-import useRouter from "@/hooks/useAppRouter";
-import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
-import { useImageColorsReturn } from "@/hooks/useImageColorsReturn";
-import { useTVOptionModal } from "@/hooks/useTVOptionModal";
-import { useTVSubtitleModal } from "@/hooks/useTVSubtitleModal";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useOfflineMode } from "@/providers/OfflineModeProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
-import { runtimeTicksToMinutes } from "@/utils/time";
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
-
-export type SelectedOptions = {
-  bitrate: Bitrate;
-  mediaSource: MediaSourceInfo | undefined;
-  audioIndex: number | undefined;
-  subtitleIndex: number;
-};
-
-interface ItemContentTVProps {
-  item?: BaseItemDto | null;
-  itemWithSources?: BaseItemDto | null;
-  isLoading?: boolean;
-}
-
-// Export as both ItemContentTV (for direct requires) and ItemContent (for platform-resolved imports)
-export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
-  ({ item, itemWithSources }) => {
-    const typography = useScaledTVTypography();
-    const [api] = useAtom(apiAtom);
-    const [user] = useAtom(userAtom);
-    const isOffline = useOfflineMode();
-    const { settings } = useSettings();
-    const insets = useSafeAreaInsets();
-    const router = useRouter();
-    const { t } = useTranslation();
-    const queryClient = useQueryClient();
-
-    const _itemColors = useImageColorsReturn({ item });
-
-    // State for first episode card ref (used for focus guide)
-    const [_firstEpisodeRef, setFirstEpisodeRef] = useState<View | null>(null);
-
-    // Fetch season episodes for episodes
-    const { data: seasonEpisodes = [] } = useQuery({
-      queryKey: ["episodes", item?.SeasonId],
-      queryFn: async () => {
-        if (!api || !user?.Id || !item?.SeriesId || !item?.SeasonId) return [];
-        const res = await getTvShowsApi(api).getEpisodes({
-          seriesId: item.SeriesId,
-          userId: user.Id,
-          seasonId: item.SeasonId,
-          enableUserData: true,
-          fields: ["MediaSources", "Overview"],
-        });
-        return res.data.Items || [];
-      },
-      enabled:
-        !!api &&
-        !!user?.Id &&
-        !!item?.SeriesId &&
-        !!item?.SeasonId &&
-        item?.Type === "Episode",
-    });
-
-    const [selectedOptions, setSelectedOptions] = useState<
-      SelectedOptions | undefined
-    >(undefined);
-
-    const {
-      defaultAudioIndex,
-      defaultBitrate,
-      defaultMediaSource,
-      defaultSubtitleIndex,
-    } = useDefaultPlaySettings(itemWithSources ?? item, settings);
-
-    const logoUrl = useMemo(
-      () => (item ? getLogoImageUrlById({ api, item }) : null),
-      [api, item],
-    );
-
-    // Set default play options
-    useEffect(() => {
-      setSelectedOptions(() => ({
-        bitrate: defaultBitrate,
-        mediaSource: defaultMediaSource ?? undefined,
-        subtitleIndex: defaultSubtitleIndex ?? -1,
-        audioIndex: defaultAudioIndex,
-      }));
-    }, [
-      defaultAudioIndex,
-      defaultBitrate,
-      defaultSubtitleIndex,
-      defaultMediaSource,
-    ]);
-
-    const handlePlay = () => {
-      if (!item || !selectedOptions) return;
-
-      const queryParams = new URLSearchParams({
-        itemId: item.Id!,
-        audioIndex: selectedOptions.audioIndex?.toString() ?? "",
-        subtitleIndex: selectedOptions.subtitleIndex?.toString() ?? "",
-        mediaSourceId: selectedOptions.mediaSource?.Id ?? "",
-        bitrateValue: selectedOptions.bitrate?.value?.toString() ?? "",
-        playbackPosition:
-          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-        offline: isOffline ? "true" : "false",
-      });
-
-      router.push(`/player/direct-player?${queryParams.toString()}`);
-    };
-
-    // TV Option Modal hook for quality, audio, media source selectors
-    const { showOptions } = useTVOptionModal();
-
-    // TV Subtitle Modal hook
-    const { showSubtitleModal } = useTVSubtitleModal();
-
-    // State for first actor card ref (used for focus guide)
-    const [_firstActorCardRef, setFirstActorCardRef] = useState<View | null>(
-      null,
-    );
-
-    // State for last option button ref (used for upward focus guide from cast)
-    const [_lastOptionButtonRef, setLastOptionButtonRef] =
-      useState<View | null>(null);
-
-    // Get available audio tracks
-    const audioTracks = useMemo(() => {
-      const streams = selectedOptions?.mediaSource?.MediaStreams?.filter(
-        (s) => s.Type === "Audio",
-      );
-      return streams ?? [];
-    }, [selectedOptions?.mediaSource]);
-
-    // Get available subtitle tracks (raw MediaStream[] for label lookup)
-    const subtitleStreams = useMemo(() => {
-      const streams = selectedOptions?.mediaSource?.MediaStreams?.filter(
-        (s) => s.Type === "Subtitle",
-      );
-      return streams ?? [];
-    }, [selectedOptions?.mediaSource]);
-
-    // Store handleSubtitleChange in a ref for stable callback reference
-    const handleSubtitleChangeRef = useRef<((index: number) => void) | null>(
-      null,
-    );
-
-    // Convert MediaStream[] to Track[] for the modal (with setTrack callbacks)
-    const subtitleTracksForModal = useMemo((): Track[] => {
-      return subtitleStreams.map((stream) => ({
-        name:
-          stream.DisplayTitle ||
-          `${stream.Language || "Unknown"} (${stream.Codec})`,
-        index: stream.Index ?? -1,
-        setTrack: () => {
-          handleSubtitleChangeRef.current?.(stream.Index ?? -1);
-        },
-      }));
-    }, [subtitleStreams]);
-
-    // Get available media sources
-    const mediaSources = useMemo(() => {
-      return (itemWithSources ?? item)?.MediaSources ?? [];
-    }, [item, itemWithSources]);
-
-    // Audio options for selector
-    const audioOptions: TVOptionItem<number>[] = useMemo(() => {
-      return audioTracks.map((track) => ({
-        label:
-          track.DisplayTitle ||
-          `${track.Language || "Unknown"} (${track.Codec})`,
-        value: track.Index!,
-        selected: track.Index === selectedOptions?.audioIndex,
-      }));
-    }, [audioTracks, selectedOptions?.audioIndex]);
-
-    // Media source options for selector
-    const mediaSourceOptions: TVOptionItem<MediaSourceInfo>[] = useMemo(() => {
-      return mediaSources.map((source) => {
-        const videoStream = source.MediaStreams?.find(
-          (s) => s.Type === "Video",
-        );
-        const displayName =
-          videoStream?.DisplayTitle || source.Name || `Source ${source.Id}`;
-        return {
-          label: displayName,
-          value: source,
-          selected: source.Id === selectedOptions?.mediaSource?.Id,
-        };
-      });
-    }, [mediaSources, selectedOptions?.mediaSource?.Id]);
-
-    // Quality/bitrate options for selector
-    const qualityOptions: TVOptionItem<Bitrate>[] = useMemo(() => {
-      return BITRATES.map((bitrate) => ({
-        label: bitrate.key,
-        value: bitrate,
-        selected: bitrate.value === selectedOptions?.bitrate?.value,
-      }));
-    }, [selectedOptions?.bitrate?.value]);
-
-    // Handlers for option changes
-    const handleAudioChange = useCallback((audioIndex: number) => {
-      setSelectedOptions((prev) =>
-        prev ? { ...prev, audioIndex } : undefined,
-      );
-    }, []);
-
-    const handleSubtitleChange = useCallback((subtitleIndex: number) => {
-      setSelectedOptions((prev) =>
-        prev ? { ...prev, subtitleIndex } : undefined,
-      );
-    }, []);
-
-    // Keep the ref updated with the latest callback
-    handleSubtitleChangeRef.current = handleSubtitleChange;
-
-    const handleMediaSourceChange = useCallback(
-      (mediaSource: MediaSourceInfo) => {
-        const defaultAudio = mediaSource.MediaStreams?.find(
-          (s) => s.Type === "Audio" && s.IsDefault,
-        );
-        const defaultSubtitle = mediaSource.MediaStreams?.find(
-          (s) => s.Type === "Subtitle" && s.IsDefault,
-        );
-        setSelectedOptions((prev) =>
-          prev
-            ? {
-                ...prev,
-                mediaSource,
-                audioIndex: defaultAudio?.Index ?? prev.audioIndex,
-                subtitleIndex: defaultSubtitle?.Index ?? -1,
-              }
-            : undefined,
-        );
-      },
-      [],
-    );
-
-    const handleQualityChange = useCallback((bitrate: Bitrate) => {
-      setSelectedOptions((prev) => (prev ? { ...prev, bitrate } : undefined));
-    }, []);
-
-    // Handle server-side subtitle download - invalidate queries to refresh tracks
-    const handleServerSubtitleDownloaded = useCallback(() => {
-      if (item?.Id) {
-        queryClient.invalidateQueries({ queryKey: ["item", item.Id] });
-      }
-    }, [item?.Id, queryClient]);
-
-    // Refresh subtitle tracks by fetching fresh item data from Jellyfin
-    const refreshSubtitleTracks = useCallback(async (): Promise<Track[]> => {
-      if (!api || !item?.Id) return [];
-
-      try {
-        // Fetch fresh item data with media sources
-        const response = await getUserLibraryApi(api).getItem({
-          itemId: item.Id,
-        });
-
-        const freshItem = response.data;
-        const mediaSourceId = selectedOptions?.mediaSource?.Id;
-
-        // Find the matching media source
-        const mediaSource = mediaSourceId
-          ? freshItem.MediaSources?.find(
-              (s: MediaSourceInfo) => s.Id === mediaSourceId,
-            )
-          : freshItem.MediaSources?.[0];
-
-        // Get subtitle streams from the fresh data
-        const streams =
-          mediaSource?.MediaStreams?.filter(
-            (s: MediaStream) => s.Type === "Subtitle",
-          ) ?? [];
-
-        // Convert to Track[] with setTrack callbacks
-        return streams.map((stream) => ({
-          name:
-            stream.DisplayTitle ||
-            `${stream.Language || "Unknown"} (${stream.Codec})`,
-          index: stream.Index ?? -1,
-          setTrack: () => {
-            handleSubtitleChangeRef.current?.(stream.Index ?? -1);
-          },
-        }));
-      } catch (error) {
-        console.error("Failed to refresh subtitle tracks:", error);
-        return [];
-      }
-    }, [api, item?.Id, selectedOptions?.mediaSource?.Id]);
-
-    // Get display values for buttons
-    const selectedAudioLabel = useMemo(() => {
-      const track = audioTracks.find(
-        (t) => t.Index === selectedOptions?.audioIndex,
-      );
-      return track?.DisplayTitle || track?.Language || t("item_card.audio");
-    }, [audioTracks, selectedOptions?.audioIndex, t]);
-
-    const selectedSubtitleLabel = useMemo(() => {
-      if (selectedOptions?.subtitleIndex === -1)
-        return t("item_card.subtitles.none");
-      const track = subtitleStreams.find(
-        (t) => t.Index === selectedOptions?.subtitleIndex,
-      );
-      return (
-        track?.DisplayTitle || track?.Language || t("item_card.subtitles.label")
-      );
-    }, [subtitleStreams, selectedOptions?.subtitleIndex, t]);
-
-    const selectedMediaSourceLabel = useMemo(() => {
-      const source = selectedOptions?.mediaSource;
-      if (!source) return t("item_card.video");
-      const videoStream = source.MediaStreams?.find((s) => s.Type === "Video");
-      return videoStream?.DisplayTitle || source.Name || t("item_card.video");
-    }, [selectedOptions?.mediaSource, t]);
-
-    const selectedQualityLabel = useMemo(() => {
-      return selectedOptions?.bitrate?.key || t("item_card.quality");
-    }, [selectedOptions?.bitrate?.key, t]);
-
-    // Format year and duration
-    const year = item?.ProductionYear;
-    const duration = item?.RunTimeTicks
-      ? runtimeTicksToMinutes(item.RunTimeTicks)
-      : null;
-    const hasProgress = (item?.UserData?.PlaybackPositionTicks ?? 0) > 0;
-    const remainingTime = hasProgress
-      ? runtimeTicksToMinutes(
-          (item?.RunTimeTicks || 0) -
-            (item?.UserData?.PlaybackPositionTicks || 0),
-        )
-      : null;
-
-    // Get director
-    const director = item?.People?.find((p) => p.Type === "Director");
-
-    // Get cast (first 3 for text display)
-    const cast = item?.People?.filter((p) => p.Type === "Actor")?.slice(0, 3);
-
-    // Get full cast for visual display (up to 10 actors)
-    const fullCast = useMemo(() => {
-      return (
-        item?.People?.filter((p) => p.Type === "Actor")?.slice(0, 10) ?? []
-      );
-    }, [item?.People]);
-
-    // Whether to show visual cast section
-    const showVisualCast =
-      (item?.Type === "Movie" ||
-        item?.Type === "Series" ||
-        item?.Type === "Episode") &&
-      fullCast.length > 0;
-
-    // Series/Season image URLs for episodes
-    const seriesImageUrl = useMemo(() => {
-      if (item?.Type !== "Episode" || !item.SeriesId) return null;
-      return getPrimaryImageUrlById({ api, id: item.SeriesId, width: 300 });
-    }, [api, item?.Type, item?.SeriesId]);
-
-    const seasonImageUrl = useMemo(() => {
-      if (item?.Type !== "Episode") return null;
-      const seasonId = item.SeasonId || item.ParentId;
-      if (!seasonId) return null;
-      return getPrimaryImageUrlById({ api, id: seasonId, width: 300 });
-    }, [api, item?.Type, item?.SeasonId, item?.ParentId]);
-
-    // Episode thumbnail URL - episode's own primary image (16:9 for episodes)
-    const episodeThumbnailUrl = useMemo(() => {
-      if (item?.Type !== "Episode" || !api) return null;
-      return `${api.basePath}/Items/${item.Id}/Images/Primary?fillHeight=700&quality=80`;
-    }, [api, item]);
-
-    // Series thumb URL - used when showSeriesPosterOnEpisode setting is enabled
-    const seriesThumbUrl = useMemo(() => {
-      if (item?.Type !== "Episode" || !item.SeriesId || !api) return null;
-      return `${api.basePath}/Items/${item.SeriesId}/Images/Thumb?fillHeight=700&quality=80`;
-    }, [api, item]);
-
-    // Determine which option button is the last one (for focus guide targeting)
-    const lastOptionButton = useMemo(() => {
-      const hasSubtitleOption =
-        subtitleStreams.length > 0 ||
-        selectedOptions?.subtitleIndex !== undefined;
-      const hasAudioOption = audioTracks.length > 0;
-      const hasMediaSourceOption = mediaSources.length > 1;
-
-      if (hasSubtitleOption) return "subtitle";
-      if (hasAudioOption) return "audio";
-      if (hasMediaSourceOption) return "mediaSource";
-      return "quality";
-    }, [
-      subtitleStreams.length,
-      selectedOptions?.subtitleIndex,
-      audioTracks.length,
-      mediaSources.length,
-    ]);
-
-    // Navigation handlers
-    const handleActorPress = useCallback(
-      (personId: string) => {
-        router.push(`/(auth)/persons/${personId}`);
-      },
-      [router],
-    );
-
-    const handleSeriesPress = useCallback(() => {
-      if (item?.SeriesId) {
-        router.push(`/(auth)/series/${item.SeriesId}`);
-      }
-    }, [router, item?.SeriesId]);
-
-    const handleSeasonPress = useCallback(() => {
-      if (item?.SeriesId && item?.ParentIndexNumber) {
-        router.push(
-          `/(auth)/series/${item.SeriesId}?seasonIndex=${item.ParentIndexNumber}`,
-        );
-      }
-    }, [router, item?.SeriesId, item?.ParentIndexNumber]);
-
-    const handleEpisodePress = useCallback(
-      (episode: BaseItemDto) => {
-        const navigation = getItemNavigation(episode, "(home)");
-        router.push(navigation as any);
-      },
-      [router],
-    );
-
-    if (!item || !selectedOptions) return null;
-
-    return (
-      <View
-        style={{
-          flex: 1,
-          backgroundColor: "#000000",
-        }}
-      >
-        {/* Full-screen backdrop */}
-        <TVBackdrop item={item} />
-
-        {/* Main content area */}
-        <ScrollView
-          style={{ flex: 1 }}
-          contentContainerStyle={{
-            paddingTop: insets.top + 140,
-            paddingBottom: insets.bottom + 60,
-            paddingHorizontal: insets.left + 80,
-          }}
-          showsVerticalScrollIndicator={false}
-        >
-          {/* Top section - Logo/Title + Metadata */}
-          <View
-            style={{
-              flexDirection: "row",
-              minHeight: SCREEN_HEIGHT * 0.45,
-            }}
-          >
-            {/* Left side - Content */}
-            <View style={{ flex: 1, justifyContent: "center" }}>
-              {/* Logo or Title */}
-              {logoUrl ? (
-                <Image
-                  source={{ uri: logoUrl }}
-                  style={{
-                    height: 150,
-                    width: "80%",
-                    marginBottom: 24,
-                  }}
-                  contentFit='contain'
-                  contentPosition='left'
-                />
-              ) : (
-                <Text
-                  style={{
-                    fontSize: typography.display,
-                    fontWeight: "bold",
-                    color: "#FFFFFF",
-                    marginBottom: 20,
-                  }}
-                  numberOfLines={2}
-                >
-                  {item.Name}
-                </Text>
-              )}
-
-              {/* Episode info for TV shows */}
-              {item.Type === "Episode" && (
-                <View style={{ marginBottom: 16 }}>
-                  <Text
-                    style={{
-                      fontSize: typography.title,
-                      color: "#FFFFFF",
-                      fontWeight: "600",
-                    }}
-                  >
-                    {item.SeriesName}
-                  </Text>
-                  <Text
-                    style={{
-                      fontSize: typography.body,
-                      color: "white",
-                      marginTop: 6,
-                    }}
-                  >
-                    S{item.ParentIndexNumber} E{item.IndexNumber} · {item.Name}
-                  </Text>
-                </View>
-              )}
-
-              {/* Metadata badges row */}
-              <TVMetadataBadges
-                year={year}
-                duration={duration}
-                officialRating={item.OfficialRating}
-                communityRating={item.CommunityRating}
-              />
-
-              {/* Genres */}
-              {item.Genres && item.Genres.length > 0 && (
-                <View style={{ marginBottom: 24 }}>
-                  <GenreTags genres={item.Genres} />
-                </View>
-              )}
-
-              {/* Overview */}
-              {item.Overview && (
-                <BlurView
-                  intensity={10}
-                  tint='light'
-                  style={{
-                    borderRadius: 8,
-                    overflow: "hidden",
-                    maxWidth: SCREEN_WIDTH * 0.45,
-                    marginBottom: 32,
-                  }}
-                >
-                  <View
-                    style={{
-                      padding: 16,
-                      backgroundColor: "rgba(0,0,0,0.3)",
-                    }}
-                  >
-                    <Text
-                      style={{
-                        fontSize: typography.body,
-                        color: "#E5E7EB",
-                        lineHeight: 32,
-                      }}
-                      numberOfLines={4}
-                    >
-                      {item.Overview}
-                    </Text>
-                  </View>
-                </BlurView>
-              )}
-
-              {/* Action buttons */}
-              <View
-                style={{
-                  flexDirection: "row",
-                  gap: 16,
-                  marginBottom: 32,
-                }}
-              >
-                <TVButton
-                  onPress={handlePlay}
-                  hasTVPreferredFocus
-                  variant='primary'
-                >
-                  <Ionicons
-                    name='play'
-                    size={28}
-                    color='#000000'
-                    style={{ marginRight: 10 }}
-                  />
-                  <Text
-                    style={{
-                      fontSize: typography.callout,
-                      fontWeight: "bold",
-                      color: "#000000",
-                    }}
-                  >
-                    {hasProgress
-                      ? `${remainingTime} ${t("item_card.left")}`
-                      : t("common.play")}
-                  </Text>
-                </TVButton>
-                <TVFavoriteButton item={item} />
-                <TVRefreshButton itemId={item.Id} />
-              </View>
-
-              {/* Playback options */}
-              <View
-                style={{
-                  flexDirection: "column",
-                  alignItems: "flex-start",
-                  gap: 10,
-                  marginBottom: 24,
-                }}
-              >
-                {/* Quality selector */}
-                <TVOptionButton
-                  ref={
-                    lastOptionButton === "quality"
-                      ? setLastOptionButtonRef
-                      : undefined
-                  }
-                  label={t("item_card.quality")}
-                  value={selectedQualityLabel}
-                  onPress={() =>
-                    showOptions({
-                      title: t("item_card.quality"),
-                      options: qualityOptions,
-                      onSelect: handleQualityChange,
-                    })
-                  }
-                />
-
-                {/* Media source selector (only if multiple sources) */}
-                {mediaSources.length > 1 && (
-                  <TVOptionButton
-                    ref={
-                      lastOptionButton === "mediaSource"
-                        ? setLastOptionButtonRef
-                        : undefined
-                    }
-                    label={t("item_card.video")}
-                    value={selectedMediaSourceLabel}
-                    onPress={() =>
-                      showOptions({
-                        title: t("item_card.video"),
-                        options: mediaSourceOptions,
-                        onSelect: handleMediaSourceChange,
-                      })
-                    }
-                  />
-                )}
-
-                {/* Audio selector */}
-                {audioTracks.length > 0 && (
-                  <TVOptionButton
-                    ref={
-                      lastOptionButton === "audio"
-                        ? setLastOptionButtonRef
-                        : undefined
-                    }
-                    label={t("item_card.audio")}
-                    value={selectedAudioLabel}
-                    onPress={() =>
-                      showOptions({
-                        title: t("item_card.audio"),
-                        options: audioOptions,
-                        onSelect: handleAudioChange,
-                      })
-                    }
-                  />
-                )}
-
-                {/* Subtitle selector */}
-                {(subtitleStreams.length > 0 ||
-                  selectedOptions?.subtitleIndex !== undefined) && (
-                  <TVOptionButton
-                    ref={
-                      lastOptionButton === "subtitle"
-                        ? setLastOptionButtonRef
-                        : undefined
-                    }
-                    label={t("item_card.subtitles.label")}
-                    value={selectedSubtitleLabel}
-                    onPress={() =>
-                      showSubtitleModal({
-                        item,
-                        mediaSourceId: selectedOptions?.mediaSource?.Id,
-                        subtitleTracks: subtitleTracksForModal,
-                        currentSubtitleIndex:
-                          selectedOptions?.subtitleIndex ?? -1,
-                        onDisableSubtitles: () => handleSubtitleChange(-1),
-                        onServerSubtitleDownloaded:
-                          handleServerSubtitleDownloaded,
-                        refreshSubtitleTracks,
-                      })
-                    }
-                  />
-                )}
-              </View>
-
-              {/* Progress bar (if partially watched) */}
-              {hasProgress && item.RunTimeTicks != null && (
-                <TVProgressBar
-                  progress={
-                    (item.UserData?.PlaybackPositionTicks || 0) /
-                    item.RunTimeTicks
-                  }
-                  fillColor='#FFFFFF'
-                />
-              )}
-            </View>
-
-            {/* Right side - Poster */}
-            <View
-              style={{
-                width:
-                  item.Type === "Episode"
-                    ? SCREEN_WIDTH * 0.35
-                    : SCREEN_WIDTH * 0.22,
-                marginLeft: 50,
-              }}
-            >
-              <View
-                style={{
-                  aspectRatio: item.Type === "Episode" ? 16 / 9 : 2 / 3,
-                  borderRadius: 16,
-                  overflow: "hidden",
-                  shadowColor: "#000",
-                  shadowOffset: { width: 0, height: 10 },
-                  shadowOpacity: 0.5,
-                  shadowRadius: 20,
-                }}
-              >
-                {item.Type === "Episode" ? (
-                  <Image
-                    source={{
-                      uri:
-                        settings.showSeriesPosterOnEpisode && seriesThumbUrl
-                          ? seriesThumbUrl
-                          : episodeThumbnailUrl!,
-                    }}
-                    style={{ width: "100%", height: "100%" }}
-                    contentFit='cover'
-                  />
-                ) : (
-                  <ItemImage
-                    variant='Primary'
-                    item={item}
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                    }}
-                  />
-                )}
-              </View>
-            </View>
-          </View>
-
-          {/* Additional info section */}
-          <View style={{ marginTop: 40 }}>
-            {/* Season Episodes - Episode only */}
-            {item.Type === "Episode" && seasonEpisodes.length > 1 && (
-              <View style={{ marginBottom: 40 }}>
-                <Text
-                  style={{
-                    fontSize: typography.heading,
-                    fontWeight: "600",
-                    color: "#FFFFFF",
-                    marginBottom: 24,
-                  }}
-                >
-                  {t("item_card.more_from_this_season")}
-                </Text>
-
-                <ScrollView
-                  horizontal
-                  showsHorizontalScrollIndicator={false}
-                  style={{ marginHorizontal: -80, overflow: "visible" }}
-                  contentContainerStyle={{
-                    paddingHorizontal: 80,
-                    paddingVertical: 12,
-                    gap: 24,
-                  }}
-                >
-                  {seasonEpisodes.map((episode, index) => (
-                    <TVEpisodeCard
-                      key={episode.Id}
-                      episode={episode}
-                      onPress={() => handleEpisodePress(episode)}
-                      disabled={episode.Id === item.Id}
-                      refSetter={index === 0 ? setFirstEpisodeRef : undefined}
-                    />
-                  ))}
-                </ScrollView>
-              </View>
-            )}
-
-            {/* From this Series - Episode only */}
-            <TVSeriesNavigation
-              item={item}
-              seriesImageUrl={seriesImageUrl}
-              seasonImageUrl={seasonImageUrl}
-              onSeriesPress={handleSeriesPress}
-              onSeasonPress={handleSeasonPress}
-            />
-
-            {/* Visual Cast Section - Movies/Series/Episodes with circular actor cards */}
-            {showVisualCast && (
-              <TVCastSection
-                cast={fullCast}
-                apiBasePath={api?.basePath}
-                onActorPress={handleActorPress}
-                firstActorRefSetter={setFirstActorCardRef}
-              />
-            )}
-
-            {/* Cast & Crew (text version - director, etc.) */}
-            <TVCastCrewText
-              director={director}
-              cast={cast}
-              hideCast={showVisualCast}
-            />
-
-            {/* Technical details */}
-            {selectedOptions.mediaSource?.MediaStreams &&
-              selectedOptions.mediaSource.MediaStreams.length > 0 && (
-                <TVTechnicalDetails
-                  mediaStreams={selectedOptions.mediaSource.MediaStreams}
-                />
-              )}
-          </View>
-        </ScrollView>
-      </View>
-    );
-  },
-);
-
-// Alias for platform-resolved imports (tvOS auto-resolves .tv.tsx files)
-export const ItemContent = ItemContentTV;

components/ItemContentSkeleton.tv.tsx

@@ -1,163 +0,0 @@
-import React from "react";
-import { Dimensions, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-const { width: SCREEN_WIDTH } = Dimensions.get("window");
-
-export const ItemContentSkeletonTV: React.FC = () => {
-  const insets = useSafeAreaInsets();
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        flexDirection: "row",
-        paddingTop: insets.top + 140,
-        paddingHorizontal: insets.left + 80,
-      }}
-    >
-      {/* Left side - Content placeholders */}
-      <View style={{ flex: 1 }}>
-        {/* Logo placeholder */}
-        <View
-          style={{
-            height: 150,
-            width: "80%",
-            backgroundColor: "#1a1a1a",
-            borderRadius: 8,
-            marginBottom: 24,
-          }}
-        />
-
-        {/* Metadata badges row */}
-        <View
-          style={{
-            flexDirection: "row",
-            gap: 12,
-            marginBottom: 20,
-          }}
-        >
-          <View
-            style={{
-              height: 24,
-              width: 60,
-              backgroundColor: "#1a1a1a",
-              borderRadius: 4,
-            }}
-          />
-          <View
-            style={{
-              height: 24,
-              width: 80,
-              backgroundColor: "#1a1a1a",
-              borderRadius: 4,
-            }}
-          />
-          <View
-            style={{
-              height: 24,
-              width: 50,
-              backgroundColor: "#1a1a1a",
-              borderRadius: 4,
-            }}
-          />
-        </View>
-
-        {/* Genres placeholder */}
-        <View
-          style={{
-            flexDirection: "row",
-            gap: 8,
-            marginBottom: 24,
-          }}
-        >
-          <View
-            style={{
-              height: 28,
-              width: 80,
-              backgroundColor: "#1a1a1a",
-              borderRadius: 14,
-            }}
-          />
-          <View
-            style={{
-              height: 28,
-              width: 100,
-              backgroundColor: "#1a1a1a",
-              borderRadius: 14,
-            }}
-          />
-          <View
-            style={{
-              height: 28,
-              width: 70,
-              backgroundColor: "#1a1a1a",
-              borderRadius: 14,
-            }}
-          />
-        </View>
-
-        {/* Overview placeholder */}
-        <View
-          style={{
-            maxWidth: SCREEN_WIDTH * 0.45,
-            marginBottom: 32,
-          }}
-        >
-          <View
-            style={{
-              height: 18,
-              width: "100%",
-              backgroundColor: "#1a1a1a",
-              borderRadius: 4,
-              marginBottom: 8,
-            }}
-          />
-          <View
-            style={{
-              height: 18,
-              width: "90%",
-              backgroundColor: "#1a1a1a",
-              borderRadius: 4,
-              marginBottom: 8,
-            }}
-          />
-          <View
-            style={{
-              height: 18,
-              width: "75%",
-              backgroundColor: "#1a1a1a",
-              borderRadius: 4,
-            }}
-          />
-        </View>
-
-        {/* Play button placeholder */}
-        <View
-          style={{
-            height: 56,
-            width: 180,
-            backgroundColor: "#1a1a1a",
-            borderRadius: 12,
-          }}
-        />
-      </View>
-
-      {/* Right side - Poster placeholder */}
-      <View
-        style={{
-          width: SCREEN_WIDTH * 0.22,
-          marginLeft: 50,
-        }}
-      >
-        <View
-          style={{
-            aspectRatio: 2 / 3,
-            borderRadius: 16,
-            backgroundColor: "#1a1a1a",
-          }}
-        />
-      </View>
-    </View>
-  );
-};

components/ItemTechnicalDetails.tsx

@@ -77,7 +77,7 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
 
             <View>
               <Text className='text-lg font-bold mb-2'>
-                {t("item_card.subtitles.label")}
+                {t("item_card.subtitles")}
               </Text>
               <SubtitleStreamInfo
                 subtitleStreams={

components/MediaSourceButton.tsx

@@ -142,7 +142,7 @@ export const MediaSourceButton: React.FC<Props> = ({
       }));
 
       groups.push({
-        title: t("item_card.subtitles.label"),
+        title: t("item_card.subtitles"),
         options: [noneOption, ...subtitleOptions],
       });
     }

components/PINEntryModal.tsx

@@ -1,231 +0,0 @@
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
-import type React from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Alert,
-  Animated,
-  Keyboard,
-  Platform,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useHaptic } from "@/hooks/useHaptic";
-import { verifyAccountPIN } from "@/utils/secureCredentials";
-import { Button } from "./Button";
-import { Text } from "./common/Text";
-import { PinInput } from "./inputs/PinInput";
-
-interface PINEntryModalProps {
-  visible: boolean;
-  onClose: () => void;
-  onSuccess: () => void;
-  onForgotPIN?: () => void;
-  serverUrl: string;
-  userId: string;
-  username: string;
-}
-
-export const PINEntryModal: React.FC<PINEntryModalProps> = ({
-  visible,
-  onClose,
-  onSuccess,
-  onForgotPIN,
-  serverUrl,
-  userId,
-  username,
-}) => {
-  const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-  const [pinCode, setPinCode] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [isVerifying, setIsVerifying] = useState(false);
-  const shakeAnimation = useRef(new Animated.Value(0)).current;
-  const errorHaptic = useHaptic("error");
-  const successHaptic = useHaptic("success");
-
-  const isAndroid = Platform.OS === "android";
-  const snapPoints = useMemo(
-    () => (isAndroid ? ["100%"] : ["50%"]),
-    [isAndroid],
-  );
-
-  useEffect(() => {
-    if (visible) {
-      bottomSheetModalRef.current?.present();
-      setPinCode("");
-      setError(null);
-    } else {
-      bottomSheetModalRef.current?.dismiss();
-    }
-  }, [visible]);
-
-  const handleSheetChanges = useCallback(
-    (index: number) => {
-      if (index === -1) {
-        setPinCode("");
-        setError(null);
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
-  const shake = () => {
-    Animated.sequence([
-      Animated.timing(shakeAnimation, {
-        toValue: 10,
-        duration: 50,
-        useNativeDriver: true,
-      }),
-      Animated.timing(shakeAnimation, {
-        toValue: -10,
-        duration: 50,
-        useNativeDriver: true,
-      }),
-      Animated.timing(shakeAnimation, {
-        toValue: 10,
-        duration: 50,
-        useNativeDriver: true,
-      }),
-      Animated.timing(shakeAnimation, {
-        toValue: 0,
-        duration: 50,
-        useNativeDriver: true,
-      }),
-    ]).start();
-  };
-
-  const handlePinChange = async (value: string) => {
-    setPinCode(value);
-    setError(null);
-
-    // Auto-verify when 4 digits entered
-    if (value.length === 4) {
-      setIsVerifying(true);
-      try {
-        const isValid = await verifyAccountPIN(serverUrl, userId, value);
-        if (isValid) {
-          Keyboard.dismiss();
-          successHaptic();
-          onSuccess();
-          setPinCode("");
-        } else {
-          errorHaptic();
-          setError(t("pin.invalid_pin"));
-          shake();
-          setPinCode("");
-        }
-      } catch {
-        errorHaptic();
-        setError(t("pin.invalid_pin"));
-        shake();
-        setPinCode("");
-      } finally {
-        setIsVerifying(false);
-      }
-    }
-  };
-
-  const handleForgotPIN = () => {
-    Alert.alert(t("pin.forgot_pin"), t("pin.forgot_pin_desc"), [
-      { text: t("common.cancel"), style: "cancel" },
-      {
-        text: t("common.continue"),
-        style: "destructive",
-        onPress: () => {
-          onClose();
-          onForgotPIN?.();
-        },
-      },
-    ]);
-  };
-
-  return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
-      snapPoints={snapPoints}
-      onChange={handleSheetChanges}
-      handleIndicatorStyle={{ backgroundColor: "white" }}
-      backgroundStyle={{ backgroundColor: "#171717" }}
-      backdropComponent={renderBackdrop}
-      keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
-      keyboardBlurBehavior='restore'
-      android_keyboardInputMode='adjustResize'
-      topInset={isAndroid ? 0 : undefined}
-    >
-      <BottomSheetView
-        style={{
-          flex: 1,
-          paddingLeft: Math.max(16, insets.left),
-          paddingRight: Math.max(16, insets.right),
-          paddingBottom: Math.max(16, insets.bottom),
-        }}
-      >
-        <View className='flex-1'>
-          {/* Header */}
-          <View className='mb-6'>
-            <Text className='font-bold text-2xl text-neutral-100'>
-              {t("pin.enter_pin")}
-            </Text>
-            <Text className='text-neutral-400 mt-1'>
-              {t("pin.enter_pin_for", { username })}
-            </Text>
-          </View>
-
-          {/* PIN Input */}
-          <Animated.View
-            style={{ transform: [{ translateX: shakeAnimation }] }}
-            className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 mb-4'
-          >
-            <PinInput
-              value={pinCode}
-              onChangeText={handlePinChange}
-              length={4}
-              style={{ paddingHorizontal: 16 }}
-              autoFocus
-            />
-            {error && (
-              <Text className='text-red-500 text-center mt-3'>{error}</Text>
-            )}
-            {isVerifying && (
-              <Text className='text-neutral-400 text-center mt-3'>
-                {t("common.verifying") || "Verifying..."}
-              </Text>
-            )}
-          </Animated.View>
-
-          {/* Forgot PIN */}
-          <TouchableOpacity onPress={handleForgotPIN} className='mb-4'>
-            <Text className='text-purple-400 text-center'>
-              {t("pin.forgot_pin")}
-            </Text>
-          </TouchableOpacity>
-
-          {/* Cancel Button */}
-          <Button onPress={onClose} color='black'>
-            {t("common.cancel")}
-          </Button>
-        </View>
-      </BottomSheetView>
-    </BottomSheetModal>
-  );
-};

components/PasswordEntryModal.tsx

@@ -1,185 +0,0 @@
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetTextInput,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
-import type React from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { ActivityIndicator, Platform, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useHaptic } from "@/hooks/useHaptic";
-import { Button } from "./Button";
-import { Text } from "./common/Text";
-
-interface PasswordEntryModalProps {
-  visible: boolean;
-  onClose: () => void;
-  onSubmit: (password: string) => Promise<void>;
-  username: string;
-}
-
-export const PasswordEntryModal: React.FC<PasswordEntryModalProps> = ({
-  visible,
-  onClose,
-  onSubmit,
-  username,
-}) => {
-  const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const errorHaptic = useHaptic("error");
-
-  const isAndroid = Platform.OS === "android";
-  const snapPoints = useMemo(
-    () => (isAndroid ? ["100%"] : ["50%"]),
-    [isAndroid],
-  );
-
-  useEffect(() => {
-    if (visible) {
-      bottomSheetModalRef.current?.present();
-      setPassword("");
-      setError(null);
-    } else {
-      bottomSheetModalRef.current?.dismiss();
-    }
-  }, [visible]);
-
-  const handleSheetChanges = useCallback(
-    (index: number) => {
-      if (index === -1) {
-        setPassword("");
-        setError(null);
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
-  const handleSubmit = async () => {
-    if (!password) {
-      setError(t("password.enter_password"));
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      await onSubmit(password);
-      setPassword("");
-    } catch {
-      errorHaptic();
-      setError(t("password.invalid_password"));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
-      snapPoints={snapPoints}
-      onChange={handleSheetChanges}
-      handleIndicatorStyle={{ backgroundColor: "white" }}
-      backgroundStyle={{ backgroundColor: "#171717" }}
-      backdropComponent={renderBackdrop}
-      keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
-      keyboardBlurBehavior='restore'
-      android_keyboardInputMode='adjustResize'
-      topInset={isAndroid ? 0 : undefined}
-    >
-      <BottomSheetView
-        style={{
-          flex: 1,
-          paddingLeft: Math.max(16, insets.left),
-          paddingRight: Math.max(16, insets.right),
-          paddingBottom: Math.max(16, insets.bottom),
-        }}
-      >
-        <View className='flex-1'>
-          {/* Header */}
-          <View className='mb-6'>
-            <Text className='font-bold text-2xl text-neutral-100'>
-              {t("password.enter_password")}
-            </Text>
-            <Text className='text-neutral-400 mt-1'>
-              {t("password.enter_password_for", { username })}
-            </Text>
-          </View>
-
-          {/* Password Input */}
-          <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 mb-4'>
-            <Text className='text-neutral-400 text-sm mb-2'>
-              {t("login.password")}
-            </Text>
-            <BottomSheetTextInput
-              value={password}
-              onChangeText={(text) => {
-                setPassword(text);
-                setError(null);
-              }}
-              placeholder={t("login.password")}
-              placeholderTextColor='#6B7280'
-              secureTextEntry
-              autoFocus
-              autoCapitalize='none'
-              autoCorrect={false}
-              style={{
-                backgroundColor: "#1F2937",
-                borderRadius: 8,
-                padding: 12,
-                color: "white",
-                fontSize: 16,
-              }}
-              onSubmitEditing={handleSubmit}
-              returnKeyType='done'
-            />
-            {error && <Text className='text-red-500 mt-2'>{error}</Text>}
-          </View>
-
-          {/* Buttons */}
-          <View className='flex-row gap-3'>
-            <Button
-              onPress={onClose}
-              color='black'
-              className='flex-1'
-              disabled={isLoading}
-            >
-              {t("common.cancel")}
-            </Button>
-            <Button
-              onPress={handleSubmit}
-              color='purple'
-              className='flex-1'
-              disabled={isLoading || !password}
-            >
-              {isLoading ? (
-                <ActivityIndicator size='small' color='white' />
-              ) : (
-                t("login.login")
-              )}
-            </Button>
-          </View>
-        </View>
-      </BottomSheetView>
-    </BottomSheetModal>
-  );
-};

components/PlatformDropdown.tsx

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

components/PlayButton.tsx

@@ -2,13 +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,
   PlayServicesState,
   useMediaStatus,
   useRemoteMediaClient,
@@ -23,13 +23,11 @@ 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";
@@ -45,6 +43,7 @@ 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();
@@ -186,23 +185,11 @@ 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"
                             ? {
@@ -254,7 +241,7 @@ export const PlayButton: React.FC<Props> = ({
                                   ],
                                 },
                       },
-                      startTime: startTimeSeconds,
+                      startTime: 0,
                     })
                     .then(() => {
                       // state is already set when reopening current media, so skip it here.
@@ -300,19 +287,6 @@ 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,5 +1,6 @@
 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";
@@ -13,7 +14,6 @@ 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,6 +7,7 @@ import { RoundButton } from "./RoundButton";
 
 interface Props extends ViewProps {
   items: BaseItemDto[];
+  isOffline?: boolean;
   size?: "default" | "large";
 }
 

components/PreviousServersList.tsx

@@ -1,266 +1,42 @@
-import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { ActivityIndicator, Alert, TouchableOpacity, View } from "react-native";
-import { Swipeable } from "react-native-gesture-handler";
+import { View } from "react-native";
 import { useMMKVString } from "react-native-mmkv";
-import { Colors } from "@/constants/Colors";
-import {
-  deleteAccountCredential,
-  getPreviousServers,
-  removeServerFromList,
-  type SavedServer,
-  type SavedServerAccount,
-} from "@/utils/secureCredentials";
-import { AccountsSheet } from "./AccountsSheet";
-import { Text } from "./common/Text";
 import { ListGroup } from "./list/ListGroup";
 import { ListItem } from "./list/ListItem";
-import { PasswordEntryModal } from "./PasswordEntryModal";
-import { PINEntryModal } from "./PINEntryModal";
+
+interface Server {
+  address: string;
+}
 
 interface PreviousServersListProps {
-  onServerSelect: (server: SavedServer) => void;
-  onQuickLogin?: (serverUrl: string, userId: string) => Promise<void>;
-  onPasswordLogin?: (
-    serverUrl: string,
-    username: string,
-    password: string,
-  ) => Promise<void>;
-  onAddAccount?: (server: SavedServer) => void;
+  onServerSelect: (server: Server) => void;
 }
 
 export const PreviousServersList: React.FC<PreviousServersListProps> = ({
   onServerSelect,
-  onQuickLogin,
-  onPasswordLogin,
-  onAddAccount,
 }) => {
   const [_previousServers, setPreviousServers] =
     useMMKVString("previousServers");
-  const [loadingServer, setLoadingServer] = useState<string | null>(null);
-
-  // Modal states
-  const [accountsSheetOpen, setAccountsSheetOpen] = useState(false);
-  const [selectedServer, setSelectedServer] = useState<SavedServer | null>(
-    null,
-  );
-  const [pinModalVisible, setPinModalVisible] = useState(false);
-  const [passwordModalVisible, setPasswordModalVisible] = useState(false);
-  const [selectedAccount, setSelectedAccount] =
-    useState<SavedServerAccount | null>(null);
 
   const previousServers = useMemo(() => {
-    return JSON.parse(_previousServers || "[]") as SavedServer[];
+    return JSON.parse(_previousServers || "[]") as Server[];
   }, [_previousServers]);
 
   const { t } = useTranslation();
 
-  const refreshServers = () => {
-    const servers = getPreviousServers();
-    setPreviousServers(JSON.stringify(servers));
-  };
-
-  const handleAccountLogin = async (
-    server: SavedServer,
-    account: SavedServerAccount,
-  ) => {
-    switch (account.securityType) {
-      case "none":
-        // Quick login without protection
-        if (onQuickLogin) {
-          setLoadingServer(server.address);
-          try {
-            await onQuickLogin(server.address, account.userId);
-          } catch {
-            Alert.alert(
-              t("server.session_expired"),
-              t("server.please_login_again"),
-              [{ text: t("common.ok"), onPress: () => onServerSelect(server) }],
-            );
-          } finally {
-            setLoadingServer(null);
-          }
-        }
-        break;
-
-      case "pin":
-        // Show PIN entry modal
-        setSelectedServer(server);
-        setSelectedAccount(account);
-        setPinModalVisible(true);
-        break;
-
-      case "password":
-        // Show password entry modal
-        setSelectedServer(server);
-        setSelectedAccount(account);
-        setPasswordModalVisible(true);
-        break;
-    }
-  };
-
-  const handleServerPress = async (server: SavedServer) => {
-    if (loadingServer) return; // Prevent double-tap
-
-    const accountCount = server.accounts?.length || 0;
-
-    if (accountCount === 0) {
-      // No saved accounts, go to manual login
-      onServerSelect(server);
-    } else {
-      // Has accounts, show account sheet (allows adding new account too)
-      setSelectedServer(server);
-      setAccountsSheetOpen(true);
-    }
-  };
-
-  const handlePinSuccess = async () => {
-    setPinModalVisible(false);
-    if (selectedServer && selectedAccount && onQuickLogin) {
-      setLoadingServer(selectedServer.address);
-      try {
-        await onQuickLogin(selectedServer.address, selectedAccount.userId);
-      } catch {
-        Alert.alert(
-          t("server.session_expired"),
-          t("server.please_login_again"),
-          [
-            {
-              text: t("common.ok"),
-              onPress: () => onServerSelect(selectedServer),
-            },
-          ],
-        );
-      } finally {
-        setLoadingServer(null);
-        setSelectedAccount(null);
-        setSelectedServer(null);
-      }
-    }
-  };
-
-  const handlePasswordSubmit = async (password: string) => {
-    if (selectedServer && selectedAccount && onPasswordLogin) {
-      await onPasswordLogin(
-        selectedServer.address,
-        selectedAccount.username,
-        password,
-      );
-      setPasswordModalVisible(false);
-      setSelectedAccount(null);
-      setSelectedServer(null);
-    }
-  };
-
-  const handleForgotPIN = async () => {
-    if (selectedServer && selectedAccount) {
-      await deleteAccountCredential(
-        selectedServer.address,
-        selectedAccount.userId,
-      );
-      refreshServers();
-      // Go to manual login
-      onServerSelect(selectedServer);
-      setSelectedAccount(null);
-      setSelectedServer(null);
-    }
-  };
-
-  const handleRemoveFirstCredential = async (serverUrl: string) => {
-    const server = previousServers.find((s) => s.address === serverUrl);
-    if (!server || server.accounts.length === 0) return;
-
-    Alert.alert(
-      t("server.remove_saved_login"),
-      t("server.remove_saved_login_description"),
-      [
-        { text: t("common.cancel"), style: "cancel" },
-        {
-          text: t("common.remove"),
-          style: "destructive",
-          onPress: async () => {
-            // Remove first account
-            await deleteAccountCredential(serverUrl, server.accounts[0].userId);
-            refreshServers();
-          },
-        },
-      ],
-    );
-  };
-
-  const handleRemoveServer = useCallback(
-    async (serverUrl: string) => {
-      await removeServerFromList(serverUrl);
-      refreshServers();
-    },
-    [setPreviousServers],
-  );
-
-  const renderRightActions = useCallback(
-    (serverUrl: string, swipeableRef: React.RefObject<Swipeable | null>) => (
-      <TouchableOpacity
-        onPress={() => {
-          swipeableRef.current?.close();
-          handleRemoveServer(serverUrl);
-        }}
-        className='bg-red-600 justify-center items-center px-5'
-      >
-        <Ionicons name='trash' size={20} color='white' />
-      </TouchableOpacity>
-    ),
-    [handleRemoveServer],
-  );
-
-  const getServerSubtitle = (server: SavedServer): string | undefined => {
-    const accountCount = server.accounts?.length || 0;
-
-    if (accountCount > 1) {
-      return t("server.accounts_count", { count: accountCount });
-    }
-    if (accountCount === 1) {
-      return `${server.accounts[0].username} • ${t("server.saved")}`;
-    }
-    return server.name ? server.address : undefined;
-  };
-
-  const getSecurityIcon = (
-    server: SavedServer,
-  ): keyof typeof Ionicons.glyphMap | null => {
-    const accountCount = server.accounts?.length || 0;
-    if (accountCount === 0) return null;
-
-    if (accountCount > 1) {
-      return "people";
-    }
-
-    const account = server.accounts[0];
-    switch (account.securityType) {
-      case "pin":
-        return "keypad";
-      case "password":
-        return "lock-closed";
-      default:
-        return "key";
-    }
-  };
-
   if (!previousServers.length) return null;
 
   return (
     <View>
       <ListGroup title={t("server.previous_servers")} className='mt-4'>
         {previousServers.map((s) => (
-          <ServerItem
+          <ListItem
             key={s.address}
-            server={s}
-            loadingServer={loadingServer}
-            onPress={() => handleServerPress(s)}
-            onRemoveCredential={() => handleRemoveFirstCredential(s.address)}
-            renderRightActions={renderRightActions}
-            subtitle={getServerSubtitle(s)}
-            securityIcon={getSecurityIcon(s)}
+            onPress={() => onServerSelect(s)}
+            title={s.address}
+            showArrow
           />
         ))}
         <ListItem
@@ -271,113 +47,6 @@ export const PreviousServersList: React.FC<PreviousServersListProps> = ({
           textColor='red'
         />
       </ListGroup>
-      <Text className='text-xs text-neutral-500 mt-2 ml-4'>
-        {t("server.swipe_to_remove")}
-      </Text>
-
-      {/* Account Selection Sheet */}
-      <AccountsSheet
-        open={accountsSheetOpen}
-        setOpen={setAccountsSheetOpen}
-        server={selectedServer}
-        onAccountSelect={(account) => {
-          if (selectedServer) {
-            handleAccountLogin(selectedServer, account);
-          }
-        }}
-        onAddAccount={() => {
-          if (selectedServer && onAddAccount) {
-            onAddAccount(selectedServer);
-          }
-        }}
-        onAccountDeleted={refreshServers}
-      />
-
-      {/* PIN Entry Modal */}
-      <PINEntryModal
-        visible={pinModalVisible}
-        onClose={() => {
-          setPinModalVisible(false);
-          setSelectedAccount(null);
-          setSelectedServer(null);
-        }}
-        onSuccess={handlePinSuccess}
-        onForgotPIN={handleForgotPIN}
-        serverUrl={selectedServer?.address || ""}
-        userId={selectedAccount?.userId || ""}
-        username={selectedAccount?.username || ""}
-      />
-
-      {/* Password Entry Modal */}
-      <PasswordEntryModal
-        visible={passwordModalVisible}
-        onClose={() => {
-          setPasswordModalVisible(false);
-          setSelectedAccount(null);
-          setSelectedServer(null);
-        }}
-        onSubmit={handlePasswordSubmit}
-        username={selectedAccount?.username || ""}
-      />
     </View>
   );
 };
-
-interface ServerItemProps {
-  server: SavedServer;
-  loadingServer: string | null;
-  onPress: () => void;
-  onRemoveCredential: () => void;
-  renderRightActions: (
-    serverUrl: string,
-    swipeableRef: React.RefObject<Swipeable | null>,
-  ) => React.ReactNode;
-  subtitle?: string;
-  securityIcon: keyof typeof Ionicons.glyphMap | null;
-}
-
-const ServerItem: React.FC<ServerItemProps> = ({
-  server,
-  loadingServer,
-  onPress,
-  onRemoveCredential,
-  renderRightActions,
-  subtitle,
-  securityIcon,
-}) => {
-  const swipeableRef = useRef<Swipeable>(null);
-  const hasAccounts = server.accounts?.length > 0;
-
-  return (
-    <Swipeable
-      ref={swipeableRef}
-      renderRightActions={() =>
-        renderRightActions(server.address, swipeableRef)
-      }
-      overshootRight={false}
-    >
-      <ListItem
-        onPress={onPress}
-        title={server.name || server.address}
-        subtitle={subtitle}
-        showArrow={loadingServer !== server.address}
-        disabled={loadingServer === server.address}
-      >
-        {loadingServer === server.address ? (
-          <ActivityIndicator size='small' color={Colors.primary} />
-        ) : hasAccounts && securityIcon ? (
-          <TouchableOpacity
-            onPress={(e) => {
-              e.stopPropagation();
-              onRemoveCredential();
-            }}
-            className='p-1'
-            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-          >
-            <Ionicons name={securityIcon} size={16} color={Colors.primary} />
-          </TouchableOpacity>
-        ) : null}
-      </ListItem>
-    </Swipeable>
-  );
-};

components/RoundButton.tsx

@@ -1,8 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BlurView } from "expo-blur";
 import type { PropsWithChildren } from "react";
-import { Platform, type ViewProps } from "react-native";
-import { Pressable } from "react-native-gesture-handler";
+import { Platform, TouchableOpacity, type ViewProps } from "react-native";
 import { useHaptic } from "@/hooks/useHaptic";
 
 interface Props extends ViewProps {
@@ -39,7 +38,7 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
 
   if (Platform.OS === "ios") {
     return (
-      <Pressable
+      <TouchableOpacity
         onPress={handlePress}
         className={`rounded-full ${buttonSize} flex items-center justify-center ${fillColorClass}`}
         {...(viewProps as any)}
@@ -52,13 +51,13 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
           />
         ) : null}
         {children ? children : null}
-      </Pressable>
+      </TouchableOpacity>
     );
   }
 
   if (fillColor)
     return (
-      <Pressable
+      <TouchableOpacity
         onPress={handlePress}
         className={`rounded-full ${buttonSize} flex items-center justify-center ${fillColorClass}`}
         {...(viewProps as any)}
@@ -71,12 +70,12 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
           />
         ) : null}
         {children ? children : null}
-      </Pressable>
+      </TouchableOpacity>
     );
 
   if (background === false)
     return (
-      <Pressable
+      <TouchableOpacity
         onPress={handlePress}
         className={`rounded-full ${buttonSize} flex items-center justify-center ${fillColorClass}`}
         {...(viewProps as any)}
@@ -89,12 +88,12 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
           />
         ) : null}
         {children ? children : null}
-      </Pressable>
+      </TouchableOpacity>
     );
 
   if (Platform.OS === "android")
     return (
-      <Pressable
+      <TouchableOpacity
         onPress={handlePress}
         className={`rounded-full ${buttonSize} flex items-center justify-center ${
           fillColor ? fillColorClass : "bg-transparent"
@@ -109,11 +108,11 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
           />
         ) : null}
         {children ? children : null}
-      </Pressable>
+      </TouchableOpacity>
     );
 
   return (
-    <Pressable onPress={handlePress} {...(viewProps as any)}>
+    <TouchableOpacity onPress={handlePress} {...(viewProps as any)}>
       <BlurView
         intensity={90}
         className={`rounded-full overflow-hidden ${buttonSize} flex items-center justify-center ${fillColorClass}`}
@@ -128,6 +127,6 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
         ) : null}
         {children ? children : null}
       </BlurView>
-    </Pressable>
+    </TouchableOpacity>
   );
 };

components/SaveAccountModal.tsx

@@ -1,252 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
-import type React from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import type { AccountSecurityType } from "@/utils/secureCredentials";
-import { Button } from "./Button";
-import { Text } from "./common/Text";
-import { PinInput } from "./inputs/PinInput";
-
-interface SaveAccountModalProps {
-  visible: boolean;
-  onClose: () => void;
-  onSave: (securityType: AccountSecurityType, pinCode?: string) => void;
-  username: string;
-}
-
-interface SecurityOption {
-  type: AccountSecurityType;
-  titleKey: string;
-  descriptionKey: string;
-  icon: keyof typeof Ionicons.glyphMap;
-}
-
-const SECURITY_OPTIONS: SecurityOption[] = [
-  {
-    type: "none",
-    titleKey: "save_account.no_protection",
-    descriptionKey: "save_account.no_protection_desc",
-    icon: "flash-outline",
-  },
-  {
-    type: "pin",
-    titleKey: "save_account.pin_code",
-    descriptionKey: "save_account.pin_code_desc",
-    icon: "keypad-outline",
-  },
-  {
-    type: "password",
-    titleKey: "save_account.password",
-    descriptionKey: "save_account.password_desc",
-    icon: "lock-closed-outline",
-  },
-];
-
-export const SaveAccountModal: React.FC<SaveAccountModalProps> = ({
-  visible,
-  onClose,
-  onSave,
-  username,
-}) => {
-  const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-  const [selectedType, setSelectedType] = useState<AccountSecurityType>("none");
-  const [pinCode, setPinCode] = useState("");
-  const [pinError, setPinError] = useState<string | null>(null);
-
-  const isAndroid = Platform.OS === "android";
-  const snapPoints = useMemo(
-    () => (isAndroid ? ["100%"] : ["70%"]),
-    [isAndroid],
-  );
-
-  useEffect(() => {
-    if (visible) {
-      bottomSheetModalRef.current?.present();
-    } else {
-      bottomSheetModalRef.current?.dismiss();
-    }
-  }, [visible]);
-
-  const handleSheetChanges = useCallback(
-    (index: number) => {
-      if (index === -1) {
-        resetState();
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
-  const resetState = () => {
-    setSelectedType("none");
-    setPinCode("");
-    setPinError(null);
-  };
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
-  const handleOptionSelect = (type: AccountSecurityType) => {
-    setSelectedType(type);
-    setPinCode("");
-    setPinError(null);
-  };
-
-  const handleSave = () => {
-    if (selectedType === "pin") {
-      if (pinCode.length !== 4) {
-        setPinError(t("pin.enter_4_digits") || "Enter 4 digits");
-        return;
-      }
-      onSave("pin", pinCode);
-    } else {
-      onSave(selectedType);
-    }
-    resetState();
-  };
-
-  const handleCancel = () => {
-    resetState();
-    onClose();
-  };
-
-  const canSave = () => {
-    if (selectedType === "pin") {
-      return pinCode.length === 4;
-    }
-    return true;
-  };
-
-  return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
-      snapPoints={snapPoints}
-      onChange={handleSheetChanges}
-      handleIndicatorStyle={{ backgroundColor: "white" }}
-      backgroundStyle={{ backgroundColor: "#171717" }}
-      backdropComponent={renderBackdrop}
-      keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
-      keyboardBlurBehavior='restore'
-      android_keyboardInputMode='adjustResize'
-      topInset={isAndroid ? 0 : undefined}
-    >
-      <BottomSheetView
-        style={{
-          flex: 1,
-          paddingLeft: Math.max(16, insets.left),
-          paddingRight: Math.max(16, insets.right),
-          paddingBottom: Math.max(16, insets.bottom),
-        }}
-      >
-        <View className='flex-1'>
-          {/* Header */}
-          <View className='mb-4'>
-            <Text className='font-bold text-2xl text-neutral-100'>
-              {t("save_account.title")}
-            </Text>
-            <Text className='text-neutral-400 mt-1'>{username}</Text>
-          </View>
-
-          {/* PIN Entry Step */}
-          {selectedType === "pin" ? (
-            <View className='flex-1'>
-              <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 mb-4'>
-                <Text className='text-neutral-100 text-center text-lg mb-4'>
-                  {t("pin.setup_pin")}
-                </Text>
-                <PinInput
-                  value={pinCode}
-                  onChangeText={setPinCode}
-                  length={4}
-                  style={{ paddingHorizontal: 16 }}
-                  autoFocus
-                />
-                {pinError && (
-                  <Text className='text-red-500 text-center mt-3'>
-                    {pinError}
-                  </Text>
-                )}
-              </View>
-            </View>
-          ) : (
-            /* Security Options */
-            <View className='flex-1'>
-              <Text className='text-neutral-400 mb-3'>
-                {t("save_account.security_option")}
-              </Text>
-              <View className='bg-neutral-800 rounded-xl overflow-hidden'>
-                {SECURITY_OPTIONS.map((option, index) => (
-                  <TouchableOpacity
-                    key={option.type}
-                    onPress={() => handleOptionSelect(option.type)}
-                    className={`flex-row items-center p-4 ${
-                      index < SECURITY_OPTIONS.length - 1
-                        ? "border-b border-neutral-700"
-                        : ""
-                    }`}
-                  >
-                    <View className='w-10 h-10 bg-neutral-700 rounded-full items-center justify-center mr-3'>
-                      <Ionicons name={option.icon} size={20} color='white' />
-                    </View>
-                    <View className='flex-1'>
-                      <Text className='text-neutral-100 font-medium'>
-                        {t(option.titleKey)}
-                      </Text>
-                      <Text className='text-neutral-400 text-sm'>
-                        {t(option.descriptionKey)}
-                      </Text>
-                    </View>
-                    <View
-                      className={`w-6 h-6 rounded-full border-2 items-center justify-center ${
-                        selectedType === option.type
-                          ? "border-purple-500 bg-purple-500"
-                          : "border-neutral-500"
-                      }`}
-                    >
-                      {selectedType === option.type && (
-                        <Ionicons name='checkmark' size={14} color='white' />
-                      )}
-                    </View>
-                  </TouchableOpacity>
-                ))}
-              </View>
-            </View>
-          )}
-
-          {/* Buttons */}
-          <View className='flex-row gap-3 mt-4'>
-            <Button onPress={handleCancel} color='black' className='flex-1'>
-              {t("save_account.cancel_button")}
-            </Button>
-            <Button
-              onPress={handleSave}
-              color='purple'
-              className='flex-1'
-              disabled={!canSave()}
-            >
-              {t("save_account.save_button")}
-            </Button>
-          </View>
-        </View>
-      </BottomSheetView>
-    </BottomSheetModal>
-  );
-};

components/SubtitleTrackSelector.tsx

@@ -76,7 +76,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   const trigger = (
     <View className='flex flex-col' {...props}>
       <Text numberOfLines={1} className='opacity-50 mb-1 text-xs'>
-        {t("item_card.subtitles.label")}
+        {t("item_card.subtitles")}
       </Text>
       <TouchableOpacity
         className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
@@ -97,7 +97,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
     <PlatformDropdown
       groups={optionGroups}
       trigger={trigger}
-      title={t("item_card.subtitles.label")}
+      title={t("item_card.subtitles")}
       open={open}
       onOpenChange={setOpen}
       onOptionSelect={handleOptionSelect}

components/WatchedIndicator.tsx

@@ -1,37 +1,8 @@
-import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import type React from "react";
-import { Platform, View } from "react-native";
+import { View } from "react-native";
 
 export const WatchedIndicator: React.FC<{ item: BaseItemDto }> = ({ item }) => {
-  if (Platform.isTV) {
-    // TV: Show white checkmark when watched
-    if (
-      item.UserData?.Played &&
-      (item.Type === "Movie" || item.Type === "Episode")
-    ) {
-      return (
-        <View
-          style={{
-            position: "absolute",
-            top: 8,
-            right: 8,
-            backgroundColor: "rgba(255,255,255,0.9)",
-            borderRadius: 14,
-            width: 28,
-            height: 28,
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <Ionicons name='checkmark' size={18} color='black' />
-        </View>
-      );
-    }
-    return null;
-  }
-
-  // Mobile: Show purple triangle for unwatched
   return (
     <>
       {item.UserData?.Played === false &&

components/apple-tv-carousel/AppleTVCarousel.tsx

@@ -0,0 +1,909 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  getItemsApi,
+  getTvShowsApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+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 {
+  Pressable,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  Easing,
+  interpolate,
+  runOnJS,
+  type SharedValue,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
+import { useImageColorsReturn } from "@/hooks/useImageColorsReturn";
+import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
+import { useNetworkStatus } from "@/hooks/useNetworkStatus";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
+import { ItemImage } from "../common/ItemImage";
+import { getItemNavigation } from "../common/TouchableItemRouter";
+import type { SelectedOptions } from "../ItemContent";
+import { PlayButton } from "../PlayButton";
+import { MarkAsPlayedLargeButton } from "./MarkAsPlayedLargeButton";
+
+interface AppleTVCarouselProps {
+  initialIndex?: number;
+  onItemChange?: (index: number) => void;
+  scrollOffset?: SharedValue<number>;
+}
+
+// Layout Constants
+const GRADIENT_HEIGHT_TOP = 150;
+const GRADIENT_HEIGHT_BOTTOM = 150;
+const LOGO_HEIGHT = 80;
+
+// Position Constants
+const LOGO_BOTTOM_POSITION = 260;
+const GENRES_BOTTOM_POSITION = 220;
+const OVERVIEW_BOTTOM_POSITION = 165;
+const CONTROLS_BOTTOM_POSITION = 80;
+const DOTS_BOTTOM_POSITION = 40;
+
+// Size Constants
+const DOT_HEIGHT = 6;
+const DOT_ACTIVE_WIDTH = 20;
+const DOT_INACTIVE_WIDTH = 12;
+const PLAY_BUTTON_SKELETON_HEIGHT = 50;
+const PLAYED_STATUS_SKELETON_SIZE = 40;
+const TEXT_SKELETON_HEIGHT = 20;
+const TEXT_SKELETON_WIDTH = 250;
+const OVERVIEW_SKELETON_HEIGHT = 16;
+const OVERVIEW_SKELETON_WIDTH = 400;
+const _EMPTY_STATE_ICON_SIZE = 64;
+
+// Spacing Constants
+const HORIZONTAL_PADDING = 40;
+const DOT_PADDING = 2;
+const DOT_GAP = 4;
+const CONTROLS_GAP = 10;
+const _TEXT_MARGIN_TOP = 16;
+
+// Border Radius Constants
+const DOT_BORDER_RADIUS = 3;
+const LOGO_SKELETON_BORDER_RADIUS = 8;
+const TEXT_SKELETON_BORDER_RADIUS = 4;
+const PLAY_BUTTON_BORDER_RADIUS = 25;
+const PLAYED_STATUS_BORDER_RADIUS = 20;
+
+// Animation Constants
+const DOT_ANIMATION_DURATION = 300;
+const CAROUSEL_TRANSITION_DURATION = 250;
+const PAN_ACTIVE_OFFSET = 10;
+const TRANSLATION_THRESHOLD = 0.2;
+const VELOCITY_THRESHOLD = 400;
+
+// Text Constants
+const GENRES_FONT_SIZE = 16;
+const OVERVIEW_FONT_SIZE = 14;
+const _EMPTY_STATE_FONT_SIZE = 18;
+const TEXT_SHADOW_RADIUS = 2;
+const MAX_GENRES_COUNT = 2;
+const MAX_BUTTON_WIDTH = 300;
+const OVERVIEW_MAX_LINES = 2;
+const OVERVIEW_MAX_WIDTH = "80%";
+
+// Opacity Constants
+const OVERLAY_OPACITY = 0.3;
+const DOT_INACTIVE_OPACITY = 0.6;
+const TEXT_OPACITY = 0.9;
+
+// Color Constants
+const SKELETON_BACKGROUND_COLOR = "#1a1a1a";
+const SKELETON_ELEMENT_COLOR = "#333";
+const SKELETON_ACTIVE_DOT_COLOR = "#666";
+const _EMPTY_STATE_COLOR = "#666";
+const TEXT_SHADOW_COLOR = "rgba(0, 0, 0, 0.8)";
+const LOGO_WIDTH_PERCENTAGE = "80%";
+
+const DotIndicator = ({
+  index,
+  currentIndex,
+  onPress,
+}: {
+  index: number;
+  currentIndex: number;
+  onPress: (index: number) => void;
+}) => {
+  const isActive = index === currentIndex;
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: withTiming(isActive ? DOT_ACTIVE_WIDTH : DOT_INACTIVE_WIDTH, {
+      duration: DOT_ANIMATION_DURATION,
+      easing: Easing.out(Easing.quad),
+    }),
+    opacity: withTiming(isActive ? 1 : DOT_INACTIVE_OPACITY, {
+      duration: DOT_ANIMATION_DURATION,
+      easing: Easing.out(Easing.quad),
+    }),
+  }));
+
+  return (
+    <Pressable
+      onPress={() => onPress(index)}
+      style={{
+        padding: DOT_PADDING, // Increase touch area
+      }}
+    >
+      <Animated.View
+        style={[
+          {
+            height: DOT_HEIGHT,
+            backgroundColor: isActive ? "white" : "rgba(255, 255, 255, 0.4)",
+            borderRadius: DOT_BORDER_RADIUS,
+          },
+          animatedStyle,
+        ]}
+      />
+    </Pressable>
+  );
+};
+
+export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
+  initialIndex = 0,
+  onItemChange,
+  scrollOffset,
+}) => {
+  const { settings } = useSettings();
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const { isConnected, serverConnected } = useNetworkStatus();
+  const router = useRouter();
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const isLandscape = screenWidth >= screenHeight;
+  const carouselHeight = useMemo(
+    () => (isLandscape ? screenHeight * 0.9 : screenHeight / 1.45),
+    [isLandscape, screenHeight],
+  );
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const translateX = useSharedValue(-initialIndex * screenWidth);
+
+  const isQueryEnabled =
+    !!api && !!user?.Id && isConnected && serverConnected === true;
+
+  const { data: continueWatchingData, isLoading: continueWatchingLoading } =
+    useQuery({
+      queryKey: ["appleTVCarousel", "continueWatching", user?.Id],
+      queryFn: async () => {
+        if (!api || !user?.Id) return [];
+        const response = await getItemsApi(api).getResumeItems({
+          userId: user.Id,
+          enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
+          includeItemTypes: ["Movie", "Series", "Episode"],
+          fields: ["Genres", "Overview"],
+          limit: 2,
+        });
+        return response.data.Items || [];
+      },
+      enabled: isQueryEnabled,
+      staleTime: 60 * 1000,
+    });
+
+  const { data: nextUpData, isLoading: nextUpLoading } = useQuery({
+    queryKey: ["appleTVCarousel", "nextUp", user?.Id],
+    queryFn: async () => {
+      if (!api || !user?.Id) return [];
+      const response = await getTvShowsApi(api).getNextUp({
+        userId: user.Id,
+        fields: ["MediaSourceCount", "Genres", "Overview"],
+        limit: 2,
+        enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
+        enableResumable: false,
+      });
+      return response.data.Items || [];
+    },
+    enabled: isQueryEnabled,
+    staleTime: 60 * 1000,
+  });
+
+  const { data: recentlyAddedData, isLoading: recentlyAddedLoading } = useQuery(
+    {
+      queryKey: ["appleTVCarousel", "recentlyAdded", user?.Id],
+      queryFn: async () => {
+        if (!api || !user?.Id) return [];
+        const response = await getUserLibraryApi(api).getLatestMedia({
+          userId: user.Id,
+          limit: 2,
+          fields: ["PrimaryImageAspectRatio", "Path", "Genres", "Overview"],
+          imageTypeLimit: 1,
+          enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
+        });
+        return response.data || [];
+      },
+      enabled: isQueryEnabled,
+      staleTime: 60 * 1000,
+    },
+  );
+
+  const items = useMemo(() => {
+    const continueItems = continueWatchingData ?? [];
+    const nextItems = nextUpData ?? [];
+    const recentItems = recentlyAddedData ?? [];
+
+    const allItems = [
+      ...continueItems.slice(0, 2),
+      ...nextItems.slice(0, 2),
+      ...recentItems.slice(0, 2),
+    ];
+
+    // Deduplicate by item ID to prevent duplicate keys
+    const seen = new Set<string>();
+    return allItems.filter((item) => {
+      if (item.Id && !seen.has(item.Id)) {
+        seen.add(item.Id);
+        return true;
+      }
+      return false;
+    });
+  }, [continueWatchingData, nextUpData, recentlyAddedData]);
+
+  const isLoading =
+    continueWatchingLoading || nextUpLoading || recentlyAddedLoading;
+  const hasItems = items.length > 0;
+
+  // Only get play settings if we have valid items
+  const currentItem = hasItems ? items[currentIndex] : null;
+
+  // Extract colors for the current item only (for performance)
+  const currentItemColors = useImageColorsReturn({ item: currentItem });
+
+  // Create a fallback empty item for useDefaultPlaySettings when no item is available
+  const itemForPlaySettings = currentItem || { MediaSources: [] };
+  const {
+    defaultAudioIndex,
+    defaultBitrate,
+    defaultMediaSource,
+    defaultSubtitleIndex,
+  } = useDefaultPlaySettings(itemForPlaySettings as BaseItemDto, settings);
+
+  const [selectedOptions, setSelectedOptions] = useState<
+    SelectedOptions | undefined
+  >(undefined);
+
+  useEffect(() => {
+    // Only set options if we have valid current item
+    if (currentItem) {
+      setSelectedOptions({
+        bitrate: defaultBitrate,
+        mediaSource: defaultMediaSource ?? undefined,
+        subtitleIndex: defaultSubtitleIndex ?? -1,
+        audioIndex: defaultAudioIndex,
+      });
+    } else {
+      setSelectedOptions(undefined);
+    }
+  }, [
+    defaultAudioIndex,
+    defaultBitrate,
+    defaultSubtitleIndex,
+    defaultMediaSource,
+    currentIndex,
+    currentItem,
+  ]);
+
+  useEffect(() => {
+    if (!hasItems) {
+      setCurrentIndex(initialIndex);
+      translateX.value = -initialIndex * screenWidth;
+      return;
+    }
+
+    setCurrentIndex((prev) => {
+      const newIndex = Math.min(prev, items.length - 1);
+      translateX.value = -newIndex * screenWidth;
+      return newIndex;
+    });
+  }, [hasItems, items, initialIndex, screenWidth, translateX]);
+
+  useEffect(() => {
+    translateX.value = -currentIndex * screenWidth;
+  }, [currentIndex, screenWidth, translateX]);
+
+  useEffect(() => {
+    if (hasItems) {
+      onItemChange?.(currentIndex);
+    }
+  }, [hasItems, currentIndex, onItemChange]);
+
+  const goToIndex = useCallback(
+    (index: number) => {
+      if (!hasItems || index < 0 || index >= items.length) return;
+
+      translateX.value = withTiming(-index * screenWidth, {
+        duration: CAROUSEL_TRANSITION_DURATION, // Slightly longer for smoother feel
+        easing: Easing.bezier(0.25, 0.46, 0.45, 0.94), // iOS-like smooth deceleration curve
+      });
+
+      setCurrentIndex(index);
+      onItemChange?.(index);
+    },
+    [hasItems, items, onItemChange, screenWidth, translateX],
+  );
+
+  const navigateToItem = useCallback(
+    (item: BaseItemDto) => {
+      const navigation = getItemNavigation(item, "(home)");
+      router.push(navigation as any);
+    },
+    [router],
+  );
+
+  const panGesture = Gesture.Pan()
+    .activeOffsetX([-PAN_ACTIVE_OFFSET, PAN_ACTIVE_OFFSET])
+    .onUpdate((event) => {
+      translateX.value = -currentIndex * screenWidth + event.translationX;
+    })
+    .onEnd((event) => {
+      const velocity = event.velocityX;
+      const translation = event.translationX;
+
+      let newIndex = currentIndex;
+
+      // Improved thresholds for more responsive navigation
+      if (
+        Math.abs(translation) > screenWidth * TRANSLATION_THRESHOLD ||
+        Math.abs(velocity) > VELOCITY_THRESHOLD
+      ) {
+        if (translation > 0 && currentIndex > 0) {
+          newIndex = currentIndex - 1;
+        } else if (
+          translation < 0 &&
+          items &&
+          currentIndex < items.length - 1
+        ) {
+          newIndex = currentIndex + 1;
+        }
+      }
+
+      runOnJS(goToIndex)(newIndex);
+    });
+
+  const containerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: translateX.value }],
+    };
+  });
+
+  const togglePlayedStatus = useMarkAsPlayed(items);
+
+  const headerAnimatedStyle = useAnimatedStyle(() => {
+    if (!scrollOffset) return {};
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            scrollOffset.value,
+            [-carouselHeight, 0, carouselHeight],
+            [-carouselHeight / 2, 0, carouselHeight * 0.75],
+          ),
+        },
+        {
+          scale: interpolate(
+            scrollOffset.value,
+            [-carouselHeight, 0, carouselHeight],
+            [2, 1, 1],
+          ),
+        },
+      ],
+    };
+  });
+
+  const renderDots = () => {
+    if (!hasItems || items.length <= 1) return null;
+
+    return (
+      <View
+        style={{
+          position: "absolute",
+          bottom: DOTS_BOTTOM_POSITION,
+          left: 0,
+          right: 0,
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: DOT_GAP,
+        }}
+      >
+        {items.map((_, index) => (
+          <DotIndicator
+            key={index}
+            index={index}
+            currentIndex={currentIndex}
+            onPress={goToIndex}
+          />
+        ))}
+      </View>
+    );
+  };
+
+  const renderSkeletonLoader = () => {
+    return (
+      <View
+        style={{
+          width: screenWidth,
+          height: carouselHeight,
+          backgroundColor: "#000",
+        }}
+      >
+        {/* Background Skeleton */}
+        <View
+          style={{
+            width: "100%",
+            height: "100%",
+            backgroundColor: SKELETON_BACKGROUND_COLOR,
+            position: "absolute",
+          }}
+        />
+
+        {/* Dark Overlay Skeleton */}
+        <View
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: `rgba(0, 0, 0, ${OVERLAY_OPACITY})`,
+          }}
+        />
+
+        {/* Gradient Fade to Black Top Skeleton */}
+        <LinearGradient
+          colors={["rgba(0,0,0,1)", "rgba(0,0,0,0.8)", "transparent"]}
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: 0,
+            height: GRADIENT_HEIGHT_TOP,
+          }}
+        />
+
+        {/* Gradient Fade to Black Bottom Skeleton */}
+        <LinearGradient
+          colors={["transparent", "rgba(0,0,0,0.8)", "rgba(0,0,0,1)"]}
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: GRADIENT_HEIGHT_BOTTOM,
+          }}
+        />
+
+        {/* Logo Skeleton */}
+        <View
+          style={{
+            position: "absolute",
+            bottom: LOGO_BOTTOM_POSITION,
+            left: 0,
+            right: 0,
+            paddingHorizontal: HORIZONTAL_PADDING,
+            alignItems: "center",
+          }}
+        >
+          <View
+            style={{
+              height: LOGO_HEIGHT,
+              width: LOGO_WIDTH_PERCENTAGE,
+              backgroundColor: SKELETON_ELEMENT_COLOR,
+              borderRadius: LOGO_SKELETON_BORDER_RADIUS,
+            }}
+          />
+        </View>
+
+        {/* Type and Genres Skeleton */}
+        <View
+          style={{
+            position: "absolute",
+            bottom: GENRES_BOTTOM_POSITION,
+            left: 0,
+            right: 0,
+            paddingHorizontal: HORIZONTAL_PADDING,
+            alignItems: "center",
+          }}
+        >
+          <View
+            style={{
+              height: TEXT_SKELETON_HEIGHT,
+              width: TEXT_SKELETON_WIDTH,
+              backgroundColor: SKELETON_ELEMENT_COLOR,
+              borderRadius: TEXT_SKELETON_BORDER_RADIUS,
+            }}
+          />
+        </View>
+
+        {/* Overview Skeleton */}
+        <View
+          style={{
+            position: "absolute",
+            bottom: OVERVIEW_BOTTOM_POSITION,
+            left: 0,
+            right: 0,
+            paddingHorizontal: HORIZONTAL_PADDING,
+            alignItems: "center",
+            gap: 6,
+          }}
+        >
+          <View
+            style={{
+              height: OVERVIEW_SKELETON_HEIGHT,
+              width: OVERVIEW_SKELETON_WIDTH,
+              backgroundColor: SKELETON_ELEMENT_COLOR,
+              borderRadius: TEXT_SKELETON_BORDER_RADIUS,
+            }}
+          />
+          <View
+            style={{
+              height: OVERVIEW_SKELETON_HEIGHT,
+              width: OVERVIEW_SKELETON_WIDTH * 0.7,
+              backgroundColor: SKELETON_ELEMENT_COLOR,
+              borderRadius: TEXT_SKELETON_BORDER_RADIUS,
+            }}
+          />
+        </View>
+
+        {/* Controls Skeleton */}
+        <View
+          style={{
+            position: "absolute",
+            bottom: CONTROLS_BOTTOM_POSITION,
+            left: 0,
+            right: 0,
+            paddingHorizontal: HORIZONTAL_PADDING,
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: CONTROLS_GAP,
+          }}
+        >
+          {/* Play Button Skeleton */}
+          <View
+            style={{
+              height: PLAY_BUTTON_SKELETON_HEIGHT,
+              flex: 1,
+              maxWidth: MAX_BUTTON_WIDTH,
+              backgroundColor: SKELETON_ELEMENT_COLOR,
+              borderRadius: PLAY_BUTTON_BORDER_RADIUS,
+            }}
+          />
+
+          {/* Played Status Skeleton */}
+          <View
+            style={{
+              width: PLAYED_STATUS_SKELETON_SIZE,
+              height: PLAYED_STATUS_SKELETON_SIZE,
+              backgroundColor: SKELETON_ELEMENT_COLOR,
+              borderRadius: PLAYED_STATUS_BORDER_RADIUS,
+            }}
+          />
+        </View>
+
+        {/* Dots Skeleton */}
+        <View
+          style={{
+            position: "absolute",
+            bottom: DOTS_BOTTOM_POSITION,
+            left: 0,
+            right: 0,
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: DOT_GAP,
+          }}
+        >
+          {[1, 2, 3].map((_, index) => (
+            <View
+              key={index}
+              style={{
+                width: index === 0 ? DOT_ACTIVE_WIDTH : DOT_INACTIVE_WIDTH,
+                height: DOT_HEIGHT,
+                backgroundColor:
+                  index === 0
+                    ? SKELETON_ACTIVE_DOT_COLOR
+                    : SKELETON_ELEMENT_COLOR,
+                borderRadius: DOT_BORDER_RADIUS,
+              }}
+            />
+          ))}
+        </View>
+      </View>
+    );
+  };
+
+  const renderItem = (item: BaseItemDto, _index: number) => {
+    const itemLogoUrl = api ? getLogoImageUrlById({ api, item }) : null;
+
+    return (
+      <View
+        key={item.Id}
+        style={{
+          width: screenWidth,
+          height: carouselHeight,
+          position: "relative",
+        }}
+      >
+        {/* Background Backdrop */}
+        <Animated.View
+          style={[
+            {
+              width: "100%",
+              height: "100%",
+              position: "absolute",
+            },
+            headerAnimatedStyle,
+          ]}
+        >
+          <ItemImage
+            item={item}
+            variant='Backdrop'
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+          />
+        </Animated.View>
+
+        {/* Dark Overlay */}
+        <View
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: `rgba(0, 0, 0, ${OVERLAY_OPACITY})`,
+          }}
+        />
+
+        {/* Gradient Fade to Black at Top */}
+        <LinearGradient
+          colors={["rgba(0,0,0,1)", "rgba(0,0,0,0.2)", "transparent"]}
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: 0,
+            height: GRADIENT_HEIGHT_TOP,
+          }}
+        />
+
+        {/* Gradient Fade to Black at Bottom */}
+        <LinearGradient
+          colors={["transparent", "rgba(0,0,0,0.8)", "rgba(0,0,0,1)"]}
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: GRADIENT_HEIGHT_BOTTOM,
+          }}
+        />
+
+        {/* Logo Section */}
+        {itemLogoUrl && (
+          <TouchableOpacity
+            onPress={() => navigateToItem(item)}
+            style={{
+              position: "absolute",
+              bottom: LOGO_BOTTOM_POSITION,
+              left: 0,
+              right: 0,
+              paddingHorizontal: HORIZONTAL_PADDING,
+              alignItems: "center",
+            }}
+          >
+            <Image
+              source={{
+                uri: itemLogoUrl,
+              }}
+              style={{
+                height: LOGO_HEIGHT,
+                width: LOGO_WIDTH_PERCENTAGE,
+              }}
+              contentFit='contain'
+            />
+          </TouchableOpacity>
+        )}
+
+        {/* Type and Genres Section */}
+        <View
+          style={{
+            position: "absolute",
+            bottom: GENRES_BOTTOM_POSITION,
+            left: 0,
+            right: 0,
+            paddingHorizontal: HORIZONTAL_PADDING,
+            alignItems: "center",
+          }}
+        >
+          <TouchableOpacity onPress={() => navigateToItem(item)}>
+            <Animated.Text
+              style={{
+                color: `rgba(255, 255, 255, ${TEXT_OPACITY})`,
+                fontSize: GENRES_FONT_SIZE,
+                fontWeight: "500",
+                textAlign: "center",
+                textShadowColor: TEXT_SHADOW_COLOR,
+                textShadowOffset: { width: 0, height: 1 },
+                textShadowRadius: TEXT_SHADOW_RADIUS,
+              }}
+            >
+              {(() => {
+                let typeLabel = "";
+
+                if (item.Type === "Episode") {
+                  // For episodes, show season and episode number
+                  const season = item.ParentIndexNumber;
+                  const episode = item.IndexNumber;
+                  if (season && episode) {
+                    typeLabel = `S${season} • E${episode}`;
+                  } else {
+                    typeLabel = "Episode";
+                  }
+                } else {
+                  typeLabel =
+                    item.Type === "Series"
+                      ? "TV Show"
+                      : item.Type === "Movie"
+                        ? "Movie"
+                        : item.Type || "";
+                }
+
+                const genres =
+                  item.Genres && item.Genres.length > 0
+                    ? item.Genres.slice(0, MAX_GENRES_COUNT).join(" • ")
+                    : "";
+
+                if (typeLabel && genres) {
+                  return `${typeLabel} • ${genres}`;
+                } else if (typeLabel) {
+                  return typeLabel;
+                } else if (genres) {
+                  return genres;
+                } else {
+                  return "";
+                }
+              })()}
+            </Animated.Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* Overview Section - for Episodes and Movies */}
+        {(item.Type === "Episode" || item.Type === "Movie") &&
+          item.Overview && (
+            <View
+              style={{
+                position: "absolute",
+                bottom: OVERVIEW_BOTTOM_POSITION,
+                left: 0,
+                right: 0,
+                paddingHorizontal: HORIZONTAL_PADDING,
+                alignItems: "center",
+              }}
+            >
+              <TouchableOpacity onPress={() => navigateToItem(item)}>
+                <Animated.Text
+                  numberOfLines={OVERVIEW_MAX_LINES}
+                  style={{
+                    color: `rgba(255, 255, 255, ${TEXT_OPACITY * 0.85})`,
+                    fontSize: OVERVIEW_FONT_SIZE,
+                    fontWeight: "400",
+                    textAlign: "center",
+                    maxWidth: OVERVIEW_MAX_WIDTH,
+                    textShadowColor: TEXT_SHADOW_COLOR,
+                    textShadowOffset: { width: 0, height: 1 },
+                    textShadowRadius: TEXT_SHADOW_RADIUS,
+                  }}
+                >
+                  {item.Overview}
+                </Animated.Text>
+              </TouchableOpacity>
+            </View>
+          )}
+
+        {/* Controls Section */}
+        <View
+          style={{
+            position: "absolute",
+            bottom: CONTROLS_BOTTOM_POSITION,
+            left: 0,
+            right: 0,
+            paddingHorizontal: HORIZONTAL_PADDING,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: CONTROLS_GAP,
+            }}
+          >
+            {/* Play Button */}
+            <View style={{ flex: 1, maxWidth: MAX_BUTTON_WIDTH }}>
+              {selectedOptions && (
+                <PlayButton
+                  item={item}
+                  selectedOptions={selectedOptions}
+                  colors={currentItemColors}
+                />
+              )}
+            </View>
+
+            {/* Mark as Played */}
+            <MarkAsPlayedLargeButton
+              isPlayed={item.UserData?.Played ?? false}
+              onToggle={togglePlayedStatus}
+            />
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  // Handle loading state
+  if (isLoading) {
+    return (
+      <View
+        style={{
+          height: carouselHeight,
+          backgroundColor: "#000",
+          overflow: "hidden",
+        }}
+      >
+        {renderSkeletonLoader()}
+      </View>
+    );
+  }
+
+  // Handle empty items
+  if (!hasItems) {
+    return null;
+  }
+
+  return (
+    <View
+      style={{
+        height: carouselHeight, // Fixed height instead of flex: 1
+        backgroundColor: "#000",
+        overflow: "hidden",
+      }}
+    >
+      <GestureDetector gesture={panGesture}>
+        <Animated.View
+          style={[
+            {
+              height: carouselHeight, // Fixed height instead of flex: 1
+              flexDirection: "row",
+              width: screenWidth * items.length,
+            },
+            containerAnimatedStyle,
+          ]}
+        >
+          {items.map((item, index) => renderItem(item, index))}
+        </Animated.View>
+      </GestureDetector>
+
+      {/* Animated Dots Indicator */}
+      {renderDots()}
+    </View>
+  );
+};

components/apple-tv-carousel/MarkAsPlayedLargeButton.tsx

@@ -0,0 +1,51 @@
+import { Button, Host } from "@expo/ui/swift-ui";
+import { Ionicons } from "@expo/vector-icons";
+import { Platform, View } from "react-native";
+import { RoundButton } from "../RoundButton";
+
+interface MarkAsPlayedLargeButtonProps {
+  isPlayed: boolean;
+  onToggle: (isPlayed: boolean) => void;
+}
+
+export const MarkAsPlayedLargeButton: React.FC<
+  MarkAsPlayedLargeButtonProps
+> = ({ isPlayed, onToggle }) => {
+  if (Platform.OS === "ios")
+    return (
+      <Host
+        style={{
+          flex: 0,
+          width: 50,
+          height: 50,
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "row",
+        }}
+      >
+        <Button onPress={() => onToggle(isPlayed)} variant='glass'>
+          <View>
+            <Ionicons
+              name='checkmark'
+              size={24}
+              color='white'
+              style={{
+                marginTop: 6,
+                marginLeft: 1,
+              }}
+            />
+          </View>
+        </Button>
+      </Host>
+    );
+
+  return (
+    <View>
+      <RoundButton
+        size='large'
+        icon={isPlayed ? "checkmark" : "checkmark"}
+        onPress={() => onToggle(isPlayed)}
+      />
+    </View>
+  );
+};

components/common/HeaderBackButton.tsx

@@ -1,36 +1,42 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BlurView, type BlurViewProps } from "expo-blur";
-import { Platform } from "react-native";
-import { Pressable, type PressableProps } from "react-native-gesture-handler";
-import useRouter from "@/hooks/useAppRouter";
+import { useRouter } from "expo-router";
+import {
+  Platform,
+  TouchableOpacity,
+  type TouchableOpacityProps,
+} from "react-native";
 
 interface Props extends BlurViewProps {
   background?: "blur" | "transparent";
-  pressableProps?: Omit<PressableProps, "onPress">;
+  touchableOpacityProps?: TouchableOpacityProps;
 }
 
 export const HeaderBackButton: React.FC<Props> = ({
   background = "transparent",
-  pressableProps,
+  touchableOpacityProps,
   ...props
 }) => {
   const router = useRouter();
 
   if (Platform.OS === "ios") {
     return (
-      <Pressable
+      <TouchableOpacity
         onPress={() => router.back()}
         className='flex items-center justify-center w-9 h-9'
-        {...pressableProps}
+        {...touchableOpacityProps}
       >
         <Ionicons name='arrow-back' size={24} color='white' />
-      </Pressable>
+      </TouchableOpacity>
     );
   }
 
   if (background === "transparent" && Platform.OS !== "android")
     return (
-      <Pressable onPress={() => router.back()} {...pressableProps}>
+      <TouchableOpacity
+        onPress={() => router.back()}
+        {...touchableOpacityProps}
+      >
         <BlurView
           {...props}
           intensity={100}
@@ -43,14 +49,14 @@ export const HeaderBackButton: React.FC<Props> = ({
             color='white'
           />
         </BlurView>
-      </Pressable>
+      </TouchableOpacity>
     );
 
   return (
-    <Pressable
+    <TouchableOpacity
       onPress={() => router.back()}
       className=' rounded-full p-2'
-      {...pressableProps}
+      {...touchableOpacityProps}
     >
       <Ionicons
         className='drop-shadow-2xl'
@@ -58,6 +64,6 @@ export const HeaderBackButton: React.FC<Props> = ({
         size={24}
         color='white'
       />
-    </Pressable>
+    </TouchableOpacity>
   );
 };