fix(casting): exclude Virtual (missing) episodes from cast episode list & nav

The cast player derives the episode list, prev/next buttons and autoplay
target from fetchSeriesEpisodes, which returned every episode including
"Virtual" (missing) ones — e.g. an empty Specials/Season 0 entry. That
made a bogus "previous" button appear on S1E1 (its previous was the missing
S0E1) and could load/autoplay an unplayable episode. Filter them out at the
source so they never surface in the cast UI.

.claude/agents/tv-validator.md

@@ -0,0 +1,103 @@
+---
+name: tv-validator
+description: Use this agent to review TV platform code for correct patterns and conventions. Use proactively after writing or modifying TV components. Validates focus handling, modal patterns, typography, list components, and other TV-specific requirements.
+tools: Read, Glob, Grep
+model: haiku
+color: blue
+---
+
+You are a TV platform code reviewer for Streamyfin, a React Native app with Apple TV and Android TV support. Review code for correct TV patterns and flag violations.
+
+## Critical Rules to Check
+
+### 1. No .tv.tsx File Suffix
+The `.tv.tsx` suffix does NOT work in this project. Metro bundler doesn't resolve it.
+
+**Violation**: Creating files like `MyComponent.tv.tsx` expecting auto-resolution
+**Correct**: Use `Platform.isTV` conditional rendering in the main file:
+```typescript
+if (Platform.isTV) {
+  return <TVMyComponent />;
+}
+return <MyComponent />;
+```
+
+### 2. No FlashList on TV
+FlashList has focus issues on TV. Use FlatList instead.
+
+**Violation**: `<FlashList` in TV code paths
+**Correct**:
+```typescript
+{Platform.isTV ? (
+  <FlatList removeClippedSubviews={false} ... />
+) : (
+  <FlashList ... />
+)}
+```
+
+### 3. Modal Pattern
+Never use overlay/absolute-positioned modals on TV. They break back button handling.
+
+**Violation**: `position: "absolute"` or `Modal` component for TV overlays
+**Correct**: Use navigation-based pattern:
+- Create Jotai atom for state
+- Hook that sets atom and calls `router.push()`
+- Page in `app/(auth)/` that reads atom
+- `Stack.Screen` with `presentation: "transparentModal"`
+
+### 4. Typography
+All TV text must use `TVTypography` component.
+
+**Violation**: Raw `<Text>` in TV components
+**Correct**: `<TVTypography variant="title">...</TVTypography>`
+
+### 5. No Purple Accent Colors
+TV uses white for focus states, not purple.
+
+**Violation**: Purple/violet colors in TV focused states
+**Correct**: White (`#fff`, `white`) for focused states with `expo-blur` for backgrounds
+
+### 6. Focus Handling
+- Only ONE element should have `hasTVPreferredFocus={true}`
+- Focusable items need `disabled={isModalOpen}` when overlays are visible
+- Use `onFocus`/`onBlur` with scale animations
+- Add padding for scale animations (focus scale clips without it)
+
+### 7. List Configuration
+TV lists need:
+- `removeClippedSubviews={false}`
+- `overflow: "visible"` on containers
+- Sufficient padding for focus scale animations
+
+### 8. Horizontal Padding
+Use `TV_HORIZONTAL_PADDING` constant (60), not old `TV_SCALE_PADDING` (20).
+
+### 9. Focus Guide Navigation
+For non-adjacent sections, use `TVFocusGuideView` with `destinations` prop.
+Use `useState` for refs (not `useRef`) to trigger re-renders.
+
+## Review Process
+
+1. Read the file(s) to review
+2. Check each rule above
+3. Report violations with:
+   - Line number
+   - What's wrong
+   - How to fix it
+4. If no violations, confirm the code follows TV patterns
+
+## Output Format
+
+```
+## TV Validation Results
+
+### ✓ Passes
+- [List of rules that pass]
+
+### ✗ Violations
+- **[Rule Name]** (line X): [Description]
+  Fix: [How to correct it]
+
+### Recommendations
+- [Optional suggestions for improvement]
+```

.claude/commands/reflect.md

@@ -12,26 +12,59 @@ Analyze the current conversation to extract useful facts that should be remember
 
 ## Instructions
 
-1. Read the existing facts file at `.claude/learned-facts.md`
+1. Read the Learned Facts Index section in `CLAUDE.md` and scan existing files in `.claude/learned-facts/` to understand what's already recorded
 2. Review this conversation for learnings worth preserving
 3. For each new fact:
-   - Write it concisely (1-2 sentences max)
+   - Create a new file in `.claude/learned-facts/[kebab-case-name].md` using the template below
-   - Include context for why it matters
+   - Append a new entry to the appropriate category in the **Learned Facts Index** section of `CLAUDE.md`
-   - Add today's date
 4. Skip facts that duplicate existing entries
-5. Append new facts to `.claude/learned-facts.md`
+5. If a new category is needed, add it to the index in `CLAUDE.md`
 
-## Fact Format
+## Fact File Template
 
-Use this format for each fact:
+Create each file at `.claude/learned-facts/[kebab-case-name].md`:
-```
+
-- **[Brief Topic]**: [Concise description of the fact] _(YYYY-MM-DD)_
+```markdown
+# [Title]
+
+**Date**: YYYY-MM-DD
+**Category**: navigation | tv | native-modules | state-management | ui
+**Key files**: `relevant/paths.ts`
+
+## Detail
+
+[Full description of the fact, including context for why it matters]
 ```
 
-## Example Facts
+## Index Entry Format
 
-- **State management**: Use Jotai atoms for global state, NOT React Context - atoms are in `utils/atoms/` _(2025-01-09)_
+Append to the appropriate category in the Learned Facts Index section of `CLAUDE.md`:
-- **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).
+```
+- `kebab-case-name` | Brief one-line summary of the fact
+```
+
+Categories: Navigation, UI/Headers, State/Data, Native Modules, TV Platform
+
+## Example
+
+File `.claude/learned-facts/state-management-pattern.md`:
+```markdown
+# State Management Pattern
+
+**Date**: 2025-01-09
+**Category**: state-management
+**Key files**: `utils/atoms/`
+
+## Detail
+
+Use Jotai atoms for global state, NOT React Context. Atoms are defined in `utils/atoms/`.
+```
+
+Index entry in `CLAUDE.md`:
+```
+State/Data:
+- `state-management-pattern` | Use Jotai atoms for global state, not React Context
+```
+
+After updating, summarize what facts you added (or note if nothing new was learned this session).

.claude/learned-facts.md

@@ -1,8 +1,11 @@
-# Learned Facts
+# Learned Facts (DEPRECATED)
 
-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.
+> **DEPRECATED**: This file has been replaced by individual fact files in `.claude/learned-facts/`.
+> The compressed index is now inline in `CLAUDE.md` under "Learned Facts Index".
+> New facts should be added as individual files using the `/reflect` command.
+> This file is kept for reference only and is no longer auto-imported.
 
-This file is auto-imported into CLAUDE.md and loaded at the start of each session.
+This file previously contained facts about the codebase learned from past sessions.
 
 ## Facts
 
@@ -24,4 +27,22 @@ This file is auto-imported into CLAUDE.md and loaded at the start of each sessio
 
 - **Mark as played flow**: The "mark as played" button uses `PlayedStatus` component → `useMarkAsPlayed` hook → `usePlaybackManager.markItemPlayed()`. The hook does optimistic updates via `setQueriesData` before calling the API. Located in `components/PlayedStatus.tsx` and `hooks/useMarkAsPlayed.ts`. _(2026-01-10)_
 
-- **Stack screen header configuration**: Sub-pages under `(home)` need explicit `Stack.Screen` entries in `app/(auth)/(tabs)/(home)/_layout.tsx` with `headerTransparent: Platform.OS === "ios"`, `headerBlurEffect: "none"`, and a back button. Without this, pages show with wrong header styling. _(2026-01-10)_
+- **Stack screen header configuration**: Sub-pages under `(home)` need explicit `Stack.Screen` entries in `app/(auth)/(tabs)/(home)/_layout.tsx` with `headerTransparent: Platform.OS === "ios"`, `headerBlurEffect: "none"`, and a back button. Without this, pages show with wrong header styling. _(2026-01-10)_
+
+- **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)_
+
+- **Platform-specific file suffix (.tv.tsx) does NOT work**: The `.tv.tsx` file suffix does NOT work for either pages or components in this project. Metro bundler doesn't resolve platform-specific suffixes. Instead, use `Platform.isTV` conditional rendering within a single file. For pages: check `Platform.isTV` at the top and return the TV component early. For components: create separate `MyComponent.tsx` and `TVMyComponent.tsx` files and use `Platform.isTV` to choose which to render. _(2026-01-26)_

.claude/learned-facts/header-button-locations.md

@@ -0,0 +1,9 @@
+# Header Button Locations
+
+**Date**: 2026-01-10
+**Category**: ui
+**Key files**: `app/(auth)/(tabs)/(home)/_layout.tsx`, `components/common/HeaderBackButton.tsx`, `components/Chromecast.tsx`, `components/RoundButton.tsx`, `components/home/Home.tsx`, `app/(auth)/(tabs)/(home)/downloads/index.tsx`
+
+## Detail
+
+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`.

.claude/learned-facts/intro-modal-trigger-location.md

@@ -0,0 +1,9 @@
+# Intro Modal Trigger Location
+
+**Date**: 2025-01-09
+**Category**: navigation
+**Key files**: `components/home/Home.tsx`, `app/(auth)/(tabs)/_layout.tsx`
+
+## Detail
+
+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.

.claude/learned-facts/introsheet-rendering-location.md

@@ -0,0 +1,9 @@
+# IntroSheet Rendering Location
+
+**Date**: 2025-01-09
+**Category**: navigation
+**Key files**: `providers/IntroSheetProvider`, `components/IntroSheet`
+
+## Detail
+
+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.

.claude/learned-facts/macos-header-buttons-fix.md

@@ -0,0 +1,9 @@
+# macOS Header Buttons Fix
+
+**Date**: 2026-01-10
+**Category**: ui
+**Key files**: `components/common/HeaderBackButton.tsx`, `app/(auth)/(tabs)/(home)/_layout.tsx`
+
+## Detail
+
+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.

.claude/learned-facts/mark-as-played-flow.md

@@ -0,0 +1,9 @@
+# Mark as Played Flow
+
+**Date**: 2026-01-10
+**Category**: state-management
+**Key files**: `components/PlayedStatus.tsx`, `hooks/useMarkAsPlayed.ts`
+
+## Detail
+
+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`.

.claude/learned-facts/mpv-avfoundation-composite-osd-ordering.md

@@ -0,0 +1,9 @@
+# MPV avfoundation-composite-osd Ordering
+
+**Date**: 2026-01-22
+**Category**: native-modules
+**Key files**: `modules/mpv-player/ios/MPVLayerRenderer.swift`
+
+## Detail
+
+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).

.claude/learned-facts/mpv-tvos-player-exit-freeze.md

@@ -0,0 +1,9 @@
+# MPV tvOS Player Exit Freeze
+
+**Date**: 2026-01-22
+**Category**: native-modules
+**Key files**: `modules/mpv-player/ios/MPVLayerRenderer.swift`
+
+## Detail
+
+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.

.claude/learned-facts/native-bottom-tabs-userouter-conflict.md

@@ -0,0 +1,9 @@
+# Native Bottom Tabs + useRouter Conflict
+
+**Date**: 2025-01-09
+**Category**: navigation
+**Key files**: `providers/`, `app/_layout.tsx`
+
+## Detail
+
+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.

.claude/learned-facts/native-swiftui-view-sizing.md

@@ -0,0 +1,9 @@
+# Native SwiftUI View Sizing
+
+**Date**: 2026-01-25
+**Category**: native-modules
+**Key files**: `modules/`
+
+## Detail
+
+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.

.claude/learned-facts/platform-specific-file-suffix-does-not-work.md

@@ -0,0 +1,9 @@
+# Platform-Specific File Suffix (.tv.tsx) Does NOT Work
+
+**Date**: 2026-01-26
+**Category**: tv
+**Key files**: `app/`, `components/`
+
+## Detail
+
+The `.tv.tsx` file suffix does NOT work for either pages or components in this project. Metro bundler doesn't resolve platform-specific suffixes. Instead, use `Platform.isTV` conditional rendering within a single file. For pages: check `Platform.isTV` at the top and return the TV component early. For components: create separate `MyComponent.tsx` and `TVMyComponent.tsx` files and use `Platform.isTV` to choose which to render.

.claude/learned-facts/stack-screen-header-configuration.md

@@ -0,0 +1,9 @@
+# Stack Screen Header Configuration
+
+**Date**: 2026-01-10
+**Category**: ui
+**Key files**: `app/(auth)/(tabs)/(home)/_layout.tsx`
+
+## Detail
+
+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.

.claude/learned-facts/streamystats-components-location.md

@@ -0,0 +1,9 @@
+# Streamystats Components Location
+
+**Date**: 2026-01-25
+**Category**: tv
+**Key files**: `components/home/StreamystatsRecommendations.tv.tsx`, `components/home/StreamystatsPromotedWatchlists.tv.tsx`, `app/(auth)/(tabs)/(watchlists)/[watchlistId].tsx`
+
+## Detail
+
+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`.

.claude/learned-facts/tab-folder-naming.md

@@ -0,0 +1,9 @@
+# Tab Folder Naming
+
+**Date**: 2025-01-09
+**Category**: navigation
+**Key files**: `app/(auth)/(tabs)/`
+
+## Detail
+
+The tab folders use underscore prefix naming like `(_home)` instead of just `(home)` based on the project's file structure conventions.

.claude/learned-facts/thread-safe-state-for-stop-flags.md

@@ -0,0 +1,9 @@
+# Thread-Safe State for Stop Flags
+
+**Date**: 2026-01-22
+**Category**: native-modules
+**Key files**: `modules/mpv-player/ios/MPVLayerRenderer.swift`
+
+## Detail
+
+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.

.claude/learned-facts/tv-grid-layout-pattern.md

@@ -0,0 +1,9 @@
+# TV Grid Layout Pattern
+
+**Date**: 2026-01-25
+**Category**: tv
+**Key files**: `components/tv/`
+
+## Detail
+
+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.

.claude/learned-facts/tv-horizontal-padding-standard.md

@@ -0,0 +1,9 @@
+# TV Horizontal Padding Standard
+
+**Date**: 2026-01-25
+**Category**: tv
+**Key files**: `components/tv/`, `app/(auth)/(tabs)/`
+
+## Detail
+
+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.

.claude/learned-facts/tv-modals-must-use-navigation-pattern.md

@@ -0,0 +1,9 @@
+# TV Modals Must Use Navigation Pattern
+
+**Date**: 2026-01-24
+**Category**: tv
+**Key files**: `hooks/useTVOptionModal.ts`, `app/(auth)/tv-option-modal.tsx`
+
+## Detail
+
+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.

.claude/learned-facts/use-network-aware-query-client-limitations.md

@@ -0,0 +1,9 @@
+# useNetworkAwareQueryClient Limitations
+
+**Date**: 2026-01-10
+**Category**: state-management
+**Key files**: `hooks/useNetworkAwareQueryClient.ts`
+
+## Detail
+
+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`.

.eas/build/android-production-apk.yml

@@ -0,0 +1,25 @@
+# Custom EAS Build config for Android phone APK (downloadable artifact).
+# Same bun-forcing flow as android-production.yml, but builds an APK
+# (assembleRelease) instead of an AAB — for sideloading / GitHub artifact.
+# Referenced from eas.json: build.production-apk.android.config
+build:
+  name: Android phone APK (bun)
+  steps:
+    - eas/checkout
+
+    - run:
+        name: Install dependencies (bun, frozen)
+        command: bun install --frozen-lockfile
+
+    - run:
+        name: Prebuild (Android, bun)
+        command: bunx expo prebuild --platform android --no-install
+
+    - eas/configure_android_version
+    - eas/inject_android_credentials
+
+    - eas/run_gradle:
+        inputs:
+          command: :app:assembleRelease
+
+    - eas/find_and_upload_build_artifacts

.eas/build/android-production-tv.yml

@@ -0,0 +1,27 @@
+# Custom EAS Build config for Android TV APK (downloadable artifact).
+# Same bun-forcing flow, with EXPO_TV=1 (set via the profile env in
+# eas.json) so prebuild generates the TV variant. Builds an APK for
+# sideloading onto Android TV devices.
+# Referenced from eas.json: build.production-apk-tv.android.config
+build:
+  name: Android TV APK (bun)
+  steps:
+    - eas/checkout
+
+    - run:
+        name: Install dependencies (bun, frozen)
+        command: bun install --frozen-lockfile
+
+    # EXPO_TV=1 comes from the profile env, so prebuild targets Android TV.
+    - run:
+        name: Prebuild (Android TV, bun)
+        command: bunx expo prebuild --platform android --no-install
+
+    - eas/configure_android_version
+    - eas/inject_android_credentials
+
+    - eas/run_gradle:
+        inputs:
+          command: :app:assembleRelease
+
+    - eas/find_and_upload_build_artifacts

.eas/build/android-production.yml

@@ -0,0 +1,38 @@
+# Custom EAS Build config for Android (production AAB).
+#
+# Why this exists: EAS's managed build can't detect Bun's text lockfile
+# (bun.lock) and falls back to yarn, which breaks our install. The managed
+# steps `eas/install_node_modules` and `eas/prebuild` both use "the package
+# manager detected based on your project", so we replace them with explicit
+# `bun` commands. Everything else uses EAS's built-in functions so we still
+# get remote versioning, credentials, and artifact upload.
+#
+# Referenced from eas.json: build.production.android.config = android-production.yml
+build:
+  name: Android production (bun)
+  steps:
+    - eas/checkout
+
+    - run:
+        name: Install dependencies (bun, frozen)
+        command: bun install --frozen-lockfile
+
+    # android/ is gitignored, so generate native code fresh. --no-install
+    # because deps are already installed above; bunx keeps it on bun.
+    - run:
+        name: Prebuild (Android, bun)
+        command: bunx expo prebuild --platform android --no-install
+
+    # Applies the EAS-resolved remote versionCode/versionName (autoIncrement
+    # in eas.json) into the freshly prebuilt android/ project.
+    - eas/configure_android_version
+
+    # Injects the remote Android keystore / signing config.
+    - eas/inject_android_credentials
+
+    # Build the Play Store app bundle (.aab).
+    - eas/run_gradle:
+        inputs:
+          command: :app:bundleRelease
+
+    - eas/find_and_upload_build_artifacts

.eas/build/ios-production.yml

@@ -0,0 +1,44 @@
+# Custom EAS Build config for iOS + tvOS (App Store), forcing bun.
+#
+# Shared by both the iPhone profile (production) and the tvOS profile
+# (production_tv). The profile decides the rest:
+#   - production_tv sets EXPO_TV=1 (env) so prebuild targets tvOS, and
+#     credentialsSource: local (EAS can't manage tvOS creds remotely).
+#   - production uses remote-managed iOS credentials.
+#
+# Like the Android configs, this replaces eas/install_node_modules and
+# eas/prebuild (both auto-detect the wrong package manager) with explicit
+# bun commands, and keeps EAS built-ins for credentials/version/fastlane.
+build:
+  name: iOS/tvOS App Store (bun)
+  steps:
+    - eas/checkout
+
+    - run:
+        name: Install dependencies (bun, frozen)
+        command: bun install --frozen-lockfile
+
+    - eas/resolve_apple_team_id_from_credentials:
+        id: resolve_team
+
+    # android/ + ios/ are gitignored, so generate native code fresh.
+    # EXPO_TV (from the profile env) selects iPhone vs tvOS. --no-install
+    # skips JS + pod install; we install pods explicitly below with bun deps.
+    - run:
+        name: Prebuild (iOS/tvOS, bun)
+        command: bunx expo prebuild --platform ios --no-install
+
+    - run:
+        name: Install CocoaPods
+        working_directory: ./ios
+        command: pod install
+
+    - eas/configure_ios_credentials
+    - eas/configure_ios_version
+
+    - eas/generate_gymfile_from_template:
+        inputs:
+          credentials: ${ eas.job.secrets.buildCredentials }
+
+    - eas/run_fastlane
+    - eas/find_and_upload_build_artifacts

.github/copilot-instructions.md

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

.github/pull_request_template.md

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

.github/renovate.json

@@ -25,6 +25,25 @@
   "osvVulnerabilityAlerts": true,
   "configMigration": true,
   "separateMinorPatch": true,
+  "customManagers": [
+    {
+      "customType": "regex",
+      "managerFilePatterns": ["/\\.ya?ml$/"],
+      "matchStrings": [
+        "# renovate: datasource=(?<datasource>\\S+) depName=(?<depName>\\S+)(?: versioning=(?<versioning>\\S+))?\\s+xcode-version:\\s*[\"']?(?<currentValue>[^\"'\\s]+)"
+      ],
+      "versioningTemplate": "{{#if versioning}}{{{versioning}}}{{else}}loose{{/if}}"
+    }
+  ],
+  "customDatasources": {
+    "xcode": {
+      "defaultRegistryUrlTemplate": "https://xcodereleases.com/data.json",
+      "format": "json",
+      "transformTemplates": [
+        "{ \"releases\": [$[version.release.release=true].{\"version\": version.number}] }"
+      ]
+    }
+  },
   "lockFileMaintenance": {
     "vulnerabilityAlerts": {
       "enabled": true,

.github/workflows/artifact-comment.yml

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

.github/workflows/build-apps.yml

@@ -41,12 +41,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -60,7 +60,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: |
             ~/.gradle/caches
@@ -73,7 +73,7 @@ jobs:
         run: bun run prebuild
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -88,7 +88,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: streamyfin-android-phone-apk-${{ env.DATE_TAG }}
           path: |
@@ -124,12 +124,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -143,7 +143,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: |
             ~/.gradle/caches
@@ -156,7 +156,7 @@ jobs:
         run: bun run prebuild:tv
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -171,7 +171,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: streamyfin-android-tv-apk-${{ env.DATE_TAG }}
           path: |
@@ -195,12 +195,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
@@ -216,12 +216,13 @@ jobs:
         run: bun run prebuild
 
       - name: 🔧 Setup Xcode
-        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
+        uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
         with:
-          xcode-version: "26.2"
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
+          xcode-version: "26.4"
 
       - name: 🏗️ Setup EAS
-        uses: expo/expo-github-action@main
+        uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main
         with:
           eas-version: latest
           token: ${{ secrets.EXPO_TOKEN }}
@@ -236,7 +237,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload IPA artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: streamyfin-ios-phone-ipa-${{ env.DATE_TAG }}
           path: build-*.ipa
@@ -259,12 +260,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
@@ -280,9 +281,10 @@ jobs:
         run: bun run prebuild
 
       - name: 🔧 Setup Xcode
-        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
+        uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
         with:
-          xcode-version: "26.2"
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
+          xcode-version: "26.4"
 
       - name: 🚀 Build iOS app
         env:
@@ -293,73 +295,136 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload IPA artifact
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: streamyfin-ios-phone-unsigned-ipa-${{ env.DATE_TAG }}
           path: build/*.ipa
           retention-days: 7
 
-  # Disabled for now - uncomment when ready to build iOS TV
+  build-ios-tv:
-  # build-ios-tv:
+    # Temporarily disabled until feat/tv-interface is merged (TV UI not ready).
-  #   if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
+    # Re-enable by removing the `false &&` prefix below.
-  #   runs-on: macos-26
+    if: false && (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
-  #   name: 🍎 Build iOS IPA (TV)
+    runs-on: macos-26
-  #   permissions:
+    name: 🍎 Build tvOS IPA
-  #     contents: read
+    permissions:
-  #
+      contents: read
-  #   steps:
+
-  #     - name: 📥 Checkout code
+    steps:
-  #       uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+      - name: 📥 Checkout code
-  #       with:
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-  #         ref: ${{ github.event.pull_request.head.sha || github.sha }}
+        with:
-  #         fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-  #         submodules: recursive
+          fetch-depth: 0
-  #         show-progress: false
+          submodules: recursive
-  #
+          show-progress: false
-  #     - name: 🍞 Setup Bun
+
-  #       uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
+      - name: 🍞 Setup Bun
-  #       with:
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
-  #         bun-version: latest
+        with:
-  #
+          bun-version: latest
-  #     - name: 💾 Cache Bun dependencies
+
-  #       uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+      - name: 💾 Cache Bun dependencies
-  #       with:
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-  #         path: ~/.bun/install/cache
+        with:
-  #         key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          path: ~/.bun/install/cache
-  #         restore-keys: |
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
-  #           ${{ runner.os }}-bun-cache
+          restore-keys: |
-  #
+            ${{ runner.os }}-bun-cache
-  #     - name: 📦 Install dependencies and reload submodules
+
-  #       run: |
+      - name: 📦 Install dependencies and reload submodules
-  #         bun install --frozen-lockfile
+        run: |
-  #         bun run submodule-reload
+          bun install --frozen-lockfile
-  #
+          bun run submodule-reload
-  #     - name: 🛠️ Generate project files
+
-  #       run: bun run prebuild:tv
+      - name: 🛠️ Generate project files
-  #
+        run: bun run prebuild:tv
-  #     - name: 🔧 Setup Xcode
+
-  #       uses: maxim-lobanov/setup-xcode@v1
+      - name: 🔧 Setup Xcode
-  #       with:
+        uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
-  #         xcode-version: '26.0.1'
+        with:
-  #
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
-  #     - name: 🏗️ Setup EAS
+          xcode-version: "26.4"
-  #       uses: expo/expo-github-action@main
+
-  #       with:
+      - name: 🏗️ Setup EAS
-  #         eas-version: latest
+        uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main
-  #         token: ${{ secrets.EXPO_TOKEN }}
+        with:
-  #         eas-cache: true
+          eas-version: latest
-  #
+          token: ${{ secrets.EXPO_TOKEN }}
-  #     - name: 🚀 Build iOS app
+          eas-cache: true
-  #       env:
+
-  #         EXPO_TV: 1
+      - name: 🚀 Build iOS app
-  #       run: eas build -p ios --local --non-interactive
+        env:
-  #
+          EXPO_TV: 1
-  #     - name: 📅 Set date tag
+        run: eas build -p ios --local --non-interactive
-  #       run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
+
-  #
+      - name: 📅 Set date tag
-  #     - name: 📤 Upload IPA artifact
+        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
-  #       uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+
-  #       with:
+      - name: 📤 Upload IPA artifact
-  #         name: streamyfin-ios-tv-ipa-${{ env.DATE_TAG }}
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-  #         path: build-*.ipa
+        with:
-  #         retention-days: 7
+          name: streamyfin-ios-tv-ipa-${{ env.DATE_TAG }}
+          path: build-*.ipa
+          retention-days: 7
+
+  build-ios-tv-unsigned:
+    # Unsigned tvOS build is enabled (compiles without Apple credentials).
+    # The signed tvOS job above stays disabled until tvOS provisioning
+    # profiles are set up in EAS (app + TopShelf targets).
+    if: (!contains(github.event.head_commit.message, '[skip ci]'))
+    runs-on: macos-26
+    name: 🍎 Build tvOS IPA (Unsigned)
+    permissions:
+      contents: read
+
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          fetch-depth: 0
+          submodules: recursive
+          show-progress: false
+
+      - name: 🍞 Setup Bun
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-cache
+
+      - name: 📦 Install dependencies and reload submodules
+        run: |
+          bun install --frozen-lockfile
+          bun run submodule-reload
+
+      - name: 🛠️ Generate project files
+        run: bun run prebuild:tv
+
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
+        with:
+          # renovate: datasource=custom.xcode depName=xcode versioning=loose
+          xcode-version: "26.4"
+
+      - name: 🚀 Build iOS app
+        env:
+          EXPO_TV: 1
+        run: bun run ios:unsigned-build:tv ${{ github.event_name == 'pull_request' && '-- --verbose' || '' }}
+
+      - name: 📅 Set date tag
+        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
+
+      - name: 📤 Upload IPA artifact
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: streamyfin-ios-tv-unsigned-ipa-${{ env.DATE_TAG }}
+          path: build/*.ipa
+          retention-days: 7

.github/workflows/check-lockfile.yml

@@ -27,12 +27,12 @@ jobs:
           fetch-depth: 0
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: |
             ~/.bun/install/cache

.github/workflows/ci-codeql.yml

@@ -27,13 +27,13 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
+        uses: github/codeql-action/init@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended,security-and-quality
 
       - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
+        uses: github/codeql-action/autobuild@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
+        uses: github/codeql-action/analyze@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0

.github/workflows/crowdin.yml

@@ -28,7 +28,7 @@ jobs:
           fetch-depth: 0
 
       - name: 🌐 Sync Translations with Crowdin
-        uses: crowdin/github-action@5587c43063e52090026857d386174d2599ad323b # v2.14.1
+        uses: crowdin/github-action@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
         with:
           upload_sources: true
           upload_translations: true

.github/workflows/linting.yml

@@ -25,7 +25,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - uses: marocchino/sticky-pull-request-comment@773744901bac0e8cbb5a0dc842800d45e9b2b405 # v2.9.4
+      - uses: marocchino/sticky-pull-request-comment@0ea0beb66eb9baf113663a64ec522f60e49231c0 # v3.0.4
         if: always() && (steps.lint_pr_title.outputs.error_message != null)
         with:
           header: pr-title-lint-error
@@ -39,7 +39,7 @@ jobs:
             ```
 
       - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
-        uses: marocchino/sticky-pull-request-comment@773744901bac0e8cbb5a0dc842800d45e9b2b405 # v2.9.4
+        uses: marocchino/sticky-pull-request-comment@0ea0beb66eb9baf113663a64ec522f60e49231c0 # v3.0.4
         with:
           header: pr-title-lint-error
           delete: true
@@ -57,7 +57,7 @@ jobs:
           fetch-depth: 0
 
       - name: Dependency Review
-        uses: actions/dependency-review-action@3c4e3dcb1aa7874d2c16be7d79418e9b7efd6261 # v4.8.2
+        uses: actions/dependency-review-action@a1d282b36b6f3519aa1f3fc636f609c47dddb294 # v5.0.0
         with:
           fail-on-severity: high
           base-ref: ${{ github.event.pull_request.base.sha || 'develop' }}
@@ -76,7 +76,7 @@ jobs:
           fetch-depth: 0
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 
@@ -107,12 +107,12 @@ jobs:
           fetch-depth: 0
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version: '24.x'
 
       - name: "🍞 Setup Bun"
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: latest
 

.github/workflows/release.yml

@@ -0,0 +1,216 @@
+name: 🚀 Release (EAS build + submit)
+
+# On merge to main (gated by the `production` GitHub Environment approval),
+# build all targets on EAS in parallel via custom bun build configs:
+#   1. iOS phone        → App Store (auto-submit)
+#   2. tvOS             → App Store (auto-submit)
+#   3. Android AAB      → Google Play (auto-submit)
+#   4. Android phone APK→ downloadable artifact
+#   5. Android TV APK   → downloadable artifact
+# Note: EAS queues builds based on your plan's concurrency; parallel jobs
+# here just submit them — EAS may still run them serially.
+
+concurrency:
+  group: release-${{ github.ref }}
+  cancel-in-progress: false
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  approve:
+    name: 🔐 Approve release
+    runs-on: ubuntu-24.04
+    environment: production
+    steps:
+      - name: ✅ Release approved
+        run: echo "Release approved for ${{ github.sha }}"
+
+  build:
+    name: 🚀 ${{ matrix.name }}
+    needs: approve
+    runs-on: ubuntu-24.04
+    permissions:
+      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - name: 🍎 iOS
+            platform: ios
+            profile: production
+            submit: true
+          - name: 📺 tvOS
+            platform: ios
+            profile: production_tv
+            submit: true
+          - name: 🤖 Android AAB
+            platform: android
+            profile: production
+            submit: true
+          - name: 🤖 Android APK
+            platform: android
+            profile: production-apk
+            submit: false
+            artifact_name: streamyfin-android-phone-apk
+          - name: 📺 Android TV APK
+            platform: android
+            profile: production-apk-tv
+            submit: false
+            artifact_name: streamyfin-android-tv-apk
+
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
+          submodules: recursive
+          show-progress: false
+
+      - name: 🍞 Setup Bun
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-cache
+
+      - name: 📦 Install dependencies and reload submodules
+        run: |
+          bun install --frozen-lockfile
+          bun run submodule-reload
+
+      - name: 🏗️ Setup EAS
+        uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+          eas-cache: true
+
+      # tvOS uses credentialsSource: local — restore the gitignored
+      # credentials.json + cert + provisioning profiles from secrets.
+      - name: 🔐 Restore tvOS signing credentials
+        if: matrix.profile == 'production_tv'
+        env:
+          EAS_CREDENTIALS_JSON: ${{ secrets.EAS_CREDENTIALS_JSON }}
+          TVOS_DIST_CERT_P12_BASE64: ${{ secrets.TVOS_DIST_CERT_P12_BASE64 }}
+          TVOS_APP_PROFILE_BASE64: ${{ secrets.TVOS_APP_PROFILE_BASE64 }}
+          TVOS_TOPSHELF_PROFILE_BASE64: ${{ secrets.TVOS_TOPSHELF_PROFILE_BASE64 }}
+        run: |
+          mkdir -p certs profiles
+          printf '%s' "$EAS_CREDENTIALS_JSON" > credentials.json
+          echo "$TVOS_DIST_CERT_P12_BASE64" | base64 -d > certs/distribution.p12
+          echo "$TVOS_APP_PROFILE_BASE64" | base64 -d > profiles/Streamyfin_tvOS_App_Store.mobileprovision
+          echo "$TVOS_TOPSHELF_PROFILE_BASE64" | base64 -d > profiles/Streamyfin_TopShelf_tvOS_App_Store.mobileprovision
+
+      # Android Play submit needs the Google Play service account JSON.
+      - name: 🔐 Restore Google Play service account
+        if: matrix.platform == 'android' && matrix.submit
+        env:
+          GOOGLE_SERVICE_ACCOUNT_KEY: ${{ secrets.GOOGLE_SERVICE_ACCOUNT_KEY }}
+        run: printf '%s' "$GOOGLE_SERVICE_ACCOUNT_KEY" > google-service-account.json
+
+      # App Store Connect API key for iOS/tvOS submit (raw-PEM or base64).
+      - name: 🔐 Restore App Store Connect API key
+        if: matrix.platform == 'ios'
+        env:
+          APPLE_KEY_CONTENT: ${{ secrets.APPLE_KEY_CONTENT }}
+        run: |
+          if printf '%s' "$APPLE_KEY_CONTENT" | grep -q "BEGIN PRIVATE KEY"; then
+            printf '%s' "$APPLE_KEY_CONTENT" > "$RUNNER_TEMP/asc_api_key.p8"
+          else
+            printf '%s' "$APPLE_KEY_CONTENT" | base64 -d > "$RUNNER_TEMP/asc_api_key.p8"
+          fi
+
+      # ── Submit builds: cloud build + auto-submit to the store ──
+      - name: 🚀 Build & submit (${{ matrix.name }})
+        if: matrix.submit
+        env:
+          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
+          EXPO_ASC_API_KEY_PATH: ${{ runner.temp }}/asc_api_key.p8
+          EXPO_ASC_KEY_ID: ${{ secrets.APPLE_KEY_ID }}
+          EXPO_ASC_ISSUER_ID: ${{ secrets.APPLE_KEY_ISSUER_ID }}
+        run: |
+          eas build \
+            --platform ${{ matrix.platform }} \
+            --profile ${{ matrix.profile }} \
+            --auto-submit \
+            --non-interactive \
+            --wait
+
+      # ── Artifact builds: cloud build, then download + upload the APK ──
+      - name: 🏗️ Build artifact (${{ matrix.name }})
+        if: ${{ !matrix.submit }}
+        env:
+          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
+        run: |
+          eas build \
+            --platform ${{ matrix.platform }} \
+            --profile ${{ matrix.profile }} \
+            --non-interactive \
+            --wait \
+            --json > build-result.json
+          URL=$(node -e "const b=require('./build-result.json'); const x=Array.isArray(b)?b[0]:b; console.log(x.artifacts.applicationArchiveUrl)")
+          echo "Downloading artifact: $URL"
+          curl -fL "$URL" -o "${{ matrix.artifact_name }}.apk"
+
+      - name: 📤 Upload APK artifact (${{ matrix.name }})
+        if: ${{ !matrix.submit }}
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: ${{ matrix.artifact_name }}
+          path: ${{ matrix.artifact_name }}.apk
+          retention-days: 14
+
+  # Draft a GitHub Release with the two APKs attached. The tag comes from the
+  # merged-in app version (app.json → expo.version), NOT the auto-incremented
+  # build number — so cutting a release is a deliberate version bump via PR.
+  github-release:
+    name: 📦 Draft GitHub Release
+    needs: build
+    if: ${{ !cancelled() }}
+    runs-on: ubuntu-24.04
+    permissions:
+      contents: write
+      actions: read # required for `gh run download` to list/fetch this run's artifacts
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
+          show-progress: false
+
+      - name: 📦 Download APK artifacts from this run
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          mkdir -p apks
+          gh run download ${{ github.run_id }} --name streamyfin-android-phone-apk --dir apks
+          gh run download ${{ github.run_id }} --name streamyfin-android-tv-apk --dir apks
+          ls -la apks
+
+      - name: 📝 Draft release (tag = app.json version, not auto-bumped)
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          VERSION=$(node -e "console.log(require('./app.json').expo.version)")
+          TAG="v$VERSION"
+          echo "Release tag from merged app version: $TAG"
+          if gh release view "$TAG" >/dev/null 2>&1; then
+            echo "Release $TAG exists — updating APK assets"
+            gh release upload "$TAG" apks/*.apk --clobber
+          else
+            echo "Creating draft release $TAG"
+            gh release create "$TAG" \
+              --draft \
+              --generate-notes \
+              --title "$TAG" \
+              apks/*.apk
+          fi

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

@@ -21,14 +21,14 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version: '24.x'
           cache: 'npm'
 
       - name: 🔍 Extract minor version from app.json
         id: minor
-        uses: actions/github-script@main
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # main
         with:
           result-encoding: string
           script: |
@@ -54,7 +54,7 @@ jobs:
           dry_run: no-push
 
       - name: 📬 Commit and create pull request
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
         with:
           add-paths: .github/ISSUE_TEMPLATE/bug_report.yml
           branch: ci-update-bug-report

.gitignore

@@ -18,6 +18,9 @@ web-build/
 /androidmobile
 /androidtv
 
+# Gradle caches (top-level + per-module native projects)
+**/.gradle/
+
 # Module-specific Builds
 modules/mpv-player/android/build
 modules/player/android
@@ -50,8 +53,6 @@ npm-debug.*
 .idea/
 .ruby-lsp
 .cursor/
-.claude/
-CLAUDE.md
 
 # Environment and Configuration
 expo-env.d.ts
@@ -63,6 +64,8 @@ expo-env.d.ts
 pc-api-7079014811501811218-719-3b9f15aeccf8.json
 credentials.json
 streamyfin-4fec1-firebase-adminsdk.json
+/profiles/
+certs/
 
 # Version and Backup Files
 /version-backup-*
@@ -72,4 +75,13 @@ modules/background-downloader/android/build/*
 /modules/mpv-player/android/build
 
 # ios:unsigned-build Artifacts
-build/
+build/
+# but keep EAS custom build configs (the generic build/ rule above matches .eas/build/)
+!.eas/build/
+!.eas/build/**
+.claude/
+.agents/skills/**
+skills-lock.json
+
+# CI-injected Google Play service account key (written at build time)
+google-service-account.json

CLAUDE.md

@@ -1,9 +1,39 @@
 # CLAUDE.md
 
-@.claude/learned-facts.md
-
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
+## Learned Facts Index
+
+IMPORTANT: When encountering issues related to these topics, or when implementing new features that touch these areas, prefer retrieval-led reasoning -- read the relevant fact file in `.claude/learned-facts/` before relying on assumptions.
+
+Navigation:
+- `native-bottom-tabs-userouter-conflict` | useRouter() at provider level causes tab switches; use static router import
+- `introsheet-rendering-location` | IntroSheet in IntroSheetProvider affects native bottom tabs via nav state hooks
+- `intro-modal-trigger-location` | Trigger in Home.tsx, not tabs _layout.tsx
+- `tab-folder-naming` | Use underscore prefix: (_home) not (home)
+
+UI/Headers:
+- `macos-header-buttons-fix` | macOS Catalyst: use RNGH Pressable, not RN TouchableOpacity
+- `header-button-locations` | Defined in _layout.tsx, HeaderBackButton, Chromecast, RoundButton, etc.
+- `stack-screen-header-configuration` | Sub-pages need explicit Stack.Screen with headerTransparent + back button
+
+State/Data:
+- `use-network-aware-query-client-limitations` | Object.create breaks private fields; only for invalidateQueries
+- `mark-as-played-flow` | PlayedStatus→useMarkAsPlayed→playbackManager with optimistic updates
+
+Native Modules:
+- `mpv-tvos-player-exit-freeze` | mpv_terminate_destroy deadlocks main thread; use DispatchQueue.global()
+- `mpv-avfoundation-composite-osd-ordering` | MUST follow vo=avfoundation, before hwdec options
+- `thread-safe-state-for-stop-flags` | Stop flags need synchronous setter (stateQueue.sync not async)
+- `native-swiftui-view-sizing` | Need explicit frame + intrinsicContentSize override in ExpoView
+
+TV Platform:
+- `tv-modals-must-use-navigation-pattern` | Use atom+router.push(), never overlay/absolute modals
+- `tv-grid-layout-pattern` | ScrollView+flexWrap, not FlatList numColumns
+- `tv-horizontal-padding-standard` | TV_HORIZONTAL_PADDING=60, not old TV_SCALE_PADDING=20
+- `streamystats-components-location` | components/home/Streamystats*.tv.tsx, watchlists/[watchlistId].tsx
+- `platform-specific-file-suffix-does-not-work` | .tv.tsx doesn't work; use Platform.isTV conditional rendering
+
 ## Project Overview
 
 Streamyfin is a cross-platform Jellyfin video streaming client built with Expo (React Native). It supports mobile (iOS/Android) and TV platforms, with features including offline downloads, Chromecast support, and Jellyseerr integration.
@@ -65,6 +95,7 @@ bun run ios:install-metal-toolchain  # Fix "missing Metal Toolchain" build error
 **State Management**:
 - Global state uses Jotai atoms in `utils/atoms/`
 - `settingsAtom` in `utils/atoms/settings.ts` for app settings
+  - **IMPORTANT**: When adding a setting to the settings atom, ensure it's toggleable in the settings view (either TV or mobile, depending on the feature scope)
 - `apiAtom` and `userAtom` in `providers/JellyfinProvider.tsx` for auth state
 - Server state uses React Query with `@tanstack/react-query`
 
@@ -128,9 +159,132 @@ import { apiAtom } from "@/providers/JellyfinProvider";
 - Handle both mobile and TV navigation patterns
 - Use existing atoms, hooks, and utilities before creating new ones
 - Use Conventional Commits: `feat(scope):`, `fix(scope):`, `chore(scope):`
+- **Translations**: When adding a translation key to a Text component, ensure the key exists in both `translations/en.json` and `translations/sv.json`. Before adding new keys, check if an existing key already covers the use case.
 
 ## Platform Considerations
 
 - 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 React Native's `Modal` component or overlay/absolute-positioned modals for full-screen modals on TV. Use the navigation-based modal pattern instead. **See [docs/tv-modal-guide.md](docs/tv-modal-guide.md) for detailed documentation.**
+
+### TV Component Rendering Pattern
+
+**IMPORTANT**: The `.tv.tsx` file suffix does NOT work in this project - neither for pages nor components. Metro bundler doesn't resolve platform-specific suffixes. Always use `Platform.isTV` conditional rendering instead.
+
+**Pattern for TV-specific pages and 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
+- **Never use `.tv.tsx` file suffix** - it will not be resolved correctly
+
+### TV Option Selectors and Focus Management
+
+For dropdown/select components, bottom sheets, and overlay focus management on TV, see [docs/tv-modal-guide.md](docs/tv-modal-guide.md).
+
+### 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

@@ -126,6 +126,10 @@ For the TV version suffix the npm commands with `:tv`.
 `npm run prebuild:tv`  
 `npm run ios:tv or npm run android:tv`
 
+TV platform integration notes:
+
+- [TV Discovery](./docs/tv-discovery.md)
+
 ## 👋 Get in Touch with Us
 
 Need assistance or have any questions?

app.config.js

@@ -6,6 +6,14 @@ module.exports = ({ config }) => {
       "react-native-google-cast",
       { useDefaultExpandedMediaControls: true },
     ]);
+
+    config.plugins.push([
+      "expo-camera",
+      {
+        cameraPermission:
+          "Allow Streamyfin to access the camera to scan QR codes for TV login.",
+      },
+    ]);
   }
 
   // Only override googleServicesFile if env var is set

app.json

@@ -2,13 +2,11 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.52.0",
+    "version": "0.54.1",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
     "userInterfaceStyle": "dark",
-    "jsEngine": "hermes",
-    "newArchEnabled": true,
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "requireFullScreen": true,
@@ -23,7 +21,8 @@
         },
         "UISupportsTrueScreenSizeOnMac": true,
         "UIFileSharingEnabled": true,
-        "LSSupportsOpeningDocumentsInPlace": true
+        "LSSupportsOpeningDocumentsInPlace": true,
+        "AVInitialRouteSharingPolicy": "LongFormAudio"
       },
       "config": {
         "usesNonExemptEncryption": false
@@ -37,8 +36,6 @@
       "appleTeamId": "MWD5K362T8"
     },
     "android": {
-      "jsEngine": "hermes",
-      "versionCode": 92,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon-android-plain.png",
         "monochromeImage": "./assets/images/icon-android-themed.png",
@@ -55,23 +52,41 @@
       "googleServicesFile": "./google-services.json"
     },
     "plugins": [
-      "@react-native-tvos/config-tv",
+      [
+        "@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
+          }
+        }
+      ],
       "expo-router",
       "expo-font",
       "./plugins/withExcludeMedia3Dash.js",
+      "./plugins/withTVUserManagement.js",
       [
         "expo-build-properties",
         {
           "ios": {
-            "deploymentTarget": "15.6",
+            "deploymentTarget": "16.4",
-            "useFrameworks": "static"
+            "useFrameworks": "static",
+            "forceStaticLinking": ["ExpoUI", "GlassEffectView", "GlassPoster"]
           },
           "android": {
-            "buildArchs": ["arm64-v8a", "x86_64"],
+            "buildArchs": ["arm64-v8a", "x86_64", "armeabi-v7a"],
             "compileSdkVersion": 36,
             "targetSdkVersion": 35,
             "buildToolsVersion": "35.0.0",
-            "kotlinVersion": "2.0.21",
+            "kotlinVersion": "2.1.20",
             "minSdkVersion": 26,
             "usesCleartextTraffic": true,
             "packagingOptions": {
@@ -118,14 +133,18 @@
       "expo-web-browser",
       ["./plugins/with-runtime-framework-headers.js"],
       ["./plugins/withChangeNativeAndroidTextToWhite.js"],
+      ["./plugins/withAndroidAlertColors.js"],
       ["./plugins/withAndroidManifest.js"],
       ["./plugins/withTrustLocalCerts.js"],
       ["./plugins/withGradleProperties.js"],
+      ["./plugins/withTVOSAppIcon.js"],
+      ["./plugins/withTVOSTopShelf.js"],
+      ["./plugins/withTVXcodeEnv.js"],
       [
         "./plugins/withGitPod.js",
         {
-          "podName": "MPVKit-GPL",
+          "podName": "MPVKit",
-          "podspecUrl": "https://raw.githubusercontent.com/streamyfin/MPVKit/0.40.0-av/MPVKit-GPL.podspec"
+          "podspecUrl": "https://raw.githubusercontent.com/mpv-ios/MPVKit/0.41.0-av/MPVKit.podspec"
         }
       ]
     ],

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

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

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

@@ -16,7 +16,7 @@ export interface MenuLink {
   icon: string;
 }
 
-export default function menuLinks() {
+export default function CustomLinksPage() {
   const [api] = useAtom(apiAtom);
   const insets = useSafeAreaInsets();
   const [menuLinks, setMenuLinks] = useState<MenuLink[]>([]);

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

@@ -2,9 +2,10 @@ 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() {
+export default function FavoritesPage() {
   const invalidateCache = useInvalidatePlaybackProgressCache();
 
   const [loading, setLoading] = useState(false);
@@ -15,6 +16,10 @@ export default function favorites() {
   }, []);
   const insets = useSafeAreaInsets();
 
+  if (Platform.isTV) {
+    return <TVFavorites />;
+  }
+
   return (
     <ScrollView
       nestedScrollEnabled

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

@@ -9,6 +9,7 @@ import useRouter from "@/hooks/useAppRouter";
 const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");
 
 import { useAtom } from "jotai";
+import { HeaderBackButton } from "@/components/common/HeaderBackButton";
 import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
 import { userAtom } from "@/providers/JellyfinProvider";
 
@@ -43,44 +44,29 @@ export default function IndexLayout() {
       <Stack.Screen
         name='downloads/index'
         options={{
-          headerShown: true,
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           title: t("home.downloads.downloads_title"),
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='sessions/index'
         options={{
           title: t("home.sessions.title"),
-          headerShown: true,
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='settings'
         options={{
           title: t("home.settings.settings_title"),
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
@@ -95,100 +81,77 @@ export default function IndexLayout() {
           ),
         }}
       />
+      <Stack.Screen
+        name='companion-login'
+        options={{
+          title: t("companion_login.title"),
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => <HeaderBackButton />,
+        }}
+      />
       <Stack.Screen
         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: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='settings/audio-subtitles/page'
         options={{
           title: t("home.settings.audio_subtitles.title"),
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='settings/appearance/page'
         options={{
           title: t("home.settings.appearance.title"),
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='settings/music/page'
         options={{
           title: t("home.settings.music.title"),
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='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: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='settings/plugins/page'
         options={{
           title: t("home.settings.plugins.plugins_title"),
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
@@ -207,126 +170,77 @@ 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: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='settings/plugins/jellyseerr/page'
         options={{
           title: "Jellyseerr",
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='settings/plugins/streamystats/page'
         options={{
           title: "Streamystats",
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='settings/plugins/kefinTweaks/page'
         options={{
           title: "KefinTweaks",
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='settings/intro/page'
         options={{
           title: t("home.settings.intro.title"),
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='settings/logs/page'
         options={{
           title: t("home.settings.logs.logs_title"),
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       <Stack.Screen
         name='settings/network/page'
         options={{
           title: t("home.settings.network.title"),
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
         }}
       />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
@@ -336,12 +250,8 @@ export default function IndexLayout() {
         name='collections/[collectionId]'
         options={{
           title: "",
-          headerLeft: () => (
+          headerLeft: () => <HeaderBackButton />,
-            <Pressable onPress={() => _router.back()} className='pl-0.5'>
+          headerShown: !Platform.isTV,
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
-          headerShown: true,
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,

app/(auth)/(tabs)/(home)/companion-login.tsx

@@ -0,0 +1,7 @@
+import { Platform } from "react-native";
+import { CompanionLoginScreen } from "@/components/companion/CompanionLoginScreen";
+
+export default function CompanionLoginPage() {
+  if (Platform.isTV) return null;
+  return <CompanionLoginScreen />;
+}

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

@@ -1,4 +1,9 @@
-import { BottomSheetModal } from "@gorhom/bottom-sheet";
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
 import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -7,6 +12,7 @@ import { Alert, Platform, ScrollView, View } from "react-native";
 import { Pressable } from "react-native-gesture-handler";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
+import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import ActiveDownloads from "@/components/downloads/ActiveDownloads";
@@ -20,7 +26,7 @@ import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
 import { queueAtom } from "@/utils/atoms/queue";
 import { writeToLog } from "@/utils/log";
 
-export default function page() {
+export default function DownloadsPage() {
   const navigation = useNavigation();
   const { t } = useTranslation();
   const [_queue, _setQueue] = useAtom(queueAtom);
@@ -101,7 +107,7 @@ export default function page() {
     navigation.setOptions({
       headerRight: () => (
         <Pressable
-          onPress={bottomSheetModalRef.current?.present}
+          onPress={() => bottomSheetModalRef.current?.present()}
           className='px-2'
         >
           <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
@@ -116,7 +122,7 @@ export default function page() {
     }
   }, [showMigration]);
 
-  const _deleteMovies = () =>
+  const deleteMovies = () =>
     deleteFileByType("Movie")
       .then(() =>
         toast.success(
@@ -127,7 +133,7 @@ export default function page() {
         writeToLog("ERROR", reason);
         toast.error(t("home.downloads.toasts.failed_to_delete_all_movies"));
       });
-  const _deleteShows = () =>
+  const deleteShows = () =>
     deleteFileByType("Episode")
       .then(() =>
         toast.success(
@@ -138,7 +144,7 @@ export default function page() {
         writeToLog("ERROR", reason);
         toast.error(t("home.downloads.toasts.failed_to_delete_all_tvseries"));
       });
-  const _deleteOtherMedia = () =>
+  const deleteOtherMedia = () =>
     Promise.all(
       otherMedia
         .filter((item) => item.item.Type)
@@ -162,6 +168,9 @@ export default function page() {
         ),
     );
 
+  const deleteAllMedia = async () =>
+    await Promise.all([deleteMovies(), deleteShows(), deleteOtherMedia()]);
+
   return (
     <OfflineModeProvider isOffline={true}>
       <ScrollView
@@ -256,6 +265,42 @@ export default function page() {
           )}
         </View>
       </ScrollView>
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing
+        handleIndicatorStyle={{
+          backgroundColor: "white",
+        }}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        backdropComponent={(props: BottomSheetBackdropProps) => (
+          <BottomSheetBackdrop
+            {...props}
+            disappearsOnIndex={-1}
+            appearsOnIndex={0}
+          />
+        )}
+      >
+        <BottomSheetView>
+          <View className='p-4 space-y-4 mb-4'>
+            <Button color='purple' onPress={deleteMovies}>
+              {t("home.downloads.delete_all_movies_button")}
+            </Button>
+            <Button color='purple' onPress={deleteShows}>
+              {t("home.downloads.delete_all_tvseries_button")}
+            </Button>
+            {otherMedia.length > 0 && (
+              <Button color='purple' onPress={deleteOtherMedia}>
+                {t("home.downloads.delete_all_other_media_button")}
+              </Button>
+            )}
+            <Button color='red' onPress={deleteAllMedia}>
+              {t("home.downloads.delete_all_button")}
+            </Button>
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
     </OfflineModeProvider>
   );
 }

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

@@ -1,15 +1,6 @@
-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)/sessions/index.tsx

@@ -23,7 +23,7 @@ import { formatBitrate } from "@/utils/bitrate";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { formatTimeString } from "@/utils/time";
 
-export default function page() {
+export default function SessionsPage() {
   const { sessions, isLoading } = useSessions({} as useSessionsProps);
   const { t } = useTranslation();
 
@@ -72,7 +72,7 @@ const SessionCard = ({ session }: SessionCardProps) => {
   };
 
   const getProgressPercentage = () => {
-    if (!session.NowPlayingItem || !session.NowPlayingItem.RunTimeTicks) {
+    if (!session.NowPlayingItem?.RunTimeTicks) {
       return 0;
     }
 

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

@@ -14,7 +14,11 @@ import { UserInfo } from "@/components/settings/UserInfo";
 import useRouter from "@/hooks/useAppRouter";
 import { useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 
-export default function settings() {
+// TV-specific settings component
+const SettingsTV = Platform.isTV ? require("./settings.tv").default : null;
+
+// Mobile settings component
+function SettingsMobile() {
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const [_user] = useAtom(userAtom);
@@ -55,6 +59,20 @@ export default function settings() {
 
         <QuickConnect className='mb-4' />
 
+        {Platform.OS !== "ios" && (
+          <View className='mb-4'>
+            <ListGroup title={t("pairing.pair_with_phone_title")}>
+              <ListItem
+                onPress={() =>
+                  router.push("/(auth)/(tabs)/(home)/companion-login")
+                }
+                title={t("pairing.pair_with_phone")}
+                textColor='blue'
+              />
+            </ListGroup>
+          </View>
+        )}
+
         <View className='mb-4'>
           <AppLanguageSelector />
         </View>
@@ -104,8 +122,17 @@ export default function settings() {
           </ListGroup>
         </View>
 
-        {!Platform.isTV && <StorageSettings />}
+        <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

@@ -0,0 +1,949 @@
+import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
+import { useQueryClient } from "@tanstack/react-query";
+import { Directory, Paths } from "expo-file-system";
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Alert, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { TVPasswordEntryModal } from "@/components/login/TVPasswordEntryModal";
+import { TVPINEntryModal } from "@/components/login/TVPINEntryModal";
+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 { useTVUserSwitchModal } from "@/hooks/useTVUserSwitchModal";
+import { APP_LANGUAGES } from "@/i18n";
+import { clearCache as clearAudioCache } from "@/providers/AudioStorage";
+import {
+  apiAtom,
+  cacheVersionAtom,
+  useJellyfin,
+  userAtom,
+} from "@/providers/JellyfinProvider";
+import {
+  AudioTranscodeMode,
+  InactivityTimeout,
+  type MpvCacheMode,
+  type MpvVoDriver,
+  TVTypographyScale,
+  useSettings,
+} from "@/utils/atoms/settings";
+import { storage } from "@/utils/mmkv";
+import {
+  getPreviousServers,
+  type SavedServer,
+  type SavedServerAccount,
+} from "@/utils/secureCredentials";
+import { clearTopShelfCacheSafely } from "@/utils/topshelf/cache";
+
+export default function SettingsTV() {
+  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
+  const { settings, updateSettings } = useSettings();
+  const { logout, loginWithSavedCredential, loginWithPassword } = useJellyfin();
+  const [user] = useAtom(userAtom);
+  const [api] = useAtom(apiAtom);
+  const [, setCacheVersion] = useAtom(cacheVersionAtom);
+  const { showOptions } = useTVOptionModal();
+  const { showUserSwitchModal } = useTVUserSwitchModal();
+  const typography = useScaledTVTypography();
+  const queryClient = useQueryClient();
+
+  // Local state for OpenSubtitles API key (only commit on blur)
+  const [openSubtitlesApiKey, setOpenSubtitlesApiKey] = useState(
+    settings.openSubtitlesApiKey || "",
+  );
+
+  // PIN/Password modal state for user switching
+  const [pinModalVisible, setPinModalVisible] = useState(false);
+  const [passwordModalVisible, setPasswordModalVisible] = useState(false);
+  const [selectedServer, setSelectedServer] = useState<SavedServer | null>(
+    null,
+  );
+  const [selectedAccount, setSelectedAccount] =
+    useState<SavedServerAccount | null>(null);
+
+  // Track if any modal is open to disable background focus
+  const isAnyModalOpen = pinModalVisible || passwordModalVisible;
+
+  // Get current server and other accounts
+  const currentServer = useMemo(() => {
+    if (!api?.basePath) return null;
+    const servers = getPreviousServers();
+    return servers.find((s) => s.address === api.basePath) || null;
+  }, [api?.basePath]);
+
+  const otherAccounts = useMemo(() => {
+    if (!currentServer || !user?.Id) return [];
+    return currentServer.accounts.filter(
+      (account) => account.userId !== user.Id,
+    );
+  }, [currentServer, user?.Id]);
+
+  const hasOtherAccounts = otherAccounts.length > 0;
+
+  // Handle account selection from modal
+  const handleAccountSelect = async (account: SavedServerAccount) => {
+    if (!currentServer) return;
+
+    if (account.securityType === "none") {
+      // Direct login with saved credential
+      try {
+        await loginWithSavedCredential(currentServer.address, account.userId);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : t("server.session_expired");
+        const isSessionExpired = errorMessage.includes(
+          t("server.session_expired"),
+        );
+        Alert.alert(
+          isSessionExpired
+            ? t("server.session_expired")
+            : t("login.connection_failed"),
+          isSessionExpired ? t("server.please_login_again") : errorMessage,
+        );
+      }
+    } else if (account.securityType === "pin") {
+      // Show PIN modal
+      setSelectedServer(currentServer);
+      setSelectedAccount(account);
+      setPinModalVisible(true);
+    } else if (account.securityType === "password") {
+      // Show password modal
+      setSelectedServer(currentServer);
+      setSelectedAccount(account);
+      setPasswordModalVisible(true);
+    }
+  };
+
+  // Handle successful PIN entry
+  const handlePinSuccess = async () => {
+    setPinModalVisible(false);
+    if (selectedServer && selectedAccount) {
+      try {
+        await loginWithSavedCredential(
+          selectedServer.address,
+          selectedAccount.userId,
+        );
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : t("server.session_expired");
+        const isSessionExpired = errorMessage.includes(
+          t("server.session_expired"),
+        );
+        Alert.alert(
+          isSessionExpired
+            ? t("server.session_expired")
+            : t("login.connection_failed"),
+          isSessionExpired ? t("server.please_login_again") : errorMessage,
+        );
+      }
+    }
+    setSelectedServer(null);
+    setSelectedAccount(null);
+  };
+
+  // Handle password submission
+  const handlePasswordSubmit = async (password: string) => {
+    if (selectedServer && selectedAccount) {
+      await loginWithPassword(
+        selectedServer.address,
+        selectedAccount.username,
+        password,
+      );
+    }
+    setPasswordModalVisible(false);
+    setSelectedServer(null);
+    setSelectedAccount(null);
+  };
+
+  // Handle switch user button press
+  const handleSwitchUser = () => {
+    if (!currentServer || !user?.Id) return;
+    showUserSwitchModal(currentServer, user.Id, {
+      onAccountSelect: handleAccountSelect,
+    });
+  };
+
+  // Handle clearing all cache in the entire app
+  const handleClearCache = async () => {
+    Alert.alert(
+      t("home.settings.storage.clear_all_cache_confirm", "Clear All Cache?"),
+      t(
+        "home.settings.storage.clear_all_cache_confirm_desc",
+        "Are you sure you want to clear all cached data? This will clear all cached images, music files, subtitles, and query caches. Your settings and login session will be kept.",
+      ),
+      [
+        {
+          text: t("common.cancel", "Cancel"),
+          style: "cancel",
+        },
+        {
+          text: t("common.ok", "OK"),
+          onPress: async () => {
+            try {
+              // 1. Clear React Query Cache (memory & MMKV)
+              storage.remove("REACT_QUERY_OFFLINE_CACHE");
+              await queryClient.resetQueries();
+
+              // 2. Clear expo-image cache (memory & disk)
+              await Image.clearDiskCache();
+              Image.clearMemoryCache();
+
+              // 3. Clear AudioStorage (music) cache
+              await clearAudioCache();
+
+              // 4. Clear TopShelf cache
+              clearTopShelfCacheSafely();
+
+              // 5. Clear Subtitle Cache
+              storage.remove("downloadedSubtitles.json");
+              const subtitlesDir = new Directory(
+                Paths.cache,
+                "streamyfin-subtitles",
+              );
+              if (subtitlesDir.exists) {
+                await subtitlesDir.delete();
+              }
+
+              // 6. Clear MMKV caches like extracted image colors and other non-essential storage keys
+              const keysToKeep = [
+                "settings",
+                "serverUrl",
+                "token",
+                "user",
+                "deviceId",
+                "previousServers",
+                "hasAskedForNotificationPermission",
+                "hasShownIntro",
+                "multiAccountMigrated",
+                "selectedTVServer",
+                "downloads.v2.json",
+              ];
+              const allKeys = storage.getAllKeys();
+              for (const key of allKeys) {
+                if (!keysToKeep.includes(key)) {
+                  storage.remove(key);
+                }
+              }
+
+              // 7. Increment cache version to force remount of components
+              setCacheVersion((v) => v + 1);
+            } catch (error) {
+              console.error("Failed to clear cache:", error);
+              Alert.alert(
+                t("home.settings.toasts.error_deleting_files", "Error"),
+                t(
+                  "home.settings.storage.clear_all_cache_error_desc",
+                  "An error occurred while clearing the cache.",
+                ),
+              );
+            }
+          },
+        },
+      ],
+    );
+  };
+
+  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;
+  const currentCacheMode = settings.mpvCacheEnabled ?? "auto";
+  const currentVoDriver = settings.mpvVoDriver ?? "gpu-next";
+  const currentLanguage = settings.preferedLanguage;
+
+  // 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],
+  );
+
+  // Cache mode options
+  const cacheModeOptions: TVOptionItem<MpvCacheMode>[] = useMemo(
+    () => [
+      {
+        label: t("home.settings.buffer.cache_auto"),
+        value: "auto",
+        selected: currentCacheMode === "auto",
+      },
+      {
+        label: t("home.settings.buffer.cache_yes"),
+        value: "yes",
+        selected: currentCacheMode === "yes",
+      },
+      {
+        label: t("home.settings.buffer.cache_no"),
+        value: "no",
+        selected: currentCacheMode === "no",
+      },
+    ],
+    [t, currentCacheMode],
+  );
+
+  // VO driver options
+  const voDriverOptions: TVOptionItem<MpvVoDriver>[] = useMemo(
+    () => [
+      {
+        label: t("home.settings.vo_driver.gpu_next"),
+        value: "gpu-next",
+        selected: currentVoDriver === "gpu-next",
+      },
+      {
+        label: t("home.settings.vo_driver.gpu"),
+        value: "gpu",
+        selected: currentVoDriver === "gpu",
+      },
+    ],
+    [t, currentVoDriver],
+  );
+
+  // Typography scale options
+  const typographyScaleOptions: TVOptionItem<TVTypographyScale>[] = useMemo(
+    () => [
+      {
+        label: t("home.settings.appearance.display_size_small"),
+        value: TVTypographyScale.Small,
+        selected: currentTypographyScale === TVTypographyScale.Small,
+      },
+      {
+        label: t("home.settings.appearance.display_size_default"),
+        value: TVTypographyScale.Default,
+        selected: currentTypographyScale === TVTypographyScale.Default,
+      },
+      {
+        label: t("home.settings.appearance.display_size_large"),
+        value: TVTypographyScale.Large,
+        selected: currentTypographyScale === TVTypographyScale.Large,
+      },
+      {
+        label: t("home.settings.appearance.display_size_extra_large"),
+        value: TVTypographyScale.ExtraLarge,
+        selected: currentTypographyScale === TVTypographyScale.ExtraLarge,
+      },
+    ],
+    [t, currentTypographyScale],
+  );
+
+  // Language options
+  const languageOptions: TVOptionItem<string | undefined>[] = useMemo(
+    () => [
+      {
+        label: t("home.settings.languages.system"),
+        value: undefined,
+        selected: !currentLanguage,
+      },
+      ...APP_LANGUAGES.map((lang) => ({
+        label: lang.label,
+        value: lang.value,
+        selected: currentLanguage === lang.value,
+      })),
+    ],
+    [t, currentLanguage],
+  );
+
+  // Inactivity timeout options (TV security feature)
+  const currentInactivityTimeout =
+    settings.inactivityTimeout ?? InactivityTimeout.Disabled;
+
+  const inactivityTimeoutOptions: TVOptionItem<InactivityTimeout>[] = useMemo(
+    () => [
+      {
+        label: t("home.settings.security.inactivity_timeout.disabled"),
+        value: InactivityTimeout.Disabled,
+        selected: currentInactivityTimeout === InactivityTimeout.Disabled,
+      },
+      {
+        label: t("home.settings.security.inactivity_timeout.1_minute"),
+        value: InactivityTimeout.OneMinute,
+        selected: currentInactivityTimeout === InactivityTimeout.OneMinute,
+      },
+      {
+        label: t("home.settings.security.inactivity_timeout.5_minutes"),
+        value: InactivityTimeout.FiveMinutes,
+        selected: currentInactivityTimeout === InactivityTimeout.FiveMinutes,
+      },
+      {
+        label: t("home.settings.security.inactivity_timeout.15_minutes"),
+        value: InactivityTimeout.FifteenMinutes,
+        selected: currentInactivityTimeout === InactivityTimeout.FifteenMinutes,
+      },
+      {
+        label: t("home.settings.security.inactivity_timeout.30_minutes"),
+        value: InactivityTimeout.ThirtyMinutes,
+        selected: currentInactivityTimeout === InactivityTimeout.ThirtyMinutes,
+      },
+      {
+        label: t("home.settings.security.inactivity_timeout.1_hour"),
+        value: InactivityTimeout.OneHour,
+        selected: currentInactivityTimeout === InactivityTimeout.OneHour,
+      },
+      {
+        label: t("home.settings.security.inactivity_timeout.4_hours"),
+        value: InactivityTimeout.FourHours,
+        selected: currentInactivityTimeout === InactivityTimeout.FourHours,
+      },
+      {
+        label: t("home.settings.security.inactivity_timeout.24_hours"),
+        value: InactivityTimeout.TwentyFourHours,
+        selected:
+          currentInactivityTimeout === InactivityTimeout.TwentyFourHours,
+      },
+    ],
+    [t, currentInactivityTimeout],
+  );
+
+  // 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.display_size_default");
+  }, [typographyScaleOptions, t]);
+
+  const cacheModeLabel = useMemo(() => {
+    const option = cacheModeOptions.find((o) => o.selected);
+    return option?.label || t("home.settings.buffer.cache_auto");
+  }, [cacheModeOptions, t]);
+
+  const voDriverLabel = useMemo(() => {
+    const option = voDriverOptions.find((o) => o.selected);
+    return option?.label || t("home.settings.vo_driver.gpu_next");
+  }, [voDriverOptions, t]);
+
+  const languageLabel = useMemo(() => {
+    if (!currentLanguage) return t("home.settings.languages.system");
+    const option = APP_LANGUAGES.find((l) => l.value === currentLanguage);
+    return option?.label || t("home.settings.languages.system");
+  }, [currentLanguage, t]);
+
+  const inactivityTimeoutLabel = useMemo(() => {
+    const option = inactivityTimeoutOptions.find((o) => o.selected);
+    return (
+      option?.label || t("home.settings.security.inactivity_timeout.disabled")
+    );
+  }, [inactivityTimeoutOptions, 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>
+
+          {/* Account Section */}
+          <TVSectionHeader title={t("home.settings.switch_user.account")} />
+          <TVSettingsOptionButton
+            label={t("home.settings.switch_user.switch_user")}
+            value={user?.Name || "-"}
+            onPress={handleSwitchUser}
+            disabled={!hasOtherAccounts || isAnyModalOpen}
+            isFirst
+          />
+
+          {/* Security Section */}
+          <TVSectionHeader title={t("home.settings.security.title")} />
+          <TVSettingsOptionButton
+            label={t("home.settings.security.inactivity_timeout.title")}
+            value={inactivityTimeoutLabel}
+            onPress={() =>
+              showOptions({
+                title: t("home.settings.security.inactivity_timeout.title"),
+                options: inactivityTimeoutOptions,
+                onSelect: (value) =>
+                  updateSettings({ inactivityTimeout: value }),
+              })
+            }
+          />
+
+          {/* 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 }),
+              })
+            }
+          />
+
+          {/* 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.mpvSubtitleScale ?? 1.0}
+            onDecrease={() => {
+              const newValue = Math.max(
+                0.1,
+                (settings.mpvSubtitleScale ?? 1.0) - 0.1,
+              );
+              updateSettings({
+                mpvSubtitleScale: Math.round(newValue * 10) / 10,
+              });
+            }}
+            onIncrease={() => {
+              const newValue = Math.min(
+                3.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>
+
+          {/* Buffer Settings Section */}
+          <TVSectionHeader title={t("home.settings.buffer.title")} />
+          <TVSettingsOptionButton
+            label={t("home.settings.buffer.cache_mode")}
+            value={cacheModeLabel}
+            onPress={() =>
+              showOptions({
+                title: t("home.settings.buffer.cache_mode"),
+                options: cacheModeOptions,
+                onSelect: (value) => updateSettings({ mpvCacheEnabled: value }),
+              })
+            }
+          />
+
+          {/* Video Output Section */}
+          <TVSectionHeader title={t("home.settings.vo_driver.title")} />
+          <TVSettingsOptionButton
+            label={t("home.settings.vo_driver.vo_mode")}
+            value={voDriverLabel}
+            onPress={() =>
+              showOptions({
+                title: t("home.settings.vo_driver.vo_mode"),
+                options: voDriverOptions,
+                onSelect: (value) => updateSettings({ mpvVoDriver: value }),
+              })
+            }
+          />
+          <TVSettingsStepper
+            label={t("home.settings.buffer.buffer_duration")}
+            value={settings.mpvCacheSeconds ?? 10}
+            onDecrease={() => {
+              const newValue = Math.max(
+                5,
+                (settings.mpvCacheSeconds ?? 10) - 5,
+              );
+              updateSettings({ mpvCacheSeconds: newValue });
+            }}
+            onIncrease={() => {
+              const newValue = Math.min(
+                120,
+                (settings.mpvCacheSeconds ?? 10) + 5,
+              );
+              updateSettings({ mpvCacheSeconds: newValue });
+            }}
+            formatValue={(v) => `${v}s`}
+          />
+          <TVSettingsStepper
+            label={t("home.settings.buffer.max_cache_size")}
+            value={settings.mpvDemuxerMaxBytes ?? 150}
+            onDecrease={() => {
+              const newValue = Math.max(
+                50,
+                (settings.mpvDemuxerMaxBytes ?? 150) - 25,
+              );
+              updateSettings({ mpvDemuxerMaxBytes: newValue });
+            }}
+            onIncrease={() => {
+              const newValue = Math.min(
+                500,
+                (settings.mpvDemuxerMaxBytes ?? 150) + 25,
+              );
+              updateSettings({ mpvDemuxerMaxBytes: newValue });
+            }}
+            formatValue={(v) => `${v} MB`}
+          />
+          <TVSettingsStepper
+            label={t("home.settings.buffer.max_backward_cache")}
+            value={settings.mpvDemuxerMaxBackBytes ?? 50}
+            onDecrease={() => {
+              const newValue = Math.max(
+                25,
+                (settings.mpvDemuxerMaxBackBytes ?? 50) - 25,
+              );
+              updateSettings({ mpvDemuxerMaxBackBytes: newValue });
+            }}
+            onIncrease={() => {
+              const newValue = Math.min(
+                200,
+                (settings.mpvDemuxerMaxBackBytes ?? 50) + 25,
+              );
+              updateSettings({ mpvDemuxerMaxBackBytes: newValue });
+            }}
+            formatValue={(v) => `${v} MB`}
+          />
+
+          {/* Appearance Section */}
+          <TVSectionHeader title={t("home.settings.appearance.title")} />
+          <TVSettingsOptionButton
+            label={t("home.settings.appearance.display_size")}
+            value={typographyScaleLabel}
+            onPress={() =>
+              showOptions({
+                title: t("home.settings.appearance.display_size"),
+                options: typographyScaleOptions,
+                onSelect: (value) =>
+                  updateSettings({ tvTypographyScale: value }),
+              })
+            }
+          />
+          <TVSettingsOptionButton
+            label={t("home.settings.languages.app_language")}
+            value={languageLabel}
+            onPress={() =>
+              showOptions({
+                title: t("home.settings.languages.app_language"),
+                options: languageOptions,
+                onSelect: (value) =>
+                  updateSettings({ preferedLanguage: 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 })
+            }
+          />
+          <TVSettingsToggle
+            label={t("home.settings.appearance.theme_music")}
+            value={settings.tvThemeMusicEnabled}
+            onToggle={(value) => updateSettings({ tvThemeMusicEnabled: value })}
+          />
+
+          {/* Storage Section */}
+          <TVSectionHeader title={t("home.settings.storage.storage_title")} />
+          <TVSettingsOptionButton
+            label={t("home.settings.storage.clear_all_cache")}
+            value=''
+            onPress={handleClearCache}
+            isFirst
+          />
+
+          {/* 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>
+
+      {/* PIN Entry Modal */}
+      <TVPINEntryModal
+        visible={pinModalVisible}
+        onClose={() => {
+          setPinModalVisible(false);
+          setSelectedAccount(null);
+          setSelectedServer(null);
+        }}
+        onSuccess={handlePinSuccess}
+        onForgotPIN={() => {
+          setPinModalVisible(false);
+          setSelectedAccount(null);
+          setSelectedServer(null);
+        }}
+        serverUrl={selectedServer?.address || ""}
+        userId={selectedAccount?.userId || ""}
+        username={selectedAccount?.username || ""}
+      />
+
+      {/* Password Entry Modal */}
+      <TVPasswordEntryModal
+        visible={passwordModalVisible}
+        onClose={() => {
+          setPasswordModalVisible(false);
+          setSelectedAccount(null);
+          setSelectedServer(null);
+        }}
+        onSubmit={handlePasswordSubmit}
+        username={selectedAccount?.username || ""}
+      />
+    </View>
+  );
+}

app/(auth)/(tabs)/(home)/settings/appearance/hide-libraries/page.tsx

@@ -12,7 +12,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function AppearanceHideLibrariesPage() {
   const { settings, updateSettings, pluginSettings } = useSettings();
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);

app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx

@@ -11,7 +11,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function HideLibrariesPage() {
   const { settings, updateSettings, pluginSettings } = useSettings();
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);

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

@@ -88,12 +88,7 @@ export default function Page() {
   }, [share, loading]);
 
   return (
-    <View
+    <View className='flex-1'>
-      className='flex-1'
-      style={{
-        paddingTop: insets.top + 48,
-      }}
-    >
       <View className='flex flex-row justify-end py-2 px-4 space-x-2'>
         <FilterButton
           id={orderFilterId}
@@ -117,7 +112,10 @@ export default function Page() {
           multiple={true}
         />
       </View>
-      <ScrollView className='pb-4 px-4'>
+      <ScrollView
+        className='pb-4 px-4'
+        contentContainerStyle={{ paddingBottom: insets.bottom }}
+      >
         <View className='flex flex-col space-y-2'>
           {filteredLogs?.map((log, index) => (
             <View className='bg-neutral-900 rounded-xl p-3' key={index}>

app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx

@@ -3,6 +3,8 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { GestureControls } from "@/components/settings/GestureControls";
 import { MediaProvider } from "@/components/settings/MediaContext";
 import { MediaToggles } from "@/components/settings/MediaToggles";
+import { MpvBufferSettings } from "@/components/settings/MpvBufferSettings";
+import { MpvVoSettings } from "@/components/settings/MpvVoSettings";
 import { PlaybackControlsSettings } from "@/components/settings/PlaybackControlsSettings";
 import { ChromecastSettings } from "../../../../../../components/settings/ChromecastSettings";
 
@@ -26,6 +28,8 @@ export default function PlaybackControlsPage() {
             <MediaToggles className='mb-4' />
             <GestureControls className='mb-4' />
             <PlaybackControlsSettings />
+            <MpvBufferSettings />
+            <MpvVoSettings />
           </MediaProvider>
         </View>
         {!Platform.isTV && <ChromecastSettings />}

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

@@ -4,7 +4,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
 import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function JellyseerrPluginPage() {
   const { pluginSettings } = useSettings();
   const insets = useSafeAreaInsets();
 
@@ -18,7 +18,7 @@ export default function page() {
     >
       <DisabledSetting
         disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
-        className='px-4'
+        className='p-4'
       >
         <JellyseerrSettings />
       </DisabledSetting>

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

@@ -4,7 +4,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
 import { KefinTweaksSettings } from "@/components/settings/KefinTweaks";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function KefinTweaksPage() {
   const { pluginSettings } = useSettings();
   const insets = useSafeAreaInsets();
 
@@ -18,7 +18,7 @@ export default function page() {
     >
       <DisabledSetting
         disabled={pluginSettings?.useKefinTweaks?.locked === true}
-        className='px-4'
+        className='p-4'
       >
         <KefinTweaksSettings />
       </DisabledSetting>

app/(auth)/(tabs)/(home)/settings/plugins/marlin-search/page.tsx

@@ -18,7 +18,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
 import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function MarlinSearchPage() {
   const navigation = useNavigation();
 
   const { t } = useTranslation();

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

@@ -17,7 +17,7 @@ import { ListItem } from "@/components/list/ListItem";
 import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function StreamystatsPage() {
   const { t } = useTranslation();
   const navigation = useNavigation();
   const insets = useSafeAreaInsets();
@@ -114,7 +114,7 @@ export default function page() {
   };
 
   const handleRefreshFromServer = useCallback(async () => {
-    const newPluginSettings = await refreshStreamyfinPluginSettings(true);
+    const newPluginSettings = await refreshStreamyfinPluginSettings();
     // Update local state with new values
     const newUrl = newPluginSettings?.streamyStatsServerUrl?.value || "";
     setUrl(newUrl);

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

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

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

@@ -15,14 +15,24 @@ import { useAtom } from "jotai";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FlatList, View } from "react-native";
+import { FlatList, Platform, useWindowDimensions, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import {
+  getItemNavigation,
+  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 { TVFilterButton } from "@/components/tv";
+import { TVPosterCard } from "@/components/tv/TVPosterCard";
+import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
+import useRouter from "@/hooks/useAppRouter";
+import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
+import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
@@ -36,19 +46,29 @@ 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();
   const { collectionId } = searchParams as { collectionId: string };
 
+  const posterSizes = useScaledTVPosterSizes();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const navigation = useNavigation();
+  const router = useRouter();
+  const { showOptions } = useTVOptionModal();
+  const { showItemActions } = useTVItemActionModal();
+  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);
@@ -56,7 +76,7 @@ const page: React.FC = () => {
   const [sortBy, setSortBy] = useAtom(sortByAtom);
   const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
 
-  const { data: collection } = useQuery({
+  const { data: collection, isLoading: isCollectionLoading } = useQuery({
     queryKey: ["collection", collectionId],
     queryFn: async () => {
       if (!api) return null;
@@ -71,6 +91,46 @@ 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]);
@@ -87,6 +147,18 @@ const page: React.FC = () => {
     setSortBy([sortByOption]);
   }, [navigation, collection]);
 
+  // Calculate columns for TV grid
+  const nrOfCols = useMemo(() => {
+    if (Platform.isTV) {
+      const itemWidth = posterSizes.poster + 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,
@@ -98,7 +170,7 @@ const page: React.FC = () => {
       const response = await getItemsApi(api).getItems({
         userId: user?.Id,
         parentId: collectionId,
-        limit: 18,
+        limit: Platform.isTV ? 36 : 18,
         startIndex: pageParam,
         // Set one ordering at a time. As collections do not work with correctly with multiple.
         sortBy: [sortBy[0]],
@@ -114,7 +186,7 @@ const page: React.FC = () => {
         genres: selectedGenres,
         tags: selectedTags,
         years: selectedYears.map((year) => Number.parseInt(year, 10)),
-        includeItemTypes: ["Movie", "Series"],
+        includeItemTypes: ["Movie", "Series", "Season"],
       });
 
       return response.data || null;
@@ -123,6 +195,7 @@ const page: React.FC = () => {
       api,
       user?.Id,
       collection,
+      collectionId,
       selectedGenres,
       selectedYears,
       selectedTags,
@@ -131,39 +204,40 @@ const page: React.FC = () => {
     ],
   );
 
-  const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
-    queryKey: [
+    useInfiniteQuery({
-      "collection-items",
+      queryKey: [
-      collection,
+        "collection-items",
-      selectedGenres,
+        collectionId,
-      selectedYears,
+        selectedGenres,
-      selectedTags,
+        selectedYears,
-      sortBy,
+        selectedTags,
-      sortOrder,
+        sortBy,
-    ],
+        sortOrder,
-    queryFn: fetchItems,
+      ],
-    getNextPageParam: (lastPage, pages) => {
+      queryFn: fetchItems,
-      if (
+      getNextPageParam: (lastPage, pages) => {
-        !lastPage?.Items ||
+        if (
-        !lastPage?.TotalRecordCount ||
+          !lastPage?.Items ||
-        lastPage?.TotalRecordCount === 0
+          !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;
+        }
         return undefined;
-
+      },
-      const totalItems = lastPage.TotalRecordCount;
+      initialPageParam: 0,
-      const accumulatedItems = pages.reduce(
+      enabled: !!api && !!user?.Id && !!collection,
-        (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 (
@@ -195,7 +269,6 @@ const page: React.FC = () => {
           }}
         >
           <ItemPoster item={item} />
-          {/* <MoviePoster item={item} /> */}
           <ItemCardText item={item} />
         </View>
       </TouchableItemRouter>
@@ -203,9 +276,34 @@ const page: React.FC = () => {
     [orientation],
   );
 
-  const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
+  const renderTVItem = useCallback(
+    ({ item }: { item: BaseItemDto }) => {
+      const handlePress = () => {
+        const navTarget = getItemNavigation(item, "(home)");
+        router.push(navTarget as any);
+      };
 
-  const _insets = useSafeAreaInsets();
+      return (
+        <View
+          style={{
+            marginRight: TV_ITEM_GAP,
+            marginBottom: TV_ITEM_GAP,
+          }}
+        >
+          <TVPosterCard
+            item={item}
+            orientation='vertical'
+            onPress={handlePress}
+            onLongPress={() => showItemActions(item)}
+            width={posterSizes.poster}
+          />
+        </View>
+      );
+    },
+    [router, showItemActions, posterSizes.poster],
+  );
+
+  const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
 
   const ListHeaderComponent = useCallback(
     () => (
@@ -372,48 +470,315 @@ 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;
 
-  return (
+  // Mobile return
-    <FlashList
+  if (!Platform.isTV) {
-      ListEmptyComponent={
+    return (
-        <View className='flex flex-col items-center justify-center h-full'>
+      <FlashList
-          <Text className='font-bold text-xl text-neutral-500'>
+        ListEmptyComponent={
-            {t("search.no_results")}
+          <View className='flex flex-col items-center justify-center h-full'>
-          </Text>
+            <Text className='font-bold text-xl text-neutral-500'>
-        </View>
+              {t("search.no_results")}
-      }
+            </Text>
-      extraData={[
+          </View>
-        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();
         }
-      }}
+        extraData={[
-      onEndReachedThreshold={0.5}
+          selectedGenres,
-      ListHeaderComponent={ListHeaderComponent}
+          selectedYears,
-      contentContainerStyle={{ paddingBottom: 24 }}
+          selectedTags,
-      ItemSeparatorComponent={() => (
+          sortBy,
-        <View
+          sortOrder,
-          style={{
+        ]}
-            width: 10,
+        contentInsetAdjustmentBehavior='automatic'
-            height: 10,
+        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>
+        }
+        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>
   );
 };
 

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

@@ -3,9 +3,8 @@ import { useLocalSearchParams } from "expo-router";
 import type React from "react";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import Animated, {
-  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -15,6 +14,10 @@ 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 };
   const { t } = useTranslation();
@@ -24,14 +27,20 @@ const Page: React.FC = () => {
 
   // Exclude MediaSources/MediaStreams from initial fetch for faster loading
   // (especially important for plugins like Gelato)
-  const { data: item, isError } = useItemQuery(id, isOffline, undefined, [
+  const {
+    data: item,
+    isError,
+    isLoading,
+  } = useItemQuery(id, isOffline, undefined, [
     ItemFields.MediaSources,
     ItemFields.MediaSourceCount,
     ItemFields.MediaStreams,
   ]);
 
-  // Lazily preload item with full media sources in background
+  // Lazily preload item with full media sources in background — never cache
-  const { data: itemWithSources } = useItemQuery(id, isOffline, undefined, []);
+  const { data: itemWithSources } = useItemQuery(id, isOffline, undefined, [], {
+    gcTime: 0,
+  });
 
   const opacity = useSharedValue(1);
   const animatedStyle = useAnimatedStyle(() => {
@@ -40,33 +49,14 @@ const Page: React.FC = () => {
     };
   });
 
-  const fadeOut = (callback: any) => {
+  // Fast fade out when item loads (no setTimeout delay)
-    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) {
-      fadeOut(() => {});
+      opacity.value = withTiming(0, { duration: 150 });
     } else {
-      fadeIn(() => {});
+      opacity.value = withTiming(1, { duration: 150 });
     }
-  }, [item]);
+  }, [item, opacity]);
 
   if (isError)
     return (
@@ -78,31 +68,46 @@ const Page: React.FC = () => {
   return (
     <OfflineModeProvider isOffline={isOffline}>
       <View className='flex flex-1 relative'>
-        <Animated.View
+        {/* Always render ItemContent - it handles loading state internally on TV */}
-          pointerEvents={"none"}
+        <ItemContent
-          style={[animatedStyle]}
+          item={item}
-          className='absolute top-0 left-0 flex flex-col items-start h-screen w-screen px-4 z-50 bg-black'
+          itemWithSources={itemWithSources}
-        >
+          isLoading={isLoading}
-          <View
+        />
-            style={{
+
-              height: item?.Type === "Episode" ? 300 : 450,
+        {/* Skeleton overlay - fades out when content loads */}
-            }}
+        {!item && (
-            className='bg-transparent rounded-lg mb-4 w-full'
+          <Animated.View
-          />
+            pointerEvents={"none"}
-          <View className='h-6 bg-neutral-900 rounded mb-4 w-14' />
+            style={[animatedStyle]}
-          <View className='h-10 bg-neutral-900 rounded-lg mb-2 w-1/2' />
+            className='absolute top-0 left-0 flex flex-col items-start h-screen w-screen z-50 bg-black'
-          <View className='h-3 bg-neutral-900 rounded mb-3 w-8' />
+          >
-          <View className='flex flex-row space-x-1 mb-8'>
+            {Platform.isTV && ItemContentSkeletonTV ? (
-            <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+              <ItemContentSkeletonTV />
-            <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 style={{ paddingHorizontal: 16, width: "100%" }}>
-          </View>
+                <View
-          <View className='h-3 bg-neutral-900 rounded w-2/3 mb-1' />
+                  style={{
-          <View className='h-10 bg-neutral-900 rounded-lg w-full mb-2' />
+                    height: 450,
-          <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' />
+                  className='bg-transparent rounded-lg mb-4 w-full'
-        </Animated.View>
+                />
-        {item && <ItemContent item={item} itemWithSources={itemWithSources} />}
+                <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>
   );

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/jellyseerr/company/[companyId].tsx

@@ -13,7 +13,7 @@ import {
 } from "@/utils/jellyseerr/server/models/Search";
 import { COMPANY_LOGO_IMAGE_FILTER } from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
 
-export default function page() {
+export default function JellyseerrCompanyPage() {
   const local = useLocalSearchParams();
   const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
 

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/jellyseerr/genre/[genreId].tsx

@@ -9,7 +9,7 @@ import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
 import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 
-export default function page() {
+export default function JellyseerrGenrePage() {
   const local = useLocalSearchParams();
   const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
 

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

@@ -6,6 +6,7 @@ import {
   BottomSheetTextInput,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
+import type { BottomSheetModalMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
@@ -21,6 +22,7 @@ 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";
@@ -52,7 +54,8 @@ import type {
 } from "@/utils/jellyseerr/server/models/Search";
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 
-const Page: React.FC = () => {
+// Mobile page component
+const MobilePage: React.FC = () => {
   const insets = useSafeAreaInsets();
   const params = useLocalSearchParams();
   const { t } = useTranslation();
@@ -74,7 +77,7 @@ const Page: React.FC = () => {
   const [issueMessage, setIssueMessage] = useState<string>();
   const [requestBody, _setRequestBody] = useState<MediaRequestBody>();
   const [issueTypeDropdownOpen, setIssueTypeDropdownOpen] = useState(false);
-  const advancedReqModalRef = useRef<BottomSheetModal>(null);
+  const advancedReqModalRef = useRef<BottomSheetModalMethods>(null);
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   const {
@@ -542,4 +545,12 @@ const Page: 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)/jellyseerr/person/[personId].tsx

@@ -11,7 +11,7 @@ import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import type { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
 
-export default function page() {
+export default function JellyseerrPersonPage() {
   const local = useLocalSearchParams();
   const { t } = useTranslation();
 

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/_layout.tsx

@@ -1,13 +1,14 @@
+import { Slot, Stack, withLayoutContext } from "expo-router";
 import {
   createMaterialTopTabNavigator,
   MaterialTopTabNavigationEventMap,
   MaterialTopTabNavigationOptions,
-} from "@react-navigation/material-top-tabs";
+} from "expo-router/js-top-tabs";
 import type {
   ParamListBase,
   TabNavigationState,
-} from "@react-navigation/native";
+} from "expo-router/react-navigation";
-import { Stack, withLayoutContext } from "expo-router";
+import { Platform } from "react-native";
 
 const { Navigator } = createMaterialTopTabNavigator();
 
@@ -19,6 +20,17 @@ export const Tab = withLayoutContext<
 >(Navigator);
 
 const Layout = () => {
+  // On TV, skip the Material Top Tab Navigator and render children directly
+  // The TV version handles its own tab navigation internally
+  if (Platform.isTV) {
+    return (
+      <>
+        <Stack.Screen options={{ headerShown: false }} />
+        <Slot />
+      </>
+    );
+  }
+
   return (
     <>
       <Stack.Screen options={{ title: "Live TV" }} />

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/channels.tsx

@@ -8,7 +8,7 @@ import { ItemImage } from "@/components/common/ItemImage";
 import { Text } from "@/components/common/Text";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 
-export default function page() {
+export default function LiveTvChannelsPage() {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const _insets = useSafeAreaInsets();

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/guide.tsx

@@ -17,7 +17,7 @@ const ITEMS_PER_PAGE = 20;
 
 const MemoizedLiveTVGuideRow = React.memo(LiveTVGuideRow);
 
-export default function page() {
+export default function LiveTvGuidePage() {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const insets = useSafeAreaInsets();

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/programs.tsx

@@ -2,12 +2,21 @@ import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
 import { useAtom } from "jotai";
 import { useTranslation } from "react-i18next";
-import { ScrollView, View } from "react-native";
+import { Platform, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
+import { TVLiveTVPage } from "@/components/livetv/TVLiveTVPage";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 
 export default function page() {
+  if (Platform.isTV) {
+    return <TVLiveTVPage />;
+  }
+
+  return <MobileLiveTVPrograms />;
+}
+
+function MobileLiveTVPrograms() {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const insets = useSafeAreaInsets();

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/livetv/recordings.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { Text } from "@/components/common/Text";
 
-export default function page() {
+export default function LiveTvRecordingsPage() {
   const { t } = useTranslation();
   return (
     <View className='flex items-center justify-center h-full -mt-12'>

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 { View } from "react-native";
+import { Platform, View } from "react-native";
 import { InfiniteHorizontalScroll } from "@/components/common/InfiniteHorizontalScroll";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
@@ -15,6 +15,7 @@ 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";
@@ -23,6 +24,16 @@ 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,6 +14,7 @@ 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";
@@ -61,6 +62,7 @@ const page: React.FC = () => {
       });
     },
     staleTime: isOffline ? Infinity : 60 * 1000,
+    refetchInterval: !isOffline && Platform.isTV ? 60 * 1000 : undefined,
     enabled: isOffline || (!!api && !!user?.Id),
   });
 
@@ -116,7 +118,8 @@ const page: React.FC = () => {
           (a.ParentIndexNumber ?? 0) - (b.ParentIndexNumber ?? 0) ||
           (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0),
       ),
-    staleTime: isOffline ? Infinity : 60,
+    staleTime: isOffline ? Infinity : 60 * 1000,
+    refetchInterval: !isOffline && Platform.isTV ? 60 * 1000 : undefined,
     enabled: isOffline || (!!api && !!user?.Id),
   });
 
@@ -159,6 +162,19 @@ const page: React.FC = () => {
   // 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>
+    );
+  }
+
   return (
     <OfflineModeProvider isOffline={isOffline}>
       <ParallaxScrollView

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

@@ -11,20 +11,38 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { FlatList, useWindowDimensions, View } from "react-native";
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  useWindowDimensions,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import {
+  getItemNavigation,
+  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 { TVFilterButton, TVFocusablePoster } from "@/components/tv";
+import { TVPosterCard } from "@/components/tv/TVPosterCard";
+import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
+import { useScaledTVTypography } from "@/constants/TVTypography";
+import useRouter from "@/hooks/useAppRouter";
 import { useOrientation } from "@/hooks/useOrientation";
+import { useRefreshLibraryOnFocus } from "@/hooks/useRefreshLibraryOnFocus";
+import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
+import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
@@ -48,6 +66,13 @@ import {
   yearFilterAtom,
 } from "@/utils/atoms/filters";
 import { useSettings } from "@/utils/atoms/settings";
+import type { TVOptionItem } from "@/utils/atoms/tvOptionModal";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+
+const TV_ITEM_GAP = 20;
+const TV_HORIZONTAL_PADDING = 60;
+const _TV_SCALE_PADDING = 20;
+const TV_PLAYLIST_SQUARE_SIZE = 180;
 
 const Page = () => {
   const searchParams = useLocalSearchParams() as {
@@ -58,6 +83,8 @@ const Page = () => {
   };
   const { libraryId } = searchParams;
 
+  const typography = useScaledTVTypography();
+  const posterSizes = useScaledTVPosterSizes();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const { width: screenWidth } = useWindowDimensions();
@@ -78,7 +105,54 @@ const Page = () => {
 
   const { orientation } = useOrientation();
 
+  // Fallback refresh for newly added content when returning to the library
+  // (primary path is the LibraryChanged WebSocket event).
+  useRefreshLibraryOnFocus();
+
   const { t } = useTranslation();
+  const router = useRouter();
+  const { showOptions } = useTVOptionModal();
+  const { showItemActions } = useTVItemActionModal();
+
+  // 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)
@@ -162,6 +236,10 @@ 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;
@@ -213,6 +291,8 @@ const Page = () => {
         itemType = "Video";
       } else if (library.CollectionType === "musicvideos") {
         itemType = "MusicVideo";
+      } else if (library.CollectionType === "playlists") {
+        itemType = "Playlist";
       }
 
       const response = await getItemsApi(api).getItems({
@@ -232,6 +312,9 @@ const Page = () => {
         tags: selectedTags,
         years: selectedYears.map((year) => Number.parseInt(year, 10)),
         includeItemTypes: itemType ? [itemType] : undefined,
+        ...(Platform.isTV && library.CollectionType === "playlists"
+          ? { mediaTypes: ["Video"] }
+          : {}),
       });
 
       return response.data || null;
@@ -322,7 +405,88 @@ const Page = () => {
         </View>
       </TouchableItemRouter>
     ),
-    [orientation],
+    [orientation, nrOfCols],
+  );
+
+  const renderTVItem = useCallback(
+    (item: BaseItemDto) => {
+      const handlePress = () => {
+        if (item.Type === "Playlist") {
+          router.push({
+            pathname: "/(auth)/(tabs)/(libraries)/[libraryId]",
+            params: { libraryId: item.Id! },
+          });
+          return;
+        }
+        const navTarget = getItemNavigation(item, "(libraries)");
+        router.push(navTarget as any);
+      };
+
+      // Special rendering for Playlist items (square thumbnails)
+      if (item.Type === "Playlist") {
+        const playlistImageUrl = getPrimaryImageUrl({
+          api,
+          item,
+          width: TV_PLAYLIST_SQUARE_SIZE * 2,
+        });
+
+        return (
+          <View
+            key={item.Id}
+            style={{
+              width: TV_PLAYLIST_SQUARE_SIZE,
+              alignItems: "center",
+            }}
+          >
+            <TVFocusablePoster
+              onPress={handlePress}
+              onLongPress={() => showItemActions(item)}
+            >
+              <View
+                style={{
+                  width: TV_PLAYLIST_SQUARE_SIZE,
+                  aspectRatio: 1,
+                  borderRadius: 16,
+                  overflow: "hidden",
+                  backgroundColor: "#1a1a1a",
+                }}
+              >
+                <Image
+                  source={playlistImageUrl ? { uri: playlistImageUrl } : null}
+                  style={{ width: "100%", height: "100%" }}
+                  contentFit='cover'
+                  cachePolicy='memory-disk'
+                />
+              </View>
+            </TVFocusablePoster>
+            <View style={{ marginTop: 12, alignItems: "center" }}>
+              <Text
+                numberOfLines={1}
+                style={{
+                  fontSize: typography.callout,
+                  color: "#FFFFFF",
+                  textAlign: "center",
+                }}
+              >
+                {item.Name}
+              </Text>
+            </View>
+          </View>
+        );
+      }
+
+      return (
+        <TVPosterCard
+          key={item.Id}
+          item={item}
+          orientation='vertical'
+          onPress={handlePress}
+          onLongPress={() => showItemActions(item)}
+          width={posterSizes.poster}
+        />
+      );
+    },
+    [router, showItemActions, api, typography],
   );
 
   const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
@@ -509,6 +673,188 @@ 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)
@@ -518,43 +864,176 @@ 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 (
-    <FlashList
+    <ScrollView
-      key={orientation}
+      style={{ flex: 1 }}
-      ListEmptyComponent={
+      contentContainerStyle={{
-        <View className='flex flex-col items-center justify-center h-full'>
+        paddingTop: insets.top + 100,
-          <Text className='font-bold text-xl text-neutral-500'>
+        paddingBottom: insets.bottom + 60,
-            {t("library.no_results")}
+        paddingHorizontal: insets.left + TV_HORIZONTAL_PADDING,
-          </Text>
+      }}
-        </View>
+      onScroll={({ nativeEvent }) => {
-      }
+        // Load more when near bottom
-      contentInsetAdjustmentBehavior='automatic'
+        const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
-      data={flatData}
+        const isNearBottom =
-      renderItem={renderItem}
+          layoutMeasurement.height + contentOffset.y >=
-      extraData={[orientation, nrOfCols]}
+          contentSize.height - 500;
-      keyExtractor={keyExtractor}
+        if (isNearBottom && hasNextPage && !isFetching) {
-      numColumns={nrOfCols}
-      onEndReached={() => {
-        if (hasNextPage) {
           fetchNextPage();
         }
       }}
-      onEndReachedThreshold={1}
+      scrollEventThrottle={400}
-      ListHeaderComponent={ListHeaderComponent}
+    >
-      contentContainerStyle={{
+      {/* Filter bar */}
-        paddingBottom: 24,
+      <View
-        paddingLeft: insets.left,
+        style={{
-        paddingRight: insets.right,
+          flexDirection: "row",
-      }}
+          flexWrap: "nowrap",
-      ItemSeparatorComponent={() => (
+          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={{
-            width: 10,
+            flex: 1,
-            height: 10,
+            justifyContent: "center",
+            alignItems: "center",
+            paddingTop: 100,
           }}
-        />
+        >
+          <Text style={{ fontSize: typography.body, color: "#737373" }}>
+            {t("library.no_results")}
+          </Text>
+        </View>
+      ) : (
+        <View
+          style={{
+            flexDirection: "row",
+            flexWrap: "wrap",
+            justifyContent: "center",
+            gap: TV_ITEM_GAP,
+          }}
+        >
+          {flatData.map((item) => renderTVItem(item))}
+        </View>
       )}
-    />
+
+      {/* Loading indicator */}
+      {isFetching && (
+        <View style={{ paddingVertical: 20 }}>
+          <Loader />
+        </View>
+      )}
+    </ScrollView>
   );
 };
 

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

@@ -166,7 +166,7 @@ export default function IndexLayout() {
                 open={dropdownOpen}
                 onOpenChange={setDropdownOpen}
                 trigger={
-                  <View className='pl-1.5'>
+                  <View>
                     <Ionicons
                       name='ellipsis-horizontal-outline'
                       size={24}

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

@@ -1,109 +1,11 @@
-import {
+import { Platform } from "react-native";
-  getUserLibraryApi,
+import { Libraries } from "@/components/library/Libraries";
-  getUserViewsApi,
+import { TVLibraries } from "@/components/library/TVLibraries";
-} 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 index() {
+export default function LibrariesPage() {
-  const [api] = useAtom(apiAtom);
+  if (Platform.isTV) {
-  const [user] = useAtom(userAtom);
+    return <TVLibraries />;
-  const queryClient = useQueryClient();
+  }
-  const { settings } = useSettings();
 
-  const { t } = useTranslation();
+  return <Libraries />;
-
-  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

@@ -1,13 +1,13 @@
+import { Stack, useLocalSearchParams, withLayoutContext } from "expo-router";
 import {
   createMaterialTopTabNavigator,
   MaterialTopTabNavigationEventMap,
   MaterialTopTabNavigationOptions,
-} from "@react-navigation/material-top-tabs";
+} from "expo-router/js-top-tabs";
 import type {
   ParamListBase,
   TabNavigationState,
-} from "@react-navigation/native";
+} from "expo-router/react-navigation";
-import { Stack, useLocalSearchParams, withLayoutContext } from "expo-router";
 import { useTranslation } from "react-i18next";
 
 const { Navigator } = createMaterialTopTabNavigator();

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

@@ -1,8 +1,8 @@
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useRoute } from "@react-navigation/native";
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
+import { useRoute } from "expo-router/react-navigation";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,8 +1,8 @@
 import { getArtistsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useRoute } from "@react-navigation/native";
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
+import { useRoute } from "expo-router/react-navigation";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,9 +1,9 @@
 import { Ionicons } from "@expo/vector-icons";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useNavigation, useRoute } from "@react-navigation/native";
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
+import { useNavigation, useRoute } from "expo-router/react-navigation";
 import { useAtom } from "jotai";
 import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,9 +1,9 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useRoute } from "@react-navigation/native";
 import { FlashList } from "@shopify/flash-list";
 import { useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
+import { useRoute } from "expo-router/react-navigation";
 import { useAtom } from "jotai";
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -7,8 +7,9 @@ import { useAsyncDebouncer } from "@tanstack/react-pacer";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation } from "expo-router";
+import { useLocalSearchParams, useNavigation, useSegments } from "expo-router";
 import { useAtom } from "jotai";
+import { orderBy, uniqBy } from "lodash";
 import {
   useCallback,
   useEffect,
@@ -22,9 +23,11 @@ import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
-import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import {
+  getItemNavigation,
+  TouchableItemRouter,
+} from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import {
   JellyseerrSearchSort,
@@ -36,12 +39,20 @@ 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 { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 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";
@@ -55,10 +66,13 @@ const exampleSearches = [
   "The Mandalorian",
 ];
 
-export default function search() {
+export default function SearchPage() {
   const params = useLocalSearchParams();
   const insets = useSafeAreaInsets();
   const router = useRouter();
+  const { showItemActions } = useTVItemActionModal();
+  const segments = useSegments();
+  const from = (segments as string[])[2] || "(search)";
 
   const [user] = useAtom(userAtom);
 
@@ -199,9 +213,7 @@ export default function search() {
           return [];
         }
 
-        const url = `${
+        const url = `${settings.marlinServerUrl}/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
-          settings.marlinServerUrl
-        }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
           .map((type) => encodeURIComponent(type))
           .join("&includeItemTypes=")}`;
 
@@ -209,7 +221,7 @@ export default function search() {
 
         const ids = response1.data.ids;
 
-        if (!ids || !ids.length) {
+        if (!ids?.length) {
           return [];
         }
 
@@ -293,6 +305,9 @@ export default function search() {
         },
         hideWhenScrolling: false,
         autoFocus: false,
+        // Android: placeholder and icon color
+        hintTextColor: "#fff",
+        headerIconColor: "#fff",
       },
     });
   }, [navigation]);
@@ -440,6 +455,180 @@ export default function search() {
     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}
+        onItemLongPress={showItemActions}
+        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 (
     <ScrollView
       keyboardDismissMode='on-drag'
@@ -450,26 +639,6 @@ export default function search() {
         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 }}
@@ -772,7 +941,7 @@ export default function search() {
               </Text>
             </View>
           ) : debouncedSearch.length === 0 ? (
-            <View className='mt-4 flex flex-col items-center space-y-2'>
+            <View className='mt-2 flex flex-col items-center space-y-2'>
               {exampleSearches.map((e) => (
                 <TouchableOpacity
                   onPress={() => {

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

@@ -0,0 +1,21 @@
+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

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

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

@@ -8,7 +8,9 @@ import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   Alert,
+  Platform,
   RefreshControl,
+  ScrollView,
   TouchableOpacity,
   useWindowDimensions,
   View,
@@ -16,11 +18,18 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { HeaderBackButton } from "@/components/common/HeaderBackButton";
 import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import {
+  getItemNavigation,
+  TouchableItemRouter,
+} from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import { ItemPoster } from "@/components/posters/ItemPoster";
+import { TVPosterCard } from "@/components/tv/TVPosterCard";
+import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
+import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useOrientation } from "@/hooks/useOrientation";
+import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import {
   useDeleteWatchlist,
   useRemoveFromWatchlist,
@@ -32,9 +41,15 @@ import {
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { userAtom } from "@/providers/JellyfinProvider";
 
+const TV_ITEM_GAP = 20;
+const TV_HORIZONTAL_PADDING = 60;
+
 export default function WatchlistDetailScreen() {
+  const typography = useScaledTVTypography();
+  const posterSizes = useScaledTVPosterSizes();
   const { t } = useTranslation();
   const router = useRouter();
+  const { showItemActions } = useTVItemActionModal();
   const navigation = useNavigation();
   const insets = useSafeAreaInsets();
   const { watchlistId } = useLocalSearchParams<{ watchlistId: string }>();
@@ -47,6 +62,8 @@ 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;
@@ -153,6 +170,28 @@ 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 (
+        <TVPosterCard
+          key={item.Id}
+          item={item}
+          orientation='vertical'
+          onPress={handlePress}
+          onLongPress={() => showItemActions(item)}
+          hasTVPreferredFocus={index === 0}
+          width={posterSizes.poster}
+        />
+      );
+    },
+    [router, showItemActions, posterSizes.poster],
+  );
+
   const renderItem = useCallback(
     ({ item, index }: { item: BaseItemDto; index: number }) => (
       <TouchableItemRouter
@@ -266,6 +305,120 @@ 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

@@ -40,7 +40,7 @@ export default function WatchlistsLayout() {
         name='[watchlistId]'
         options={{
           title: "",
-          headerShown: true,
+          headerShown: !Platform.isTV,
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
@@ -51,7 +51,7 @@ export default function WatchlistsLayout() {
         options={{
           title: t("watchlists.create_title"),
           presentation: "modal",
-          headerShown: true,
+          headerShown: !Platform.isTV,
           headerStyle: { backgroundColor: "#171717" },
           headerTintColor: "white",
           contentStyle: { backgroundColor: "#171717" },
@@ -62,7 +62,7 @@ export default function WatchlistsLayout() {
         options={{
           title: t("watchlists.edit_title"),
           presentation: "modal",
-          headerShown: true,
+          headerShown: !Platform.isTV,
           headerStyle: { backgroundColor: "#171717" },
           headerTintColor: "white",
           contentStyle: { backgroundColor: "#171717" },

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

@@ -3,20 +3,29 @@ import {
   type NativeBottomTabNavigationEventMap,
   type NativeBottomTabNavigationOptions,
 } from "@bottom-tabs/react-navigation";
+import { withLayoutContext } from "expo-router";
 import type {
   ParamListBase,
   TabNavigationState,
-} from "@react-navigation/native";
+} from "expo-router/react-navigation";
-import { withLayoutContext } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
-import { MiniPlayerBar } from "@/components/music/MiniPlayerBar";
+import { CastAutoplayWatcher } from "@/components/casting/CastAutoplayWatcher";
-import { MusicPlaybackEngine } from "@/components/music/MusicPlaybackEngine";
+import { CastingMiniPlayer } from "@/components/casting/CastingMiniPlayer";
 import { Colors } from "@/constants/Colors";
+import { useTVHomeBackHandler } from "@/hooks/useTVBackHandler";
 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;
+
 const { Navigator } = createNativeBottomTabNavigator();
 
 export const NativeTabs = withLayoutContext<
@@ -30,6 +39,9 @@ export default function TabLayout() {
   const { settings } = useSettings();
   const { t } = useTranslation();
 
+  // Handle TV back button - prevent app exit when at root
+  useTVHomeBackHandler();
+
   return (
     <View style={{ flex: 1 }}>
       <SystemBars hidden={false} style='light' />
@@ -117,7 +129,20 @@ 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/gear.png") //Should maybe use other libraries to have it uniform
+                : (_e) => ({ sfSymbol: "gearshape.fill" }),
+          }}
+        />
       </NativeTabs>
+      <CastingMiniPlayer />
+      <CastAutoplayWatcher />
       <MiniPlayerBar />
       <MusicPlaybackEngine />
     </View>

app/(auth)/casting-player.tsx

@@ -0,0 +1,768 @@
+/**
+ * Unified Casting Player Modal
+ * Protocol-agnostic full-screen player for all supported casting protocols
+ */
+
+import { router, Stack } from "expo-router";
+import { useAtomValue, useSetAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ActivityIndicator, ScrollView, View } from "react-native";
+import { GestureDetector } from "react-native-gesture-handler";
+import GoogleCast, {
+  CastState,
+  MediaPlayerState,
+  useCastDevice,
+  useCastState,
+  useMediaStatus,
+  useRemoteMediaClient,
+} from "react-native-google-cast";
+import Animated from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { BITRATES } from "@/components/BitrateSelector";
+import { CastPlayerEpisodeControls } from "@/components/casting/player/CastPlayerEpisodeControls";
+import { CastPlayerHeader } from "@/components/casting/player/CastPlayerHeader";
+import { CastPlayerPoster } from "@/components/casting/player/CastPlayerPoster";
+import { CastPlayerProgressBar } from "@/components/casting/player/CastPlayerProgressBar";
+import { CastPlayerTitle } from "@/components/casting/player/CastPlayerTitle";
+import { CastPlayerTransportControls } from "@/components/casting/player/CastPlayerTransportControls";
+import { ChapterList } from "@/components/chapters/ChapterList";
+import { ChromecastDeviceSheet } from "@/components/chromecast/ChromecastDeviceSheet";
+import { ChromecastEpisodeList } from "@/components/chromecast/ChromecastEpisodeList";
+import { ChromecastSettingsMenu } from "@/components/chromecast/ChromecastSettingsMenu";
+import { useChromecastSegments } from "@/components/chromecast/hooks/useChromecastSegments";
+import { Text } from "@/components/common/Text";
+import { AutoplayCountdown } from "@/components/player/AutoplayCountdown";
+import { useCastDismissGesture } from "@/hooks/useCastDismissGesture";
+import { useCastEpisodes } from "@/hooks/useCastEpisodes";
+import { useCasting } from "@/hooks/useCasting";
+import { useCastPlayerItem } from "@/hooks/useCastPlayerItem";
+import { useCastPlayerProgress } from "@/hooks/useCastPlayerProgress";
+import { useCastSelection } from "@/hooks/useCastSelection";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { castAutoplayAtom } from "@/utils/atoms/castAutoplay";
+import { useSettings } from "@/utils/atoms/settings";
+import { detectCapabilities } from "@/utils/casting/capabilities";
+import { loadCastMedia } from "@/utils/casting/castLoad";
+import { getPosterUrl } from "@/utils/casting/helpers";
+import { resolveSelection } from "@/utils/casting/selection";
+import type { CastSelection } from "@/utils/casting/types";
+import { chapterMarkers } from "@/utils/chapters";
+import {
+  type PlaybackController,
+  useRegisterPlaybackController,
+} from "@/utils/playback/playbackController";
+
+export default function CastingPlayerScreen() {
+  const insets = useSafeAreaInsets();
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const { settings, updateSettings } = useSettings();
+  const { t } = useTranslation();
+
+  // Chromecast autoplay countdown — watcher hook drives this atom; we render
+  // the overlay here when set, and handle Play-now / Cancel from the user.
+  const castAutoplay = useAtomValue(castAutoplayAtom);
+  const setCastAutoplay = useSetAtom(castAutoplayAtom);
+
+  // Get raw Chromecast state directly - same as old implementation
+  const castState = useCastState();
+  const mediaStatus = useMediaStatus();
+  const castDevice = useCastDevice();
+  // Keep hook active for connection - used by remoteMediaClient from useCasting
+  useRemoteMediaClient();
+
+  // Fetch full item data from Jellyfin by ID and derive the effective item
+  const { fetchedItem, currentItem } = useCastPlayerItem({
+    api,
+    user,
+    mediaStatus,
+  });
+
+  // Derive state from raw Chromecast hooks
+  const duration = mediaStatus?.mediaInfo?.streamDuration ?? 0;
+  const isPlaying = mediaStatus?.playerState === MediaPlayerState.PLAYING;
+  const isBuffering = mediaStatus?.playerState === MediaPlayerState.BUFFERING;
+  const currentDevice = castDevice?.friendlyName ?? null;
+
+  // Progress/slider/trickplay cluster: slider shared values, scrub state,
+  // live-progress interpolation, resume-position tracking, trickplay preview.
+  const {
+    sliderProgress,
+    sliderMin,
+    sliderMax,
+    isScrubbing,
+    trickplayTime,
+    setTrickplayTime,
+    progress,
+    resumePositionRef,
+    trickPlayUrl,
+    calculateTrickplayUrl,
+    trickplayInfo,
+  } = useCastPlayerProgress({ mediaStatus, fetchedItem, duration });
+
+  // Only use casting controls if we have a current item to avoid "No session" errors
+  const castingControls = useCasting(currentItem);
+  const {
+    togglePlayPause,
+    skipForward,
+    skipBackward,
+    setVolume,
+    volume,
+    remoteMediaClient,
+  } = currentItem
+    ? castingControls
+    : {
+        togglePlayPause: async () => {},
+        skipForward: async () => {},
+        skipBackward: async () => {},
+        setVolume: () => {},
+        volume: 1,
+        remoteMediaClient: null,
+      };
+
+  // Modal states
+  const [showEpisodeList, setShowEpisodeList] = useState(false);
+  const [showDeviceSheet, setShowDeviceSheet] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const [chapterListVisible, setChapterListVisible] = useState(false);
+
+  // Chapter markers (shown for both episodes and movies).
+  const chapters = currentItem?.Chapters;
+  const hasChapters = chapterMarkers(chapters, duration * 1000).length > 1;
+
+  const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState(1);
+
+  // Reload the cast stream with a full selection; resolves true on success.
+  const reloadWithSelection = useCallback(
+    async (selection: CastSelection): Promise<boolean> => {
+      if (!api || !user?.Id || !currentItem?.Id || !remoteMediaClient) {
+        console.warn("[Casting Player] Cannot reload - missing required data");
+        return false;
+      }
+      const currentPosition = resumePositionRef.current;
+      const result = await loadCastMedia({
+        client: remoteMediaClient,
+        device: castDevice,
+        api,
+        item: currentItem,
+        userId: user.Id,
+        profileMode: settings.chromecastProfile,
+        maxBitrateSetting: settings.chromecastMaxBitrate,
+        options: {
+          mediaSourceId: selection.mediaSourceId,
+          audioStreamIndex: selection.audioStreamIndex,
+          subtitleStreamIndex: selection.subtitleStreamIndex,
+          maxBitrate: selection.maxBitrate,
+          startPositionMs: currentPosition * 1000,
+        },
+      });
+      if (!result.ok) {
+        console.error(
+          "[Casting Player] Failed to reload stream:",
+          result.error,
+        );
+        return false;
+      }
+      return true;
+    },
+    [
+      api,
+      user?.Id,
+      currentItem,
+      remoteMediaClient,
+      castDevice,
+      settings.chromecastProfile,
+      settings.chromecastMaxBitrate,
+    ],
+  );
+
+  const { currentSelection, applySelection } = useCastSelection({
+    currentItem,
+    mediaStatus,
+    reload: reloadWithSelection,
+  });
+
+  // Episode/season cluster: episode list, next episode, season data, loader
+  const { episodes, nextEpisode, seasonData, loadEpisode, loadingEpisodeId } =
+    useCastEpisodes({
+      api,
+      user,
+      currentItem,
+      remoteMediaClient,
+      castDevice,
+      settings,
+    });
+
+  // True while a `loadEpisode` is in flight and `currentItem` (derived from the
+  // cast customData) still describes the previous episode. Used to suppress
+  // episode-dependent secondary UI that would otherwise flash stale data.
+  const isEpisodeTransitioning =
+    loadingEpisodeId != null && loadingEpisodeId !== currentItem?.Id;
+
+  // Expose this player to the app-wide remote-control surface while a cast
+  // session is connected. The individual useCasting methods are each
+  // useCallback-wrapped and stable, so depend on them directly rather than on
+  // the whole `castingControls` object literal (rebuilt every render).
+  const {
+    togglePlayPause: castTogglePlayPause,
+    pause: castPause,
+    play: castPlay,
+    stop: castStop,
+    seek: castSeek,
+    setVolume: castSetVolume,
+  } = castingControls;
+  // toggleMute reads the latest volume without making `volume` a useMemo dep.
+  const volumeRef = useRef(volume);
+  volumeRef.current = volume;
+
+  const castController = useMemo<PlaybackController>(
+    () => ({
+      playPause: () => {
+        castTogglePlayPause();
+      },
+      pause: () => {
+        castPause();
+      },
+      unpause: () => {
+        castPlay();
+      },
+      stop: () => {
+        castStop();
+      },
+      seek: (positionMs) => {
+        castSeek(positionMs);
+      },
+      next: () => {
+        if (nextEpisode) loadEpisode(nextEpisode);
+      },
+      previous: () => {
+        const idx = episodes.findIndex((e) => e.Id === currentItem?.Id);
+        if (idx > 0) loadEpisode(episodes[idx - 1]);
+      },
+      setVolume: (level) => {
+        castSetVolume(level);
+      },
+      toggleMute: () => {
+        castSetVolume(volumeRef.current > 0 ? 0 : 1);
+      },
+    }),
+    [
+      castTogglePlayPause,
+      castPause,
+      castPlay,
+      castStop,
+      castSeek,
+      castSetVolume,
+      episodes,
+      nextEpisode,
+      loadEpisode,
+      currentItem?.Id,
+    ],
+  );
+
+  useRegisterPlaybackController(
+    castController,
+    castState === CastState.CONNECTED,
+  );
+
+  // The MediaSource currently selected, for deriving its tracks.
+  // Derived from fetchedItem: the slim cast-customData item strips per-source
+  // MediaStreams, so only the full fetched item yields correct track lists.
+  const selectedSource = useMemo(
+    () =>
+      fetchedItem?.MediaSources?.find(
+        (s) => s.Id === currentSelection?.mediaSourceId,
+      ) ??
+      fetchedItem?.MediaSources?.[0] ??
+      null,
+    [fetchedItem?.MediaSources, currentSelection?.mediaSourceId],
+  );
+
+  // Real alternate versions (multi-version items).
+  const availableVersions = useMemo(
+    () =>
+      (fetchedItem?.MediaSources ?? []).map((s, i) => ({
+        id: s.Id ?? `source-${i}`,
+        name: s.Name || `${t("casting_player.version")} ${i + 1}`,
+      })),
+    [fetchedItem?.MediaSources, t],
+  );
+
+  // Quality tiers from the shared ladder, capped to BOTH the device's
+  // capability and the media's own bitrate — a tier above either ceiling
+  // would behave identically to "Max", so it is not offered.
+  const availableQualities = useMemo(() => {
+    const caps = detectCapabilities(castDevice, {
+      profileMode: settings.chromecastProfile,
+      maxBitrate: settings.chromecastMaxBitrate,
+    });
+    const mediaBitrate =
+      selectedSource?.Bitrate ??
+      fetchedItem?.MediaStreams?.find((s) => s.Type === "Video")?.BitRate ??
+      Number.POSITIVE_INFINITY;
+    const ceiling = Math.min(caps.maxVideoBitrate, mediaBitrate);
+    return BITRATES.filter((b) => b.value === undefined || b.value <= ceiling);
+  }, [
+    castDevice,
+    settings.chromecastProfile,
+    settings.chromecastMaxBitrate,
+    selectedSource,
+    fetchedItem?.MediaStreams,
+  ]);
+
+  const availableAudioTracks = useMemo(() => {
+    const streams = selectedSource?.MediaStreams ?? fetchedItem?.MediaStreams;
+    if (!streams) return [];
+    return streams
+      .filter((stream) => stream.Type === "Audio")
+      .map((stream) => ({
+        index: stream.Index ?? 0,
+        language: stream.Language || "Unknown",
+        displayTitle:
+          stream.DisplayTitle ||
+          `${stream.Language || "Unknown"} ${stream.Codec || ""}`.trim(),
+        codec: stream.Codec || "Unknown",
+        channels: stream.Channels,
+        bitrate: stream.BitRate,
+      }));
+  }, [selectedSource, fetchedItem?.MediaStreams]);
+
+  const availableSubtitleTracks = useMemo(() => {
+    const streams = selectedSource?.MediaStreams ?? fetchedItem?.MediaStreams;
+    if (!streams) return [];
+    return streams
+      .filter((stream) => stream.Type === "Subtitle")
+      .map((stream) => ({
+        index: stream.Index ?? 0,
+        language: stream.Language || "Unknown",
+        displayTitle:
+          stream.DisplayTitle ||
+          [
+            stream.Language || "Unknown",
+            stream.IsForced ? " (Forced)" : "",
+            stream.Title ? ` - ${stream.Title}` : "",
+          ].join(""),
+        codec: stream.Codec || "Unknown",
+        isForced: stream.IsForced || false,
+        isExternal: stream.IsExternal || false,
+      }));
+  }, [selectedSource, fetchedItem?.MediaStreams]);
+
+  // Autoplay overlay's "Play now" — load the queued next episode immediately.
+  // Mirrors `useCastEpisodes.loadEpisode` exactly (same `loadCastMedia` shape,
+  // same start-position derivation) so the cast load is identical regardless
+  // of whether it is triggered by the user or by the countdown timer.
+  const onAutoplayPlayNow = useCallback(async () => {
+    if (!castAutoplay) return;
+    const episode = castAutoplay.nextEpisode;
+    if (!api || !user?.Id || !remoteMediaClient || !episode?.Id) {
+      setCastAutoplay(null);
+      return;
+    }
+    try {
+      const startPositionMs =
+        (episode.UserData?.PlaybackPositionTicks ?? 0) / 10000;
+      const result = await loadCastMedia({
+        client: remoteMediaClient,
+        device: castDevice,
+        api,
+        item: episode,
+        userId: user.Id,
+        profileMode: settings.chromecastProfile,
+        maxBitrateSetting: settings.chromecastMaxBitrate,
+        options: { startPositionMs },
+      });
+      if (!result.ok) {
+        console.error(
+          "[Casting Player] Failed to load next episode (play now):",
+          result.error,
+        );
+        return;
+      }
+      // Reset the autoplay counter on explicit user action.
+      updateSettings({ autoPlayEpisodeCount: 0 });
+    } catch (error) {
+      console.error(
+        "[Casting Player] Failed to load next episode (play now):",
+        error,
+      );
+    } finally {
+      setCastAutoplay(null);
+    }
+  }, [
+    castAutoplay,
+    api,
+    user?.Id,
+    remoteMediaClient,
+    castDevice,
+    settings.chromecastProfile,
+    settings.chromecastMaxBitrate,
+    updateSettings,
+    setCastAutoplay,
+  ]);
+
+  // Poster URL for the queued next episode (mirrors `posterUrl` for the
+  // currently-playing item — same helper, same dimensions).
+  const autoplayPosterUrl = useMemo(() => {
+    if (!castAutoplay || !api?.basePath) return null;
+    const ep = castAutoplay.nextEpisode;
+    // `BaseItemDto.Id` is `string | undefined`; bail if missing so we never
+    // call the helper with `undefined`. AutoplayCountdown handles null.
+    if (!ep?.Id) return null;
+    return getPosterUrl(api.basePath, ep.Id, ep.ImageTags?.Primary, 260, 390);
+  }, [castAutoplay, api?.basePath]);
+
+  // NOTE: Auto-navigation to casting-player is handled by higher-level
+  // components (e.g., CastingMiniPlayer or Chromecast button). We intentionally
+  // do NOT call router.replace("/casting-player") here because this component
+  // IS the casting-player screen — doing so would cause redundant navigation loops.
+
+  // Segment detection (skip intro/credits) - use progress in seconds for accurate detection
+  const { currentSegment, skipIntro, skipCredits, skipSegment } =
+    useChromecastSegments(currentItem, progress * 1000, false);
+
+  // Swipe down to dismiss gesture
+  const { panGesture, animatedStyle, dismissModal } = useCastDismissGesture({
+    router,
+  });
+
+  // Memoize expensive calculations (before early return)
+  const posterUrl = useMemo(() => {
+    if (!api?.basePath || !currentItem?.Id) return null;
+
+    // For episodes, use SEASON poster instead of episode poster
+    if (currentItem.Type === "Episode" && seasonData?.Id) {
+      // Use ParentPrimaryImageItemId if available, otherwise use season's own ImageTags
+      const imageItemId = seasonData.ParentPrimaryImageItemId || seasonData.Id;
+      const seasonImageTag = seasonData.ImageTags?.Primary;
+      return seasonImageTag
+        ? `${api.basePath}/Items/${imageItemId}/Images/Primary?fillHeight=450&fillWidth=300&quality=96&tag=${seasonImageTag}`
+        : `${api.basePath}/Items/${imageItemId}/Images/Primary?fillHeight=450&fillWidth=300&quality=96`;
+    }
+
+    // Fallback to item poster for non-episodes or if season data not loaded
+    return getPosterUrl(
+      api.basePath,
+      currentItem.Id,
+      currentItem.ImageTags?.Primary,
+      260,
+      390,
+    );
+  }, [
+    api?.basePath,
+    currentItem?.Id,
+    currentItem?.Type,
+    seasonData?.Id,
+    seasonData?.ImageTags?.Primary,
+    currentItem?.ImageTags?.Primary,
+  ]);
+
+  const protocolColor = "#a855f7"; // Streamyfin purple
+
+  // Redirect if not connected - check CastState like old implementation
+  useEffect(() => {
+    // Redirect immediately when disconnected or no devices
+    if (
+      castState === CastState.NOT_CONNECTED ||
+      castState === CastState.NO_DEVICES_AVAILABLE
+    ) {
+      // Use setTimeout to avoid state update during render
+      const timer = setTimeout(() => {
+        if (router.canGoBack()) {
+          router.back();
+        } else {
+          router.replace("/(auth)/(tabs)/(home)/");
+        }
+      }, 100);
+
+      return () => clearTimeout(timer);
+    }
+  }, [castState, router]);
+
+  // Also redirect if mediaStatus disappears (media ended or stopped)
+  useEffect(() => {
+    if (castState === CastState.CONNECTED && !mediaStatus) {
+      const timer = setTimeout(() => {
+        if (router.canGoBack()) {
+          router.back();
+        } else {
+          router.replace("/(auth)/(tabs)/(home)/");
+        }
+      }, 500); // Small delay to allow for media transitions
+
+      return () => clearTimeout(timer);
+    }
+  }, [castState, mediaStatus, router]);
+
+  // Show loading while connecting
+  if (castState === CastState.CONNECTING) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: "#000",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <ActivityIndicator size='large' color='#fff' />
+        <Text style={{ color: "#fff", marginTop: 16 }}>
+          {t("casting_player.connecting")}
+        </Text>
+      </View>
+    );
+  }
+
+  // Don't render if not connected or no media playing
+  if (castState !== CastState.CONNECTED || !mediaStatus || !currentItem) {
+    return null;
+  }
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerShown: false,
+          title: "",
+          presentation: "fullScreenModal",
+          animation: "slide_from_bottom",
+        }}
+      />
+      <GestureDetector gesture={panGesture}>
+        <Animated.View
+          style={[
+            {
+              flex: 1,
+              backgroundColor: "#000",
+            },
+            animatedStyle,
+          ]}
+        >
+          {/* Header - Fixed at top */}
+          <CastPlayerHeader
+            insetTop={insets.top}
+            protocolColor={protocolColor}
+            currentDevice={currentDevice}
+            t={t}
+            onDismiss={dismissModal}
+            onPressConnectionIndicator={() => setShowDeviceSheet(true)}
+            onPressSettings={() => setShowSettings(true)}
+          />
+
+          {/* Title Area — hidden during an episode change to avoid flashing
+              the previous episode's title/season-episode numbers. */}
+          {!isEpisodeTransitioning && (
+            <CastPlayerTitle
+              insetTop={insets.top}
+              currentItem={currentItem}
+              t={t}
+            />
+          )}
+
+          {/* Scrollable content area */}
+          <ScrollView
+            contentContainerStyle={{
+              paddingHorizontal: 20,
+              paddingTop: insets.top + 160,
+              paddingBottom: insets.bottom + 500,
+            }}
+            showsVerticalScrollIndicator={false}
+          >
+            {/* Poster with buffering overlay — force the overlay during an
+                episode change so the loading state covers the stale poster. */}
+            <CastPlayerPoster
+              posterUrl={posterUrl}
+              isBuffering={isBuffering || isEpisodeTransitioning}
+              currentSegment={currentSegment}
+              skipIntro={skipIntro}
+              skipCredits={skipCredits}
+              skipSegment={skipSegment}
+              remoteMediaClient={remoteMediaClient}
+              mediaStatus={mediaStatus}
+              protocolColor={protocolColor}
+              t={t}
+            />
+          </ScrollView>
+
+          {/* Fixed control row - positioned independently. Episode-specific
+              buttons are conditional inside; Stop is always available. */}
+          <CastPlayerEpisodeControls
+            insetBottom={insets.bottom}
+            currentItemId={currentItem.Id}
+            episodes={episodes}
+            nextEpisode={nextEpisode}
+            remoteMediaClient={remoteMediaClient}
+            onPressEpisodes={() => setShowEpisodeList(true)}
+            hasChapters={hasChapters}
+            onPressChapters={() => setChapterListVisible(true)}
+            loadEpisode={loadEpisode}
+            router={router}
+          />
+
+          {/* Fixed bottom controls area */}
+          <View
+            style={{
+              position: "absolute",
+              bottom: insets.bottom + 10,
+              left: 20,
+              right: 20,
+              zIndex: 98,
+            }}
+          >
+            {/* Progress slider with trickplay preview + time display */}
+            <CastPlayerProgressBar
+              sliderProgress={sliderProgress}
+              sliderMin={sliderMin}
+              sliderMax={sliderMax}
+              isScrubbing={isScrubbing}
+              trickplayTime={trickplayTime}
+              setTrickplayTime={setTrickplayTime}
+              trickPlayUrl={trickPlayUrl}
+              calculateTrickplayUrl={calculateTrickplayUrl}
+              trickplayInfo={trickplayInfo}
+              progress={progress}
+              duration={duration}
+              remoteMediaClient={remoteMediaClient}
+              protocolColor={protocolColor}
+              chapters={currentItem?.Chapters}
+              t={t}
+            />
+
+            {/* Playback controls */}
+            <CastPlayerTransportControls
+              isPlaying={isPlaying}
+              togglePlayPause={togglePlayPause}
+              skipBackward={skipBackward}
+              skipForward={skipForward}
+              rewindSkipTime={settings?.rewindSkipTime}
+              forwardSkipTime={settings?.forwardSkipTime}
+              protocolColor={protocolColor}
+            />
+          </View>
+
+          {/* Autoplay countdown overlay — bottom-centred above the episode
+              control row and main controls. 320 wide card; centred via
+              left/right:0 + alignItems:"center". */}
+          {castAutoplay && (
+            <View
+              style={{
+                position: "absolute",
+                bottom: insets.bottom + 280,
+                left: 0,
+                right: 0,
+                alignItems: "center",
+                zIndex: 99,
+              }}
+              pointerEvents='box-none'
+            >
+              <AutoplayCountdown
+                nextEpisode={castAutoplay.nextEpisode}
+                posterUrl={autoplayPosterUrl}
+                secondsRemaining={castAutoplay.secondsRemaining}
+                onPlayNow={onAutoplayPlayNow}
+                onCancel={() => setCastAutoplay(null)}
+              />
+            </View>
+          )}
+
+          {/* Modals */}
+          <ChromecastDeviceSheet
+            visible={showDeviceSheet}
+            onClose={() => setShowDeviceSheet(false)}
+            device={
+              currentDevice && castDevice
+                ? { friendlyName: currentDevice }
+                : null
+            }
+            onDisconnect={async () => {
+              try {
+                // End the casting session and disconnect completely
+                const sessionManager = GoogleCast.getSessionManager();
+                await sessionManager.endCurrentSession(true);
+                setShowDeviceSheet(false);
+                // Close player immediately after disconnecting
+                setTimeout(() => {
+                  if (router.canGoBack()) {
+                    router.back();
+                  } else {
+                    router.replace("/(auth)/(tabs)/(home)/");
+                  }
+                }, 100);
+              } catch (error) {
+                console.error(
+                  "[Casting Player] Error disconnecting from Chromecast:",
+                  error,
+                );
+              }
+            }}
+            volume={volume}
+            onVolumeChange={async (vol) => {
+              try {
+                setVolume(vol);
+              } catch (error) {
+                console.error("[Casting Player] Failed to set volume:", error);
+              }
+            }}
+          />
+
+          <ChromecastEpisodeList
+            visible={showEpisodeList}
+            onClose={() => setShowEpisodeList(false)}
+            currentItem={currentItem}
+            episodes={episodes}
+            api={api}
+            onSelectEpisode={async (episode) => {
+              setShowEpisodeList(false);
+              await loadEpisode(episode);
+            }}
+          />
+
+          <ChapterList
+            visible={chapterListVisible}
+            chapters={chapters}
+            currentPositionMs={progress * 1000}
+            onSeek={(ms) => {
+              remoteMediaClient?.seek({ position: ms / 1000 });
+            }}
+            onClose={() => setChapterListVisible(false)}
+          />
+
+          <ChromecastSettingsMenu
+            visible={showSettings}
+            onClose={() => setShowSettings(false)}
+            versions={availableVersions}
+            selectedVersionId={currentSelection?.mediaSourceId ?? ""}
+            onVersionChange={(id) => {
+              if (!fetchedItem) return;
+              applySelection({
+                ...resolveSelection(fetchedItem, { mediaSourceId: id }),
+                maxBitrate: currentSelection?.maxBitrate,
+              });
+            }}
+            qualities={availableQualities}
+            selectedMaxBitrate={currentSelection?.maxBitrate}
+            onQualityChange={(value) => applySelection({ maxBitrate: value })}
+            audioTracks={isEpisodeTransitioning ? [] : availableAudioTracks}
+            selectedAudioIndex={currentSelection?.audioStreamIndex ?? -1}
+            onAudioChange={(index) =>
+              applySelection({ audioStreamIndex: index })
+            }
+            subtitleTracks={
+              isEpisodeTransitioning ? [] : availableSubtitleTracks
+            }
+            selectedSubtitleIndex={currentSelection?.subtitleStreamIndex ?? -1}
+            onSubtitleChange={(index) =>
+              applySelection({ subtitleStreamIndex: index })
+            }
+            playbackSpeed={currentPlaybackSpeed}
+            onPlaybackSpeedChange={(speed) => {
+              setCurrentPlaybackSpeed(speed);
+              remoteMediaClient?.setPlaybackRate(speed).catch(console.error);
+            }}
+          />
+        </Animated.View>
+      </GestureDetector>
+    </>
+  );
+}

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

@@ -1,6 +1,7 @@
 import {
   type BaseItemDto,
   type MediaSourceInfo,
+  type MediaStream,
   PlaybackOrder,
   PlaybackProgressInfo,
   RepeatMode,
@@ -9,6 +10,7 @@ import {
   getPlaystateApi,
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
+import { File } from "expo-file-system";
 import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtomValue } from "jotai";
@@ -20,6 +22,7 @@ import { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { Controls } from "@/components/video-player/controls/Controls";
+import { Controls as TVControls } from "@/components/video-player/controls/Controls.tv";
 import { PlayerProvider } from "@/components/video-player/controls/contexts/PlayerContext";
 import { VideoProvider } from "@/components/video-player/controls/contexts/VideoContext";
 import {
@@ -43,11 +46,12 @@ import {
 } from "@/modules";
 import { useDownload } from "@/providers/DownloadProvider";
 import { DownloadedItem } from "@/providers/Downloads/types";
+import { useInactivity } from "@/providers/InactivityProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-
 import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
-
+import { getSubtitlesForItem } from "@/utils/atoms/downloadedSubtitles";
 import { useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import {
@@ -55,10 +59,14 @@ import {
   getMpvSubtitleId,
 } from "@/utils/jellyfin/subtitleUtils";
 import { writeToLog } from "@/utils/log";
-import { generateDeviceProfile } from "@/utils/profiles/native";
+import {
+  type PlaybackController,
+  useRegisterPlaybackController,
+} from "@/utils/playback/playbackController";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
+import { generateDeviceProfile } from "../../../utils/profiles/native";
 
-export default function page() {
+export default function DirectPlayerPage() {
   const videoRef = useRef<MpvPlayerViewRef>(null);
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);
@@ -85,6 +93,12 @@ export default function page() {
   const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState(1.0);
   const [showTechnicalInfo, setShowTechnicalInfo] = useState(false);
 
+  // TV audio/subtitle selection state (tracks current selection for dynamic changes)
+  const [currentAudioIndex, setCurrentAudioIndex] = useState<
+    number | undefined
+  >(undefined);
+  const [currentSubtitleIndex, setCurrentSubtitleIndex] = useState<number>(-1);
+
   const progress = useSharedValue(0);
   const isSeeking = useSharedValue(false);
   const cacheProgress = useSharedValue(0);
@@ -97,6 +111,9 @@ export default function page() {
   // when data updates, only when the provider initializes
   const downloadedFiles = downloadUtils.getDownloadedItems();
 
+  // Inactivity timer controls (TV only)
+  const { pauseInactivityTimer, resumeInactivityTimer } = useInactivity();
+
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
   const lightHapticFeedback = useHaptic("light");
@@ -127,7 +144,6 @@ export default function page() {
   const { lockOrientation, unlockOrientation } = useOrientation();
 
   const offline = offlineStr === "true";
-  const playbackManager = usePlaybackManager({ isOffline: offline });
 
   // Audio index: use URL param if provided, otherwise use stored index for offline playback
   // This is computed after downloadedItem is available, see audioIndexResolved below
@@ -142,6 +158,13 @@ export default function page() {
     : BITRATES[0].value;
 
   const [item, setItem] = useState<BaseItemDto | null>(null);
+  const initialSeekDoneRef = useRef(false);
+
+  const initialPlaybackTicksRef = useRef<number>(
+    playbackPositionFromUrl
+      ? Number.parseInt(playbackPositionFromUrl, 10)
+      : (item?.UserData?.PlaybackPositionTicks ?? 0),
+  );
   const [downloadedItem, setDownloadedItem] = useState<DownloadedItem | null>(
     null,
   );
@@ -150,6 +173,10 @@ export default function page() {
     isError: false,
   });
 
+  // Playback manager for progress reporting and adjacent items
+  const playbackManager = usePlaybackManager({ item, isOffline: offline });
+  const { nextItem, previousItem } = playbackManager;
+
   // Resolve audio index: use URL param if provided, otherwise use stored index for offline playback
   const audioIndex = useMemo(() => {
     if (audioIndexFromUrl !== undefined) {
@@ -161,6 +188,17 @@ export default function page() {
     return undefined;
   }, [audioIndexFromUrl, offline, downloadedItem?.userData?.audioStreamIndex]);
 
+  // Initialize TV audio/subtitle indices from URL params.
+  // No undefined guard: when a new episode's URL omits audioIndex, reset to
+  // undefined (media default) rather than leaking the previous episode's track.
+  useEffect(() => {
+    setCurrentAudioIndex(audioIndex);
+  }, [audioIndex]);
+
+  useEffect(() => {
+    setCurrentSubtitleIndex(subtitleIndex);
+  }, [subtitleIndex]);
+
   // Get the playback speed for this item based on settings
   const { playbackSpeed: initialPlaybackSpeed } = usePlaybackSpeed(
     item,
@@ -187,12 +225,25 @@ export default function page() {
   );
 
   /** Gets the initial playback position from the URL. */
-  const getInitialPlaybackTicks = useCallback((): number => {
+  // const getInitialPlaybackTicks = useCallback((): number => {
-    if (playbackPositionFromUrl) {
+  //   if (playbackPositionFromUrl) {
-      return Number.parseInt(playbackPositionFromUrl, 10);
+  //     return Number.parseInt(playbackPositionFromUrl, 10);
+  //   }
+  //   return item?.UserData?.PlaybackPositionTicks ?? 0;
+  // }, [playbackPositionFromUrl, item?.UserData?.PlaybackPositionTicks]);
+
+  useEffect(() => {
+    if (!tracksReady || !videoRef.current) return;
+    if (initialSeekDoneRef.current) return;
+
+    initialSeekDoneRef.current = true;
+
+    const ticks = initialPlaybackTicksRef.current;
+
+    if (ticks > 0) {
+      videoRef.current.seekTo(ticksToSeconds(ticks));
     }
-    return item?.UserData?.PlaybackPositionTicks ?? 0;
+  }, [tracksReady]);
-  }, [playbackPositionFromUrl, item?.UserData?.PlaybackPositionTicks]);
 
   useEffect(() => {
     const fetchItemData = async () => {
@@ -206,7 +257,12 @@ export default function page() {
             setDownloadedItem(data);
           }
         } else {
-          const res = await getUserLibraryApi(api!).getItem({
+          // Guard against api being null (e.g., during logout)
+          if (!api) {
+            setItemStatus({ isLoading: false, isError: false });
+            return;
+          }
+          const res = await getUserLibraryApi(api).getItem({
             itemId,
             userId: user?.Id,
           });
@@ -240,6 +296,7 @@ export default function page() {
     mediaSource: MediaSourceInfo;
     sessionId: string;
     url: string;
+    requiredHttpHeaders?: Record<string, string>;
   }
 
   const [stream, setStream] = useState<Stream | null>(null);
@@ -248,19 +305,22 @@ export default function page() {
     isError: false,
   });
 
+  // Ref to store the stream fetch function for refreshing subtitle tracks
+  const refetchStreamRef = useRef<(() => Promise<Stream | null>) | null>(null);
+
   useEffect(() => {
-    const fetchStreamData = async () => {
+    const fetchStreamData = async (): Promise<Stream | null> => {
       setStreamStatus({ isLoading: true, isError: false });
       try {
         // Don't attempt to fetch stream data if item is not available
         if (!item?.Id) {
           console.log("Item not loaded yet, skipping stream data fetch");
           setStreamStatus({ isLoading: false, isError: false });
-          return;
+          return null;
         }
 
         let result: Stream | null = null;
-        if (offline && downloadedItem && downloadedItem.mediaSource) {
+        if (offline && downloadedItem?.mediaSource) {
           const url = downloadedItem.videoFilePath;
           if (item) {
             result = {
@@ -274,12 +334,12 @@ export default function page() {
           if (!api) {
             console.warn("API not available for streaming");
             setStreamStatus({ isLoading: false, isError: true });
-            return;
+            return null;
           }
           if (!user?.Id) {
             console.warn("User not authenticated for streaming");
             setStreamStatus({ isLoading: false, isError: true });
-            return;
+            return null;
           }
 
           // Calculate start ticks directly from item to avoid stale closure
@@ -298,25 +358,30 @@ export default function page() {
             subtitleStreamIndex: subtitleIndex,
             deviceProfile: generateDeviceProfile(),
           });
-          if (!res) return;
+          if (!res) return null;
-          const { mediaSource, sessionId, url } = res;
+          const { mediaSource, sessionId, url, requiredHttpHeaders } = res;
 
           if (!sessionId || !mediaSource || !url) {
             Alert.alert(
               t("player.error"),
               t("player.failed_to_get_stream_url"),
             );
-            return;
+            return null;
           }
-          result = { mediaSource, sessionId, url };
+          result = { mediaSource, sessionId, url, requiredHttpHeaders };
         }
         setStream(result);
         setStreamStatus({ isLoading: false, isError: false });
+        return result;
       } catch (error) {
         console.error("Failed to fetch stream:", error);
         setStreamStatus({ isLoading: false, isError: true });
+        return null;
       }
     };
+
+    // Store the fetch function in ref for use by refresh handler
+    refetchStreamRef.current = fetchStreamData;
     fetchStreamData();
   }, [
     itemId,
@@ -341,26 +406,6 @@ export default function page() {
     reportPlaybackStart();
   }, [stream, api, offline]);
 
-  const togglePlay = async () => {
-    lightHapticFeedback();
-    setIsPlaying(!isPlaying);
-    if (isPlaying) {
-      await videoRef.current?.pause();
-      const progressInfo = currentPlayStateInfo();
-      if (progressInfo) {
-        playbackManager.reportPlaybackProgress(progressInfo);
-      }
-    } else {
-      videoRef.current?.play();
-      const progressInfo = currentPlayStateInfo();
-      if (!offline && api) {
-        await getPlaystateApi(api).reportPlaybackStart({
-          playbackStartInfo: progressInfo,
-        });
-      }
-    }
-  };
-
   const reportPlaybackStopped = useCallback(async () => {
     if (!item?.Id || !stream?.sessionId || offline || !api) return;
 
@@ -390,7 +435,9 @@ export default function page() {
     setIsPlaybackStopped(true);
     videoRef.current?.pause();
     revalidateProgressCache();
-  }, [videoRef, reportPlaybackStopped, progress]);
+    // Resume inactivity timer when leaving player (TV only)
+    resumeInactivityTimer();
+  }, [videoRef, reportPlaybackStopped, progress, resumeInactivityTimer]);
 
   useEffect(() => {
     const beforeRemoveListener = navigation.addListener("beforeRemove", stop);
@@ -406,8 +453,11 @@ export default function page() {
 
     return {
       ItemId: item.Id,
-      AudioStreamIndex: audioIndex ? audioIndex : undefined,
+      // Report the live selection so server-side session/resume state reflects
-      SubtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+      // mid-playback track changes. Note: index 0 is valid (don't treat as
+      // falsy); -1 means "off" and is reported as-is.
+      AudioStreamIndex: currentAudioIndex,
+      SubtitleStreamIndex: currentSubtitleIndex,
       MediaSourceId: mediaSourceId,
       PositionTicks: msToTicks(progress.get()),
       IsPaused: !isPlaying,
@@ -421,14 +471,43 @@ export default function page() {
   }, [
     stream,
     item?.Id,
-    audioIndex,
+    currentAudioIndex,
-    subtitleIndex,
+    currentSubtitleIndex,
     mediaSourceId,
     progress,
     isPlaying,
     isMuted,
   ]);
 
+  // Declared after currentPlayStateInfo so the dependency array can reference
+  // it without hitting the temporal dead zone.
+  const togglePlay = useCallback(async () => {
+    lightHapticFeedback();
+    setIsPlaying(!isPlaying);
+    if (isPlaying) {
+      await videoRef.current?.pause();
+      const progressInfo = currentPlayStateInfo();
+      if (progressInfo) {
+        playbackManager.reportPlaybackProgress(progressInfo);
+      }
+    } else {
+      videoRef.current?.play();
+      const progressInfo = currentPlayStateInfo();
+      if (!offline && api) {
+        await getPlaystateApi(api).reportPlaybackStart({
+          playbackStartInfo: progressInfo,
+        });
+      }
+    }
+  }, [
+    lightHapticFeedback,
+    isPlaying,
+    currentPlayStateInfo,
+    playbackManager,
+    offline,
+    api,
+  ]);
+
   const lastUrlUpdateTime = useSharedValue(0);
   const wasJustSeeking = useSharedValue(false);
   const URL_UPDATE_INTERVAL = 30000; // Update URL every 30 seconds instead of every second
@@ -489,8 +568,8 @@ export default function page() {
     },
     [
       item?.Id,
-      audioIndex,
+      currentAudioIndex,
-      subtitleIndex,
+      currentSubtitleIndex,
       mediaSourceId,
       isPlaying,
       stream,
@@ -500,11 +579,6 @@ export default function page() {
     ],
   );
 
-  /** Gets the initial playback position in seconds. */
-  const _startPosition = useMemo(() => {
-    return ticksToSeconds(getInitialPlaybackTicks());
-  }, [getInitialPlaybackTicks]);
-
   /** Prepare metadata for iOS native media controls (Control Center, Lock Screen) */
   const nowPlayingMetadata = useMemo(() => {
     if (!item || !api) return undefined;
@@ -582,6 +656,15 @@ export default function page() {
       autoplay: true,
       initialSubtitleId,
       initialAudioId,
+      // Pass cache/buffer settings from user preferences
+      cacheConfig: {
+        enabled: settings.mpvCacheEnabled,
+        cacheSeconds: settings.mpvCacheSeconds,
+        maxBytes: settings.mpvDemuxerMaxBytes,
+        maxBackBytes: settings.mpvDemuxerMaxBackBytes,
+      },
+      // Pass VO driver setting (Android only)
+      voDriver: settings.mpvVoDriver,
     };
 
     // Add external subtitles only for online playback
@@ -589,17 +672,32 @@ export default function page() {
       source.externalSubtitles = externalSubs;
     }
 
-    // Add auth headers only for online streaming (not for local file:// URLs)
+    // Add headers for online streaming (not for local file:// URLs)
-    if (!offline && api?.accessToken) {
+    if (!offline) {
-      source.headers = {
+      const headers: Record<string, string> = {};
-        Authorization: `MediaBrowser Token="${api.accessToken}"`,
+      const isRemoteStream =
-      };
+        mediaSource?.IsRemote && mediaSource?.Protocol === "Http";
+
+      // Add auth header only for Jellyfin API requests (not for external/remote streams)
+      if (api?.accessToken && !isRemoteStream) {
+        headers.Authorization = `MediaBrowser Token="${api.accessToken}"`;
+      }
+
+      // Add any required headers from the media source (e.g., for external/remote streams)
+      if (stream?.requiredHttpHeaders) {
+        Object.assign(headers, stream.requiredHttpHeaders);
+      }
+
+      if (Object.keys(headers).length > 0) {
+        source.headers = headers;
+      }
     }
 
     return source;
   }, [
     stream?.url,
     stream?.mediaSource,
+    stream?.requiredHttpHeaders,
     item?.UserData?.PlaybackPositionTicks,
     playbackPositionFromUrl,
     api?.basePath,
@@ -607,6 +705,11 @@ export default function page() {
     subtitleIndex,
     audioIndex,
     offline,
+    settings.mpvCacheEnabled,
+    settings.mpvCacheSeconds,
+    settings.mpvDemuxerMaxBytes,
+    settings.mpvDemuxerMaxBackBytes,
+    settings.mpvVoDriver,
   ]);
 
   const volumeUpCb = useCallback(async () => {
@@ -697,23 +800,27 @@ export default function page() {
         setIsPlaying(true);
         setIsBuffering(false);
         setHasPlaybackStarted(true);
+        // Pause inactivity timer during playback (TV only)
+        pauseInactivityTimer();
         if (item?.Id) {
           playbackManager.reportPlaybackProgress(
             currentPlayStateInfo() as PlaybackProgressInfo,
           );
         }
-        if (!Platform.isTV) await activateKeepAwakeAsync();
+        await activateKeepAwakeAsync();
         return;
       }
 
       if (isPaused) {
         setIsPlaying(false);
+        // Resume inactivity timer when paused (TV only)
+        resumeInactivityTimer();
         if (item?.Id) {
           playbackManager.reportPlaybackProgress(
             currentPlayStateInfo() as PlaybackProgressInfo,
           );
         }
-        if (!Platform.isTV) await deactivateKeepAwake();
+        await deactivateKeepAwake();
         return;
       }
 
@@ -721,15 +828,19 @@ export default function page() {
         setIsBuffering(isLoading);
       }
     },
-    [playbackManager, item?.Id, progress],
+    [
+      playbackManager,
+      item?.Id,
+      progress,
+      pauseInactivityTimer,
+      resumeInactivityTimer,
+    ],
   );
 
-  /** PiP handler for MPV */
   const _onPictureInPictureChange = useCallback(
     (e: { nativeEvent: { isActive: boolean } }) => {
       const { isActive } = e.nativeEvent;
       setIsPipMode(isActive);
-      // Hide controls when entering PiP
       if (isActive) {
         _setShowControls(false);
       }
@@ -747,6 +858,9 @@ export default function page() {
 
   // Memoize video ref functions to prevent unnecessary re-renders
   const startPictureInPicture = useCallback(async () => {
+    // Hide controls BEFORE entering PiP so the window captures a clean view
+    _setShowControls(false);
+    setIsPipMode(true);
     return videoRef.current?.startPictureInPicture?.();
   }, []);
 
@@ -763,6 +877,55 @@ export default function page() {
     videoRef.current?.seekTo?.(position / 1000);
   }, []);
 
+  // TV audio track change handler
+  const handleAudioIndexChange = useCallback(
+    async (index: number) => {
+      setCurrentAudioIndex(index);
+
+      // Check if we're transcoding
+      const isTranscoding = Boolean(stream?.mediaSource?.TranscodingUrl);
+
+      // Convert Jellyfin index to MPV track ID
+      const mpvTrackId = getMpvAudioId(
+        stream?.mediaSource,
+        index,
+        isTranscoding,
+      );
+
+      if (mpvTrackId !== undefined) {
+        await videoRef.current?.setAudioTrack?.(mpvTrackId);
+      }
+    },
+    [stream?.mediaSource],
+  );
+
+  // TV subtitle track change handler
+  const handleSubtitleIndexChange = useCallback(
+    async (index: number) => {
+      setCurrentSubtitleIndex(index);
+
+      // Check if we're transcoding
+      const isTranscoding = Boolean(stream?.mediaSource?.TranscodingUrl);
+
+      if (index === -1) {
+        // Disable subtitles
+        await videoRef.current?.disableSubtitles?.();
+      } else {
+        // Convert Jellyfin index to MPV track ID
+        const mpvTrackId = getMpvSubtitleId(
+          stream?.mediaSource,
+          index,
+          isTranscoding,
+        );
+
+        if (mpvTrackId !== undefined && mpvTrackId !== -1) {
+          await videoRef.current?.setSubtitleTrack?.(mpvTrackId);
+        }
+      }
+    },
+    [stream?.mediaSource],
+  );
+
   // Technical info toggle handler
   const handleToggleTechnicalInfo = useCallback(() => {
     setShowTechnicalInfo((prev) => !prev);
@@ -773,6 +936,47 @@ export default function page() {
     return (await videoRef.current?.getTechnicalInfo?.()) ?? {};
   }, []);
 
+  // App-wide remote control: wrap the player's existing handlers so remote
+  // commands (e.g. dashboard, WebSocket) route to whatever is playing.
+  const playbackController = useMemo<PlaybackController>(
+    () => ({
+      // togglePlay flips play/pause and reports progress to the server.
+      playPause: () => {
+        void togglePlay();
+      },
+      pause: () => {
+        pause();
+      },
+      unpause: () => {
+        play();
+      },
+      stop: () => {
+        stop();
+      },
+      // PlaybackController seeks in ms; the player's seek already expects ms.
+      seek: (positionMs: number) => {
+        seek(positionMs);
+      },
+      // The player screen has no episode-loading path of its own — episode
+      // navigation is handled inside <Controls> via router replacement — so
+      // next/previous are honest no-ops here.
+      next: () => {},
+      previous: () => {},
+      // Volume is device-level (react-native-volume-manager); the slider sends
+      // 0-1 while setVolumeCb expects 0-100.
+      setVolume: (level: number) => {
+        void setVolumeCb(level * 100);
+      },
+      toggleMute: () => {
+        void toggleMuteCb();
+      },
+    }),
+    [togglePlay, pause, play, stop, seek, setVolumeCb, toggleMuteCb],
+  );
+
+  // Active for the whole lifetime of the player screen; cleared on unmount.
+  useRegisterPlaybackController(playbackController, true);
+
   // Determine play method based on stream URL and media source
   const playMethod = useMemo<
     "DirectPlay" | "DirectStream" | "Transcode" | undefined
@@ -852,6 +1056,113 @@ export default function page() {
     }
   }, [isZoomedToFill, stream?.mediaSource, screenWidth, screenHeight]);
 
+  // TV: Navigate to previous item
+  const goToPreviousItem = useCallback(() => {
+    if (!previousItem || !settings) return;
+
+    const {
+      mediaSource: newMediaSource,
+      audioIndex: defaultAudioIndex,
+      subtitleIndex: defaultSubtitleIndex,
+    } = getDefaultPlaySettings(previousItem, settings, {
+      indexes: {
+        // Use the live selection, not the stale URL params (see goToNextItem).
+        subtitleIndex: currentSubtitleIndex,
+        audioIndex: currentAudioIndex,
+      },
+      source: stream?.mediaSource ?? undefined,
+    });
+
+    const queryParams = new URLSearchParams({
+      itemId: previousItem.Id ?? "",
+      audioIndex: defaultAudioIndex?.toString() ?? "",
+      subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
+      mediaSourceId: newMediaSource?.Id ?? "",
+      bitrateValue: bitrateValue?.toString() ?? "",
+      playbackPosition:
+        previousItem.UserData?.PlaybackPositionTicks?.toString() ?? "",
+    }).toString();
+
+    router.replace(`player/direct-player?${queryParams}` as any);
+  }, [
+    previousItem,
+    settings,
+    currentSubtitleIndex,
+    currentAudioIndex,
+    stream?.mediaSource,
+    bitrateValue,
+    router,
+  ]);
+
+  // TV: Add subtitle file to player (for client-side downloaded subtitles)
+  const addSubtitleFile = useCallback(async (path: string) => {
+    await videoRef.current?.addSubtitleFile?.(path, true);
+  }, []);
+
+  // TV: Refresh subtitle tracks after server-side subtitle download
+  // Re-fetches the media source to pick up newly downloaded subtitles
+  const handleRefreshSubtitleTracks = useCallback(async (): Promise<
+    MediaStream[]
+  > => {
+    if (!refetchStreamRef.current) return [];
+
+    const newStream = await refetchStreamRef.current();
+
+    // Check if component is still mounted before updating state
+    // This callback may be invoked from a modal after the player unmounts
+    if (!isMounted) return [];
+
+    if (newStream) {
+      setStream(newStream);
+      return (
+        newStream.mediaSource?.MediaStreams?.filter(
+          (s) => s.Type === "Subtitle",
+        ) ?? []
+      );
+    }
+    return [];
+  }, [isMounted]);
+
+  // TV: Navigate to next item
+  const goToNextItem = useCallback(() => {
+    if (!nextItem || !settings || isPlaybackStopped) return;
+
+    const {
+      mediaSource: newMediaSource,
+      audioIndex: defaultAudioIndex,
+      subtitleIndex: defaultSubtitleIndex,
+    } = getDefaultPlaySettings(nextItem, settings, {
+      indexes: {
+        // Use the live selection (updated when the user changes tracks
+        // mid-playback), not the stale URL params the episode started with.
+        subtitleIndex: currentSubtitleIndex,
+        audioIndex: currentAudioIndex,
+      },
+      source: stream?.mediaSource ?? undefined,
+    });
+
+    const queryParams = new URLSearchParams({
+      itemId: nextItem.Id ?? "",
+      audioIndex: defaultAudioIndex?.toString() ?? "",
+      subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
+      mediaSourceId: newMediaSource?.Id ?? "",
+      bitrateValue: bitrateValue?.toString() ?? "",
+      playbackPosition:
+        nextItem.UserData?.PlaybackPositionTicks?.toString() ?? "",
+    }).toString();
+
+    router.replace(`player/direct-player?${queryParams}` as any);
+  }, [
+    nextItem,
+    settings,
+    currentSubtitleIndex,
+    currentAudioIndex,
+    stream?.mediaSource,
+    bitrateValue,
+    router,
+    isPlaybackStopped,
+  ]);
+
   // Apply subtitle settings when video loads
   useEffect(() => {
     if (!isVideoLoaded || !videoRef.current) return;
@@ -871,14 +1182,27 @@ export default function page() {
       if (settings.mpvSubtitleAlignY !== undefined) {
         await videoRef.current?.setSubtitleAlignY?.(settings.mpvSubtitleAlignY);
       }
-      if (settings.mpvSubtitleFontSize !== undefined) {
+      // Apply subtitle background (iOS only - doesn't work on tvOS due to composite OSD limitation)
-        await videoRef.current?.setSubtitleFontSize?.(
+      // mpv uses #RRGGBBAA format (alpha last, same as CSS)
-          settings.mpvSubtitleFontSize,
+      if (settings.mpvSubtitleBackgroundEnabled) {
+        const opacity = settings.mpvSubtitleBackgroundOpacity ?? 75;
+        const alphaHex = Math.round((opacity / 100) * 255)
+          .toString(16)
+          .padStart(2, "0")
+          .toUpperCase();
+        // Enable background-box mode (required for sub-back-color to work)
+        await videoRef.current?.setSubtitleBorderStyle?.("background-box");
+        await videoRef.current?.setSubtitleBackgroundColor?.(
+          `#000000${alphaHex}`,
         );
-      }
+        // Force override ASS subtitle styles so background shows on styled subtitles
-      // Apply subtitle size from general settings
+        await videoRef.current?.setSubtitleAssOverride?.("force");
-      if (settings.subtitleSize) {
+      } else {
-        await videoRef.current?.setSubtitleFontSize?.(settings.subtitleSize);
+        // Restore default outline-and-shadow style
+        await videoRef.current?.setSubtitleBorderStyle?.("outline-and-shadow");
+        await videoRef.current?.setSubtitleBackgroundColor?.("#00000000");
+        // Restore default ASS behavior (keep original styles)
+        await videoRef.current?.setSubtitleAssOverride?.("no");
       }
     };
 
@@ -899,6 +1223,28 @@ export default function page() {
     applyInitialPlaybackSpeed();
   }, [isVideoLoaded, initialPlaybackSpeed]);
 
+  // TV only: Pre-load locally downloaded subtitles when video loads
+  // This adds them to MPV's track list without auto-selecting them
+  useEffect(() => {
+    if (!Platform.isTV || !isVideoLoaded || !videoRef.current || !itemId)
+      return;
+
+    const preloadLocalSubtitles = async () => {
+      const localSubs = getSubtitlesForItem(itemId);
+      for (const sub of localSubs) {
+        // Verify file still exists (cache may have been cleared)
+        const subtitleFile = new File(sub.filePath);
+        if (!subtitleFile.exists) {
+          continue;
+        }
+        // Add subtitle file to MPV without selecting it (select: false)
+        await videoRef.current?.addSubtitleFile?.(sub.filePath, false);
+      }
+    };
+
+    preloadLocalSubtitles();
+  }, [isVideoLoaded, itemId]);
+
   // Show error UI first, before checking loading/missing‐data
   if (itemStatus.isError || streamStatus.isError) {
     return (
@@ -961,12 +1307,13 @@ export default function page() {
                 nowPlayingMetadata={nowPlayingMetadata}
                 onProgress={onProgress}
                 onPlaybackStateChange={onPlaybackStateChanged}
+                onPictureInPictureChange={_onPictureInPictureChange}
                 onLoad={() => setIsVideoLoaded(true)}
                 onError={(e: { nativeEvent: MpvOnErrorEventPayload }) => {
                   console.error("Video Error:", e.nativeEvent);
                   Alert.alert(
                     t("player.error"),
-                    t("player.an_error_occured_while_playing_the_video"),
+                    t("player.an_error_occurred_while_playing_the_video"),
                   );
                   writeToLog("ERROR", "Video Error", e.nativeEvent);
                 }}
@@ -991,37 +1338,72 @@ export default function page() {
                 </View>
               )}
             </View>
-            {isMounted === true && item && !isPipMode && (
+            {isMounted === true &&
-              <Controls
+              item &&
-                mediaSource={stream?.mediaSource}
+              !isPipMode &&
-                item={item}
+              (Platform.isTV ? (
-                togglePlay={togglePlay}
+                <TVControls
-                isPlaying={isPlaying}
+                  mediaSource={stream?.mediaSource}
-                isSeeking={isSeeking}
+                  item={item}
-                progress={progress}
+                  togglePlay={togglePlay}
-                cacheProgress={cacheProgress}
+                  isPlaying={isPlaying}
-                isBuffering={isBuffering}
+                  isSeeking={isSeeking}
-                showControls={showControls}
+                  progress={progress}
-                setShowControls={setShowControls}
+                  cacheProgress={cacheProgress}
-                startPictureInPicture={startPictureInPicture}
+                  isBuffering={isBuffering}
-                play={play}
+                  showControls={showControls}
-                pause={pause}
+                  setShowControls={setShowControls}
-                seek={seek}
+                  play={play}
-                enableTrickplay={true}
+                  pause={pause}
-                aspectRatio={aspectRatio}
+                  seek={seek}
-                isZoomedToFill={isZoomedToFill}
+                  audioIndex={currentAudioIndex}
-                onZoomToggle={handleZoomToggle}
+                  subtitleIndex={currentSubtitleIndex}
-                api={api}
+                  onAudioIndexChange={handleAudioIndexChange}
-                downloadedFiles={downloadedFiles}
+                  onSubtitleIndexChange={handleSubtitleIndexChange}
-                playbackSpeed={currentPlaybackSpeed}
+                  previousItem={previousItem}
-                setPlaybackSpeed={handleSetPlaybackSpeed}
+                  nextItem={nextItem}
-                showTechnicalInfo={showTechnicalInfo}
+                  goToPreviousItem={goToPreviousItem}
-                onToggleTechnicalInfo={handleToggleTechnicalInfo}
+                  goToNextItem={goToNextItem}
-                getTechnicalInfo={getTechnicalInfo}
+                  onRefreshSubtitleTracks={handleRefreshSubtitleTracks}
-                playMethod={playMethod}
+                  addSubtitleFile={addSubtitleFile}
-                transcodeReasons={transcodeReasons}
+                  showTechnicalInfo={showTechnicalInfo}
-              />
+                  onToggleTechnicalInfo={handleToggleTechnicalInfo}
-            )}
+                  getTechnicalInfo={getTechnicalInfo}
+                  playMethod={playMethod}
+                  transcodeReasons={transcodeReasons}
+                  downloadedFiles={downloadedFiles}
+                />
+              ) : (
+                <Controls
+                  mediaSource={stream?.mediaSource}
+                  item={item}
+                  togglePlay={togglePlay}
+                  isPlaying={isPlaying}
+                  isSeeking={isSeeking}
+                  progress={progress}
+                  cacheProgress={cacheProgress}
+                  isBuffering={isBuffering}
+                  showControls={showControls}
+                  setShowControls={setShowControls}
+                  startPictureInPicture={startPictureInPicture}
+                  play={play}
+                  pause={pause}
+                  seek={seek}
+                  enableTrickplay={true}
+                  aspectRatio={aspectRatio}
+                  isZoomedToFill={isZoomedToFill}
+                  onZoomToggle={handleZoomToggle}
+                  api={api}
+                  downloadedFiles={downloadedFiles}
+                  playbackSpeed={currentPlaybackSpeed}
+                  setPlaybackSpeed={handleSetPlaybackSpeed}
+                  showTechnicalInfo={showTechnicalInfo}
+                  onToggleTechnicalInfo={handleToggleTechnicalInfo}
+                  getTechnicalInfo={getTechnicalInfo}
+                  playMethod={playMethod}
+                  transcodeReasons={transcodeReasons}
+                />
+              ))}
           </View>
         </VideoProvider>
       </PlayerProvider>

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

@@ -0,0 +1,189 @@
+import { BlurView } from "expo-blur";
+import { useAtomValue } from "jotai";
+import { useCallback, 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 { useScaledTVTypography } from "@/constants/TVTypography";
+import useRouter from "@/hooks/useAppRouter";
+import { useTVBackPress } from "@/hooks/useTVBackPress";
+import { tvOptionModalAtom } from "@/utils/atoms/tvOptionModal";
+import { scaleSize } from "@/utils/scaleSize";
+import { store } from "@/utils/store";
+
+export default function TVOptionModal() {
+  const router = useRouter();
+  const modalState = useAtomValue(tvOptionModalAtom);
+  const typography = useScaledTVTypography();
+
+  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();
+  };
+
+  const handleClose = useCallback(() => {
+    store.set(tvOptionModalAtom, null);
+    router.back();
+  }, [router]);
+
+  // Intercept back/menu press to close the modal instead of the player
+  useTVBackPress(() => {
+    handleClose();
+    return true;
+  }, [handleClose]);
+
+  // If no modal state, just go back (shouldn't happen in normal usage)
+  if (!modalState) {
+    return null;
+  }
+
+  const { title, options } = modalState;
+  const scaledCardWidth = scaleSize(160);
+  const scaledCardHeight = scaleSize(75);
+
+  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 }]}>
+              {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={scaledCardWidth}
+                    height={scaledCardHeight}
+                  />
+                ))}
+              </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: scaleSize(24),
+    borderTopRightRadius: scaleSize(24),
+    overflow: "hidden",
+  },
+  content: {
+    paddingTop: scaleSize(24),
+    paddingBottom: scaleSize(50),
+    overflow: "visible",
+  },
+  title: {
+    fontWeight: "500",
+    color: "rgba(255,255,255,0.6)",
+    marginBottom: scaleSize(16),
+    paddingHorizontal: scaleSize(48),
+    textTransform: "uppercase",
+    letterSpacing: 1,
+  },
+  scrollView: {
+    overflow: "visible",
+  },
+  scrollContent: {
+    paddingHorizontal: scaleSize(48),
+    paddingVertical: scaleSize(20),
+    gap: scaleSize(12),
+  },
+});

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

@@ -0,0 +1,496 @@
+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

@@ -0,0 +1,446 @@
+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

@@ -0,0 +1,190 @@
+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/(auth)/tv-user-switch-modal.tsx

@@ -0,0 +1,174 @@
+import { BlurView } from "expo-blur";
+import { useAtomValue } from "jotai";
+import { useEffect, 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 { TVUserCard } from "@/components/tv/TVUserCard";
+import useRouter from "@/hooks/useAppRouter";
+import { tvUserSwitchModalAtom } from "@/utils/atoms/tvUserSwitchModal";
+import type { SavedServerAccount } from "@/utils/secureCredentials";
+import { store } from "@/utils/store";
+
+export default function TVUserSwitchModalPage() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const modalState = useAtomValue(tvUserSwitchModalAtom);
+
+  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;
+
+  // 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(tvUserSwitchModalAtom, 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 = (account: SavedServerAccount) => {
+    modalState?.onAccountSelect(account);
+    store.set(tvUserSwitchModalAtom, null);
+    router.back();
+  };
+
+  // If no modal state, just return null
+  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}>
+              {t("home.settings.switch_user.title")}
+            </Text>
+            <Text style={styles.subtitle}>{modalState.serverName}</Text>
+            {isReady && (
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                style={styles.scrollView}
+                contentContainerStyle={styles.scrollContent}
+              >
+                {modalState.accounts.map((account, index) => {
+                  const isCurrent = account.userId === modalState.currentUserId;
+                  return (
+                    <TVUserCard
+                      key={account.userId}
+                      ref={index === 0 ? firstCardRef : undefined}
+                      username={account.username}
+                      securityType={account.securityType}
+                      hasTVPreferredFocus={index === 0}
+                      isCurrent={isCurrent}
+                      onPress={() => handleSelect(account)}
+                    />
+                  );
+                })}
+              </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: 4,
+    paddingHorizontal: 48,
+    textTransform: "uppercase",
+    letterSpacing: 1,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "rgba(255,255,255,0.4)",
+    marginBottom: 16,
+    paddingHorizontal: 48,
+  },
+  scrollView: {
+    overflow: "visible",
+  },
+  scrollContent: {
+    paddingHorizontal: 48,
+    paddingVertical: 20,
+    gap: 16,
+  },
+});

app/_layout.tsx

@@ -2,17 +2,19 @@ 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 { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import * as BackgroundTask from "expo-background-task";
 import * as Device from "expo-device";
+import { DarkTheme, ThemeProvider } from "expo-router/react-navigation";
 import { Platform } from "react-native";
 import { GlobalModal } from "@/components/GlobalModal";
+import { enableTVMenuKeyInterception } from "@/hooks/useTVBackHandler";
 import i18n from "@/i18n";
 import { DownloadProvider } from "@/providers/DownloadProvider";
 import { GlobalModalProvider } from "@/providers/GlobalModalProvider";
+import { InactivityProvider } from "@/providers/InactivityProvider";
 import { IntroSheetProvider } from "@/providers/IntroSheetProvider";
 import {
   apiAtom,
@@ -54,15 +56,31 @@ import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider, useAtom } from "jotai";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { I18nextProvider } from "react-i18next";
-import { Appearance } from "react-native";
+import { Appearance, LogBox } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+
+// Suppress harmless tvOS warning from react-native-gesture-handler
+if (Platform.isTV) {
+  LogBox.ignoreLogs(["HoverGestureHandler is not supported on tvOS"]);
+}
+
 import useRouter from "@/hooks/useAppRouter";
 import { userAtom } from "@/providers/JellyfinProvider";
-import { store } from "@/utils/store";
+import { store as jotaiStore, store } from "@/utils/store";
 import "react-native-reanimated";
+import {
+  configureReanimatedLogger,
+  ReanimatedLogLevel,
+} from "react-native-reanimated";
 import { Toaster } from "sonner-native";
 
+// Disable strict mode warnings for reading shared values during render
+configureReanimatedLogger({
+  level: ReanimatedLogLevel.warn,
+  strict: false,
+});
+
 if (!Platform.isTV) {
   Notifications.setNotificationHandler({
     handleNotification: async () => ({
@@ -178,7 +196,7 @@ export default function RootLayout() {
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <JotaiProvider>
+      <JotaiProvider store={jotaiStore}>
         <ActionSheetProvider>
           <I18nextProvider i18n={i18n}>
             <Layout />
@@ -232,6 +250,11 @@ function Layout() {
   const _segments = useSegments();
   const router = useRouter();
 
+  // Enable TV menu key interception so React Native handles it instead of tvOS
+  useEffect(() => {
+    enableTVMenuKeyInterception();
+  }, []);
+
   useEffect(() => {
     i18n.changeLanguage(
       settings?.preferedLanguage ?? getLocales()[0].languageCode ?? "en",
@@ -252,22 +275,19 @@ function Layout() {
           deviceId: getOrSetDeviceId(),
           userId: user.Id,
         })
-        .then((_) => console.log("Posted expo push token"))
         .catch((_) =>
           writeErrorLog("Failed to push expo push token to plugin"),
         );
-    } else console.log("No token available");
+    }
   }, [api, expoPushToken, user]);
 
   const registerNotifications = useCallback(async () => {
     if (Platform.OS === "android") {
-      console.log("Setting android notification channel 'default'");
       await Notifications?.setNotificationChannelAsync("default", {
         name: "default",
       });
 
       // Create dedicated channel for download notifications
-      console.log("Setting android notification channel 'downloads'");
       await Notifications?.setNotificationChannelAsync("downloads", {
         name: "Downloads",
         importance: Notifications.AndroidImportance.DEFAULT,
@@ -342,8 +362,8 @@ function Layout() {
                   url = `/(auth)/(tabs)/home/items/page?id=${itemId}`;
                   // summarized season notification for multiple episodes. Bring them to series season
                 } else {
-                  const seriesId = data.seriesId;
+                  const seriesId = data?.seriesId;
-                  const seasonIndex = data.seasonIndex;
+                  const seasonIndex = data?.seasonIndex;
                   if (seasonIndex) {
                     url = `/(auth)/(tabs)/home/series/${seriesId}?seasonIndex=${seasonIndex}`;
                   } else {
@@ -375,86 +395,153 @@ function Layout() {
         maxAge: 1000 * 60 * 60 * 24, // 24 hours max cache age
         dehydrateOptions: {
           shouldDehydrateQuery: (query) => {
-            // Only persist successful queries
+            return (
-            return query.state.status === "success";
+              query.state.status === "success" && query.options.gcTime !== 0
+            );
           },
         },
       }}
     >
       <JellyfinProvider>
-        <ServerUrlProvider>
+        <InactivityProvider>
-          <NetworkStatusProvider>
+          <ServerUrlProvider>
-            <PlaySettingsProvider>
+            <NetworkStatusProvider>
-              <LogProvider>
+              <PlaySettingsProvider>
-                <WebSocketProvider>
+                <LogProvider>
-                  <DownloadProvider>
+                  <WebSocketProvider>
-                    <MusicPlayerProvider>
+                    <DownloadProvider>
-                      <GlobalModalProvider>
+                      <MusicPlayerProvider>
-                        <BottomSheetModalProvider>
+                        <GlobalModalProvider>
-                          <IntroSheetProvider>
+                          <BottomSheetModalProvider>
-                            <ThemeProvider value={DarkTheme}>
+                            <IntroSheetProvider>
-                              <SystemBars style='light' hidden={false} />
+                              <ThemeProvider value={DarkTheme}>
-                              <Stack initialRouteName='(auth)/(tabs)'>
+                                <SystemBars style='light' hidden={false} />
-                                <Stack.Screen
+                                <Stack initialRouteName='(auth)/(tabs)'>
-                                  name='(auth)/(tabs)'
+                                  <Stack.Screen
-                                  options={{
+                                    name='(auth)/(tabs)'
-                                    headerShown: false,
+                                    options={{
-                                    title: "",
+                                      headerShown: false,
-                                    header: () => null,
+                                      title: "",
+                                      header: () => null,
+                                    }}
+                                  />
+                                  <Stack.Screen
+                                    name='(auth)/player'
+                                    options={{
+                                      headerShown: false,
+                                      title: "",
+                                      header: () => null,
+                                    }}
+                                  />
+                                  <Stack.Screen
+                                    name='(auth)/now-playing'
+                                    options={{
+                                      headerShown: false,
+                                      presentation: "modal",
+                                      gestureEnabled: true,
+                                    }}
+                                  />
+                                  <Stack.Screen
+                                    name='login'
+                                    options={{
+                                      headerShown: true,
+                                      title: "",
+                                      headerTransparent: Platform.OS === "ios",
+                                    }}
+                                  />
+                                  <Stack.Screen name='+not-found' />
+                                  <Stack.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.Screen
+                                    name='tv-account-action-modal'
+                                    options={{
+                                      headerShown: false,
+                                      presentation: "transparentModal",
+                                      animation: "fade",
+                                    }}
+                                  />
+                                  <Stack.Screen
+                                    name='tv-account-select-modal'
+                                    options={{
+                                      headerShown: false,
+                                      presentation: "transparentModal",
+                                      animation: "fade",
+                                    }}
+                                  />
+                                  <Stack.Screen
+                                    name='(auth)/tv-user-switch-modal'
+                                    options={{
+                                      headerShown: false,
+                                      presentation: "transparentModal",
+                                      animation: "fade",
+                                    }}
+                                  />
+                                </Stack>
+                                <Toaster
+                                  duration={4000}
+                                  toastOptions={{
+                                    style: {
+                                      backgroundColor: "#262626",
+                                      borderColor: "#363639",
+                                      borderWidth: 1,
+                                    },
+                                    titleStyle: {
+                                      color: "white",
+                                    },
                                   }}
+                                  closeButton
                                 />
-                                <Stack.Screen
+                                {!Platform.isTV && <GlobalModal />}
-                                  name='(auth)/player'
+                              </ThemeProvider>
-                                  options={{
+                            </IntroSheetProvider>
-                                    headerShown: false,
+                          </BottomSheetModalProvider>
-                                    title: "",
+                        </GlobalModalProvider>
-                                    header: () => null,
+                      </MusicPlayerProvider>
-                                  }}
+                    </DownloadProvider>
-                                />
+                  </WebSocketProvider>
-                                <Stack.Screen
+                </LogProvider>
-                                  name='(auth)/now-playing'
+              </PlaySettingsProvider>
-                                  options={{
+            </NetworkStatusProvider>
-                                    headerShown: false,
+          </ServerUrlProvider>
-                                    presentation: "modal",
+        </InactivityProvider>
-                                    gestureEnabled: true,
-                                  }}
-                                />
-                                <Stack.Screen
-                                  name='login'
-                                  options={{
-                                    headerShown: true,
-                                    title: "",
-                                    headerTransparent: Platform.OS === "ios",
-                                  }}
-                                />
-                                <Stack.Screen name='+not-found' />
-                              </Stack>
-                              <Toaster
-                                duration={4000}
-                                toastOptions={{
-                                  style: {
-                                    backgroundColor: "#262626",
-                                    borderColor: "#363639",
-                                    borderWidth: 1,
-                                  },
-                                  titleStyle: {
-                                    color: "white",
-                                  },
-                                }}
-                                closeButton
-                              />
-                              <GlobalModal />
-                            </ThemeProvider>
-                          </IntroSheetProvider>
-                        </BottomSheetModalProvider>
-                      </GlobalModalProvider>
-                    </MusicPlayerProvider>
-                  </DownloadProvider>
-                </WebSocketProvider>
-              </LogProvider>
-            </PlaySettingsProvider>
-          </NetworkStatusProvider>
-        </ServerUrlProvider>
       </JellyfinProvider>
     </PersistQueryClientProvider>
   );

app/login.tsx

@@ -1,659 +1,13 @@
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { Platform } from "react-native";
-import type { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
+import { Login } from "@/components/login/Login";
-import { Image } from "expo-image";
+import { TVLogin } from "@/components/login/TVLogin";
-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,
-  Switch,
-  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 { SaveAccountModal } from "@/components/SaveAccountModal";
-import { Colors } from "@/constants/Colors";
-import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
-import type {
-  AccountSecurityType,
-  SavedServer,
-} from "@/utils/secureCredentials";
 
-const CredentialsSchema = z.object({
+const LoginPage: React.FC = () => {
-  username: z.string().min(1, t("login.username_required")),
+  if (Platform.isTV) {
-});
+    return <TVLogin />;
-
-const Login: React.FC = () => {
-  const api = useAtomValue(apiAtom);
-  const navigation = useNavigation();
-  const params = useLocalSearchParams();
-  const {
-    setServer,
-    login,
-    removeServer,
-    initiateQuickConnect,
-    loginWithSavedCredential,
-    loginWithPassword,
-  } = 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 || "",
-  });
-
-  // Save account state
-  const [saveAccount, setSaveAccount] = useState(false);
-  const [showSaveModal, setShowSaveModal] = useState(false);
-  const [pendingLogin, setPendingLogin] = useState<{
-    username: string;
-    password: string;
-  } | null>(null);
-
-  /**
-   * 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();
-
-    const result = CredentialsSchema.safeParse(credentials);
-    if (!result.success) return;
-
-    if (saveAccount) {
-      // Show save account modal to choose security type
-      setPendingLogin({
-        username: credentials.username,
-        password: credentials.password,
-      });
-      setShowSaveModal(true);
-    } else {
-      // Login without saving
-      await performLogin(credentials.username, credentials.password);
-    }
-  };
-
-  const performLogin = async (
-    username: string,
-    password: string,
-    options?: {
-      saveAccount?: boolean;
-      securityType?: AccountSecurityType;
-      pinCode?: string;
-    },
-  ) => {
-    setLoading(true);
-    try {
-      await login(username, password, serverName, options);
-    } 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);
-      setPendingLogin(null);
-    }
-  };
-
-  const handleSaveAccountConfirm = async (
-    securityType: AccountSecurityType,
-    pinCode?: string,
-  ) => {
-    setShowSaveModal(false);
-    if (pendingLogin) {
-      await performLogin(pendingLogin.username, pendingLogin.password, {
-        saveAccount: true,
-        securityType,
-        pinCode,
-      });
-    }
-  };
-
-  const handleQuickLoginWithSavedCredential = async (
-    serverUrl: string,
-    userId: string,
-  ) => {
-    await loginWithSavedCredential(serverUrl, userId);
-  };
-
-  const handlePasswordLogin = async (
-    serverUrl: string,
-    username: string,
-    password: string,
-  ) => {
-    await loginWithPassword(serverUrl, username, password);
-  };
-
-  const handleAddAccount = (server: SavedServer) => {
-    // Server is already selected, go to credential entry
-    setServer({ address: server.address });
-    if (server.name) {
-      setServerName(server.name);
-    }
-  };
-
-  /**
-   * 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 {}
-  }, []);
 
-  const handleQuickConnect = async () => {
+  return <Login />;
-    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'
-                autoCorrect={false}
-                textContentType='username'
-                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) => {
-                    await handleConnect(s.address);
-                  }}
-                  onQuickLogin={handleQuickLoginWithSavedCredential}
-                  onPasswordLogin={handlePasswordLogin}
-                  onAddAccount={handleAddAccount}
-                />
-              </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'
-                  autoCorrect={false}
-                  textContentType='username'
-                  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}
-                />
-                <TouchableOpacity
-                  onPress={() => setSaveAccount(!saveAccount)}
-                  className='flex flex-row items-center py-2'
-                  activeOpacity={0.7}
-                >
-                  <Switch
-                    value={saveAccount}
-                    onValueChange={setSaveAccount}
-                    trackColor={{ false: "#3f3f46", true: Colors.primary }}
-                    thumbColor='white'
-                  />
-                  <Text className='ml-3 text-neutral-300'>
-                    {t("save_account.save_for_later")}
-                  </Text>
-                </TouchableOpacity>
-                <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);
-                }}
-                onQuickLogin={handleQuickLoginWithSavedCredential}
-                onPasswordLogin={handlePasswordLogin}
-                onAddAccount={handleAddAccount}
-              />
-            </View>
-          </View>
-        )}
-      </KeyboardAvoidingView>
-
-      {/* Save Account Modal */}
-      <SaveAccountModal
-        visible={showSaveModal}
-        onClose={() => {
-          setShowSaveModal(false);
-          setPendingLogin(null);
-        }}
-        onSave={handleSaveAccountConfirm}
-        username={pendingLogin?.username || credentials.username}
-      />
-    </SafeAreaView>
-  );
 };
 
-export default Login;
+export default LoginPage;

app/topshelf/item.tsx

@@ -0,0 +1,33 @@
+import { useLocalSearchParams, useRootNavigationState } from "expo-router";
+import { useEffect } from "react";
+import { View } from "react-native";
+import useRouter from "@/hooks/useAppRouter";
+
+export default function TopShelfItemRedirect() {
+  const router = useRouter();
+  const rootNavigationState = useRootNavigationState();
+  const { id, type } = useLocalSearchParams<{
+    id?: string;
+    type?: string;
+  }>();
+
+  useEffect(() => {
+    if (!rootNavigationState?.key) {
+      return;
+    }
+
+    if (!id) {
+      router.replace("/(auth)/(tabs)/(home)");
+      return;
+    }
+
+    if (type === "Series") {
+      router.replace(`/(auth)/(tabs)/(home)/series/${id}`);
+      return;
+    }
+
+    router.replace(`/(auth)/(tabs)/(home)/items/page?id=${id}`);
+  }, [id, rootNavigationState?.key, router, type]);
+
+  return <View style={{ flex: 1, backgroundColor: "#000" }} />;
+}

app/topshelf/play.tsx

@@ -0,0 +1,32 @@
+import { useLocalSearchParams, useRootNavigationState } from "expo-router";
+import { useEffect } from "react";
+import { View } from "react-native";
+import useRouter from "@/hooks/useAppRouter";
+
+export default function TopShelfPlayRedirect() {
+  const router = useRouter();
+  const rootNavigationState = useRootNavigationState();
+  const { id } = useLocalSearchParams<{
+    id?: string;
+  }>();
+
+  useEffect(() => {
+    if (!rootNavigationState?.key) {
+      return;
+    }
+
+    if (!id) {
+      router.replace("/(auth)/(tabs)/(home)");
+      return;
+    }
+
+    const queryParams = new URLSearchParams({
+      itemId: id,
+      offline: "false",
+    });
+
+    router.replace(`/player/direct-player?${queryParams.toString()}`);
+  }, [id, rootNavigationState?.key, router]);
+
+  return <View style={{ flex: 1, backgroundColor: "#000" }} />;
+}

app/tv-account-action-modal.tsx

@@ -0,0 +1,251 @@
+import { Ionicons } from "@expo/vector-icons";
+import { BlurView } from "expo-blur";
+import { useAtomValue } from "jotai";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Animated,
+  Easing,
+  Pressable,
+  ScrollView,
+  TVFocusGuideView,
+} from "react-native";
+import { Text } from "@/components/common/Text";
+import { useScaledTVTypography } from "@/constants/TVTypography";
+import useRouter from "@/hooks/useAppRouter";
+import { tvAccountActionModalAtom } from "@/utils/atoms/tvAccountActionModal";
+import { store } from "@/utils/store";
+
+// Action card component
+const TVAccountActionCard: React.FC<{
+  label: string;
+  icon: keyof typeof Ionicons.glyphMap;
+  variant?: "default" | "destructive";
+  hasTVPreferredFocus?: boolean;
+  onPress: () => void;
+}> = ({ label, icon, variant = "default", hasTVPreferredFocus, onPress }) => {
+  const [focused, setFocused] = useState(false);
+  const scale = useRef(new Animated.Value(1)).current;
+  const typography = useScaledTVTypography();
+
+  const animateTo = (v: number) =>
+    Animated.timing(scale, {
+      toValue: v,
+      duration: 150,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+
+  const isDestructive = variant === "destructive";
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onFocus={() => {
+        setFocused(true);
+        animateTo(1.05);
+      }}
+      onBlur={() => {
+        setFocused(false);
+        animateTo(1);
+      }}
+      hasTVPreferredFocus={hasTVPreferredFocus}
+    >
+      <Animated.View
+        style={{
+          transform: [{ scale }],
+          flexDirection: "row",
+          height: 60,
+          backgroundColor: focused
+            ? isDestructive
+              ? "#ef4444"
+              : "#fff"
+            : isDestructive
+              ? "rgba(239, 68, 68, 0.2)"
+              : "rgba(255,255,255,0.08)",
+          borderRadius: 14,
+          justifyContent: "center",
+          alignItems: "center",
+          paddingHorizontal: 24,
+          gap: 12,
+        }}
+      >
+        <Ionicons
+          name={icon}
+          size={22}
+          color={
+            focused
+              ? isDestructive
+                ? "#fff"
+                : "#000"
+              : isDestructive
+                ? "#ef4444"
+                : "#fff"
+          }
+        />
+        <Text
+          style={{
+            fontSize: typography.callout,
+            color: focused
+              ? isDestructive
+                ? "#fff"
+                : "#000"
+              : isDestructive
+                ? "#ef4444"
+                : "#fff",
+            fontWeight: "600",
+          }}
+          numberOfLines={1}
+        >
+          {label}
+        </Text>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+export default function TVAccountActionModalPage() {
+  const typography = useScaledTVTypography();
+  const router = useRouter();
+  const modalState = useAtomValue(tvAccountActionModalAtom);
+  const { t } = useTranslation();
+
+  const [isReady, setIsReady] = useState(false);
+  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(tvAccountActionModalAtom, null);
+    };
+  }, [overlayOpacity, sheetTranslateY]);
+
+  const handleLogin = () => {
+    modalState?.onLogin();
+    router.back();
+  };
+
+  const handleDelete = () => {
+    modalState?.onDelete();
+    router.back();
+  };
+
+  if (!modalState) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      style={{
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        justifyContent: "flex-end",
+        opacity: overlayOpacity,
+      }}
+    >
+      <Animated.View
+        style={{
+          width: "100%",
+          transform: [{ translateY: sheetTranslateY }],
+        }}
+      >
+        <BlurView
+          intensity={80}
+          tint='dark'
+          style={{
+            borderTopLeftRadius: 24,
+            borderTopRightRadius: 24,
+            overflow: "hidden",
+          }}
+        >
+          <TVFocusGuideView
+            autoFocus
+            trapFocusUp
+            trapFocusDown
+            trapFocusLeft
+            trapFocusRight
+            style={{
+              paddingTop: 24,
+              paddingBottom: 50,
+              overflow: "visible",
+            }}
+          >
+            {/* Account username as title */}
+            <Text
+              style={{
+                fontSize: typography.heading,
+                fontWeight: "600",
+                color: "#FFFFFF",
+                marginBottom: 4,
+                paddingHorizontal: 48,
+              }}
+            >
+              {modalState.account.username}
+            </Text>
+
+            {/* Server name as subtitle */}
+            <Text
+              style={{
+                fontSize: typography.callout,
+                fontWeight: "500",
+                color: "rgba(255,255,255,0.6)",
+                marginBottom: 16,
+                paddingHorizontal: 48,
+              }}
+            >
+              {modalState.server.name || modalState.server.address}
+            </Text>
+
+            {/* Horizontal options */}
+            {isReady && (
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                style={{ overflow: "visible" }}
+                contentContainerStyle={{
+                  paddingHorizontal: 48,
+                  paddingVertical: 10,
+                  gap: 12,
+                }}
+              >
+                <TVAccountActionCard
+                  label={t("common.login")}
+                  icon='log-in-outline'
+                  hasTVPreferredFocus
+                  onPress={handleLogin}
+                />
+                <TVAccountActionCard
+                  label={t("common.delete")}
+                  icon='trash-outline'
+                  variant='destructive'
+                  onPress={handleDelete}
+                />
+              </ScrollView>
+            )}
+          </TVFocusGuideView>
+        </BlurView>
+      </Animated.View>
+    </Animated.View>
+  );
+}