style(tv): update settings to use apple tv-style white and green accents

- Hide subtitle button when no subtitle tracks available
- Add back/menu button handling to close option sheets

.claude/commands/reflect.md

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

.claude/learned-facts.md

@@ -0,0 +1,27 @@
+# Learned Facts
+
+This file contains facts about the codebase learned from past sessions. These are things Claude got wrong or needed clarification on, stored here to prevent the same mistakes in future sessions.
+
+This file is auto-imported into CLAUDE.md and loaded at the start of each session.
+
+## Facts
+
+<!-- New facts will be appended below this line -->
+
+- **Native bottom tabs + useRouter conflict**: When using `@bottom-tabs/react-navigation` with Expo Router, avoid using the `useRouter()` hook in components rendered at the provider level (outside the tab navigator). The hook subscribes to navigation state changes and can cause unexpected tab switches. Use the static `router` import from `expo-router` instead. _(2025-01-09)_
+
+- **IntroSheet rendering location**: The `IntroSheet` component is rendered inside `IntroSheetProvider` which wraps the entire navigation stack. Any hooks in IntroSheet that interact with navigation state can affect the native bottom tabs. _(2025-01-09)_
+
+- **Intro modal trigger location**: The intro modal trigger logic should be in the `Home.tsx` component, not in the tabs `_layout.tsx`. Triggering modals from tab layout can interfere with native bottom tabs navigation. _(2025-01-09)_
+
+- **Tab folder naming**: The tab folders use underscore prefix naming like `(_home)` instead of just `(home)` based on the project's file structure conventions. _(2025-01-09)_
+
+- **macOS header buttons fix**: Header buttons (`headerRight`/`headerLeft`) don't respond to touches on macOS Catalyst builds when using standard React Native `TouchableOpacity`. Fix by using `Pressable` from `react-native-gesture-handler` instead. The library is already installed and `GestureHandlerRootView` wraps the app. _(2026-01-10)_
+
+- **Header button locations**: Header buttons are defined in multiple places: `app/(auth)/(tabs)/(home)/_layout.tsx` (SettingsButton, SessionsButton, back buttons), `components/common/HeaderBackButton.tsx` (reusable), `components/Chromecast.tsx`, `components/RoundButton.tsx`, and dynamically via `navigation.setOptions()` in `components/home/Home.tsx` and `app/(auth)/(tabs)/(home)/downloads/index.tsx`. _(2026-01-10)_
+
+- **useNetworkAwareQueryClient limitations**: The `useNetworkAwareQueryClient` hook uses `Object.create(queryClient)` which breaks QueryClient methods that use JavaScript private fields (like `getQueriesData`, `setQueriesData`, `setQueryData`). Only use it when you ONLY need `invalidateQueries`. For cache manipulation, use standard `useQueryClient` from `@tanstack/react-query`. _(2026-01-10)_
+
+- **Mark as played flow**: The "mark as played" button uses `PlayedStatus` component → `useMarkAsPlayed` hook → `usePlaybackManager.markItemPlayed()`. The hook does optimistic updates via `setQueriesData` before calling the API. Located in `components/PlayedStatus.tsx` and `hooks/useMarkAsPlayed.ts`. _(2026-01-10)_
+
+- **Stack screen header configuration**: Sub-pages under `(home)` need explicit `Stack.Screen` entries in `app/(auth)/(tabs)/(home)/_layout.tsx` with `headerTransparent: Platform.OS === "ios"`, `headerBlurEffect: "none"`, and a back button. Without this, pages show with wrong header styling. _(2026-01-10)_

.github/CONTRIBUTING.md

@@ -1,11 +1,13 @@
 # Contributing to Streamyfin
 
-Thank you for your interest in contributing to the Streamyfin mobile app project! This document provides guidelines to smoothly collaborate on the Streamyfin codebase and help improve the app for all users.
+Thank you for your interest in contributing to the Streamyfin project. This document outlines the guidelines for effective collaboration across the Streamyfin codebase and aims to ensure a smooth, productive experience for all contributors.
 
 ---
 
 ## Table of Contents
 
+
+- [AI Assistance Disclosure](#ai-assistance-disclosure)
 - [Reporting Issues](#reporting-issues)
 - [Reporting Security Vulnerabilities](#reporting-security-vulnerabilities)
 - [Requesting Features & Enhancements](#requesting-features--enhancements)
@@ -19,6 +21,25 @@ Thank you for your interest in contributing to the Streamyfin mobile app project
 
 ---
 
+## AI Assistance Disclosure
+
+> [!IMPORTANT]  
+> If any AI tool was used while contributing to Streamyfin, it must be disclosed in the pull request.
+
+State in your PR whether AI assistance was used and to what extent (for example, *docs only* or *code generation*).  
+If AI-generated text was used in PR discussions or responses, disclose that as well.  
+Minor autocomplete or keyword suggestions do not require disclosure.
+
+### Examples
+
+> This PR was written primarily by Claude Code.  
+> I used Cursor to explore parts of the codebase, but the implementation is fully manual.
+
+Failing to disclose AI usage wastes maintainers’ time and complicates review efforts.  
+AI-assisted contributions are welcome, but contributors remain fully responsible for the code they submit.  
+
+Always disclose AI involvement to maintain transparency and respect for maintainers’ time.
+
 ## Reporting Issues
 
 Streamyfin uses GitHub issues to track bugs and improvements. Before opening a new issue:
@@ -46,11 +67,11 @@ When creating a new feature request:
 
 - Check if the idea or similar request exists.
 - Use reactions like 👍 to support existing requests.
-- Provide a clear explanation of the use case and benefits.
-
+- Clearly describe the use case and potential benefits.
+- Include screenshots when relevant.
 ---
 
-## Developing the Mobile App
+## Developing Streamyfin
 
 ### Codebase Overview
 
@@ -136,6 +157,8 @@ When opening a PR:
 - Provide a detailed description in the PR body, explaining what, why, and any impacts.
 - Include screenshots or recordings if UI changes are involved.
 - Ensure CI checks are green (lint, type-check, build).
+- Confirm that the branch is **up to date with `main`** before submission. 
+- Mention if AI-generated code or content was used (see [AI Assistance Disclosure](#ai-assistance-disclosure)).  
 - Do not include secrets, tokens, or production credentials. Redact sensitive data in logs and screenshots.
 - Keep PRs focused; avoid bundling unrelated changes together.
 
@@ -159,4 +182,4 @@ PRs require review and approval by maintainers before merging.---
 
 ---
 
-Thank you for helping make Streamyfin a better app for everyone!
+Thank you for contributing to make Streamyfin better for everyone!

.github/ISSUE_TEMPLATE/issue_report.yml

@@ -77,13 +77,8 @@ body:
       label: Streamyfin Version
       description: What version of Streamyfin are you running?
       options:
+        - 0.47.1
         - 0.30.2
-        - 0.29.0
-        - 0.28.0
-        - 0.27.0
-        - 0.26.1
-        - 0.26.0
-        - 0.25.0
         - older
         - TestFlight/Development build
     validations:
@@ -116,4 +111,4 @@ body:
     id: additional-info
     attributes:
       label: Additional information
-      description: Any additional context that might help us understand and reproduce the issue.
+      description: Any additional context that might help us understand and reproduce the issue.

.github/copilot-instructions.md

@@ -79,7 +79,7 @@ and provides seamless media streaming with offline capabilities and Chromecast s
 
 ## Commit Messages
 
-Use [Conventional Commits](https://www.conventionalcommits.org/):
+Use Conventional Commits (https://www.conventionalcommits.org/):
 Exemples:
 - `feat(player): add Chromecast support`
 - `fix(auth): handle expired JWT tokens`

.github/crowdin.yml

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

.github/workflows/build-apps.yml

@@ -20,8 +20,20 @@ jobs:
       contents: read
 
     steps:
+      - name: 🗑️ Free Disk Space
+        uses: BRAINSia/free-disk-space@7048ffbf50819342ac964ef3998a51c2564a8a75 # v2.1.3
+        with:
+          tool-cache: false
+          mandb: true
+          android: false
+          dotnet: true
+          haskell: true
+          large-packages: true
+          docker-images: true
+          swap-storage: false
+
       - name: 📥 Checkout code
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -29,12 +41,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -48,7 +60,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: |
             ~/.gradle/caches
@@ -61,7 +73,7 @@ jobs:
         run: bun run prebuild
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -76,7 +88,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: streamyfin-android-phone-apk-${{ env.DATE_TAG }}
           path: |
@@ -91,8 +103,20 @@ jobs:
       contents: read
 
     steps:
+      - name: 🗑️ Free Disk Space
+        uses: BRAINSia/free-disk-space@7048ffbf50819342ac964ef3998a51c2564a8a75 # v2.1.3
+        with:
+          tool-cache: false
+          mandb: true
+          android: false
+          dotnet: true
+          haskell: true
+          large-packages: true
+          docker-images: true
+          swap-storage: false
+
       - name: 📥 Checkout code
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -100,12 +124,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -119,7 +143,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: |
             ~/.gradle/caches
@@ -132,7 +156,7 @@ jobs:
         run: bun run prebuild:tv
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -147,7 +171,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: streamyfin-android-tv-apk-${{ env.DATE_TAG }}
           path: |
@@ -156,14 +180,14 @@ jobs:
 
   build-ios-phone:
     if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
-    runs-on: macos-15
+    runs-on: macos-26
     name: 🍎 Build iOS IPA (Phone)
     permissions:
       contents: read
 
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -171,12 +195,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
@@ -191,6 +215,11 @@ jobs:
       - name: 🛠️ Generate project files
         run: bun run prebuild
 
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
+        with:
+          xcode-version: "26.2"
+
       - name: 🏗️ Setup EAS
         uses: expo/expo-github-action@main
         with:
@@ -198,9 +227,6 @@ jobs:
           token: ${{ secrets.EXPO_TOKEN }}
           eas-cache: true
 
-      - name: ⚙️ Ensure iOS SDKs installed
-        run: xcodebuild -downloadPlatform iOS
-
       - name: 🚀 Build iOS app
         env:
           EXPO_TV: 0
@@ -210,16 +236,73 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload IPA artifact
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: streamyfin-ios-phone-ipa-${{ env.DATE_TAG }}
           path: build-*.ipa
           retention-days: 7
 
+  build-ios-phone-unsigned:
+    if: (!contains(github.event.head_commit.message, '[skip ci]'))
+    runs-on: macos-26
+    name: 🍎 Build iOS IPA (Phone - Unsigned)
+    permissions:
+      contents: read
+
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          fetch-depth: 0
+          submodules: recursive
+          show-progress: false
+
+      - name: 🍞 Setup Bun
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-cache
+
+      - name: 📦 Install dependencies and reload submodules
+        run: |
+          bun install --frozen-lockfile
+          bun run submodule-reload
+
+      - name: 🛠️ Generate project files
+        run: bun run prebuild
+
+      - name: 🔧 Setup Xcode
+        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
+        with:
+          xcode-version: "26.2"
+
+      - name: 🚀 Build iOS app
+        env:
+          EXPO_TV: 0
+        run: bun run ios:unsigned-build ${{ github.event_name == 'pull_request' && '-- --verbose' || '' }}
+
+      - name: 📅 Set date tag
+        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
+
+      - name: 📤 Upload IPA artifact
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        with:
+          name: streamyfin-ios-phone-unsigned-ipa-${{ env.DATE_TAG }}
+          path: build/*.ipa
+          retention-days: 7
+
   # Disabled for now - uncomment when ready to build iOS TV
   # build-ios-tv:
   #   if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
-  #   runs-on: macos-15
+  #   runs-on: macos-26
   #   name: 🍎 Build iOS IPA (TV)
   #   permissions:
   #     contents: read
@@ -254,6 +337,11 @@ jobs:
   #     - name: 🛠️ Generate project files
   #       run: bun run prebuild:tv
   #
+  #     - name: 🔧 Setup Xcode
+  #       uses: maxim-lobanov/setup-xcode@v1
+  #       with:
+  #         xcode-version: '26.0.1'
+  #
   #     - name: 🏗️ Setup EAS
   #       uses: expo/expo-github-action@main
   #       with:
@@ -261,9 +349,6 @@ jobs:
   #         token: ${{ secrets.EXPO_TOKEN }}
   #         eas-cache: true
   #
-  #     - name: ⚙️ Ensure tvOS SDKs installed
-  #       run: xcodebuild -downloadPlatform tvOS
-  #
   #     - name: 🚀 Build iOS app
   #       env:
   #         EXPO_TV: 1

.github/workflows/check-lockfile.yml

@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           show-progress: false
@@ -27,12 +27,12 @@ jobs:
           fetch-depth: 0
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: |
             ~/.bun/install/cache

.github/workflows/ci-codeql.yml

@@ -24,20 +24,16 @@ jobs:
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-          show-progress: false
-          fetch-depth: 0
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@e296a935590eb16afc0c0108289f68c87e2a89a5 # v4.30.7
+        uses: github/codeql-action/init@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended,security-and-quality
 
       - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@e296a935590eb16afc0c0108289f68c87e2a89a5 # v4.30.7
+        uses: github/codeql-action/autobuild@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@e296a935590eb16afc0c0108289f68c87e2a89a5 # v4.30.7
+        uses: github/codeql-action/analyze@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10

.github/workflows/crowdin.yml

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

.github/workflows/linting.yml

@@ -51,13 +51,13 @@ jobs:
       contents: read
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
 
       - name: Dependency Review
-        uses: actions/dependency-review-action@56339e523c0409420f6c2c9a2f4292bbb3c07dd3 # v4.8.0
+        uses: actions/dependency-review-action@3c4e3dcb1aa7874d2c16be7d79418e9b7efd6261 # v4.8.2
         with:
           fail-on-severity: high
           base-ref: ${{ github.event.pull_request.base.sha || 'develop' }}
@@ -69,14 +69,14 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: 🛒 Checkout repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           submodules: recursive
           fetch-depth: 0
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 
@@ -100,19 +100,19 @@ jobs:
 
     steps:
       - name: "📥 Checkout PR code"
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           submodules: recursive
           fetch-depth: 0
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: '24.x'
 
       - name: "🍞 Setup Bun"
-        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 

.github/workflows/notification.yml

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

.github/workflows/stale.yml

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

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

@@ -18,10 +18,10 @@ jobs:
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: '24.x'
           cache: 'npm'
@@ -54,7 +54,7 @@ jobs:
           dry_run: no-push
 
       - name: 📬 Commit and create pull request
-        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e #v7.0.8
+        uses: peter-evans/create-pull-request@98357b18bf14b5342f975ff684046ec3b2a07725 # v8.0.0
         with:
           add-paths: .github/ISSUE_TEMPLATE/bug_report.yml
           branch: ci-update-bug-report

.gitignore

@@ -19,7 +19,7 @@ web-build/
 /androidtv
 
 # Module-specific Builds
-modules/vlc-player/android/build
+modules/mpv-player/android/build
 modules/player/android
 modules/hls-downloader/android/build
 
@@ -50,7 +50,6 @@ npm-debug.*
 .idea/
 .ruby-lsp
 .cursor/
-.claude/
 
 # Environment and Configuration
 expo-env.d.ts
@@ -64,4 +63,12 @@ credentials.json
 streamyfin-4fec1-firebase-adminsdk.json
 
 # Version and Backup Files
-/version-backup-*
+/version-backup-*
+/modules/sf-player/android/build
+/modules/music-controls/android/build
+modules/background-downloader/android/build/*
+/modules/mpv-player/android/build
+
+# ios:unsigned-build Artifacts
+build/
+.claude/settings.local.json

.vscode/settings.json

@@ -1,178 +1,25 @@
 {
-  // ==========================================
-  // FORMATTING & LINTING
-  // ==========================================
-
-  // Biome as default formatter
   "editor.defaultFormatter": "biomejs.biome",
   "editor.formatOnSave": true,
-  "editor.formatOnPaste": true,
-  "editor.formatOnType": false,
-
-  // Language-specific formatters
-  "[javascript]": {
-    "editor.defaultFormatter": "biomejs.biome",
-    "editor.formatOnSave": true
+  "editor.codeActionsOnSave": {
+    "source.fixAll.biome": "explicit"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "biomejs.biome",
-    "editor.formatOnSave": true
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[typescriptreact]": {
-    "editor.defaultFormatter": "biomejs.biome",
-    "editor.formatOnSave": true
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[javascriptreact]": {
-    "editor.defaultFormatter": "biomejs.biome",
-    "editor.formatOnSave": true
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[json]": {
-    "editor.defaultFormatter": "biomejs.biome",
-    "editor.formatOnSave": true
+    "editor.defaultFormatter": "biomejs.biome"
   },
-  "[jsonc]": {
-    "editor.defaultFormatter": "biomejs.biome",
-    "editor.formatOnSave": true
-  },
-  "[swift]": {
-    "editor.insertSpaces": true,
-    "editor.tabSize": 2
-  },
-
-  // ==========================================
-  // TYPESCRIPT & JAVASCRIPT
-  // ==========================================
-
-  // TypeScript performance optimizations
-  "typescript.preferences.includePackageJsonAutoImports": "auto",
-  "typescript.suggest.autoImports": true,
-  "typescript.updateImportsOnFileMove.enabled": "always",
-  "typescript.preferences.preferTypeOnlyAutoImports": true,
-  "typescript.preferences.importModuleSpecifier": "relative",
-  "typescript.preferences.includeCompletionsForImportStatements": true,
-  "typescript.preferences.includeCompletionsWithSnippetText": true,
-
-  // JavaScript settings
-  "javascript.preferences.importModuleSpecifier": "relative",
-  "javascript.suggest.autoImports": true,
-  "javascript.updateImportsOnFileMove.enabled": "always",
-
-  // ==========================================
-  // REACT NATIVE & EXPO
-  // ==========================================
-
-  // File associations for React Native
-  "files.associations": {
-    "*.expo.ts": "typescript",
-    "*.expo.tsx": "typescriptreact",
-    "*.expo.js": "javascript",
-    "*.expo.jsx": "javascriptreact",
-    "metro.config.js": "javascript",
-    "babel.config.js": "javascript",
-    "app.config.js": "javascript",
-    "eas.json": "jsonc"
-  },
-
-  // React Native specific settings
-  "emmet.includeLanguages": {
-    "typescriptreact": "html",
-    "javascriptreact": "html"
-  },
-  "emmet.triggerExpansionOnTab": true,
-
-  // Exclude build directories from search
-  "search.exclude": {
-    "**/node_modules": true
-  },
-
-  // ==========================================
-  // EDITOR PERFORMANCE & UX
-  // ==========================================
-
-  // Performance optimizations
-  "editor.largeFileOptimizations": true,
-  "files.watcherExclude": {
-    "**/.git/objects/**": true,
-    "**/.git/subtree-cache/**": true,
-    "**/node_modules/**": true,
-    "**/.expo/**": true,
-    "**/ios/**": true,
-    "**/android/**": true,
-    "**/build/**": true,
-    "**/dist/**": true
-  },
-
-  // Better editor behavior
-  "editor.suggestSelection": "first",
-  "editor.quickSuggestions": {
-    "strings": true,
-    "comments": true,
-    "other": true
-  },
-  "editor.snippetSuggestions": "top",
-  "editor.tabCompletion": "on",
-  "editor.wordBasedSuggestions": "off",
-
-  // ==========================================
-  // TERMINAL & DEVELOPMENT
-  // ==========================================
-
-  // Terminal settings for Bun (Windows-specific)
-  "terminal.integrated.profiles.windows": {
-    "Command Prompt": {
-      "path": "C:\\Windows\\System32\\cmd.exe",
-      "env": {
-        "PATH": "${env:PATH};./node_modules/.bin"
-      }
-    }
-  },
-
-  // ==========================================
-  // WORKSPACE & NAVIGATION
-  // ==========================================
-
-  // Better workspace navigation
-  "explorer.fileNesting.enabled": true,
-  "explorer.fileNesting.expand": false,
-  "explorer.fileNesting.patterns": {
-    "*.ts": "${capture}.js",
-    "*.tsx": "${capture}.js",
-    "*.js": "${capture}.js,${capture}.js.map,${capture}.min.js,${capture}.d.ts",
-    "*.jsx": "${capture}.js",
-    "package.json": "package-lock.json,yarn.lock,bun.lock,bun.lockb,.yarnrc,.yarnrc.yml",
-    "tsconfig.json": "tsconfig.*.json",
-    ".env": ".env.*",
-    "app.json": "app.config.js,eas.json,expo-env.d.ts",
-    "README.md": "LICENSE.txt,SECURITY.md,CODE_OF_CONDUCT.md,CONTRIBUTING.md"
-  },
-
-  // Better breadcrumbs and navigation
-  "breadcrumbs.enabled": true,
-  "outline.showVariables": true,
-  "outline.showConstants": true,
-
-  // ==========================================
-  // GIT & VERSION CONTROL
-  // ==========================================
-
-  // Git integration
-  "git.autofetch": true,
-  "git.enableSmartCommit": true,
-  "git.confirmSync": false,
-  "git.ignoreLimitWarning": true,
-
-  // ==========================================
-  // CODE QUALITY & ERRORS
-  // ==========================================
-
-  // Better error detection
-  "typescript.validate.enable": true,
-  "javascript.validate.enable": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "explicit"
-  },
-
-  // Problem matcher for better error display
-  "typescript.tsc.autoDetect": "on"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "editor.formatOnSaveMode": "file"
 }

CLAUDE.md

@@ -0,0 +1,341 @@
+# CLAUDE.md
+
+@.claude/learned-facts.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+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.
+
+## Development Commands
+
+**CRITICAL: Always use `bun` for package management. Never use `npm`, `yarn`, or `npx`.**
+
+```bash
+# Setup
+bun i && bun run submodule-reload
+
+# Development builds
+bun run prebuild              # Mobile prebuild
+bun run ios                   # Run iOS
+bun run android               # Run Android
+
+# TV builds (suffix with :tv)
+bun run prebuild:tv
+bun run ios:tv
+bun run android:tv
+
+# Code quality
+bun run typecheck             # TypeScript check
+bun run check                 # BiomeJS check
+bun run lint                  # BiomeJS lint + fix
+bun run format                # BiomeJS format
+bun run test                  # Run all checks (typecheck, lint, format, doctor)
+
+# iOS-specific
+bun run ios:install-metal-toolchain  # Fix "missing Metal Toolchain" build errors
+```
+
+## Tech Stack
+
+- **Runtime**: Bun
+- **Framework**: React Native (Expo SDK 54)
+- **Language**: TypeScript (strict mode)
+- **State Management**: Jotai (global state atoms) + React Query (server state)
+- **API**: Jellyfin SDK (`@jellyfin/sdk`)
+- **Navigation**: Expo Router (file-based)
+- **Linting/Formatting**: BiomeJS
+- **Storage**: react-native-mmkv
+
+## Architecture
+
+### File Structure
+
+- `app/` - Expo Router screens with file-based routing
+- `components/` - Reusable UI components
+- `providers/` - React Context providers
+- `hooks/` - Custom React hooks
+- `utils/` - Utilities including Jotai atoms
+- `modules/` - Native modules (vlc-player, mpv-player, background-downloader)
+- `translations/` - i18n translation files
+
+### Key Patterns
+
+**State Management**:
+- Global state uses Jotai atoms in `utils/atoms/`
+- `settingsAtom` in `utils/atoms/settings.ts` for app settings
+- `apiAtom` and `userAtom` in `providers/JellyfinProvider.tsx` for auth state
+- Server state uses React Query with `@tanstack/react-query`
+
+**Jellyfin API Access**:
+- Use `apiAtom` from `JellyfinProvider` for authenticated API calls
+- Access user via `userAtom`
+- Use Jellyfin SDK utilities from `@jellyfin/sdk/lib/utils/api`
+
+**Navigation**:
+- File-based routing in `app/` directory
+- Tab navigation: `(home)`, `(search)`, `(favorites)`, `(libraries)`, `(watchlists)`
+- Shared routes use parenthesized groups like `(home,libraries,search,favorites,watchlists)`
+- **IMPORTANT**: Always use `useAppRouter` from `@/hooks/useAppRouter` instead of `useRouter` from `expo-router`. This custom hook automatically handles offline mode state preservation across navigation:
+  ```typescript
+  // ✅ Correct
+  import useRouter from "@/hooks/useAppRouter";
+  const router = useRouter();
+  
+  // ❌ Never use this
+  import { useRouter } from "expo-router";
+  import { router } from "expo-router";
+  ```
+
+**Offline Mode**:
+- Use `OfflineModeProvider` from `@/providers/OfflineModeProvider` to wrap pages that support offline content
+- Use `useOfflineMode()` hook to check if current context is offline
+- The `useAppRouter` hook automatically injects `offline=true` param when navigating within an offline context
+
+**Providers** (wrapping order in `app/_layout.tsx`):
+1. JotaiProvider
+2. QueryClientProvider
+3. JellyfinProvider (auth, API)
+4. NetworkStatusProvider
+5. PlaySettingsProvider
+6. WebSocketProvider
+7. DownloadProvider
+8. MusicPlayerProvider
+
+### Native Modules
+
+Located in `modules/`:
+- `vlc-player` - VLC video player integration
+- `mpv-player` - MPV video player integration (iOS)
+- `background-downloader` - Background download functionality
+- `sf-player` - Swift player module
+
+### Path Aliases
+
+Use `@/` prefix for imports (configured in `tsconfig.json`):
+```typescript
+import { useSettings } from "@/utils/atoms/settings";
+import { apiAtom } from "@/providers/JellyfinProvider";
+```
+
+## Coding Standards
+
+- Use TypeScript for all files (no .js)
+- Use functional React components with hooks
+- Use Jotai atoms for global state, React Query for server state
+- Follow BiomeJS formatting rules (2-space indent, semicolons, LF line endings)
+- 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):`
+
+## 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 Component Rendering Pattern
+
+**IMPORTANT**: The `.tv.tsx` file suffix only works for **pages** in the `app/` directory (resolved by Expo Router). It does NOT work for components - Metro bundler doesn't resolve platform-specific suffixes for component imports.
+
+**Pattern for TV-specific components**:
+```typescript
+// In page file (e.g., app/login.tsx)
+import { Platform } from "react-native";
+import { Login } from "@/components/login/Login";
+import { TVLogin } from "@/components/login/TVLogin";
+
+const LoginPage: React.FC = () => {
+  if (Platform.isTV) {
+    return <TVLogin />;
+  }
+  return <Login />;
+};
+
+export default LoginPage;
+```
+
+- Create separate component files for mobile and TV (e.g., `MyComponent.tsx` and `TVMyComponent.tsx`)
+- Use `Platform.isTV` to conditionally render the appropriate component
+- TV components typically use `TVInput`, `TVServerCard`, and other TV-prefixed components with focus handling
+
+### TV Option Selector Pattern (Dropdowns/Multi-select)
+
+For dropdown/select components on TV, use a **bottom sheet with horizontal scrolling**. This pattern is ideal for TV because:
+- Horizontal scrolling is natural for TV remotes (left/right D-pad)
+- Bottom sheet takes minimal screen space
+- Focus-based navigation works reliably
+
+**Key implementation details:**
+
+1. **Use absolute positioning instead of Modal** - React Native's `Modal` breaks the TV focus chain. Use an absolutely positioned `View` overlay instead:
+```typescript
+<View style={{
+  position: "absolute",
+  top: 0, left: 0, right: 0, bottom: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  justifyContent: "flex-end",
+  zIndex: 1000,
+}}>
+  <BlurView intensity={80} tint="dark" style={{ borderTopLeftRadius: 24, borderTopRightRadius: 24 }}>
+    {/* Content */}
+  </BlurView>
+</View>
+```
+
+2. **Horizontal ScrollView with focusable cards**:
+```typescript
+<ScrollView
+  horizontal
+  showsHorizontalScrollIndicator={false}
+  style={{ overflow: "visible" }}
+  contentContainerStyle={{ paddingHorizontal: 48, paddingVertical: 10, gap: 12 }}
+>
+  {options.map((option, index) => (
+    <TVOptionCard
+      key={index}
+      hasTVPreferredFocus={index === selectedIndex}
+      onPress={() => { onSelect(option.value); onClose(); }}
+      // ...
+    />
+  ))}
+</ScrollView>
+```
+
+3. **Focus handling on cards** - Use `Pressable` with `onFocus`/`onBlur` and `hasTVPreferredFocus`:
+```typescript
+<Pressable
+  onPress={onPress}
+  onFocus={() => { setFocused(true); animateTo(1.05); }}
+  onBlur={() => { setFocused(false); animateTo(1); }}
+  hasTVPreferredFocus={hasTVPreferredFocus}
+>
+  <Animated.View style={{ transform: [{ scale }], backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.08)" }}>
+    <Text style={{ color: focused ? "#000" : "#fff" }}>{label}</Text>
+  </Animated.View>
+</Pressable>
+```
+
+4. **Add padding for scale animations** - When items scale on focus, add enough padding (`overflow: "visible"` + `paddingVertical`) so scaled items don't clip.
+
+**Reference implementation**: See `TVOptionSelector` and `TVOptionCard` in `components/ItemContent.tv.tsx`
+
+### TV Focus Management for Overlays/Modals
+
+**CRITICAL**: When displaying overlays (bottom sheets, modals, dialogs) on TV, you must explicitly disable focus on all background elements. Without this, the TV focus engine will rapidly switch between overlay and background elements, causing a focus loop that freezes navigation.
+
+**Solution**: Add a `disabled` prop to every focusable component and pass `disabled={isModalOpen}` when an overlay is visible:
+
+```typescript
+// 1. Track modal state
+const [openModal, setOpenModal] = useState<ModalType | null>(null);
+const isModalOpen = openModal !== null;
+
+// 2. Each focusable component accepts disabled prop
+const TVFocusableButton: React.FC<{
+  onPress: () => void;
+  disabled?: boolean;
+}> = ({ onPress, disabled }) => (
+  <Pressable
+    onPress={onPress}
+    disabled={disabled}
+    focusable={!disabled}
+    hasTVPreferredFocus={isFirst && !disabled}
+  >
+    {/* content */}
+  </Pressable>
+);
+
+// 3. Pass disabled to all background components when modal is open
+<TVFocusableButton onPress={handlePress} disabled={isModalOpen} />
+```
+
+**Reference implementation**: See `settings.tv.tsx` for complete example with `TVSettingsOptionButton`, `TVSettingsToggle`, `TVSettingsStepper`, etc.
+
+### TV Focus Flickering Between Zones (Lists with Headers)
+
+When you have a page with multiple focusable zones (e.g., a filter bar above a grid), the TV focus engine can rapidly flicker between elements when navigating between zones. This is a known issue with React Native TV.
+
+**Solutions:**
+
+1. **Use FlatList instead of FlashList for TV** - FlashList has known focus issues on TV platforms. Use regular FlatList with `Platform.isTV` check:
+```typescript
+{Platform.isTV ? (
+  <FlatList
+    data={items}
+    renderItem={renderTVItem}
+    removeClippedSubviews={false}
+    // ...
+  />
+) : (
+  <FlashList data={items} renderItem={renderItem} />
+)}
+```
+
+2. **Add `removeClippedSubviews={false}`** - Prevents the list from unmounting off-screen items, which can cause focus to "fall through" to other elements.
+
+3. **Only ONE element should have `hasTVPreferredFocus`** - Never have multiple elements competing for initial focus. Choose one element (usually the first filter button or first list item) to have preferred focus:
+```typescript
+// ✅ Good - only first filter button has preferred focus
+<TVFilterButton hasTVPreferredFocus={index === 0} />
+<TVFocusablePoster /> // No hasTVPreferredFocus
+
+// ❌ Bad - both compete for focus
+<TVFilterButton hasTVPreferredFocus />
+<TVFocusablePoster hasTVPreferredFocus={index === 0} />
+```
+
+4. **Keep headers/filter bars outside the list** - Instead of using `ListHeaderComponent`, render the filter bar as a separate View above the FlatList:
+```typescript
+<View style={{ flex: 1 }}>
+  {/* Filter bar - separate from list */}
+  <View style={{ flexDirection: "row", gap: 12 }}>
+    <TVFilterButton />
+    <TVFilterButton />
+  </View>
+
+  {/* Grid */}
+  <FlatList data={items} renderItem={renderTVItem} />
+</View>
+```
+
+5. **Avoid multiple scrollable containers** - Don't use ScrollView for the filter bar if you have a FlatList below. Use a simple View instead to prevent focus conflicts between scrollable containers.
+
+**Reference implementation**: See `app/(auth)/(tabs)/(libraries)/[libraryId].tsx` for the TV filter bar + grid pattern.
+
+### TV Focus Guide Navigation (Non-Adjacent Sections)
+
+When you need focus to navigate between sections that aren't geometrically aligned (e.g., left-aligned buttons to a horizontal ScrollView), use `TVFocusGuideView` with the `destinations` prop:
+
+```typescript
+// 1. Track destination with useState (NOT useRef - won't trigger re-renders)
+const [firstCardRef, setFirstCardRef] = useState<View | null>(null);
+
+// 2. Place invisible focus guide between sections
+{firstCardRef && (
+  <TVFocusGuideView
+    destinations={[firstCardRef]}
+    style={{ height: 1, width: "100%" }}
+  />
+)}
+
+// 3. Target component must use forwardRef
+const MyCard = React.forwardRef<View, Props>(({ ... }, ref) => (
+  <Pressable ref={ref} ...>
+    ...
+  </Pressable>
+));
+
+// 4. Pass state setter as callback ref to first item
+{items.map((item, index) => (
+  <MyCard
+    ref={index === 0 ? setFirstCardRef : undefined}
+    ...
+  />
+))}
+```
+
+**For detailed documentation and bidirectional navigation patterns, see [docs/tv-focus-guide.md](docs/tv-focus-guide.md)**
+
+**Reference implementation**: See `components/ItemContent.tv.tsx` for bidirectional focus navigation between playback options and cast list.

GLOBAL_MODAL_GUIDE.md

@@ -0,0 +1,232 @@
+# Global Modal System with Gorhom Bottom Sheet
+
+This guide explains how to use the global modal system implemented in this project.
+
+## Overview
+
+The global modal system allows you to trigger a bottom sheet modal from anywhere in your app programmatically, and render any component inside it.
+
+## Architecture
+
+The system consists of three main parts:
+
+1. **GlobalModalProvider** (`providers/GlobalModalProvider.tsx`) - Context provider that manages modal state
+2. **GlobalModal** (`components/GlobalModal.tsx`) - The actual modal component rendered at root level
+3. **useGlobalModal** hook - Hook to interact with the modal from anywhere
+
+## Setup (Already Configured)
+
+The system is already integrated into your app:
+
+```tsx
+// In app/_layout.tsx
+<BottomSheetModalProvider>
+  <GlobalModalProvider>
+    {/* Your app content */}
+    <GlobalModal />
+  </GlobalModalProvider>
+</BottomSheetModalProvider>
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { useGlobalModal } from "@/providers/GlobalModalProvider";
+import { View, Text } from "react-native";
+
+function MyComponent() {
+  const { showModal, hideModal } = useGlobalModal();
+
+  const handleOpenModal = () => {
+    showModal(
+      <View className='p-6'>
+        <Text className='text-white text-2xl'>Hello from Modal!</Text>
+      </View>
+    );
+  };
+
+  return (
+    <Button onPress={handleOpenModal} title="Open Modal" />
+  );
+}
+```
+
+### With Custom Options
+
+```tsx
+const handleOpenModal = () => {
+  showModal(
+    <YourCustomComponent />,
+    {
+      snapPoints: ["25%", "50%", "90%"],  // Custom snap points
+      enablePanDownToClose: true,          // Allow swipe to close
+      backgroundStyle: {                   // Custom background
+        backgroundColor: "#000000",
+      },
+    }
+  );
+};
+```
+
+### Programmatic Control
+
+```tsx
+// Open modal
+showModal(<Content />);
+
+// Close modal from within the modal content
+function ModalContent() {
+  const { hideModal } = useGlobalModal();
+  
+  return (
+    <View>
+      <Button onPress={hideModal} title="Close" />
+    </View>
+  );
+}
+
+// Close modal from outside
+hideModal();
+```
+
+### In Event Handlers or Functions
+
+```tsx
+function useApiCall() {
+  const { showModal } = useGlobalModal();
+  
+  const fetchData = async () => {
+    try {
+      const result = await api.fetch();
+      
+      // Show success modal
+      showModal(
+        <SuccessMessage data={result} />
+      );
+    } catch (error) {
+      // Show error modal
+      showModal(
+        <ErrorMessage error={error} />
+      );
+    }
+  };
+  
+  return fetchData;
+}
+```
+
+## API Reference
+
+### `useGlobalModal()`
+
+Returns an object with the following properties:
+
+- **`showModal(content, options?)`** - Show the modal with given content
+  - `content: ReactNode` - Any React component or element to render
+  - `options?: ModalOptions` - Optional configuration object
+  
+- **`hideModal()`** - Programmatically hide the modal
+
+- **`isVisible: boolean`** - Current visibility state of the modal
+
+### `ModalOptions`
+
+```typescript
+interface ModalOptions {
+  enableDynamicSizing?: boolean;        // Auto-size based on content (default: true)
+  snapPoints?: (string | number)[];     // Fixed snap points (e.g., ["50%", "90%"])
+  enablePanDownToClose?: boolean;       // Allow swipe down to close (default: true)
+  backgroundStyle?: object;             // Custom background styles
+  handleIndicatorStyle?: object;        // Custom handle indicator styles
+}
+```
+
+## Examples
+
+See `components/ExampleGlobalModalUsage.tsx` for comprehensive examples including:
+- Simple content modal
+- Modal with custom snap points
+- Complex component in modal
+- Success/error modals triggered from functions
+
+## Default Styling
+
+The modal uses these default styles (can be overridden via options):
+
+```typescript
+{
+  enableDynamicSizing: true,
+  enablePanDownToClose: true,
+  backgroundStyle: {
+    backgroundColor: "#171717",  // Dark background
+  },
+  handleIndicatorStyle: {
+    backgroundColor: "white",
+  },
+}
+```
+
+## Best Practices
+
+1. **Keep content in separate components** - Don't inline large JSX in `showModal()` calls
+2. **Use the hook in custom hooks** - Create specialized hooks like `useShowSuccessModal()` for reusable modal patterns
+3. **Handle cleanup** - The modal automatically clears content when closed
+4. **Avoid nesting** - Don't show modals from within modals
+5. **Consider UX** - Only use for important, contextual information that requires user attention
+
+## Using with PlatformDropdown
+
+When using `PlatformDropdown` with option groups, avoid setting a `title` on the `OptionGroup` if you're already passing a `title` prop to `PlatformDropdown`. This prevents nested menu behavior on iOS where users have to click through an extra layer.
+
+```tsx
+// Good - No title in option group (title is on PlatformDropdown)
+const optionGroups: OptionGroup[] = [
+  {
+    options: items.map((item) => ({
+      type: "radio",
+      label: item.name,
+      value: item,
+      selected: item.id === selected?.id,
+      onPress: () => onChange(item),
+    })),
+  },
+];
+
+<PlatformDropdown
+  groups={optionGroups}
+  title="Select Item"  // Title here
+  // ...
+/>
+
+// Bad - Causes nested menu on iOS
+const optionGroups: OptionGroup[] = [
+  {
+    title: "Items",  // This creates a nested Picker on iOS
+    options: items.map((item) => ({
+      type: "radio",
+      label: item.name,
+      value: item,
+      selected: item.id === selected?.id,
+      onPress: () => onChange(item),
+    })),
+  },
+];
+```
+
+## Troubleshooting
+
+### Modal doesn't appear
+- Ensure `GlobalModalProvider` is above the component calling `useGlobalModal()`
+- Check that `BottomSheetModalProvider` is present in the tree
+- Verify `GlobalModal` component is rendered
+
+### Content is cut off
+- Use `enableDynamicSizing: true` for auto-sizing
+- Or specify appropriate `snapPoints`
+
+### Modal won't close
+- Ensure `enablePanDownToClose` is `true`
+- Check that backdrop is clickable
+- Use `hideModal()` for programmatic closing

README.md

@@ -5,146 +5,148 @@
   <img src="https://raw.githubusercontent.com/streamyfin/.github/refs/heads/main/streamyfin-github-banner.png" alt="Streamyfin" width="100%">
 </p>
 
-**Streamyfin is a simple, user-friendly Jellyfin video streaming client built with Expo. Designed as an alternative to other Jellyfin clients, it aims to offer a smooth and reliable streaming experience. We hope you'll find it a valuable addition to your media streaming toolbox.**
+<p align="center">
+  <a href="https://discord.gg/aJvAYeycyY">
+    <img alt="Streamyfin Discord" src="https://img.shields.io/badge/Discord-Streamyfin-blue?style=flat-square&logo=discord">
+  </a>
+</p>
+
+**Streamyfin is a user-friendly Jellyfin video streaming client built with Expo. Designed as an alternative to other Jellyfin clients, it aims to offer a smooth and reliable streaming experience. We hope you'll find it a valuable addition to your media streaming toolbox.**
 
 ---
 
 <p align="center">
-  <img src="./assets/images/screenshots/screenshot1.png" width="22%">
+  <img src="./assets/images/screenshots/screenshot1.png" width="20%">
   &nbsp;
-  <img src="./assets/images/screenshots/screenshot3.png" width="22%">
+  <img src="./assets/images/screenshots/screenshot3.png" width="20%">
   &nbsp;
-  <img src="./assets/images/screenshots/screenshot2.png" width="22%">
+  <img src="./assets/images/screenshots/screenshot2.png" width="20%">
   &nbsp;
-  <img src="./assets/images/jellyseerr.PNG" width="23%">
+  <img src="./assets/images/jellyseerr.PNG" width="21%">
 </p>
 
 
 ## 🌟 Features
 
-- 🚀 **Skip Intro / Credits Support**
-- 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking.
-- 📥 **Download media** (Experimental): Save your media locally and watch it offline.
-- 📡 **Chromecast** (Experimental): Cast your media to any Chromecast-enabled device.
-- 📡 **Settings management** (Experimental): Manage app settings for all your users with a JF plugin.
-- 🤖 **Jellyseerr integration**: Request media directly in the app.
-- 👁️ **Sessions View:** View all active sessions currently streaming on your server.
+- 🚀 **Skip Intro / Credits Support**: Lets you quickly skip intros and credits during playback
+- 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking
+- 📥 **Download media**: Save your media locally and watch it offline
+- ⚙️ **Settings management**: Manage app configurations for all users through our plugin
+- 🤖 **Seerr (formerly Jellyseerr) integration**: Request media directly in the app
+- 👁️ **Sessions view:** View all active sessions currently streaming on your server
+- 📡 **Chromecast**: Cast your media to any Chromecast-enabled device
 
 ## 🧪 Experimental Features
 
-Streamyfin includes some exciting experimental features like media downloading and Chromecast support. These features are still in development, and your patience and feedback are much appreciated as we work to improve them.
+Streamyfin offers exciting experimental features such as media downloading and Chromecast support. These features are under active development, and your feedback and patience help us make them even better.
 
 ### 📥 Downloading
 
-Downloading works by using ffmpeg to convert an HLS stream into a video file on the device. This means that you can download and view any file you can stream! The file is converted by Jellyfin on the server in real time as it is downloaded. This means a **bit longer download times** but supports any file that your server can transcode.
-
-### 🎥 Chromecast
-
-Chromecast support is still in development, and we're working on improving it. Currently, it supports casting videos, but we're working on adding support for subtitles and other features.
+Downloading works by using FFmpeg to convert an HLS stream into a video file on your device. This lets you download and watch any content that you can stream. The conversion is handled in real time by Jellyfin on the server during the download. While this may take a bit longer, it ensures compatibility with any file your server can transcode.
 
 ### 🧩 Streamyfin Plugin
 
 The Jellyfin Plugin for Streamyfin is a plugin you install into Jellyfin that holds all settings for the client Streamyfin. This allows you to synchronize settings across all your users, like for example:
 
-- Auto log in to Jellyseerr without the user having to do anything
-- Choose the default languages
-- Set download method and search provider
-- Customize home screen
-- And much more...
+- Automatic Seerr login with no user input required
+- Set your preferred default languages
+- Configure download method and search provider
+- Personalize your home screen
+- And much more
 
 [Streamyfin Plugin](https://github.com/streamyfin/jellyfin-plugin-streamyfin)
 
+### 📡 Chromecast
+
+Chromecast support is currently under development. Video casting is already available, and we're actively working on adding subtitle support and additional features.
+
+### 🎬 MPV Player
+
+Streamyfin uses [MPV](https://mpv.io/) as its primary video player on all platforms, powered by [MPVKit](https://github.com/mpvkit/MPVKit). MPV is a powerful, open-source media player known for its wide format support and high-quality playback.
+Thanks to [@Alexk2309](https://github.com/Alexk2309) for the hard work building the native MPV module in Streamyfin.
+
 ### 🔍 Jellysearch
 
-[Jellysearch](https://gitlab.com/DomiStyle/jellysearch) now works with Streamyfin!
+[Jellysearch](https://gitlab.com/DomiStyle/jellysearch) works with Streamyfin
 
 > A fast full-text search proxy for Jellyfin. Integrates seamlessly with most Jellyfin clients.
 
-## 🛣️ Roadmap for V1
+## 🛣️ Roadmap
 
 Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) To see what we're working on next, we are always open to feedback and suggestions. Please let us know if you have any ideas or feature requests.
 
-## 📥 Get it now
+## 📥 Download Streamyfin
 
 <div style="display: flex; gap: 5px;">
   <a href="https://apps.apple.com/app/streamyfin/id6593660679?l=en-GB"><img height=50 alt="Get Streamyfin on App Store" src="./assets/Download_on_the_App_Store_Badge.png"/></a>
-  <a href="https://play.google.com/store/apps/details?id=com.fredrikburmester.streamyfin"><img height=50 alt="Get the beta on Google Play" src="./assets/Google_Play_Store_badge_EN.svg"/></a>
+  <a href="https://play.google.com/store/apps/details?id=com.fredrikburmester.streamyfin"><img height=50 alt="Get Streamyfin on Google Play Store" src="./assets/Google_Play_Store_badge_EN.svg"/></a>
+  <a href="https://github.com/streamyfin/streamyfin/releases/latest"><img height=50 alt="Get Streamyfin on Github" src="./assets/Download_on_Github_.png"/></a>
+  <a href="https://apps.obtainium.imranr.dev/redirect.html?r=obtainium://add/https://github.com/streamyfin/streamyfin"><img height=50 alt="Add Streamyfin to Obtainium" src="./assets/Download_with_Obtainium.png"/></a>
 </div>
 
-Or download the APKs [here on GitHub](https://github.com/streamyfin/streamyfin/releases) for Android.
+### 🧪 Beta Testing
 
-### 🧪 Beta testing
+To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This grants you immediate access to the ⁠🧪-beta-releases channel on Discord and lets me know you’ve subscribed. This is where I share APKs and IPAs. It does not provide automatic TestFlight access, so please send me a DM (Cagemaster) with the email you use for Apple so we can add you manually.
 
-To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and I'll know that you have subscribed. This is where I post APKs and IPAs. This won't give automatic access to the TestFlight, however, so you need to send me a DM with the email you use for Apple so that I can manually add you.
-
-**Note**: Everyone who is actively contributing to the source code of Streamyfin will have automatic access to the betas.
+**Note**: Anyone actively contributing to Streamyfin’s source code will receive automatic access to beta releases.
 
 ## 🚀 Getting Started
 
-### Prerequisites
+### ⚙️ Prerequisites
 
-- Ensure you have an active Jellyfin server.
-- Make sure your device is connected to the same network as your Jellyfin server.
+- Your device is on the same network as the Jellyfin server (for local connections)  
+- Your Jellyfin server is up and running with remote access enabled if you plan to connect from outside your local network  
+- Your server version is up to date (older versions may cause compatibility issues)  
+- You have a valid Jellyfin user account with access to the media libraries you want to view  
+- If using features such as **downloads** or **Seerr integration**, confirm the required plugins are installed and configured on your Jellyfin server
 
 ## 🙌 Contributing
 
-We welcome any help to make Streamyfin better. If you'd like to contribute, please fork the repository and submit a pull request. For major changes, it's best to open an issue first to discuss your ideas.
+We welcome contributions that improve Streamyfin. Start by forking the repository and submitting a pull request. For major changes or new features, please open an issue first to discuss your ideas and ensure alignment with the project.
 
-### 👨‍💻 Development info
+## 🌍 Translations
+
+[![Crowdin Translation Status](https://badges.crowdin.net/streamyfin/localized.svg)](https://crowdin.com/project/streamyfin)
+
+Streamyfin is available in multiple languages, and we’re always looking for contributors to help make the app accessible worldwide.  
+You can contribute translations directly on our [Crowdin project page](https://crowdin.com/project/streamyfin).
+
+### 👨‍💻 Development Info
 
 1. Use node `>20`
 2. Install dependencies `bun i && bun run submodule-reload`
 3. Make sure you have xcode and/or android studio installed. (follow the guides for expo: https://docs.expo.dev/workflow/android-studio-emulator/)
+   - If iOS builds fail with `missing Metal Toolchain` (KSPlayer shaders), run `npm run ios:install-metal-toolchain` once
 4. Install BiomeJS extension in VSCode/Your IDE (https://biomejs.dev/)
 4. run `npm run prebuild`
-5. Create an expo dev build by running `npm run ios` or `npm run android`. This will open a simulator on your computer and run the app.
+5. Create an expo dev build by running `npm run ios` or `npm run android`. This will open a simulator on your computer and run the app
 
 For the TV version suffix the npm commands with `:tv`.
 
 `npm run prebuild:tv`  
 `npm run ios:tv or npm run android:tv`
 
-## 📄 License
+## 👋 Get in Touch with Us
 
-Streamyfin is licensed under the Mozilla Public License 2.0 (MPL-2.0).
-This means you are free to use, modify, and distribute this software. The MPL-2.0 is a copyleft license that allows for more flexibility in combining the software with proprietary code.
-Key points of the MPL-2.0:
+Need assistance or have any questions?
 
-- You can use the software for any purpose
-- You can modify the software and distribute modified versions
-- You must include the original copyright and license notices
-- You must disclose your source code for any modifications to the covered files
-- Larger works may combine MPL code with code under other licenses
-- MPL-licensed components must remain under the MPL, but the larger work can be under a different license
-- For the full text of the license, please see the LICENSE file in this repository
+- **Discord:** [Join our server](https://discord.gg/BuGG9ZNhaE)
+- **GitHub Issues:** [Report bugs or request features](https://github.com/streamyfin/streamyfin/issues)  
+- **Email:** [developer@streamyfin.app](mailto:developer@streamyfin.app)  
 
-## 🌐 Connect with Us
-
-Join our Discord: [![](https://dcbadge.limes.pink/api/server/https://discord.gg/BuGG9ZNhaE)](https://discord.gg/BuGG9ZNhaE)
-
-Need support or have questions:
-
-- GitHub Issues: Report bugs or request features here.
-- Email: [developer@streamyfin.app](mailto:developer@streamyfin.app)
 
 ## ❓ FAQ
 
-1. Q: Why can't I see my libraries in Streamyfin?   
-   A: Make sure your server is running one of the latest versions and that you have at least one library that isn't audio only.
-2. Q: Why can't I see my music library?   
-   A: We don't currently support music and are unlikely to support music in the near future.
+1. Q: Why can't I see my libraries in Streamyfin?  
+   A: Make sure your server is running one of the latest versions and that you have at least one library that isn't audio only
+2. Q: Why can't I see my music library?
+   A: We don't currently support music and are unlikely to support music in the near future
 
 ## 📝 Credits
 
-Streamyfin is developed by [Fredrik Burmester](https://github.com/fredrikburmester) and is not affiliated with Jellyfin. The app is built with Expo, React Native, and other open-source libraries.
+Streamyfin is developed by [Fredrik Burmester](https://github.com/fredrikburmester) and is not affiliated with Jellyfin. The app is built using Expo, React Native, and other open-source libraries.
 
-## ✨ Acknowledgements
-
-We would like to thank the Jellyfin team for their great software and awesome support on discord.
-
-Special shoutout to the JF official clients for being an inspiration to ours.
-
-### 🏆 Core Developers
+## 🎖️ Core Developers
 
 Thanks to the following contributors for their significant contributions:
 
@@ -229,21 +231,42 @@ Thanks to the following contributors for their significant contributions:
 </table>
 </div>
 
-And all other developers who have contributed to Streamyfin, thank you for your contributions.
+## ✨ Acknowledgements
 
-I'd also like to thank the following people and projects for their contributions to Streamyfin:
+We would like to thank the Jellyfin team for their excellent software and support on Discord.
+
+Special thanks to the official Jellyfin clients, which have served as an inspiration for Streamyfin.
+
+We also thank all other developers who have contributed to Streamyfin, your efforts are greatly appreciated.
+
+A special mention to the following people and projects for their contributions:
+
+- [@Alexk2309](https://github.com/Alexk2309) for building the native MPV module that integrates [MPVKit](https://github.com/mpvkit/MPVKit) with React Native
+- [Reiverr](https://github.com/aleksilassila/reiverr) for invaluable help with understanding the Jellyfin API
+- [Jellyfin TS SDK](https://github.com/jellyfin/jellyfin-sdk-typescript) for providing the TypeScript SDK
+- [Seerr](https://github.com/seerr-team/seerr) for enabling API integration with their project
 
-- [Reiverr](https://github.com/aleksilassila/reiverr) for great help with understanding the Jellyfin API.
-- [Jellyfin TS SDK](https://github.com/jellyfin/jellyfin-sdk-typescript) for the TypeScript SDK.
-- [Jellyseerr](https://github.com/Fallenbagel/jellyseerr) for enabling API integration with their project.
-- The Jellyfin devs for always being helpful in the Discord.
 
 ## ⭐ Star History
 
 [![Star History Chart](https://api.star-history.com/svg?repos=streamyfin/streamyfin&type=Date)](https://star-history.com/#streamyfin/streamyfin&Date)
 
+## 📄 License
+
+Streamyfin is licensed under the Mozilla Public License 2.0 (MPL-2.0).
+This means you are free to use, modify, and distribute this software. The MPL-2.0 is a copyleft license that allows for more flexibility in combining the software with proprietary code.
+Key points of the MPL-2.0:
+
+- You can use the software for any purpose
+- You can modify the software and distribute modified versions
+- You must include the original copyright and license notices
+- You must disclose your source code for any modifications to the covered files
+- Larger works may combine MPL code with code under other licenses
+- MPL-licensed components must remain under the MPL, but the larger work can be under a different license
+- For the full text of the license, please see the LICENSE file in this repository
+
 ## ⚠️ Disclaimer
-Streamyfin does not promote, support, or condone piracy in any form. The app is intended solely for streaming media that you personally own and control. It does not provide or include any media content. Any discussions or support requests related to piracy are strictly prohibited across all our channels.
+Streamyfin does not promote, support, or condone piracy in any form. The app is intended solely for streaming media that you personally own and control. It does not provide or include any media content. Any discussions, support requests, or references to piracy, as well as any tools, software, or websites related to piracy, are strictly prohibited across all our channels.
 
 ## 🤝 Sponsorship
 VPS hosting generously provided by [Hexabyte](https://hexabyte.se/en/vps/?currency=eur) and [SweHosting](https://swehosting.se/en/#tj%C3%A4nster)

app.config.js

@@ -6,14 +6,16 @@ module.exports = ({ config }) => {
       "react-native-google-cast",
       { useDefaultExpandedMediaControls: true },
     ]);
-
-    // Add the background downloader plugin only for non-TV builds
-    config.plugins.push("./plugins/withRNBackgroundDownloader.js");
   }
+
+  // Only override googleServicesFile if env var is set
+  const androidConfig = {};
+  if (process.env.GOOGLE_SERVICES_JSON) {
+    androidConfig.googleServicesFile = process.env.GOOGLE_SERVICES_JSON;
+  }
+
   return {
-    android: {
-      googleServicesFile: process.env.GOOGLE_SERVICES_JSON,
-    },
+    ...(Object.keys(androidConfig).length > 0 && { android: androidConfig }),
     ...config,
   };
 };

app.json

@@ -2,12 +2,13 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.39.0",
+    "version": "0.52.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
     "userInterfaceStyle": "dark",
     "jsEngine": "hermes",
+    "newArchEnabled": true,
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "requireFullScreen": true,
@@ -16,28 +17,29 @@
         "NSMicrophoneUsageDescription": "The app needs access to your microphone.",
         "UIBackgroundModes": ["audio", "fetch"],
         "NSLocalNetworkUsageDescription": "The app needs access to your local network to connect to your Jellyfin server.",
+        "NSLocationWhenInUseUsageDescription": "Streamyfin uses your location to detect your home WiFi network for automatic local server switching.",
         "NSAppTransportSecurity": {
           "NSAllowsArbitraryLoads": true
         },
         "UISupportsTrueScreenSizeOnMac": true,
         "UIFileSharingEnabled": true,
-        "LSSupportsOpeningDocumentsInPlace": true
+        "LSSupportsOpeningDocumentsInPlace": true,
+        "AVInitialRouteSharingPolicy": "LongFormAudio"
       },
       "config": {
         "usesNonExemptEncryption": false
       },
       "supportsTablet": true,
-      "bundleIdentifier": "com.fredrikburmester.streamyfin",
-      "icon": {
-        "dark": "./assets/images/icon-ios-plain.png",
-        "light": "./assets/images/icon-ios-light.png",
-        "tinted": "./assets/images/icon-ios-tinted.png"
+      "entitlements": {
+        "com.apple.developer.networking.wifi-info": true
       },
+      "bundleIdentifier": "com.fredrikburmester.streamyfin",
+      "icon": "./assets/images/icon-ios-liquid-glass.icon",
       "appleTeamId": "MWD5K362T8"
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 71,
+      "versionCode": 92,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon-android-plain.png",
         "monochromeImage": "./assets/images/icon-android-themed.png",
@@ -47,28 +49,33 @@
       "permissions": [
         "android.permission.FOREGROUND_SERVICE",
         "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK",
-        "android.permission.WRITE_SETTINGS"
+        "android.permission.WRITE_SETTINGS",
+        "android.permission.ACCESS_FINE_LOCATION"
       ],
       "blockedPermissions": ["android.permission.ACTIVITY_RECOGNITION"],
       "googleServicesFile": "./google-services.json"
     },
     "plugins": [
-      "@react-native-tvos/config-tv",
-      "expo-router",
-      "expo-font",
       [
-        "react-native-video",
+        "@react-native-tvos/config-tv",
         {
-          "enableNotificationControls": true,
-          "enableBackgroundAudio": true,
-          "androidExtensions": {
-            "useExoplayerRtsp": false,
-            "useExoplayerSmoothStreaming": false,
-            "useExoplayerHls": true,
-            "useExoplayerDash": false
+          "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",
       [
         "expo-build-properties",
         {
@@ -77,11 +84,12 @@
             "useFrameworks": "static"
           },
           "android": {
-            "compileSdkVersion": 35,
+            "buildArchs": ["arm64-v8a", "x86_64"],
+            "compileSdkVersion": 36,
             "targetSdkVersion": 35,
             "buildToolsVersion": "35.0.0",
             "kotlinVersion": "2.0.21",
-            "minSdkVersion": 24,
+            "minSdkVersion": 26,
             "usesCleartextTraffic": true,
             "packagingOptions": {
               "jniLibs": {
@@ -99,12 +107,6 @@
           "initialOrientation": "DEFAULT"
         }
       ],
-      [
-        "expo-sensors",
-        {
-          "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
-        }
-      ],
       "expo-localization",
       "expo-asset",
       [
@@ -115,10 +117,6 @@
           }
         }
       ],
-      ["./plugins/withChangeNativeAndroidTextToWhite.js"],
-      ["./plugins/withAndroidManifest.js"],
-      ["./plugins/withTrustLocalCerts.js"],
-      ["./plugins/withGradleProperties.js"],
       [
         "expo-splash-screen",
         {
@@ -134,8 +132,20 @@
           "color": "#9333EA"
         }
       ],
-      "./plugins/with-runtime-framework-headers.js",
-      "react-native-bottom-tabs"
+      "expo-web-browser",
+      ["./plugins/with-runtime-framework-headers.js"],
+      ["./plugins/withChangeNativeAndroidTextToWhite.js"],
+      ["./plugins/withAndroidManifest.js"],
+      ["./plugins/withTrustLocalCerts.js"],
+      ["./plugins/withGradleProperties.js"],
+      ["./plugins/withTVOSAppIcon.js"],
+      [
+        "./plugins/withGitPod.js",
+        {
+          "podName": "MPVKit-GPL",
+          "podspecUrl": "https://raw.githubusercontent.com/streamyfin/MPVKit/0.40.0-av/MPVKit-GPL.podspec"
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true
@@ -154,7 +164,6 @@
     },
     "updates": {
       "url": "https://u.expo.dev/e79219d1-797f-4fbe-9fa1-cfd360690a68"
-    },
-    "newArchEnabled": false
+    }
   }
 }

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

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

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

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

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

@@ -1,7 +1,8 @@
 import { useCallback, useState } from "react";
-import { RefreshControl, ScrollView, View } from "react-native";
+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() {
@@ -15,6 +16,10 @@ export default function favorites() {
   }, []);
   const insets = useSafeAreaInsets();
 
+  if (Platform.isTV) {
+    return <TVFavorites />;
+  }
+
   return (
     <ScrollView
       nestedScrollEnabled
@@ -28,7 +33,7 @@ export default function favorites() {
         paddingBottom: 16,
       }}
     >
-      <View className='my-4'>
+      <View style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}>
         <Favorites />
       </View>
     </ScrollView>

app/(auth)/(tabs)/(favorites)/see-all.tsx

@@ -0,0 +1,212 @@
+import type { Api } from "@jellyfin/sdk";
+import type {
+  BaseItemDto,
+  BaseItemKind,
+} from "@jellyfin/sdk/lib/generated-client";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Stack, useLocalSearchParams } from "expo-router";
+import { t } from "i18next";
+import { useAtom } from "jotai";
+import { useCallback, useMemo } from "react";
+import { 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 { ItemCardText } from "@/components/ItemCardText";
+import { Loader } from "@/components/Loader";
+import { ItemPoster } from "@/components/posters/ItemPoster";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
+type FavoriteTypes =
+  | "Series"
+  | "Movie"
+  | "Episode"
+  | "Video"
+  | "BoxSet"
+  | "Playlist";
+
+const favoriteTypes: readonly FavoriteTypes[] = [
+  "Series",
+  "Movie",
+  "Episode",
+  "Video",
+  "BoxSet",
+  "Playlist",
+] as const;
+
+function isFavoriteType(value: unknown): value is FavoriteTypes {
+  return (
+    typeof value === "string" &&
+    (favoriteTypes as readonly string[]).includes(value)
+  );
+}
+
+export default function FavoritesSeeAllScreen() {
+  const insets = useSafeAreaInsets();
+  const { width: screenWidth } = useWindowDimensions();
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const searchParams = useLocalSearchParams<{
+    type?: string;
+    title?: string;
+  }>();
+  const typeParam = searchParams.type;
+  const titleParam = searchParams.title;
+
+  const itemType = useMemo(() => {
+    if (!isFavoriteType(typeParam)) return null;
+    return typeParam as BaseItemKind;
+  }, [typeParam]);
+
+  const headerTitle = useMemo(() => {
+    if (typeof titleParam === "string" && titleParam.trim().length > 0)
+      return titleParam;
+    return "";
+  }, [titleParam]);
+
+  const pageSize = 50;
+
+  const fetchItems = useCallback(
+    async ({ pageParam }: { pageParam: number }): Promise<BaseItemDto[]> => {
+      if (!api || !user?.Id || !itemType) return [];
+
+      const response = await getItemsApi(api as Api).getItems({
+        userId: user.Id,
+        sortBy: ["SeriesSortName", "SortName"],
+        sortOrder: ["Ascending"],
+        filters: ["IsFavorite"],
+        recursive: true,
+        fields: ["PrimaryImageAspectRatio"],
+        collapseBoxSetItems: false,
+        excludeLocationTypes: ["Virtual"],
+        enableTotalRecordCount: true,
+        startIndex: pageParam,
+        limit: pageSize,
+        includeItemTypes: [itemType],
+      });
+
+      return response.data.Items || [];
+    },
+    [api, itemType, user?.Id],
+  );
+
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    useInfiniteQuery({
+      queryKey: ["favorites", "see-all", itemType],
+      queryFn: ({ pageParam = 0 }) => fetchItems({ pageParam }),
+      getNextPageParam: (lastPage, pages) => {
+        if (!lastPage || lastPage.length < pageSize) return undefined;
+        return pages.reduce((acc, page) => acc + page.length, 0);
+      },
+      initialPageParam: 0,
+      enabled: !!api && !!user?.Id && !!itemType,
+    });
+
+  const flatData = useMemo(() => data?.pages.flat() ?? [], [data]);
+
+  const nrOfCols = useMemo(() => {
+    if (screenWidth < 350) return 2;
+    if (screenWidth < 600) return 3;
+    if (screenWidth < 900) return 5;
+    return 6;
+  }, [screenWidth]);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: BaseItemDto; index: number }) => (
+      <TouchableItemRouter
+        item={item}
+        style={{
+          width: "100%",
+        }}
+      >
+        <View
+          style={{
+            alignSelf:
+              index % nrOfCols === 0
+                ? "flex-end"
+                : (index + 1) % nrOfCols === 0
+                  ? "flex-start"
+                  : "center",
+            width: "89%",
+          }}
+        >
+          <ItemPoster item={item} />
+          <ItemCardText item={item} />
+        </View>
+      </TouchableItemRouter>
+    ),
+    [nrOfCols],
+  );
+
+  const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
+
+  const handleEndReached = useCallback(() => {
+    if (hasNextPage) {
+      fetchNextPage();
+    }
+  }, [fetchNextPage, hasNextPage]);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerTitle: headerTitle,
+          headerBlurEffect: "none",
+          headerTransparent: true,
+          headerShadowVisible: false,
+        }}
+      />
+      {!itemType ? (
+        <View className='flex-1 items-center justify-center px-6'>
+          <Text className='text-neutral-500'>
+            {t("favorites.noData", { defaultValue: "No items found." })}
+          </Text>
+        </View>
+      ) : isLoading ? (
+        <View className='justify-center items-center h-full'>
+          <Loader />
+        </View>
+      ) : (
+        <FlashList
+          data={flatData}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          numColumns={nrOfCols}
+          onEndReached={handleEndReached}
+          onEndReachedThreshold={0.8}
+          contentInsetAdjustmentBehavior='automatic'
+          contentContainerStyle={{
+            paddingBottom: 24,
+            paddingLeft: insets.left,
+            paddingRight: insets.right,
+          }}
+          ItemSeparatorComponent={() => (
+            <View
+              style={{
+                width: 10,
+                height: 10,
+              }}
+            />
+          )}
+          ListEmptyComponent={
+            <View className='flex flex-col items-center justify-center h-full py-12'>
+              <Text className='font-bold text-xl text-neutral-500'>
+                {t("home.no_items", { defaultValue: "No items" })}
+              </Text>
+            </View>
+          }
+          ListFooterComponent={
+            isFetching ? (
+              <View style={{ paddingVertical: 16 }}>
+                <Loader />
+              </View>
+            ) : null
+          }
+        />
+      )}
+    </>
+  );
+}

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

@@ -1,8 +1,10 @@
 import { Feather, Ionicons } from "@expo/vector-icons";
-import { Stack, useRouter } from "expo-router";
+import { Stack } from "expo-router";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity, View } from "react-native";
+import { Platform, View } from "react-native";
+import { Pressable } from "react-native-gesture-handler";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
+import useRouter from "@/hooks/useAppRouter";
 
 const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");
 
@@ -30,7 +32,6 @@ export default function IndexLayout() {
               {!Platform.isTV && (
                 <>
                   <Chromecast.Chromecast background='transparent' />
-
                   {user?.Policy?.IsAdministrator && <SessionsButton />}
                   <SettingsButton />
                 </>
@@ -42,57 +43,304 @@ export default function IndexLayout() {
       <Stack.Screen
         name='downloads/index'
         options={{
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
           title: t("home.downloads.downloads_title"),
-        }}
-      />
-      <Stack.Screen
-        name='downloads/[seriesId]'
-        options={{
-          title: t("home.downloads.tvseries"),
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
         }}
       />
       <Stack.Screen
         name='sessions/index'
         options={{
           title: t("home.sessions.title"),
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
         }}
       />
       <Stack.Screen
         name='settings'
         options={{
           title: t("home.settings.settings_title"),
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
         }}
       />
       <Stack.Screen
-        name='settings/marlin-search/page'
+        name='settings/playback-controls/page'
         options={{
-          title: "",
+          title: t("home.settings.playback_controls.title"),
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
         }}
       />
       <Stack.Screen
-        name='settings/jellyseerr/page'
+        name='settings/audio-subtitles/page'
         options={{
-          title: "",
+          title: t("home.settings.audio_subtitles.title"),
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
         }}
       />
       <Stack.Screen
-        name='settings/hide-libraries/page'
+        name='settings/appearance/page'
         options={{
-          title: "",
+          title: t("home.settings.appearance.title"),
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
+        }}
+      />
+      <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: () => (
+            <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: () => (
+            <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,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name='settings/plugins/marlin-search/page'
+        options={{
+          title: "Marlin Search",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name='settings/plugins/jellyseerr/page'
+        options={{
+          title: "Jellyseerr",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name='settings/plugins/streamystats/page'
+        options={{
+          title: "Streamystats",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name='settings/plugins/kefinTweaks/page'
+        options={{
+          title: "KefinTweaks",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
+        }}
+      />
+      <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: () => (
+            <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: "",
+          title: t("home.settings.logs.logs_title"),
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
         }}
       />
       <Stack.Screen
-        name='intro/page'
+        name='settings/network/page'
         options={{
-          headerShown: false,
-          title: "",
-          presentation: "modal",
+          title: t("home.settings.network.title"),
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <Pressable
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
         }}
       />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
@@ -102,7 +350,12 @@ export default function IndexLayout() {
         name='collections/[collectionId]'
         options={{
           title: "",
-          headerShown: true,
+          headerLeft: () => (
+            <Pressable onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </Pressable>
+          ),
+          headerShown: !Platform.isTV,
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
@@ -116,13 +369,13 @@ const SettingsButton = () => {
   const router = useRouter();
 
   return (
-    <TouchableOpacity
+    <Pressable
       onPress={() => {
         router.push("/(auth)/settings");
       }}
     >
       <Feather name='settings' color={"white"} size={22} />
-    </TouchableOpacity>
+    </Pressable>
   );
 };
 
@@ -131,7 +384,7 @@ const SessionsButton = () => {
   const { sessions = [] } = useSessions({} as useSessionsProps);
 
   return (
-    <TouchableOpacity
+    <Pressable
       onPress={() => {
         router.push("/(auth)/sessions");
       }}
@@ -142,6 +395,6 @@ const SessionsButton = () => {
         color={sessions.length === 0 ? "white" : "#9333ea"}
         size={28}
       />
-    </TouchableOpacity>
+    </Pressable>
   );
 };

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

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

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

@@ -1,43 +1,37 @@
-import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
-import { useNavigation, useRouter } from "expo-router";
+import { BottomSheetModal } from "@gorhom/bottom-sheet";
+import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
+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";
 import { DownloadSize } from "@/components/downloads/DownloadSize";
 import { MovieCard } from "@/components/downloads/MovieCard";
 import { SeriesCard } from "@/components/downloads/SeriesCard";
+import useRouter from "@/hooks/useAppRouter";
 import { useDownload } from "@/providers/DownloadProvider";
 import { type DownloadedItem } from "@/providers/Downloads/types";
+import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
 import { queueAtom } from "@/utils/atoms/queue";
 import { writeToLog } from "@/utils/log";
 
 export default function page() {
   const navigation = useNavigation();
   const { t } = useTranslation();
-  const [queue, setQueue] = useAtom(queueAtom);
-  const {
-    removeProcess,
-    getDownloadedItems,
-    deleteFileByType,
-    deleteAllFiles,
-  } = useDownload();
+  const [_queue, _setQueue] = useAtom(queueAtom);
+  const { downloadedItems, deleteFileByType, deleteAllFiles } = useDownload();
   const router = useRouter();
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   const [showMigration, setShowMigration] = useState(false);
 
+  const _insets = useSafeAreaInsets();
+
   const migration_20241124 = () => {
     Alert.alert(
       t("home.downloads.new_app_version_requires_re_download"),
@@ -62,7 +56,7 @@ export default function page() {
     );
   };
 
-  const downloadedFiles = getDownloadedItems();
+  const downloadedFiles = useMemo(() => downloadedItems, [downloadedItems]);
 
   const movies = useMemo(() => {
     try {
@@ -106,9 +100,12 @@ export default function page() {
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <TouchableOpacity onPress={bottomSheetModalRef.current?.present}>
+        <Pressable
+          onPress={bottomSheetModalRef.current?.present}
+          className='px-2'
+        >
           <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
-        </TouchableOpacity>
+        </Pressable>
       ),
     });
   }, [downloadedFiles]);
@@ -119,7 +116,7 @@ export default function page() {
     }
   }, [showMigration]);
 
-  const deleteMovies = () =>
+  const _deleteMovies = () =>
     deleteFileByType("Movie")
       .then(() =>
         toast.success(
@@ -130,7 +127,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(
@@ -141,212 +138,124 @@ 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.map((item) =>
-        deleteFileByType(item.item.Type)
-          .then(() =>
-            toast.success(
-              t("home.downloads.toasts.deleted_media_successfully", {
-                type: item.item.Type,
-              }),
-            ),
-          )
-          .catch((reason) => {
-            writeToLog("ERROR", reason);
-            toast.error(
-              t("home.downloads.toasts.failed_to_delete_media", {
-                type: item.item.Type,
-              }),
-            );
-          }),
-      ),
+      otherMedia
+        .filter((item) => item.item.Type)
+        .map((item) =>
+          deleteFileByType(item.item.Type!)
+            .then(() =>
+              toast.success(
+                t("home.downloads.toasts.deleted_media_successfully", {
+                  type: item.item.Type,
+                }),
+              ),
+            )
+            .catch((reason) => {
+              writeToLog("ERROR", reason);
+              toast.error(
+                t("home.downloads.toasts.failed_to_delete_media", {
+                  type: item.item.Type,
+                }),
+              );
+            }),
+        ),
     );
 
-  const deleteAllMedia = async () =>
-    await Promise.all([deleteMovies(), deleteShows(), deleteOtherMedia()]);
-
   return (
-    <>
-      <View style={{ flex: 1 }}>
-        <ScrollView showsVerticalScrollIndicator={false} className='flex-1'>
-          <View className='py-4'>
-            <View className='mb-4 flex flex-col space-y-4 px-4'>
-              <View className='bg-neutral-900 p-4 rounded-2xl'>
+    <OfflineModeProvider isOffline={true}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentInsetAdjustmentBehavior='automatic'
+      >
+        <View style={{ paddingTop: Platform.OS === "android" ? 17 : 0 }}>
+          <View className='mb-4 flex flex-col space-y-4 px-4'>
+            <ActiveDownloads />
+          </View>
+
+          {movies.length > 0 && (
+            <View className='mb-4'>
+              <View className='flex flex-row items-center justify-between mb-2 px-4'>
                 <Text className='text-lg font-bold'>
-                  {t("home.downloads.queue")}
+                  {t("home.downloads.movies")}
                 </Text>
-                <Text className='text-xs opacity-70 text-red-600'>
-                  {t("home.downloads.queue_hint")}
-                </Text>
-                <View className='flex flex-col space-y-2 mt-2'>
-                  {queue.map((q, index) => (
-                    <TouchableOpacity
-                      onPress={() =>
-                        router.push(`/(auth)/items/page?id=${q.item.Id}`)
-                      }
-                      className='relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between'
-                      key={index}
-                    >
-                      <View>
-                        <Text className='font-semibold'>{q.item.Name}</Text>
-                        <Text className='text-xs opacity-50'>
-                          {q.item.Type}
-                        </Text>
-                      </View>
-                      <TouchableOpacity
-                        onPress={() => {
-                          removeProcess(q.id);
-                          setQueue((prev) => {
-                            if (!prev) return [];
-                            return [...prev.filter((i) => i.id !== q.id)];
-                          });
-                        }}
-                      >
-                        <Ionicons name='close' size={24} color='red' />
-                      </TouchableOpacity>
-                    </TouchableOpacity>
+                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                  <Text className='text-xs font-bold'>{movies?.length}</Text>
+                </View>
+              </View>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className='px-4 flex flex-row'>
+                  {movies?.map((item) => (
+                    <TouchableItemRouter item={item.item} key={item.item.Id}>
+                      <MovieCard item={item.item} />
+                    </TouchableItemRouter>
                   ))}
                 </View>
-
-                {queue.length === 0 && (
-                  <Text className='opacity-50'>
-                    {t("home.downloads.no_items_in_queue")}
-                  </Text>
-                )}
-              </View>
-
-              <ActiveDownloads />
+              </ScrollView>
             </View>
-
-            {movies.length > 0 && (
-              <View className='mb-4'>
-                <View className='flex flex-row items-center justify-between mb-2 px-4'>
-                  <Text className='text-lg font-bold'>
-                    {t("home.downloads.movies")}
-                  </Text>
-                  <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                    <Text className='text-xs font-bold'>{movies?.length}</Text>
-                  </View>
-                </View>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                  <View className='px-4 flex flex-row'>
-                    {movies?.map((item) => (
-                      <TouchableItemRouter
-                        item={item.item}
-                        isOffline
-                        key={item.item.Id}
-                      >
-                        <MovieCard item={item.item} />
-                      </TouchableItemRouter>
-                    ))}
-                  </View>
-                </ScrollView>
-              </View>
-            )}
-            {groupedBySeries.length > 0 && (
-              <View className='mb-4'>
-                <View className='flex flex-row items-center justify-between mb-2 px-4'>
-                  <Text className='text-lg font-bold'>
-                    {t("home.downloads.tvseries")}
-                  </Text>
-                  <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                    <Text className='text-xs font-bold'>
-                      {groupedBySeries?.length}
-                    </Text>
-                  </View>
-                </View>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                  <View className='px-4 flex flex-row'>
-                    {groupedBySeries?.map((items) => (
-                      <View
-                        className='mb-2 last:mb-0'
-                        key={items[0].item.SeriesId}
-                      >
-                        <SeriesCard
-                          items={items.map((i) => i.item)}
-                          key={items[0].item.SeriesId}
-                        />
-                      </View>
-                    ))}
-                  </View>
-                </ScrollView>
-              </View>
-            )}
-
-            {otherMedia.length > 0 && (
-              <View className='mb-4'>
-                <View className='flex flex-row items-center justify-between mb-2 px-4'>
-                  <Text className='text-lg font-bold'>
-                    {t("home.downloads.other_media")}
-                  </Text>
-                  <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                    <Text className='text-xs font-bold'>
-                      {otherMedia?.length}
-                    </Text>
-                  </View>
-                </View>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                  <View className='px-4 flex flex-row'>
-                    {otherMedia?.map((item) => (
-                      <TouchableItemRouter
-                        item={item.item}
-                        isOffline
-                        key={item.item.Id}
-                      >
-                        <MovieCard item={item.item} />
-                      </TouchableItemRouter>
-                    ))}
-                  </View>
-                </ScrollView>
-              </View>
-            )}
-            {downloadedFiles?.length === 0 && (
-              <View className='flex px-4'>
-                <Text className='opacity-50'>
-                  {t("home.downloads.no_downloaded_items")}
+          )}
+          {groupedBySeries.length > 0 && (
+            <View className='mb-4'>
+              <View className='flex flex-row items-center justify-between mb-2 px-4'>
+                <Text className='text-lg font-bold'>
+                  {t("home.downloads.tvseries")}
                 </Text>
+                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                  <Text className='text-xs font-bold'>
+                    {groupedBySeries?.length}
+                  </Text>
+                </View>
               </View>
-            )}
-          </View>
-        </ScrollView>
-      </View>
-      <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>
-    </>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className='px-4 flex flex-row'>
+                  {groupedBySeries?.map((items) => (
+                    <View
+                      className='mb-2 last:mb-0'
+                      key={items[0].item.SeriesId}
+                    >
+                      <SeriesCard
+                        items={items.map((i) => i.item)}
+                        key={items[0].item.SeriesId}
+                      />
+                    </View>
+                  ))}
+                </View>
+              </ScrollView>
+            </View>
+          )}
+
+          {otherMedia.length > 0 && (
+            <View className='mb-4'>
+              <View className='flex flex-row items-center justify-between mb-2 px-4'>
+                <Text className='text-lg font-bold'>
+                  {t("home.downloads.other_media")}
+                </Text>
+                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                  <Text className='text-xs font-bold'>
+                    {otherMedia?.length}
+                  </Text>
+                </View>
+              </View>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className='px-4 flex flex-row'>
+                  {otherMedia?.map((item) => (
+                    <TouchableItemRouter item={item.item} key={item.item.Id}>
+                      <MovieCard item={item.item} />
+                    </TouchableItemRouter>
+                  ))}
+                </View>
+              </ScrollView>
+            </View>
+          )}
+          {downloadedFiles?.length === 0 && (
+            <View className='flex px-4'>
+              <Text className='opacity-50'>
+                {t("home.downloads.no_downloaded_items")}
+              </Text>
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </OfflineModeProvider>
   );
 }

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

@@ -1,5 +1,16 @@
-import { HomeIndex } from "@/components/settings/HomeIndex";
+import { useSettings } from "@/utils/atoms/settings";
+import { Home } from "../../../../components/home/Home";
+import { HomeWithCarousel } from "../../../../components/home/HomeWithCarousel";
 
-export default function page() {
-  return <HomeIndex />;
-}
+const Index = () => {
+  const { settings } = useSettings();
+  const showLargeHomeCarousel = settings.showLargeHomeCarousel ?? false;
+
+  if (showLargeHomeCarousel) {
+    return <HomeWithCarousel />;
+  }
+
+  return <Home />;
+};
+
+export default Index;

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

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

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

@@ -1,11 +1,9 @@
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import {
-  HardwareAccelerationType,
-  type SessionInfoDto,
-} from "@jellyfin/sdk/lib/generated-client";
+import { HardwareAccelerationType } from "@jellyfin/sdk/lib/generated-client";
 import {
   GeneralCommandType,
   PlaystateCommand,
+  SessionInfoDto,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
 import { FlashList } from "@shopify/flash-list";
@@ -13,7 +11,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TouchableOpacity, View } from "react-native";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { Badge } from "@/components/Badge";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
@@ -49,14 +47,13 @@ export default function page() {
     <FlashList
       contentInsetAdjustmentBehavior='automatic'
       contentContainerStyle={{
-        paddingTop: 17,
+        paddingTop: Platform.OS === "android" ? 17 : 0,
         paddingHorizontal: 17,
         paddingBottom: 150,
       }}
       data={sessions}
       renderItem={({ item }) => <SessionCard session={item} />}
       keyExtractor={(item) => item.Id || ""}
-      estimatedItemSize={200}
     />
   );
 }

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

@@ -1,4 +1,4 @@
-import { useNavigation, useRouter } from "expo-router";
+import { useNavigation } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
 import { useEffect } from "react";
@@ -8,34 +8,21 @@ import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
 import { AppLanguageSelector } from "@/components/settings/AppLanguageSelector";
-import { AudioToggles } from "@/components/settings/AudioToggles";
-import { ChromecastSettings } from "@/components/settings/ChromecastSettings";
-import DownloadSettings from "@/components/settings/DownloadSettings";
-import { GestureControls } from "@/components/settings/GestureControls";
-import { MediaProvider } from "@/components/settings/MediaContext";
-import { MediaToggles } from "@/components/settings/MediaToggles";
-import { OtherSettings } from "@/components/settings/OtherSettings";
-import { PluginSettings } from "@/components/settings/PluginSettings";
 import { QuickConnect } from "@/components/settings/QuickConnect";
 import { StorageSettings } from "@/components/settings/StorageSettings";
-import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
 import { UserInfo } from "@/components/settings/UserInfo";
-import { useHaptic } from "@/hooks/useHaptic";
+import useRouter from "@/hooks/useAppRouter";
 import { useJellyfin, userAtom } from "@/providers/JellyfinProvider";
-import { clearLogs } from "@/utils/log";
-import { storage } from "@/utils/mmkv";
 
-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);
   const { logout } = useJellyfin();
-  const successHapticFeedback = useHaptic("success");
-
-  const onClearLogsClicked = async () => {
-    clearLogs();
-    successHapticFeedback();
-  };
 
   const navigation = useNavigation();
   useEffect(() => {
@@ -46,7 +33,7 @@ export default function settings() {
             logout();
           }}
         >
-          <Text className='text-red-600'>
+          <Text className='text-red-600 px-2'>
             {t("home.settings.log_out_button")}
           </Text>
         </TouchableOpacity>
@@ -56,66 +43,82 @@ export default function settings() {
 
   return (
     <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
       contentContainerStyle={{
         paddingLeft: insets.left,
         paddingRight: insets.right,
       }}
     >
-      <View className='p-4 flex flex-col gap-y-4'>
-        <UserInfo />
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <View className='mb-4'>
+          <UserInfo />
+        </View>
 
         <QuickConnect className='mb-4' />
 
-        <MediaProvider>
-          <MediaToggles className='mb-4' />
-          <GestureControls className='mb-4' />
-          <AudioToggles className='mb-4' />
-          <SubtitleToggles className='mb-4' />
-        </MediaProvider>
-
-        <OtherSettings />
-
-        {!Platform.isTV && <DownloadSettings />}
-
-        <PluginSettings />
-
-        <AppLanguageSelector />
-
-        {!Platform.isTV && <ChromecastSettings />}
-
-        <ListGroup title={"Intro"}>
-          <ListItem
-            onPress={() => {
-              router.push("/intro/page");
-            }}
-            title={t("home.settings.intro.show_intro")}
-          />
-          <ListItem
-            textColor='red'
-            onPress={() => {
-              storage.set("hasShownIntro", false);
-            }}
-            title={t("home.settings.intro.reset_intro")}
-          />
-        </ListGroup>
+        <View className='mb-4'>
+          <AppLanguageSelector />
+        </View>
 
         <View className='mb-4'>
-          <ListGroup title={t("home.settings.logs.logs_title")}>
+          <ListGroup title={t("home.settings.categories.title")}>
+            <ListItem
+              onPress={() => router.push("/settings/playback-controls/page")}
+              showArrow
+              title={t("home.settings.playback_controls.title")}
+            />
+            <ListItem
+              onPress={() => router.push("/settings/audio-subtitles/page")}
+              showArrow
+              title={t("home.settings.audio_subtitles.title")}
+            />
+            <ListItem
+              onPress={() => router.push("/settings/music/page")}
+              showArrow
+              title={t("home.settings.music.title")}
+            />
+            <ListItem
+              onPress={() => router.push("/settings/appearance/page")}
+              showArrow
+              title={t("home.settings.appearance.title")}
+            />
+            <ListItem
+              onPress={() => router.push("/settings/plugins/page")}
+              showArrow
+              title={t("home.settings.plugins.plugins_title")}
+            />
+            <ListItem
+              onPress={() => router.push("/settings/intro/page")}
+              showArrow
+              title={t("home.settings.intro.title")}
+            />
+            <ListItem
+              onPress={() => router.push("/settings/network/page")}
+              showArrow
+              title={t("home.settings.network.title")}
+            />
             <ListItem
               onPress={() => router.push("/settings/logs/page")}
               showArrow
               title={t("home.settings.logs.logs_title")}
             />
-            <ListItem
-              textColor='red'
-              onPress={onClearLogsClicked}
-              title={t("home.settings.logs.delete_all_logs")}
-            />
           </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,821 @@
+import { Ionicons } from "@expo/vector-icons";
+import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
+import { useAtom } from "jotai";
+import React, { useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Animated, Pressable, ScrollView, TextInput, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import type { TVOptionItem } from "@/components/tv";
+import { useTVFocusAnimation } from "@/components/tv";
+import { useTVOptionModal } from "@/hooks/useTVOptionModal";
+import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
+import { AudioTranscodeMode, useSettings } from "@/utils/atoms/settings";
+
+// TV-optimized focusable row component
+const TVSettingsRow: React.FC<{
+  label: string;
+  value: string;
+  onPress?: () => void;
+  isFirst?: boolean;
+  showChevron?: boolean;
+  disabled?: boolean;
+}> = ({ label, value, onPress, isFirst, showChevron = true, disabled }) => {
+  const { focused, handleFocus, handleBlur, animatedStyle } =
+    useTVFocusAnimation({ scaleAmount: 1.02 });
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      hasTVPreferredFocus={isFirst && !disabled}
+      disabled={disabled}
+      focusable={!disabled}
+    >
+      <Animated.View
+        style={[
+          animatedStyle,
+          {
+            backgroundColor: focused
+              ? "rgba(255, 255, 255, 0.15)"
+              : "rgba(255, 255, 255, 0.05)",
+            borderRadius: 12,
+            paddingVertical: 16,
+            paddingHorizontal: 24,
+            marginBottom: 8,
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          },
+        ]}
+      >
+        <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
+          <Text
+            style={{
+              fontSize: 18,
+              color: "#9CA3AF",
+              marginRight: showChevron ? 12 : 0,
+            }}
+          >
+            {value}
+          </Text>
+          {showChevron && (
+            <Ionicons name='chevron-forward' size={20} color='#6B7280' />
+          )}
+        </View>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+// TV-optimized toggle row component
+const TVSettingsToggle: React.FC<{
+  label: string;
+  value: boolean;
+  onToggle: (value: boolean) => void;
+  isFirst?: boolean;
+  disabled?: boolean;
+}> = ({ label, value, onToggle, isFirst, disabled }) => {
+  const { focused, handleFocus, handleBlur, animatedStyle } =
+    useTVFocusAnimation({ scaleAmount: 1.02 });
+
+  return (
+    <Pressable
+      onPress={() => onToggle(!value)}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      hasTVPreferredFocus={isFirst && !disabled}
+      disabled={disabled}
+      focusable={!disabled}
+    >
+      <Animated.View
+        style={[
+          animatedStyle,
+          {
+            backgroundColor: focused
+              ? "rgba(255, 255, 255, 0.15)"
+              : "rgba(255, 255, 255, 0.05)",
+            borderRadius: 12,
+            paddingVertical: 16,
+            paddingHorizontal: 24,
+            marginBottom: 8,
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          },
+        ]}
+      >
+        <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+        <View
+          style={{
+            width: 56,
+            height: 32,
+            borderRadius: 16,
+            backgroundColor: value ? "#34C759" : "#4B5563",
+            justifyContent: "center",
+            paddingHorizontal: 2,
+          }}
+        >
+          <View
+            style={{
+              width: 28,
+              height: 28,
+              borderRadius: 14,
+              backgroundColor: "#FFFFFF",
+              alignSelf: value ? "flex-end" : "flex-start",
+            }}
+          />
+        </View>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+// TV-optimized stepper row component
+const TVSettingsStepper: React.FC<{
+  label: string;
+  value: number;
+  onDecrease: () => void;
+  onIncrease: () => void;
+  formatValue?: (value: number) => string;
+  isFirst?: boolean;
+  disabled?: boolean;
+}> = ({
+  label,
+  value,
+  onDecrease,
+  onIncrease,
+  formatValue,
+  isFirst,
+  disabled,
+}) => {
+  const labelAnim = useTVFocusAnimation({ scaleAmount: 1.02 });
+  const minusAnim = useTVFocusAnimation({ scaleAmount: 1.1 });
+  const plusAnim = useTVFocusAnimation({ scaleAmount: 1.1 });
+
+  const displayValue = formatValue ? formatValue(value) : String(value);
+
+  return (
+    <View
+      style={{
+        backgroundColor:
+          labelAnim.focused || minusAnim.focused || plusAnim.focused
+            ? "rgba(255, 255, 255, 0.15)"
+            : "rgba(255, 255, 255, 0.05)",
+        borderRadius: 12,
+        paddingVertical: 16,
+        paddingHorizontal: 24,
+        marginBottom: 8,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <Pressable
+        onFocus={labelAnim.handleFocus}
+        onBlur={labelAnim.handleBlur}
+        hasTVPreferredFocus={isFirst && !disabled}
+        disabled={disabled}
+        focusable={!disabled}
+      >
+        <Animated.View style={labelAnim.animatedStyle}>
+          <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+        </Animated.View>
+      </Pressable>
+      <View style={{ flexDirection: "row", alignItems: "center" }}>
+        <Pressable
+          onPress={onDecrease}
+          onFocus={minusAnim.handleFocus}
+          onBlur={minusAnim.handleBlur}
+          disabled={disabled}
+          focusable={!disabled}
+        >
+          <Animated.View
+            style={[
+              minusAnim.animatedStyle,
+              {
+                width: 48,
+                height: 36,
+                borderRadius: 18,
+                backgroundColor: minusAnim.focused ? "#FFFFFF" : "#4B5563",
+                justifyContent: "center",
+                alignItems: "center",
+              },
+            ]}
+          >
+            <Ionicons
+              name='remove'
+              size={24}
+              color={minusAnim.focused ? "#000000" : "#FFFFFF"}
+            />
+          </Animated.View>
+        </Pressable>
+        <Text
+          style={{
+            fontSize: 18,
+            color: "#FFFFFF",
+            minWidth: 60,
+            textAlign: "center",
+            marginHorizontal: 16,
+          }}
+        >
+          {displayValue}
+        </Text>
+        <Pressable
+          onPress={onIncrease}
+          onFocus={plusAnim.handleFocus}
+          onBlur={plusAnim.handleBlur}
+          disabled={disabled}
+          focusable={!disabled}
+        >
+          <Animated.View
+            style={[
+              plusAnim.animatedStyle,
+              {
+                width: 48,
+                height: 36,
+                borderRadius: 18,
+                backgroundColor: plusAnim.focused ? "#FFFFFF" : "#4B5563",
+                justifyContent: "center",
+                alignItems: "center",
+              },
+            ]}
+          >
+            <Ionicons
+              name='add'
+              size={24}
+              color={plusAnim.focused ? "#000000" : "#FFFFFF"}
+            />
+          </Animated.View>
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+// TV Settings Option Button - displays current value and opens bottom sheet
+const TVSettingsOptionButton: React.FC<{
+  label: string;
+  value: string;
+  onPress: () => void;
+  isFirst?: boolean;
+  disabled?: boolean;
+}> = ({ label, value, onPress, isFirst, disabled }) => {
+  const { focused, handleFocus, handleBlur, animatedStyle } =
+    useTVFocusAnimation({ scaleAmount: 1.02 });
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      hasTVPreferredFocus={isFirst && !disabled}
+      disabled={disabled}
+      focusable={!disabled}
+    >
+      <Animated.View
+        style={[
+          animatedStyle,
+          {
+            backgroundColor: focused
+              ? "rgba(255, 255, 255, 0.15)"
+              : "rgba(255, 255, 255, 0.05)",
+            borderRadius: 12,
+            paddingVertical: 16,
+            paddingHorizontal: 24,
+            marginBottom: 8,
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          },
+        ]}
+      >
+        <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
+          <Text
+            style={{
+              fontSize: 18,
+              color: "#9CA3AF",
+              marginRight: 12,
+            }}
+          >
+            {value}
+          </Text>
+          <Ionicons name='chevron-forward' size={20} color='#6B7280' />
+        </View>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+// TV-optimized text input component
+const TVSettingsTextInput: React.FC<{
+  label: string;
+  value: string;
+  placeholder?: string;
+  onChangeText: (text: string) => void;
+  onBlur?: () => void;
+  secureTextEntry?: boolean;
+  disabled?: boolean;
+}> = ({
+  label,
+  value,
+  placeholder,
+  onChangeText,
+  onBlur,
+  secureTextEntry,
+  disabled,
+}) => {
+  const inputRef = useRef<TextInput>(null);
+  const { focused, handleFocus, handleBlur, animatedStyle } =
+    useTVFocusAnimation({ scaleAmount: 1.02 });
+
+  const handleInputBlur = () => {
+    handleBlur();
+    onBlur?.();
+  };
+
+  return (
+    <Pressable
+      onPress={() => inputRef.current?.focus()}
+      onFocus={handleFocus}
+      onBlur={handleInputBlur}
+      disabled={disabled}
+      focusable={!disabled}
+    >
+      <Animated.View
+        style={[
+          animatedStyle,
+          {
+            backgroundColor: focused
+              ? "rgba(255, 255, 255, 0.15)"
+              : "rgba(255, 255, 255, 0.05)",
+            borderRadius: 12,
+            paddingVertical: 16,
+            paddingHorizontal: 24,
+            marginBottom: 8,
+          },
+        ]}
+      >
+        <Text style={{ fontSize: 16, color: "#9CA3AF", marginBottom: 8 }}>
+          {label}
+        </Text>
+        <TextInput
+          ref={inputRef}
+          value={value}
+          placeholder={placeholder}
+          placeholderTextColor='#6B7280'
+          onChangeText={onChangeText}
+          onBlur={handleInputBlur}
+          secureTextEntry={secureTextEntry}
+          autoCapitalize='none'
+          autoCorrect={false}
+          style={{
+            fontSize: 18,
+            color: "#FFFFFF",
+            backgroundColor: "rgba(255, 255, 255, 0.05)",
+            borderRadius: 8,
+            paddingVertical: 12,
+            paddingHorizontal: 16,
+            borderWidth: focused ? 2 : 1,
+            borderColor: focused ? "#FFFFFF" : "#4B5563",
+          }}
+        />
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+// Section header component
+const SectionHeader: React.FC<{ title: string }> = ({ title }) => (
+  <Text
+    style={{
+      fontSize: 16,
+      fontWeight: "600",
+      color: "#9CA3AF",
+      textTransform: "uppercase",
+      letterSpacing: 1,
+      marginTop: 32,
+      marginBottom: 16,
+      marginLeft: 8,
+    }}
+  >
+    {title}
+  </Text>
+);
+
+// Logout button component
+const TVLogoutButton: React.FC<{ onPress: () => void; disabled?: boolean }> = ({
+  onPress,
+  disabled,
+}) => {
+  const { t } = useTranslation();
+  const { focused, handleFocus, handleBlur, animatedStyle } =
+    useTVFocusAnimation({ scaleAmount: 1.05 });
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      disabled={disabled}
+      focusable={!disabled}
+    >
+      <Animated.View
+        style={[
+          animatedStyle,
+          {
+            shadowColor: "#ef4444",
+            shadowOffset: { width: 0, height: 0 },
+            shadowOpacity: focused ? 0.6 : 0,
+            shadowRadius: focused ? 20 : 0,
+          },
+        ]}
+      >
+        <View
+          style={{
+            backgroundColor: focused ? "#ef4444" : "rgba(239, 68, 68, 0.8)",
+            borderRadius: 12,
+            paddingVertical: 18,
+            paddingHorizontal: 48,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 20,
+              fontWeight: "bold",
+              color: "#FFFFFF",
+            }}
+          >
+            {t("home.settings.log_out_button")}
+          </Text>
+        </View>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+export default function SettingsTV() {
+  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
+  const { settings, updateSettings } = useSettings();
+  const { logout } = useJellyfin();
+  const [user] = useAtom(userAtom);
+  const [api] = useAtom(apiAtom);
+  const { showOptions } = useTVOptionModal();
+
+  // Local state for OpenSubtitles API key (only commit on blur)
+  const [openSubtitlesApiKey, setOpenSubtitlesApiKey] = useState(
+    settings.openSubtitlesApiKey || "",
+  );
+
+  const currentAudioTranscode =
+    settings.audioTranscodeMode || AudioTranscodeMode.Auto;
+  const currentSubtitleMode =
+    settings.subtitleMode || SubtitlePlaybackMode.Default;
+  const currentAlignX = settings.mpvSubtitleAlignX ?? "center";
+  const currentAlignY = settings.mpvSubtitleAlignY ?? "bottom";
+
+  // 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],
+  );
+
+  // 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]);
+
+  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: 42,
+              fontWeight: "bold",
+              color: "#FFFFFF",
+              marginBottom: 8,
+            }}
+          >
+            {t("home.settings.settings_title")}
+          </Text>
+
+          {/* Audio Section */}
+          <SectionHeader title={t("home.settings.audio.audio_title")} />
+          <TVSettingsOptionButton
+            label={t("home.settings.audio.transcode_mode.title")}
+            value={audioTranscodeLabel}
+            onPress={() =>
+              showOptions({
+                title: t("home.settings.audio.transcode_mode.title"),
+                options: audioTranscodeModeOptions,
+                onSelect: (value) =>
+                  updateSettings({ audioTranscodeMode: value }),
+              })
+            }
+            isFirst
+          />
+
+          {/* Subtitles Section */}
+          <SectionHeader title={t("home.settings.subtitles.subtitle_title")} />
+          <TVSettingsOptionButton
+            label={t("home.settings.subtitles.subtitle_mode")}
+            value={subtitleModeLabel}
+            onPress={() =>
+              showOptions({
+                title: t("home.settings.subtitles.subtitle_mode"),
+                options: subtitleModeOptions,
+                onSelect: (value) => updateSettings({ subtitleMode: value }),
+              })
+            }
+          />
+          <TVSettingsToggle
+            label={t("home.settings.subtitles.set_subtitle_track")}
+            value={settings.rememberSubtitleSelections}
+            onToggle={(value) =>
+              updateSettings({ rememberSubtitleSelections: value })
+            }
+          />
+          <TVSettingsStepper
+            label={t("home.settings.subtitles.subtitle_size")}
+            value={settings.subtitleSize / 100}
+            onDecrease={() => {
+              const newValue = Math.max(0.3, settings.subtitleSize / 100 - 0.1);
+              updateSettings({ subtitleSize: Math.round(newValue * 100) });
+            }}
+            onIncrease={() => {
+              const newValue = Math.min(1.5, settings.subtitleSize / 100 + 0.1);
+              updateSettings({ subtitleSize: Math.round(newValue * 100) });
+            }}
+            formatValue={(v) => `${v.toFixed(1)}x`}
+          />
+
+          {/* MPV Subtitles Section */}
+          <SectionHeader title='MPV Subtitle Settings' />
+          <TVSettingsStepper
+            label='Subtitle Scale'
+            value={settings.mpvSubtitleScale ?? 1.0}
+            onDecrease={() => {
+              const newValue = Math.max(
+                0.5,
+                (settings.mpvSubtitleScale ?? 1.0) - 0.1,
+              );
+              updateSettings({
+                mpvSubtitleScale: Math.round(newValue * 10) / 10,
+              });
+            }}
+            onIncrease={() => {
+              const newValue = Math.min(
+                2.0,
+                (settings.mpvSubtitleScale ?? 1.0) + 0.1,
+              );
+              updateSettings({
+                mpvSubtitleScale: Math.round(newValue * 10) / 10,
+              });
+            }}
+            formatValue={(v) => `${v.toFixed(1)}x`}
+          />
+          <TVSettingsStepper
+            label='Vertical Margin'
+            value={settings.mpvSubtitleMarginY ?? 0}
+            onDecrease={() => {
+              const newValue = Math.max(
+                0,
+                (settings.mpvSubtitleMarginY ?? 0) - 5,
+              );
+              updateSettings({ mpvSubtitleMarginY: newValue });
+            }}
+            onIncrease={() => {
+              const newValue = Math.min(
+                100,
+                (settings.mpvSubtitleMarginY ?? 0) + 5,
+              );
+              updateSettings({ mpvSubtitleMarginY: newValue });
+            }}
+          />
+          <TVSettingsOptionButton
+            label='Horizontal Alignment'
+            value={alignXLabel}
+            onPress={() =>
+              showOptions({
+                title: "Horizontal Alignment",
+                options: alignXOptions,
+                onSelect: (value) =>
+                  updateSettings({
+                    mpvSubtitleAlignX: value as "left" | "center" | "right",
+                  }),
+              })
+            }
+          />
+          <TVSettingsOptionButton
+            label='Vertical Alignment'
+            value={alignYLabel}
+            onPress={() =>
+              showOptions({
+                title: "Vertical Alignment",
+                options: alignYOptions,
+                onSelect: (value) =>
+                  updateSettings({
+                    mpvSubtitleAlignY: value as "top" | "center" | "bottom",
+                  }),
+              })
+            }
+          />
+
+          {/* OpenSubtitles Section */}
+          <SectionHeader
+            title={
+              t("home.settings.subtitles.opensubtitles_title") ||
+              "OpenSubtitles"
+            }
+          />
+          <Text
+            style={{
+              color: "#9CA3AF",
+              fontSize: 14,
+              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: 12,
+              marginTop: 8,
+              marginLeft: 8,
+            }}
+          >
+            {t("home.settings.subtitles.opensubtitles_get_key") ||
+              "Get your free API key at opensubtitles.com/en/consumers"}
+          </Text>
+
+          {/* Appearance Section */}
+          <SectionHeader title={t("home.settings.appearance.title")} />
+          <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 })}
+          />
+
+          {/* User Section */}
+          <SectionHeader title={t("home.settings.user_info.user_info_title")} />
+          <TVSettingsRow
+            label={t("home.settings.user_info.user")}
+            value={user?.Name || "-"}
+            showChevron={false}
+          />
+          <TVSettingsRow
+            label={t("home.settings.user_info.server")}
+            value={api?.basePath || "-"}
+            showChevron={false}
+          />
+
+          {/* Logout Button */}
+          <View style={{ marginTop: 48, alignItems: "center" }}>
+            <TVLogoutButton onPress={logout} />
+          </View>
+        </ScrollView>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,79 @@
+import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import { useTranslation } from "react-i18next";
+import { ScrollView, Switch, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+
+export default function page() {
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  const user = useAtomValue(userAtom);
+  const api = useAtomValue(apiAtom);
+  const insets = useSafeAreaInsets();
+
+  const { t } = useTranslation();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["user-views", user?.Id],
+    queryFn: async () => {
+      const response = await getUserViewsApi(api!).getUserViews({
+        userId: user?.Id,
+      });
+
+      return response.data.Items || null;
+    },
+  });
+
+  if (!settings) return null;
+
+  if (isLoading)
+    return (
+      <View className='mt-4'>
+        <Loader />
+      </View>
+    );
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <DisabledSetting
+        disabled={pluginSettings?.hiddenLibraries?.locked === true}
+        className='px-4'
+      >
+        <ListGroup title={t("home.settings.other.hide_libraries")}>
+          {data?.map((view) => (
+            <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
+              <Switch
+                value={settings.hiddenLibraries?.includes(view.Id!) || false}
+                onValueChange={(value) => {
+                  updateSettings({
+                    hiddenLibraries: value
+                      ? [...(settings.hiddenLibraries || []), view.Id!]
+                      : settings.hiddenLibraries?.filter(
+                          (id) => id !== view.Id,
+                        ),
+                  });
+                }}
+              />
+            </ListItem>
+          ))}
+        </ListGroup>
+        <Text className='px-4 text-xs text-neutral-500 mt-1'>
+          {t("home.settings.other.select_liraries_you_want_to_hide")}
+        </Text>
+      </DisabledSetting>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AppearanceSettings } from "@/components/settings/AppearanceSettings";
+
+export default function AppearancePage() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <AppearanceSettings />
+        <View className='h-24' />
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AudioToggles } from "@/components/settings/AudioToggles";
+import { MediaProvider } from "@/components/settings/MediaContext";
+import { MpvSubtitleSettings } from "@/components/settings/MpvSubtitleSettings";
+import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
+
+export default function AudioSubtitlesPage() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <MediaProvider>
+          <AudioToggles className='mb-4' />
+          <SubtitleToggles className='mb-4' />
+          <MpvSubtitleSettings className='mb-4' />
+        </MediaProvider>
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { useTranslation } from "react-i18next";
+import { Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { useIntroSheet } from "@/providers/IntroSheetProvider";
+import { storage } from "@/utils/mmkv";
+
+export default function IntroPage() {
+  const { showIntro } = useIntroSheet();
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <ListGroup title={t("home.settings.intro.title")}>
+          <ListItem
+            onPress={() => {
+              showIntro();
+            }}
+            title={t("home.settings.intro.show_intro")}
+          />
+          <ListItem
+            textColor='red'
+            onPress={() => {
+              storage.set("hasShownIntro", false);
+            }}
+            title={t("home.settings.intro.reset_intro")}
+          />
+        </ListGroup>
+        <View className='h-24' />
+      </View>
+    </ScrollView>
+  );
+}

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

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

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

@@ -1,15 +1,21 @@
-import * as FileSystem from "expo-file-system";
+import { File, Paths } from "expo-file-system";
 import { useNavigation } from "expo-router";
-import * as Sharing from "expo-sharing";
+import type * as SharingType from "expo-sharing";
 import { useCallback, useEffect, useId, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ScrollView, TouchableOpacity, View } from "react-native";
+import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import Collapsible from "react-native-collapsible";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { Loader } from "@/components/Loader";
 import { LogLevel, useLog, writeErrorLog } from "@/utils/log";
 
+// Conditionally import expo-sharing only on non-TV platforms
+const Sharing = Platform.isTV
+  ? null
+  : (require("expo-sharing") as typeof SharingType);
+
 export default function Page() {
   const navigation = useNavigation();
   const { logs } = useLog();
@@ -33,6 +39,7 @@ export default function Page() {
 
   const _orderId = useId();
   const _levelsId = useId();
+  const insets = useSafeAreaInsets();
 
   const filteredLogs = useMemo(
     () =>
@@ -47,27 +54,30 @@ export default function Page() {
 
   // Sharing it as txt while its formatted allows us to share it with many more applications
   const share = useCallback(async () => {
-    const uri = `${FileSystem.documentDirectory}logs.txt`;
+    if (!Sharing) return;
+
+    const logsFile = new File(Paths.document, "logs.txt");
 
     setLoading(true);
-    FileSystem.writeAsStringAsync(uri, JSON.stringify(filteredLogs))
-      .then(() => {
-        setLoading(false);
-        Sharing.shareAsync(uri, { mimeType: "txt", UTI: "txt" });
-      })
-      .catch((e) =>
-        writeErrorLog("Something went wrong attempting to export", e),
-      )
-      .finally(() => setLoading(false));
-  }, [filteredLogs]);
+    try {
+      logsFile.write(JSON.stringify(filteredLogs));
+      await Sharing.shareAsync(logsFile.uri, { mimeType: "txt", UTI: "txt" });
+    } catch (e: any) {
+      writeErrorLog("Something went wrong attempting to export", e);
+    } finally {
+      setLoading(false);
+    }
+  }, [filteredLogs, Sharing]);
 
   useEffect(() => {
+    if (Platform.isTV) return;
+
     navigation.setOptions({
       headerRight: () =>
         loading ? (
           <Loader />
         ) : (
-          <TouchableOpacity onPress={share}>
+          <TouchableOpacity onPress={share} className='px-2'>
             <Text>{t("home.settings.logs.export_logs")}</Text>
           </TouchableOpacity>
         ),
@@ -75,7 +85,12 @@ export default function Page() {
   }, [share, loading]);
 
   return (
-    <>
+    <View
+      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}
@@ -157,6 +172,6 @@ export default function Page() {
           )}
         </View>
       </ScrollView>
-    </>
+    </View>
   );
 }

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

@@ -1,122 +0,0 @@
-import { useQueryClient } from "@tanstack/react-query";
-import { useNavigation } from "expo-router";
-import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Linking,
-  Switch,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { toast } from "sonner-native";
-import { Text } from "@/components/common/Text";
-import { ListGroup } from "@/components/list/ListGroup";
-import { ListItem } from "@/components/list/ListItem";
-import DisabledSetting from "@/components/settings/DisabledSetting";
-import { useSettings } from "@/utils/atoms/settings";
-
-export default function page() {
-  const navigation = useNavigation();
-
-  const { t } = useTranslation();
-
-  const { settings, updateSettings, pluginSettings } = useSettings();
-  const queryClient = useQueryClient();
-
-  const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
-
-  const onSave = (val: string) => {
-    updateSettings({
-      marlinServerUrl: !val.endsWith("/") ? val : val.slice(0, -1),
-    });
-    toast.success(t("home.settings.plugins.marlin_search.toasts.saved"));
-  };
-
-  const handleOpenLink = () => {
-    Linking.openURL("https://github.com/fredrikburmester/marlin-search");
-  };
-
-  const disabled = useMemo(() => {
-    return (
-      pluginSettings?.searchEngine?.locked === true &&
-      pluginSettings?.marlinServerUrl?.locked === true
-    );
-  }, [pluginSettings]);
-
-  useEffect(() => {
-    if (!pluginSettings?.marlinServerUrl?.locked) {
-      navigation.setOptions({
-        headerRight: () => (
-          <TouchableOpacity onPress={() => onSave(value)}>
-            <Text className='text-blue-500'>
-              {t("home.settings.plugins.marlin_search.save_button")}
-            </Text>
-          </TouchableOpacity>
-        ),
-      });
-    }
-  }, [navigation, value]);
-
-  if (!settings) return null;
-
-  return (
-    <DisabledSetting disabled={disabled} className='px-4'>
-      <ListGroup>
-        <DisabledSetting
-          disabled={pluginSettings?.searchEngine?.locked === true}
-          showText={!pluginSettings?.marlinServerUrl?.locked}
-        >
-          <ListItem
-            title={t(
-              "home.settings.plugins.marlin_search.enable_marlin_search",
-            )}
-            onPress={() => {
-              updateSettings({ searchEngine: "Jellyfin" });
-              queryClient.invalidateQueries({ queryKey: ["search"] });
-            }}
-          >
-            <Switch
-              value={settings.searchEngine === "Marlin"}
-              onValueChange={(value) => {
-                updateSettings({ searchEngine: value ? "Marlin" : "Jellyfin" });
-                queryClient.invalidateQueries({ queryKey: ["search"] });
-              }}
-            />
-          </ListItem>
-        </DisabledSetting>
-      </ListGroup>
-
-      <DisabledSetting
-        disabled={pluginSettings?.marlinServerUrl?.locked === true}
-        showText={!pluginSettings?.searchEngine?.locked}
-        className='mt-2 flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4'
-      >
-        <View className={"flex flex-row items-center bg-neutral-900 h-11 pr-4"}>
-          <Text className='mr-4'>
-            {t("home.settings.plugins.marlin_search.url")}
-          </Text>
-          <TextInput
-            editable={settings.searchEngine === "Marlin"}
-            className='text-white'
-            placeholder={t(
-              "home.settings.plugins.marlin_search.server_url_placeholder",
-            )}
-            value={value}
-            keyboardType='url'
-            returnKeyType='done'
-            autoCapitalize='none'
-            textContentType='URL'
-            onChangeText={(text) => setValue(text)}
-          />
-        </View>
-      </DisabledSetting>
-      <Text className='px-4 text-xs text-neutral-500 mt-1'>
-        {t("home.settings.plugins.marlin_search.marlin_search_hint")}{" "}
-        <Text className='text-blue-500' onPress={handleOpenLink}>
-          {t("home.settings.plugins.marlin_search.read_more_about_marlin")}
-        </Text>
-      </Text>
-    </DisabledSetting>
-  );
-}

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

@@ -0,0 +1,251 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, ScrollView, View } from "react-native";
+import { Switch } from "react-native-gesture-handler";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { toast } from "sonner-native";
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
+import {
+  clearCache,
+  clearPermanentDownloads,
+  getStorageStats,
+} from "@/providers/AudioStorage";
+import { useSettings } from "@/utils/atoms/settings";
+
+const CACHE_SIZE_OPTIONS = [
+  { label: "100 MB", value: 100 },
+  { label: "250 MB", value: 250 },
+  { label: "500 MB", value: 500 },
+  { label: "1 GB", value: 1024 },
+  { label: "2 GB", value: 2048 },
+];
+
+const LOOKAHEAD_COUNT_OPTIONS = [
+  { label: "1 song", value: 1 },
+  { label: "2 songs", value: 2 },
+  { label: "3 songs", value: 3 },
+  { label: "5 songs", value: 5 },
+];
+
+export default function MusicSettingsPage() {
+  const insets = useSafeAreaInsets();
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  const { t } = useTranslation();
+  const queryClient = useNetworkAwareQueryClient();
+  const successHapticFeedback = useHaptic("success");
+  const errorHapticFeedback = useHaptic("error");
+
+  const { data: musicCacheStats } = useQuery({
+    queryKey: ["musicCacheStats"],
+    queryFn: () => getStorageStats(),
+  });
+
+  const onClearMusicCacheClicked = useCallback(async () => {
+    try {
+      await clearCache();
+      queryClient.invalidateQueries({ queryKey: ["musicCacheStats"] });
+      queryClient.invalidateQueries({ queryKey: ["appSize"] });
+      successHapticFeedback();
+      toast.success(t("home.settings.storage.music_cache_cleared"));
+    } catch (_e) {
+      errorHapticFeedback();
+      toast.error(t("home.settings.toasts.error_deleting_files"));
+    }
+  }, [queryClient, successHapticFeedback, errorHapticFeedback, t]);
+
+  const onDeleteDownloadedSongsClicked = useCallback(async () => {
+    try {
+      await clearPermanentDownloads();
+      queryClient.invalidateQueries({ queryKey: ["musicCacheStats"] });
+      queryClient.invalidateQueries({ queryKey: ["appSize"] });
+      successHapticFeedback();
+      toast.success(t("home.settings.storage.downloaded_songs_deleted"));
+    } catch (_e) {
+      errorHapticFeedback();
+      toast.error(t("home.settings.toasts.error_deleting_files"));
+    }
+  }, [queryClient, successHapticFeedback, errorHapticFeedback, t]);
+
+  const cacheSizeOptions = useMemo(
+    () => [
+      {
+        options: CACHE_SIZE_OPTIONS.map((option) => ({
+          type: "radio" as const,
+          label: option.label,
+          value: String(option.value),
+          selected: option.value === settings?.audioMaxCacheSizeMB,
+          onPress: () => updateSettings({ audioMaxCacheSizeMB: option.value }),
+        })),
+      },
+    ],
+    [settings?.audioMaxCacheSizeMB, updateSettings],
+  );
+
+  const currentCacheSizeLabel =
+    CACHE_SIZE_OPTIONS.find((o) => o.value === settings?.audioMaxCacheSizeMB)
+      ?.label ?? `${settings?.audioMaxCacheSizeMB} MB`;
+
+  const lookaheadCountOptions = useMemo(
+    () => [
+      {
+        options: LOOKAHEAD_COUNT_OPTIONS.map((option) => ({
+          type: "radio" as const,
+          label: option.label,
+          value: String(option.value),
+          selected: option.value === settings?.audioLookaheadCount,
+          onPress: () => updateSettings({ audioLookaheadCount: option.value }),
+        })),
+      },
+    ],
+    [settings?.audioLookaheadCount, updateSettings],
+  );
+
+  const currentLookaheadLabel =
+    LOOKAHEAD_COUNT_OPTIONS.find(
+      (o) => o.value === settings?.audioLookaheadCount,
+    )?.label ?? `${settings?.audioLookaheadCount} songs`;
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <ListGroup
+          title={t("home.settings.music.playback_title")}
+          description={
+            <Text className='text-[#8E8D91] text-xs'>
+              {t("home.settings.music.playback_description")}
+            </Text>
+          }
+        >
+          <ListItem
+            title={t("home.settings.music.prefer_downloaded")}
+            disabled={pluginSettings?.preferLocalAudio?.locked}
+          >
+            <Switch
+              value={settings.preferLocalAudio}
+              disabled={pluginSettings?.preferLocalAudio?.locked}
+              onValueChange={(value) =>
+                updateSettings({ preferLocalAudio: value })
+              }
+            />
+          </ListItem>
+        </ListGroup>
+
+        <View className='mt-4'>
+          <ListGroup
+            title={t("home.settings.music.caching_title")}
+            description={
+              <Text className='text-[#8E8D91] text-xs'>
+                {t("home.settings.music.caching_description")}
+              </Text>
+            }
+          >
+            <ListItem
+              title={t("home.settings.music.lookahead_enabled")}
+              disabled={pluginSettings?.audioLookaheadEnabled?.locked}
+            >
+              <Switch
+                value={settings.audioLookaheadEnabled}
+                disabled={pluginSettings?.audioLookaheadEnabled?.locked}
+                onValueChange={(value) =>
+                  updateSettings({ audioLookaheadEnabled: value })
+                }
+              />
+            </ListItem>
+            <ListItem
+              title={t("home.settings.music.lookahead_count")}
+              disabled={
+                pluginSettings?.audioLookaheadCount?.locked ||
+                !settings.audioLookaheadEnabled
+              }
+            >
+              <PlatformDropdown
+                groups={lookaheadCountOptions}
+                trigger={
+                  <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                    <Text className='mr-1 text-[#8E8D91]'>
+                      {currentLookaheadLabel}
+                    </Text>
+                    <Ionicons
+                      name='chevron-expand-sharp'
+                      size={18}
+                      color='#5A5960'
+                    />
+                  </View>
+                }
+                title={t("home.settings.music.lookahead_count")}
+              />
+            </ListItem>
+            <ListItem
+              title={t("home.settings.music.max_cache_size")}
+              disabled={pluginSettings?.audioMaxCacheSizeMB?.locked}
+            >
+              <PlatformDropdown
+                groups={cacheSizeOptions}
+                trigger={
+                  <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                    <Text className='mr-1 text-[#8E8D91]'>
+                      {currentCacheSizeLabel}
+                    </Text>
+                    <Ionicons
+                      name='chevron-expand-sharp'
+                      size={18}
+                      color='#5A5960'
+                    />
+                  </View>
+                }
+                title={t("home.settings.music.max_cache_size")}
+              />
+            </ListItem>
+          </ListGroup>
+        </View>
+
+        {!Platform.isTV && (
+          <View className='mt-4'>
+            <ListGroup
+              title={t("home.settings.storage.music_cache_title")}
+              description={
+                <Text className='text-[#8E8D91] text-xs'>
+                  {t("home.settings.storage.music_cache_description")}
+                </Text>
+              }
+            >
+              <ListItem
+                onPress={onClearMusicCacheClicked}
+                title={t("home.settings.storage.clear_music_cache")}
+                subtitle={t("home.settings.storage.music_cache_size", {
+                  size: (musicCacheStats?.cacheSize ?? 0).bytesToReadable(),
+                })}
+              />
+            </ListGroup>
+            <ListGroup>
+              <ListItem
+                textColor='red'
+                onPress={onDeleteDownloadedSongsClicked}
+                title={t("home.settings.storage.delete_all_downloaded_songs")}
+                subtitle={t("home.settings.storage.downloaded_songs_size", {
+                  size: (musicCacheStats?.permanentSize ?? 0).bytesToReadable(),
+                })}
+              />
+            </ListGroup>
+          </View>
+        )}
+      </View>
+    </ScrollView>
+  );
+}

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

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

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

@@ -0,0 +1,35 @@
+import { Platform, ScrollView, View } from "react-native";
+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 { PlaybackControlsSettings } from "@/components/settings/PlaybackControlsSettings";
+import { ChromecastSettings } from "../../../../../../components/settings/ChromecastSettings";
+
+export default function PlaybackControlsPage() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <View className='mb-4'>
+          <MediaProvider>
+            <MediaToggles className='mb-4' />
+            <GestureControls className='mb-4' />
+            <PlaybackControlsSettings />
+          </MediaProvider>
+        </View>
+        {!Platform.isTV && <ChromecastSettings />}
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { ScrollView } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
+import { useSettings } from "@/utils/atoms/settings";
+
+export default function page() {
+  const { pluginSettings } = useSettings();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <DisabledSetting
+        disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
+        className='px-4'
+      >
+        <JellyseerrSettings />
+      </DisabledSetting>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { ScrollView } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { KefinTweaksSettings } from "@/components/settings/KefinTweaks";
+import { useSettings } from "@/utils/atoms/settings";
+
+export default function page() {
+  const { pluginSettings } = useSettings();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <DisabledSetting
+        disabled={pluginSettings?.useKefinTweaks?.locked === true}
+        className='px-4'
+      >
+        <KefinTweaksSettings />
+      </DisabledSetting>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,142 @@
+import { useNavigation } from "expo-router";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Linking,
+  ScrollView,
+  Switch,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { toast } from "sonner-native";
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
+import { useSettings } from "@/utils/atoms/settings";
+
+export default function page() {
+  const navigation = useNavigation();
+
+  const { t } = useTranslation();
+
+  const insets = useSafeAreaInsets();
+
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  const queryClient = useNetworkAwareQueryClient();
+
+  const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
+
+  const onSave = (val: string) => {
+    updateSettings({
+      marlinServerUrl: !val.endsWith("/") ? val : val.slice(0, -1),
+    });
+    toast.success(t("home.settings.plugins.marlin_search.toasts.saved"));
+  };
+
+  const handleOpenLink = () => {
+    Linking.openURL("https://github.com/fredrikburmester/marlin-search");
+  };
+
+  const disabled = useMemo(() => {
+    return (
+      pluginSettings?.searchEngine?.locked === true &&
+      pluginSettings?.marlinServerUrl?.locked === true
+    );
+  }, [pluginSettings]);
+
+  useEffect(() => {
+    if (!pluginSettings?.marlinServerUrl?.locked) {
+      navigation.setOptions({
+        headerRight: () => (
+          <TouchableOpacity onPress={() => onSave(value)} className='px-2'>
+            <Text className='text-blue-500'>
+              {t("home.settings.plugins.marlin_search.save_button")}
+            </Text>
+          </TouchableOpacity>
+        ),
+      });
+    }
+  }, [navigation, value, pluginSettings?.marlinServerUrl?.locked, t]);
+
+  if (!settings) return null;
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <DisabledSetting disabled={disabled} className='px-4'>
+        <ListGroup>
+          <DisabledSetting
+            disabled={
+              pluginSettings?.searchEngine?.locked === true ||
+              !!pluginSettings?.streamyStatsServerUrl?.value
+            }
+            showText={!pluginSettings?.marlinServerUrl?.locked}
+          >
+            <ListItem
+              title={t(
+                "home.settings.plugins.marlin_search.enable_marlin_search",
+              )}
+              onPress={() => {
+                updateSettings({ searchEngine: "Jellyfin" });
+                queryClient.invalidateQueries({ queryKey: ["search"] });
+              }}
+            >
+              <Switch
+                value={settings.searchEngine === "Marlin"}
+                disabled={!!pluginSettings?.streamyStatsServerUrl?.value}
+                onValueChange={(value) => {
+                  updateSettings({
+                    searchEngine: value ? "Marlin" : "Jellyfin",
+                  });
+                  queryClient.invalidateQueries({ queryKey: ["search"] });
+                }}
+              />
+            </ListItem>
+          </DisabledSetting>
+        </ListGroup>
+
+        <DisabledSetting
+          disabled={pluginSettings?.marlinServerUrl?.locked === true}
+          showText={!pluginSettings?.searchEngine?.locked}
+          className='mt-2 flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4'
+        >
+          <View
+            className={"flex flex-row items-center bg-neutral-900 h-11 pr-4"}
+          >
+            <Text className='mr-4'>
+              {t("home.settings.plugins.marlin_search.url")}
+            </Text>
+            <TextInput
+              editable={settings.searchEngine === "Marlin"}
+              className='text-white'
+              placeholder={t(
+                "home.settings.plugins.marlin_search.server_url_placeholder",
+              )}
+              value={value}
+              keyboardType='url'
+              returnKeyType='done'
+              autoCapitalize='none'
+              textContentType='URL'
+              onChangeText={(text) => setValue(text)}
+            />
+          </View>
+        </DisabledSetting>
+        <Text className='px-4 text-xs text-neutral-500 mt-1'>
+          {t("home.settings.plugins.marlin_search.marlin_search_hint")}{" "}
+          <Text className='text-blue-500' onPress={handleOpenLink}>
+            {t("home.settings.plugins.marlin_search.read_more_about_marlin")}
+          </Text>
+        </Text>
+      </DisabledSetting>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { PluginSettings } from "@/components/settings/PluginSettings";
+
+export default function PluginsPage() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='px-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <PluginSettings />
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,262 @@
+import { useNavigation } from "expo-router";
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Linking,
+  ScrollView,
+  Switch,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { toast } from "sonner-native";
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
+import { useSettings } from "@/utils/atoms/settings";
+
+export default function page() {
+  const { t } = useTranslation();
+  const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
+
+  const {
+    settings,
+    updateSettings,
+    pluginSettings,
+    refreshStreamyfinPluginSettings,
+  } = useSettings();
+  const queryClient = useNetworkAwareQueryClient();
+
+  // Local state for all editable fields
+  const [url, setUrl] = useState<string>(settings?.streamyStatsServerUrl || "");
+  const [useForSearch, setUseForSearch] = useState<boolean>(
+    settings?.searchEngine === "Streamystats",
+  );
+  const [movieRecs, setMovieRecs] = useState<boolean>(
+    settings?.streamyStatsMovieRecommendations ?? false,
+  );
+  const [seriesRecs, setSeriesRecs] = useState<boolean>(
+    settings?.streamyStatsSeriesRecommendations ?? false,
+  );
+  const [promotedWatchlists, setPromotedWatchlists] = useState<boolean>(
+    settings?.streamyStatsPromotedWatchlists ?? false,
+  );
+  const [hideWatchlistsTab, setHideWatchlistsTab] = useState<boolean>(
+    settings?.hideWatchlistsTab ?? false,
+  );
+
+  const isUrlLocked = pluginSettings?.streamyStatsServerUrl?.locked === true;
+  const isStreamystatsEnabled = !!url;
+
+  const onSave = useCallback(() => {
+    const cleanUrl = url.endsWith("/") ? url.slice(0, -1) : url;
+    updateSettings({
+      streamyStatsServerUrl: cleanUrl,
+      searchEngine: useForSearch ? "Streamystats" : "Jellyfin",
+      streamyStatsMovieRecommendations: movieRecs,
+      streamyStatsSeriesRecommendations: seriesRecs,
+      streamyStatsPromotedWatchlists: promotedWatchlists,
+      hideWatchlistsTab: hideWatchlistsTab,
+    });
+    queryClient.invalidateQueries({ queryKey: ["search"] });
+    queryClient.invalidateQueries({ queryKey: ["streamystats"] });
+    toast.success(t("home.settings.plugins.streamystats.toasts.saved"));
+  }, [
+    url,
+    useForSearch,
+    movieRecs,
+    seriesRecs,
+    promotedWatchlists,
+    hideWatchlistsTab,
+    updateSettings,
+    queryClient,
+    t,
+  ]);
+
+  // Set up header save button
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <TouchableOpacity onPress={onSave}>
+          <Text className='text-blue-500 font-medium'>
+            {t("home.settings.plugins.streamystats.save")}
+          </Text>
+        </TouchableOpacity>
+      ),
+    });
+  }, [navigation, onSave, t]);
+
+  const handleClearStreamystats = useCallback(() => {
+    setUrl("");
+    setUseForSearch(false);
+    setMovieRecs(false);
+    setSeriesRecs(false);
+    setPromotedWatchlists(false);
+    setHideWatchlistsTab(false);
+    updateSettings({
+      streamyStatsServerUrl: "",
+      searchEngine: "Jellyfin",
+      streamyStatsMovieRecommendations: false,
+      streamyStatsSeriesRecommendations: false,
+      streamyStatsPromotedWatchlists: false,
+      hideWatchlistsTab: false,
+    });
+    queryClient.invalidateQueries({ queryKey: ["streamystats"] });
+    queryClient.invalidateQueries({ queryKey: ["search"] });
+    toast.success(t("home.settings.plugins.streamystats.toasts.disabled"));
+  }, [updateSettings, queryClient, t]);
+
+  const handleOpenLink = () => {
+    Linking.openURL("https://github.com/fredrikburmester/streamystats");
+  };
+
+  const handleRefreshFromServer = useCallback(async () => {
+    const newPluginSettings = await refreshStreamyfinPluginSettings(true);
+    // Update local state with new values
+    const newUrl = newPluginSettings?.streamyStatsServerUrl?.value || "";
+    setUrl(newUrl);
+    if (newUrl) {
+      setUseForSearch(true);
+    }
+    toast.success(t("home.settings.plugins.streamystats.toasts.refreshed"));
+  }, [refreshStreamyfinPluginSettings, t]);
+
+  if (!settings) return null;
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View className='px-4'>
+        <ListGroup className='flex-1'>
+          <ListItem
+            title={t("home.settings.plugins.streamystats.url")}
+            disabledByAdmin={isUrlLocked}
+          >
+            <TextInput
+              editable={!isUrlLocked}
+              className='text-white text-right flex-1'
+              placeholder={t(
+                "home.settings.plugins.streamystats.server_url_placeholder",
+              )}
+              value={url}
+              keyboardType='url'
+              returnKeyType='done'
+              autoCapitalize='none'
+              textContentType='URL'
+              onChangeText={setUrl}
+            />
+          </ListItem>
+        </ListGroup>
+
+        <Text className='px-4 text-xs text-neutral-500 mt-1'>
+          {t("home.settings.plugins.streamystats.streamystats_search_hint")}{" "}
+          <Text className='text-blue-500' onPress={handleOpenLink}>
+            {t(
+              "home.settings.plugins.streamystats.read_more_about_streamystats",
+            )}
+          </Text>
+        </Text>
+
+        <ListGroup
+          title={t("home.settings.plugins.streamystats.features_title")}
+          className='mt-4'
+        >
+          <ListItem
+            title={t("home.settings.plugins.streamystats.enable_search")}
+            disabledByAdmin={pluginSettings?.searchEngine?.locked === true}
+          >
+            <Switch
+              value={useForSearch}
+              disabled={!isStreamystatsEnabled}
+              onValueChange={setUseForSearch}
+            />
+          </ListItem>
+          <ListItem
+            title={t(
+              "home.settings.plugins.streamystats.enable_movie_recommendations",
+            )}
+            disabledByAdmin={
+              pluginSettings?.streamyStatsMovieRecommendations?.locked === true
+            }
+          >
+            <Switch
+              value={movieRecs}
+              onValueChange={setMovieRecs}
+              disabled={!isStreamystatsEnabled}
+            />
+          </ListItem>
+          <ListItem
+            title={t(
+              "home.settings.plugins.streamystats.enable_series_recommendations",
+            )}
+            disabledByAdmin={
+              pluginSettings?.streamyStatsSeriesRecommendations?.locked === true
+            }
+          >
+            <Switch
+              value={seriesRecs}
+              onValueChange={setSeriesRecs}
+              disabled={!isStreamystatsEnabled}
+            />
+          </ListItem>
+          <ListItem
+            title={t(
+              "home.settings.plugins.streamystats.enable_promoted_watchlists",
+            )}
+            disabledByAdmin={
+              pluginSettings?.streamyStatsPromotedWatchlists?.locked === true
+            }
+          >
+            <Switch
+              value={promotedWatchlists}
+              onValueChange={setPromotedWatchlists}
+              disabled={!isStreamystatsEnabled}
+            />
+          </ListItem>
+          <ListItem
+            title={t("home.settings.plugins.streamystats.hide_watchlists_tab")}
+            disabledByAdmin={pluginSettings?.hideWatchlistsTab?.locked === true}
+          >
+            <Switch
+              value={hideWatchlistsTab}
+              onValueChange={setHideWatchlistsTab}
+              disabled={!isStreamystatsEnabled}
+            />
+          </ListItem>
+        </ListGroup>
+        <Text className='px-4 text-xs text-neutral-500 mt-1'>
+          {t("home.settings.plugins.streamystats.home_sections_hint")}
+        </Text>
+
+        <TouchableOpacity
+          onPress={handleRefreshFromServer}
+          className='mt-6 py-3 rounded-xl bg-neutral-800'
+        >
+          <Text className='text-center text-blue-500'>
+            {t("home.settings.plugins.streamystats.refresh_from_server")}
+          </Text>
+        </TouchableOpacity>
+
+        {/* Disable button - only show if URL is not locked and Streamystats is enabled */}
+        {!isUrlLocked && isStreamystatsEnabled && (
+          <TouchableOpacity
+            onPress={handleClearStreamystats}
+            className='mt-3 mb-4 py-3 rounded-xl bg-neutral-800'
+          >
+            <Text className='text-center text-red-500'>
+              {t("home.settings.plugins.streamystats.disable_streamystats")}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -1,98 +0,0 @@
-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 Animated, {
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { Text } from "@/components/common/Text";
-import { ItemContent } from "@/components/ItemContent";
-import { useItemQuery } from "@/hooks/useItemQuery";
-
-const Page: React.FC = () => {
-  const { id } = useLocalSearchParams() as { id: string };
-  const { t } = useTranslation();
-
-  const { offline } = useLocalSearchParams() as { offline?: string };
-  const isOffline = offline === "true";
-
-  const { data: item, isError } = useItemQuery(id, isOffline);
-
-  const opacity = useSharedValue(1);
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: opacity.value,
-    };
-  });
-
-  const fadeOut = (callback: any) => {
-    setTimeout(() => {
-      opacity.value = withTiming(0, { duration: 500 }, (finished) => {
-        if (finished) {
-          runOnJS(callback)();
-        }
-      });
-    }, 100);
-  };
-
-  const fadeIn = (callback: any) => {
-    setTimeout(() => {
-      opacity.value = withTiming(1, { duration: 500 }, (finished) => {
-        if (finished) {
-          runOnJS(callback)();
-        }
-      });
-    }, 100);
-  };
-
-  useEffect(() => {
-    if (item) {
-      fadeOut(() => {});
-    } else {
-      fadeIn(() => {});
-    }
-  }, [item]);
-
-  if (isError)
-    return (
-      <View className='flex flex-col items-center justify-center h-screen w-screen'>
-        <Text>{t("item_card.could_not_load_item")}</Text>
-      </View>
-    );
-
-  return (
-    <View className='flex flex-1 relative'>
-      <Animated.View
-        pointerEvents={"none"}
-        style={[animatedStyle]}
-        className='absolute top-0 left-0 flex flex-col items-start h-screen w-screen px-4 z-50 bg-black'
-      >
-        <View
-          style={{
-            height: item?.Type === "Episode" ? 300 : 450,
-          }}
-          className='bg-transparent rounded-lg mb-4 w-full'
-        />
-        <View className='h-6 bg-neutral-900 rounded mb-4 w-14' />
-        <View className='h-10 bg-neutral-900 rounded-lg mb-2 w-1/2' />
-        <View className='h-3 bg-neutral-900 rounded mb-3 w-8' />
-        <View className='flex flex-row space-x-1 mb-8'>
-          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
-          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
-          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
-        </View>
-        <View className='h-3 bg-neutral-900 rounded w-2/3 mb-1' />
-        <View className='h-10 bg-neutral-900 rounded-lg w-full mb-2' />
-        <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
-        <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
-      </Animated.View>
-      {item && <ItemContent item={item} isOffline={isOffline} />}
-    </View>
-  );
-};
-
-export default Page;

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

@@ -1,161 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import type React from "react";
-import { useEffect, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
-import { AddToFavorites } from "@/components/AddToFavorites";
-import { DownloadItems } from "@/components/DownloadItem";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-import { NextUp } from "@/components/series/NextUp";
-import { SeasonPicker } from "@/components/series/SeasonPicker";
-import { SeriesHeader } from "@/components/series/SeriesHeader";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-
-const page: React.FC = () => {
-  const navigation = useNavigation();
-  const { t } = useTranslation();
-  const params = useLocalSearchParams();
-  const { id: seriesId, seasonIndex } = params as {
-    id: string;
-    seasonIndex: string;
-  };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const { data: item } = useQuery({
-    queryKey: ["series", seriesId],
-    queryFn: async () =>
-      await getUserItemData({
-        api,
-        userId: user?.Id,
-        itemId: seriesId,
-      }),
-    staleTime: 60 * 1000,
-  });
-
-  const backdropUrl = useMemo(
-    () =>
-      getBackdropUrl({
-        api,
-        item,
-        quality: 90,
-        width: 1000,
-      }),
-    [item],
-  );
-
-  const logoUrl = useMemo(
-    () =>
-      getLogoImageUrlById({
-        api,
-        item,
-      }),
-    [item],
-  );
-
-  const { data: allEpisodes, isLoading } = useQuery({
-    queryKey: ["AllEpisodes", item?.Id],
-    queryFn: async () => {
-      const res = await getTvShowsApi(api!).getEpisodes({
-        seriesId: item?.Id!,
-        userId: user?.Id!,
-        enableUserData: true,
-        // Note: Including trick play is necessary to enable trick play downloads
-        fields: ["MediaSources", "MediaStreams", "Overview", "Trickplay"],
-      });
-      return res?.data.Items || [];
-    },
-    select: (data) =>
-      // This needs to be sorted by parent index number and then index number, that way we can download the episodes in the correct order.
-      [...(data || [])].sort(
-        (a, b) =>
-          (a.ParentIndexNumber ?? 0) - (b.ParentIndexNumber ?? 0) ||
-          (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0),
-      ),
-    staleTime: 60,
-    enabled: !!api && !!user?.Id && !!item?.Id,
-  });
-
-  useEffect(() => {
-    navigation.setOptions({
-      headerRight: () =>
-        !isLoading &&
-        item &&
-        allEpisodes &&
-        allEpisodes.length > 0 && (
-          <View className='flex flex-row items-center space-x-2'>
-            <AddToFavorites item={item} />
-            {!Platform.isTV && (
-              <DownloadItems
-                size='large'
-                title={t("item_card.download.download_series")}
-                items={allEpisodes || []}
-                MissingDownloadIconComponent={() => (
-                  <Ionicons name='download' size={22} color='white' />
-                )}
-                DownloadedIconComponent={() => (
-                  <Ionicons
-                    name='checkmark-done-outline'
-                    size={24}
-                    color='#9333ea'
-                  />
-                )}
-              />
-            )}
-          </View>
-        ),
-    });
-  }, [allEpisodes, isLoading, item]);
-
-  if (!item || !backdropUrl) return null;
-
-  return (
-    <ParallaxScrollView
-      headerHeight={400}
-      headerImage={
-        <Image
-          source={{
-            uri: backdropUrl,
-          }}
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      }
-      logo={
-        logoUrl ? (
-          <Image
-            source={{
-              uri: logoUrl,
-            }}
-            style={{
-              height: 130,
-              width: "100%",
-            }}
-            contentFit='contain'
-          />
-        ) : undefined
-      }
-    >
-      <View className='flex flex-col pt-4'>
-        <SeriesHeader item={item} />
-        <View className='mb-4'>
-          <NextUp seriesId={seriesId} />
-        </View>
-        <SeasonPicker item={item} initialSeasonIndex={Number(seasonIndex)} />
-      </View>
-    </ParallaxScrollView>
-  );
-};
-
-export default page;

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

@@ -16,6 +16,7 @@ import type React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FlatList, 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 { FilterButton } from "@/components/filters/FilterButton";
@@ -204,154 +205,154 @@ const page: React.FC = () => {
 
   const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
 
+  const _insets = useSafeAreaInsets();
+
   const ListHeaderComponent = useCallback(
     () => (
-      <View className=''>
-        <FlatList
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{
-            display: "flex",
-            paddingHorizontal: 15,
-            paddingVertical: 16,
-            flexDirection: "row",
-          }}
-          extraData={[
-            selectedGenres,
-            selectedYears,
-            selectedTags,
-            sortBy,
-            sortOrder,
-          ]}
-          data={[
-            {
-              key: "reset",
-              component: <ResetFiltersButton />,
-            },
-            {
-              key: "genre",
-              component: (
-                <FilterButton
-                  className='mr-1'
-                  id={collectionId}
-                  queryKey='genreFilter'
-                  queryFn={async () => {
-                    if (!api) return null;
-                    const response = await getFilterApi(
-                      api,
-                    ).getQueryFiltersLegacy({
-                      userId: user?.Id,
-                      parentId: collectionId,
-                    });
-                    return response.data.Genres || [];
-                  }}
-                  set={setSelectedGenres}
-                  values={selectedGenres}
-                  title={t("library.filters.genres")}
-                  renderItemLabel={(item) => item.toString()}
-                  searchFilter={(item, search) =>
-                    item.toLowerCase().includes(search.toLowerCase())
-                  }
-                />
-              ),
-            },
-            {
-              key: "year",
-              component: (
-                <FilterButton
-                  className='mr-1'
-                  id={collectionId}
-                  queryKey='yearFilter'
-                  queryFn={async () => {
-                    if (!api) return null;
-                    const response = await getFilterApi(
-                      api,
-                    ).getQueryFiltersLegacy({
-                      userId: user?.Id,
-                      parentId: collectionId,
-                    });
-                    return response.data.Years || [];
-                  }}
-                  set={setSelectedYears}
-                  values={selectedYears}
-                  title={t("library.filters.years")}
-                  renderItemLabel={(item) => item.toString()}
-                  searchFilter={(item, search) => item.includes(search)}
-                />
-              ),
-            },
-            {
-              key: "tags",
-              component: (
-                <FilterButton
-                  className='mr-1'
-                  id={collectionId}
-                  queryKey='tagsFilter'
-                  queryFn={async () => {
-                    if (!api) return null;
-                    const response = await getFilterApi(
-                      api,
-                    ).getQueryFiltersLegacy({
-                      userId: user?.Id,
-                      parentId: collectionId,
-                    });
-                    return response.data.Tags || [];
-                  }}
-                  set={setSelectedTags}
-                  values={selectedTags}
-                  title={t("library.filters.tags")}
-                  renderItemLabel={(item) => item.toString()}
-                  searchFilter={(item, search) =>
-                    item.toLowerCase().includes(search.toLowerCase())
-                  }
-                />
-              ),
-            },
-            {
-              key: "sortBy",
-              component: (
-                <FilterButton
-                  className='mr-1'
-                  id={collectionId}
-                  queryKey='sortBy'
-                  queryFn={async () => sortOptions.map((s) => s.key)}
-                  set={setSortBy}
-                  values={sortBy}
-                  title={t("library.filters.sort_by")}
-                  renderItemLabel={(item) =>
-                    sortOptions.find((i) => i.key === item)?.value || ""
-                  }
-                  searchFilter={(item, search) =>
-                    item.toLowerCase().includes(search.toLowerCase())
-                  }
-                />
-              ),
-            },
-            {
-              key: "sortOrder",
-              component: (
-                <FilterButton
-                  className='mr-1'
-                  id={collectionId}
-                  queryKey='sortOrder'
-                  queryFn={async () => sortOrderOptions.map((s) => s.key)}
-                  set={setSortOrder}
-                  values={sortOrder}
-                  title={t("library.filters.sort_order")}
-                  renderItemLabel={(item) =>
-                    sortOrderOptions.find((i) => i.key === item)?.value || ""
-                  }
-                  searchFilter={(item, search) =>
-                    item.toLowerCase().includes(search.toLowerCase())
-                  }
-                />
-              ),
-            },
-          ]}
-          renderItem={({ item }) => item.component}
-          keyExtractor={(item) => item.key}
-        />
-      </View>
+      <FlatList
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{
+          display: "flex",
+          paddingHorizontal: 15,
+          paddingVertical: 16,
+          flexDirection: "row",
+        }}
+        extraData={[
+          selectedGenres,
+          selectedYears,
+          selectedTags,
+          sortBy,
+          sortOrder,
+        ]}
+        data={[
+          {
+            key: "reset",
+            component: <ResetFiltersButton />,
+          },
+          {
+            key: "genre",
+            component: (
+              <FilterButton
+                className='mr-1'
+                id={collectionId}
+                queryKey='genreFilter'
+                queryFn={async () => {
+                  if (!api) return null;
+                  const response = await getFilterApi(
+                    api,
+                  ).getQueryFiltersLegacy({
+                    userId: user?.Id,
+                    parentId: collectionId,
+                  });
+                  return response.data.Genres || [];
+                }}
+                set={setSelectedGenres}
+                values={selectedGenres}
+                title={t("library.filters.genres")}
+                renderItemLabel={(item) => item.toString()}
+                searchFilter={(item, search) =>
+                  item.toLowerCase().includes(search.toLowerCase())
+                }
+              />
+            ),
+          },
+          {
+            key: "year",
+            component: (
+              <FilterButton
+                className='mr-1'
+                id={collectionId}
+                queryKey='yearFilter'
+                queryFn={async () => {
+                  if (!api) return null;
+                  const response = await getFilterApi(
+                    api,
+                  ).getQueryFiltersLegacy({
+                    userId: user?.Id,
+                    parentId: collectionId,
+                  });
+                  return response.data.Years || [];
+                }}
+                set={setSelectedYears}
+                values={selectedYears}
+                title={t("library.filters.years")}
+                renderItemLabel={(item) => item.toString()}
+                searchFilter={(item, search) => item.includes(search)}
+              />
+            ),
+          },
+          {
+            key: "tags",
+            component: (
+              <FilterButton
+                className='mr-1'
+                id={collectionId}
+                queryKey='tagsFilter'
+                queryFn={async () => {
+                  if (!api) return null;
+                  const response = await getFilterApi(
+                    api,
+                  ).getQueryFiltersLegacy({
+                    userId: user?.Id,
+                    parentId: collectionId,
+                  });
+                  return response.data.Tags || [];
+                }}
+                set={setSelectedTags}
+                values={selectedTags}
+                title={t("library.filters.tags")}
+                renderItemLabel={(item) => item.toString()}
+                searchFilter={(item, search) =>
+                  item.toLowerCase().includes(search.toLowerCase())
+                }
+              />
+            ),
+          },
+          {
+            key: "sortBy",
+            component: (
+              <FilterButton
+                className='mr-1'
+                id={collectionId}
+                queryKey='sortBy'
+                queryFn={async () => sortOptions.map((s) => s.key)}
+                set={setSortBy}
+                values={sortBy}
+                title={t("library.filters.sort_by")}
+                renderItemLabel={(item) =>
+                  sortOptions.find((i) => i.key === item)?.value || ""
+                }
+                searchFilter={(item, search) =>
+                  item.toLowerCase().includes(search.toLowerCase())
+                }
+              />
+            ),
+          },
+          {
+            key: "sortOrder",
+            component: (
+              <FilterButton
+                className='mr-1'
+                id={collectionId}
+                queryKey='sortOrder'
+                queryFn={async () => sortOrderOptions.map((s) => s.key)}
+                set={setSortOrder}
+                values={sortOrder}
+                title={t("library.filters.sort_order")}
+                renderItemLabel={(item) =>
+                  sortOrderOptions.find((i) => i.key === item)?.value || ""
+                }
+                searchFilter={(item, search) =>
+                  item.toLowerCase().includes(search.toLowerCase())
+                }
+              />
+            ),
+          },
+        ]}
+        renderItem={({ item }) => item.component}
+        keyExtractor={(item) => item.key}
+      />
     ),
     [
       collectionId,
@@ -393,7 +394,6 @@ const page: React.FC = () => {
       data={flatData}
       renderItem={renderItem}
       keyExtractor={keyExtractor}
-      estimatedItemSize={255}
       numColumns={
         orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5
       }

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

@@ -0,0 +1,114 @@
+import { ItemFields } from "@jellyfin/sdk/lib/generated-client/models";
+import { useLocalSearchParams } from "expo-router";
+import type React from "react";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { Text } from "@/components/common/Text";
+import { ItemContent } from "@/components/ItemContent";
+import { useItemQuery } from "@/hooks/useItemQuery";
+import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
+
+const ItemContentSkeletonTV = Platform.isTV
+  ? require("@/components/ItemContentSkeleton.tv").ItemContentSkeletonTV
+  : null;
+
+const Page: React.FC = () => {
+  const { id } = useLocalSearchParams() as { id: string };
+  const { t } = useTranslation();
+
+  const { offline } = useLocalSearchParams() as { offline?: string };
+  const isOffline = offline === "true";
+
+  // Exclude MediaSources/MediaStreams from initial fetch for faster loading
+  // (especially important for plugins like Gelato)
+  const {
+    data: item,
+    isError,
+    isLoading,
+  } = useItemQuery(id, isOffline, undefined, [
+    ItemFields.MediaSources,
+    ItemFields.MediaSourceCount,
+    ItemFields.MediaStreams,
+  ]);
+
+  // Lazily preload item with full media sources in background
+  const { data: itemWithSources } = useItemQuery(id, isOffline, undefined, []);
+
+  const opacity = useSharedValue(1);
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
+
+  // Fast fade out when item loads (no setTimeout delay)
+  useEffect(() => {
+    if (item) {
+      opacity.value = withTiming(0, { duration: 150 });
+    } else {
+      opacity.value = withTiming(1, { duration: 150 });
+    }
+  }, [item, opacity]);
+
+  if (isError)
+    return (
+      <View className='flex flex-col items-center justify-center h-screen w-screen'>
+        <Text>{t("item_card.could_not_load_item")}</Text>
+      </View>
+    );
+
+  return (
+    <OfflineModeProvider isOffline={isOffline}>
+      <View className='flex flex-1 relative'>
+        {/* Always render ItemContent - it handles loading state internally on TV */}
+        <ItemContent
+          item={item}
+          itemWithSources={itemWithSources}
+          isLoading={isLoading}
+        />
+
+        {/* Skeleton overlay - fades out when content loads */}
+        {!item && (
+          <Animated.View
+            pointerEvents={"none"}
+            style={[animatedStyle]}
+            className='absolute top-0 left-0 flex flex-col items-start h-screen w-screen z-50 bg-black'
+          >
+            {Platform.isTV && ItemContentSkeletonTV ? (
+              <ItemContentSkeletonTV />
+            ) : (
+              <View style={{ paddingHorizontal: 16, width: "100%" }}>
+                <View
+                  style={{
+                    height: 450,
+                  }}
+                  className='bg-transparent rounded-lg mb-4 w-full'
+                />
+                <View className='h-6 bg-neutral-900 rounded mb-4 w-14' />
+                <View className='h-10 bg-neutral-900 rounded-lg mb-2 w-1/2' />
+                <View className='h-3 bg-neutral-900 rounded mb-3 w-8' />
+                <View className='flex flex-row space-x-1 mb-8'>
+                  <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+                  <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+                  <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+                </View>
+                <View className='h-3 bg-neutral-900 rounded w-2/3 mb-1' />
+                <View className='h-10 bg-neutral-900 rounded-lg w-full mb-2' />
+                <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
+                <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
+              </View>
+            )}
+          </Animated.View>
+        )}
+      </View>
+    </OfflineModeProvider>
+  );
+};
+
+export default Page;

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

@@ -21,19 +21,18 @@ export default function page() {
     companyId: string;
     name: string;
     image: string;
-    type: DiscoverSliderType;
+    type: DiscoverSliderType; //This gets converted to a string because it's a url param
   };
 
-  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
+  const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
     queryKey: ["jellyseerr", "company", type, companyId],
     queryFn: async ({ pageParam }) => {
       const params: any = {
         page: Number(pageParam),
       };
-
       return jellyseerrApi?.discover(
         `${
-          type === DiscoverSliderType.NETWORKS
+          Number(type) === DiscoverSliderType.NETWORKS
             ? Endpoints.DISCOVER_TV_NETWORK
             : Endpoints.DISCOVER_MOVIES_STUDIO
         }/${companyId}`,
@@ -86,6 +85,7 @@ export default function page() {
           fetchNextPage();
         }
       }}
+      isLoading={isLoading}
       logo={
         <Image
           id={companyId}

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

@@ -8,42 +8,50 @@ import {
 } from "@gorhom/bottom-sheet";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation, useRouter } from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 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 { GenreTags } from "@/components/GenreTags";
 import Cast from "@/components/jellyseerr/Cast";
 import DetailFacts from "@/components/jellyseerr/DetailFacts";
+import RequestModal from "@/components/jellyseerr/RequestModal";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { JellyserrRatings } from "@/components/Ratings";
 import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
 import { ItemActions } from "@/components/series/SeriesActions";
+import useRouter from "@/hooks/useAppRouter";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
+import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
 import {
   type IssueType,
   IssueTypeName,
 } from "@/utils/jellyseerr/server/constants/issue";
-import { MediaType } from "@/utils/jellyseerr/server/constants/media";
+import {
+  MediaRequestStatus,
+  MediaType,
+} from "@/utils/jellyseerr/server/constants/media";
+import type MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
+import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
+import {
+  hasPermission,
+  Permission,
+} from "@/utils/jellyseerr/server/lib/permissions";
+import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 import type {
   MovieResult,
   TvResult,
 } from "@/utils/jellyseerr/server/models/Search";
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import RequestModal from "@/components/jellyseerr/RequestModal";
-import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
-import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
-import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
-
 const Page: React.FC = () => {
   const insets = useSafeAreaInsets();
   const params = useLocalSearchParams();
@@ -60,11 +68,12 @@ const Page: React.FC = () => {
     } & Partial<MovieResult | TvResult | MovieDetails | TvDetails>;
 
   const navigation = useNavigation();
-  const { jellyseerrApi, requestMedia } = useJellyseerr();
+  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
 
   const [issueType, setIssueType] = useState<IssueType>();
   const [issueMessage, setIssueMessage] = useState<string>();
   const [requestBody, _setRequestBody] = useState<MediaRequestBody>();
+  const [issueTypeDropdownOpen, setIssueTypeDropdownOpen] = useState(false);
   const advancedReqModalRef = useRef<BottomSheetModal>(null);
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
@@ -92,6 +101,46 @@ const Page: React.FC = () => {
   const [canRequest, hasAdvancedRequestPermission] =
     useJellyseerrCanRequest(details);
 
+  const canManageRequests = useMemo(() => {
+    if (!jellyseerrUser) return false;
+    return hasPermission(
+      Permission.MANAGE_REQUESTS,
+      jellyseerrUser.permissions,
+    );
+  }, [jellyseerrUser]);
+
+  const pendingRequest = useMemo(() => {
+    return details?.mediaInfo?.requests?.find(
+      (r: MediaRequest) => r.status === MediaRequestStatus.PENDING,
+    );
+  }, [details]);
+
+  const handleApproveRequest = useCallback(async () => {
+    if (!pendingRequest?.id) return;
+
+    try {
+      await jellyseerrApi?.approveRequest(pendingRequest.id);
+      toast.success(t("jellyseerr.toasts.request_approved"));
+      refetch();
+    } catch (error) {
+      toast.error(t("jellyseerr.toasts.failed_to_approve_request"));
+      console.error("Failed to approve request:", error);
+    }
+  }, [jellyseerrApi, pendingRequest, refetch, t]);
+
+  const handleDeclineRequest = useCallback(async () => {
+    if (!pendingRequest?.id) return;
+
+    try {
+      await jellyseerrApi?.declineRequest(pendingRequest.id);
+      toast.success(t("jellyseerr.toasts.request_declined"));
+      refetch();
+    } catch (error) {
+      toast.error(t("jellyseerr.toasts.failed_to_decline_request"));
+      console.error("Failed to decline request:", error);
+    }
+  }, [jellyseerrApi, pendingRequest, refetch, t]);
+
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop
@@ -115,6 +164,10 @@ const Page: React.FC = () => {
     }
   }, [jellyseerrApi, details, result, issueType, issueMessage]);
 
+  const handleIssueModalDismiss = useCallback(() => {
+    setIssueTypeDropdownOpen(false);
+  }, []);
+
   const setRequestBody = useCallback(
     (body: MediaRequestBody) => {
       _setRequestBody(body);
@@ -128,9 +181,11 @@ const Page: React.FC = () => {
       mediaId: Number(result.id!),
       mediaType: mediaType!,
       tvdbId: details?.externalIds?.tvdbId,
-      seasons: (details as TvDetails)?.seasons
-        ?.filter?.((s) => s.seasonNumber !== 0)
-        ?.map?.((s) => s.seasonNumber),
+      ...(mediaType === MediaType.TV && {
+        seasons: (details as TvDetails)?.seasons
+          ?.filter?.((s) => s.seasonNumber !== 0)
+          ?.map?.((s) => s.seasonNumber),
+      }),
     };
 
     if (hasAdvancedRequestPermission) {
@@ -156,11 +211,31 @@ const Page: React.FC = () => {
     [details],
   );
 
+  const issueTypeOptionGroups = useMemo(
+    () => [
+      {
+        title: t("jellyseerr.types"),
+        options: Object.entries(IssueTypeName)
+          .reverse()
+          .map(([key, value]) => ({
+            type: "radio" as const,
+            label: value,
+            value: key,
+            selected: key === String(issueType),
+            onPress: () => setIssueType(key as unknown as IssueType),
+          })),
+      },
+    ],
+    [issueType, t],
+  );
+
   useEffect(() => {
     if (details) {
       navigation.setOptions({
         headerRight: () => (
-          <TouchableOpacity className='rounded-full p-2 bg-neutral-800/80'>
+          <TouchableOpacity
+            className={`rounded-full pl-1.5 ${Platform.OS === "android" ? "" : "bg-neutral-800/80"}`}
+          >
             <ItemActions item={details} />
           </TouchableOpacity>
         ),
@@ -309,6 +384,60 @@ const Page: React.FC = () => {
                   </View>
                 )
               )}
+              {canManageRequests && pendingRequest && (
+                <View className='flex flex-col space-y-2 mt-4'>
+                  <View className='flex flex-row items-center space-x-2'>
+                    <Ionicons name='person-outline' size={16} color='#9CA3AF' />
+                    <Text className='text-sm text-neutral-400'>
+                      {t("jellyseerr.requested_by", {
+                        user:
+                          pendingRequest.requestedBy?.displayName ||
+                          pendingRequest.requestedBy?.username ||
+                          pendingRequest.requestedBy?.jellyfinUsername ||
+                          t("jellyseerr.unknown_user"),
+                      })}
+                    </Text>
+                  </View>
+                  <View className='flex flex-row space-x-2'>
+                    <Button
+                      className='flex-1 bg-green-600/50 border-green-400 ring-green-400 text-green-100'
+                      color='transparent'
+                      onPress={handleApproveRequest}
+                      iconLeft={
+                        <Ionicons
+                          name='checkmark-outline'
+                          size={20}
+                          color='white'
+                        />
+                      }
+                      style={{
+                        borderWidth: 1,
+                        borderStyle: "solid",
+                      }}
+                    >
+                      <Text className='text-sm'>{t("jellyseerr.approve")}</Text>
+                    </Button>
+                    <Button
+                      className='flex-1 bg-red-600/50 border-red-400 ring-red-400 text-red-100'
+                      color='transparent'
+                      onPress={handleDeclineRequest}
+                      iconLeft={
+                        <Ionicons
+                          name='close-outline'
+                          size={20}
+                          color='white'
+                        />
+                      }
+                      style={{
+                        borderWidth: 1,
+                        borderStyle: "solid",
+                      }}
+                    >
+                      <Text className='text-sm'>{t("jellyseerr.decline")}</Text>
+                    </Button>
+                  </View>
+                </View>
+              )}
               <OverviewText text={result.overview} className='mt-4' />
             </View>
 
@@ -355,6 +484,8 @@ const Page: React.FC = () => {
             backgroundColor: "#171717",
           }}
           backdropComponent={renderBackdrop}
+          stackBehavior='push'
+          onDismiss={handleIssueModalDismiss}
         >
           <BottomSheetView>
             <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
@@ -364,50 +495,25 @@ const Page: React.FC = () => {
                 </Text>
               </View>
               <View className='flex flex-col space-y-2 items-start'>
-                <View className='flex flex-col'>
-                  <DropdownMenu.Root>
-                    <DropdownMenu.Trigger>
-                      <View className='flex flex-col'>
-                        <Text className='opacity-50 mb-1 text-xs'>
-                          {t("jellyseerr.issue_type")}
+                <View className='flex flex-col w-full'>
+                  <Text className='opacity-50 mb-1 text-xs'>
+                    {t("jellyseerr.issue_type")}
+                  </Text>
+                  <PlatformDropdown
+                    groups={issueTypeOptionGroups}
+                    trigger={
+                      <View className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                        <Text numberOfLines={1}>
+                          {issueType
+                            ? IssueTypeName[issueType]
+                            : t("jellyseerr.select_an_issue")}
                         </Text>
-                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-                          <Text style={{}} className='' numberOfLines={1}>
-                            {issueType
-                              ? IssueTypeName[issueType]
-                              : t("jellyseerr.select_an_issue")}
-                          </Text>
-                        </TouchableOpacity>
                       </View>
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Content
-                      loop={false}
-                      side='bottom'
-                      align='center'
-                      alignOffset={0}
-                      avoidCollisions={true}
-                      collisionPadding={0}
-                      sideOffset={0}
-                    >
-                      <DropdownMenu.Label>
-                        {t("jellyseerr.types")}
-                      </DropdownMenu.Label>
-                      {Object.entries(IssueTypeName)
-                        .reverse()
-                        .map(([key, value], _idx) => (
-                          <DropdownMenu.Item
-                            key={value}
-                            onSelect={() =>
-                              setIssueType(key as unknown as IssueType)
-                            }
-                          >
-                            <DropdownMenu.ItemTitle>
-                              {value}
-                            </DropdownMenu.ItemTitle>
-                          </DropdownMenu.Item>
-                        ))}
-                    </DropdownMenu.Content>
-                  </DropdownMenu.Root>
+                    }
+                    title={t("jellyseerr.types")}
+                    open={issueTypeDropdownOpen}
+                    onOpenChange={setIssueTypeDropdownOpen}
+                  />
                 </View>
 
                 <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full'>

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

@@ -87,14 +87,15 @@ export default function page() {
           <Text className='font-bold text-2xl mb-1'>{data?.details?.name}</Text>
           <Text className='opacity-50'>
             {t("jellyseerr.born")}{" "}
-            {new Date(data?.details?.birthday!).toLocaleDateString(
-              `${locale}-${region}`,
-              {
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-              },
-            )}{" "}
+            {data?.details?.birthday &&
+              new Date(data.details.birthday).toLocaleDateString(
+                `${locale}-${region}`,
+                {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                },
+              )}{" "}
             | {data?.details?.placeOfBirth}
           </Text>
         </>

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

@@ -33,7 +33,6 @@ export default function page() {
     <View className='flex flex-1'>
       <FlashList
         data={channels?.Items}
-        estimatedItemSize={76}
         renderItem={({ item }) => (
           <View className='flex flex-row items-center px-4 mb-2'>
             <View className='w-22 mr-4 rounded-lg overflow-hidden'>

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

@@ -0,0 +1,300 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getItemsApi, getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  Dimensions,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
+import { MusicTrackItem } from "@/components/music/MusicTrackItem";
+import { PlaylistPickerSheet } from "@/components/music/PlaylistPickerSheet";
+import { TrackOptionsSheet } from "@/components/music/TrackOptionsSheet";
+import {
+  downloadTrack,
+  isPermanentlyDownloaded,
+} from "@/providers/AudioStorage";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
+import { getAudioStreamUrl } from "@/utils/jellyfin/audio/getAudioStreamUrl";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { runtimeTicksToMinutes } from "@/utils/time";
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+const ARTWORK_SIZE = SCREEN_WIDTH * 0.5;
+
+export default function AlbumDetailScreen() {
+  const { albumId } = useLocalSearchParams<{ albumId: string }>();
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+  const { t } = useTranslation();
+  const { playQueue } = useMusicPlayer();
+
+  const [selectedTrack, setSelectedTrack] = useState<BaseItemDto | null>(null);
+  const [trackOptionsOpen, setTrackOptionsOpen] = useState(false);
+  const [playlistPickerOpen, setPlaylistPickerOpen] = useState(false);
+  const [createPlaylistOpen, setCreatePlaylistOpen] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleTrackOptionsPress = useCallback((track: BaseItemDto) => {
+    setSelectedTrack(track);
+    setTrackOptionsOpen(true);
+  }, []);
+
+  const handleAddToPlaylist = useCallback(() => {
+    setPlaylistPickerOpen(true);
+  }, []);
+
+  const handleCreateNewPlaylist = useCallback(() => {
+    setCreatePlaylistOpen(true);
+  }, []);
+
+  const { data: album, isLoading: loadingAlbum } = useQuery({
+    queryKey: ["music-album", albumId, user?.Id],
+    queryFn: async () => {
+      const response = await getUserLibraryApi(api!).getItem({
+        userId: user?.Id,
+        itemId: albumId!,
+      });
+      return response.data;
+    },
+    enabled: !!api && !!user?.Id && !!albumId,
+  });
+
+  const { data: tracks, isLoading: loadingTracks } = useQuery({
+    queryKey: ["music-album-tracks", albumId, user?.Id],
+    queryFn: async () => {
+      const response = await getItemsApi(api!).getItems({
+        userId: user?.Id,
+        parentId: albumId,
+        sortBy: ["IndexNumber"],
+        sortOrder: ["Ascending"],
+      });
+      return response.data.Items || [];
+    },
+    enabled: !!api && !!user?.Id && !!albumId,
+  });
+
+  useEffect(() => {
+    navigation.setOptions({
+      title: album?.Name ?? "",
+      headerTransparent: true,
+      headerStyle: { backgroundColor: "transparent" },
+      headerShadowVisible: false,
+    });
+  }, [album?.Name, navigation]);
+
+  const imageUrl = useMemo(
+    () => (album ? getPrimaryImageUrl({ api, item: album }) : null),
+    [api, album],
+  );
+
+  const totalDuration = useMemo(() => {
+    if (!tracks) return "";
+    const totalTicks = tracks.reduce(
+      (acc, track) => acc + (track.RunTimeTicks || 0),
+      0,
+    );
+    return runtimeTicksToMinutes(totalTicks);
+  }, [tracks]);
+
+  const handlePlayAll = useCallback(() => {
+    if (tracks && tracks.length > 0) {
+      playQueue(tracks, 0);
+    }
+  }, [playQueue, tracks]);
+
+  const handleShuffle = useCallback(() => {
+    if (tracks && tracks.length > 0) {
+      const shuffled = [...tracks].sort(() => Math.random() - 0.5);
+      playQueue(shuffled, 0);
+    }
+  }, [playQueue, tracks]);
+
+  // Check if all tracks are already permanently downloaded
+  const allTracksDownloaded = useMemo(() => {
+    if (!tracks || tracks.length === 0) return false;
+    return tracks.every((track) => isPermanentlyDownloaded(track.Id));
+  }, [tracks]);
+
+  const handleDownloadAlbum = useCallback(async () => {
+    if (!tracks || !api || !user?.Id || isDownloading) return;
+
+    setIsDownloading(true);
+    try {
+      for (const track of tracks) {
+        if (!track.Id || isPermanentlyDownloaded(track.Id)) continue;
+        const result = await getAudioStreamUrl(api, user.Id, track.Id);
+        if (result?.url && !result.isTranscoding) {
+          await downloadTrack(track.Id, result.url, {
+            permanent: true,
+            container: result.mediaSource?.Container || undefined,
+          });
+        }
+      }
+    } catch {
+      // Silent fail
+    }
+    setIsDownloading(false);
+  }, [tracks, api, user?.Id, isDownloading]);
+
+  const isLoading = loadingAlbum || loadingTracks;
+
+  // Only show loading if we have no cached data to display
+  if (isLoading && !album) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Loader />
+      </View>
+    );
+  }
+
+  if (!album) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Text className='text-neutral-500'>{t("music.album_not_found")}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <FlashList
+      data={tracks || []}
+      contentContainerStyle={{
+        paddingBottom: insets.bottom + 100,
+      }}
+      ListHeaderComponent={
+        <View
+          className='items-center px-4 pb-6 bg-black'
+          style={{ paddingTop: insets.top + 60 }}
+        >
+          {/* Album artwork */}
+          <View
+            style={{
+              width: ARTWORK_SIZE,
+              height: ARTWORK_SIZE,
+              borderRadius: 8,
+              overflow: "hidden",
+              backgroundColor: "#1a1a1a",
+              shadowColor: "#000",
+              shadowOffset: { width: 0, height: 8 },
+              shadowOpacity: 0.3,
+              shadowRadius: 12,
+              elevation: 8,
+            }}
+          >
+            {imageUrl ? (
+              <Image
+                source={{ uri: imageUrl }}
+                style={{ width: "100%", height: "100%" }}
+                contentFit='cover'
+                cachePolicy='memory-disk'
+              />
+            ) : (
+              <View className='flex-1 items-center justify-center bg-neutral-800'>
+                <Ionicons name='disc' size={60} color='#666' />
+              </View>
+            )}
+          </View>
+
+          {/* Album info */}
+          <Text className='text-white text-xl font-bold mt-4 text-center'>
+            {album.Name}
+          </Text>
+          <Text className='text-purple-400 text-base mt-1'>
+            {album.AlbumArtist || album.Artists?.join(", ")}
+          </Text>
+          <Text className='text-neutral-500 text-sm mt-1'>
+            {album.ProductionYear && `${album.ProductionYear} • `}
+            {tracks?.length} tracks • {totalDuration}
+          </Text>
+
+          {/* Play buttons */}
+          <View className='flex flex-row mt-4 items-center'>
+            <TouchableOpacity
+              onPress={handlePlayAll}
+              className='flex flex-row items-center bg-purple-600 px-6 py-3 rounded-full mr-3'
+            >
+              <Ionicons name='play' size={20} color='white' />
+              <Text className='text-white font-medium ml-2'>
+                {t("music.play")}
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={handleShuffle}
+              className='flex flex-row items-center bg-neutral-800 px-6 py-3 rounded-full mr-3'
+            >
+              <Ionicons name='shuffle' size={20} color='white' />
+              <Text className='text-white font-medium ml-2'>
+                {t("music.shuffle")}
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={handleDownloadAlbum}
+              disabled={allTracksDownloaded || isDownloading}
+              className='flex items-center justify-center bg-neutral-800 p-3 rounded-full'
+            >
+              {isDownloading ? (
+                <ActivityIndicator size={20} color='white' />
+              ) : (
+                <Ionicons
+                  name={
+                    allTracksDownloaded
+                      ? "checkmark-circle"
+                      : "download-outline"
+                  }
+                  size={20}
+                  color={allTracksDownloaded ? "#22c55e" : "white"}
+                />
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      }
+      renderItem={({ item, index }) => (
+        <MusicTrackItem
+          track={item}
+          index={index + 1}
+          queue={tracks}
+          showArtwork={false}
+          onOptionsPress={handleTrackOptionsPress}
+        />
+      )}
+      keyExtractor={(item) => item.Id!}
+      ListFooterComponent={
+        <>
+          <TrackOptionsSheet
+            open={trackOptionsOpen}
+            setOpen={setTrackOptionsOpen}
+            track={selectedTrack}
+            onAddToPlaylist={handleAddToPlaylist}
+          />
+          <PlaylistPickerSheet
+            open={playlistPickerOpen}
+            setOpen={setPlaylistPickerOpen}
+            trackToAdd={selectedTrack}
+            onCreateNew={handleCreateNewPlaylist}
+          />
+          <CreatePlaylistModal
+            open={createPlaylistOpen}
+            setOpen={setCreatePlaylistOpen}
+            initialTrackId={selectedTrack?.Id}
+          />
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,273 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getItemsApi, getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Dimensions, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { HorizontalScroll } from "@/components/common/HorizontalScroll";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
+import { MusicAlbumCard } from "@/components/music/MusicAlbumCard";
+import { MusicTrackItem } from "@/components/music/MusicTrackItem";
+import { PlaylistPickerSheet } from "@/components/music/PlaylistPickerSheet";
+import { TrackOptionsSheet } from "@/components/music/TrackOptionsSheet";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+const ARTWORK_SIZE = SCREEN_WIDTH * 0.4;
+
+export default function ArtistDetailScreen() {
+  const { artistId } = useLocalSearchParams<{ artistId: string }>();
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+  const { t } = useTranslation();
+  const { playQueue } = useMusicPlayer();
+
+  const [selectedTrack, setSelectedTrack] = useState<BaseItemDto | null>(null);
+  const [trackOptionsOpen, setTrackOptionsOpen] = useState(false);
+  const [playlistPickerOpen, setPlaylistPickerOpen] = useState(false);
+  const [createPlaylistOpen, setCreatePlaylistOpen] = useState(false);
+
+  const handleTrackOptionsPress = useCallback((track: BaseItemDto) => {
+    setSelectedTrack(track);
+    setTrackOptionsOpen(true);
+  }, []);
+
+  const handleAddToPlaylist = useCallback(() => {
+    setPlaylistPickerOpen(true);
+  }, []);
+
+  const handleCreateNewPlaylist = useCallback(() => {
+    setCreatePlaylistOpen(true);
+  }, []);
+
+  const { data: artist, isLoading: loadingArtist } = useQuery({
+    queryKey: ["music-artist", artistId, user?.Id],
+    queryFn: async () => {
+      const response = await getUserLibraryApi(api!).getItem({
+        userId: user?.Id,
+        itemId: artistId!,
+      });
+      return response.data;
+    },
+    enabled: !!api && !!user?.Id && !!artistId,
+  });
+
+  const { data: albums, isLoading: loadingAlbums } = useQuery({
+    queryKey: ["music-artist-albums", artistId, user?.Id],
+    queryFn: async () => {
+      const response = await getItemsApi(api!).getItems({
+        userId: user?.Id,
+        artistIds: [artistId!],
+        includeItemTypes: ["MusicAlbum"],
+        sortBy: ["ProductionYear", "SortName"],
+        sortOrder: ["Descending", "Ascending"],
+        recursive: true,
+      });
+      return response.data.Items || [];
+    },
+    enabled: !!api && !!user?.Id && !!artistId,
+  });
+
+  const { data: topTracks, isLoading: loadingTracks } = useQuery({
+    queryKey: ["music-artist-top-tracks", artistId, user?.Id],
+    queryFn: async () => {
+      const response = await getItemsApi(api!).getItems({
+        userId: user?.Id,
+        artistIds: [artistId!],
+        includeItemTypes: ["Audio"],
+        sortBy: ["PlayCount"],
+        sortOrder: ["Descending"],
+        limit: 10,
+        recursive: true,
+        filters: ["IsPlayed"],
+      });
+      return response.data.Items || [];
+    },
+    enabled: !!api && !!user?.Id && !!artistId,
+  });
+
+  useEffect(() => {
+    navigation.setOptions({
+      title: artist?.Name ?? "",
+      headerTransparent: true,
+      headerStyle: { backgroundColor: "transparent" },
+      headerShadowVisible: false,
+    });
+  }, [artist?.Name, navigation]);
+
+  const imageUrl = useMemo(
+    () => (artist ? getPrimaryImageUrl({ api, item: artist }) : null),
+    [api, artist],
+  );
+
+  const handlePlayAllTracks = useCallback(() => {
+    if (topTracks && topTracks.length > 0) {
+      playQueue(topTracks, 0);
+    }
+  }, [playQueue, topTracks]);
+
+  const isLoading = loadingArtist || loadingAlbums || loadingTracks;
+
+  // Only show loading if we have no cached data to display
+  if (isLoading && !artist) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Loader />
+      </View>
+    );
+  }
+
+  if (!artist) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Text className='text-neutral-500'>{t("music.artist_not_found")}</Text>
+      </View>
+    );
+  }
+
+  const sections = [];
+
+  // Top tracks section
+  if (topTracks && topTracks.length > 0) {
+    sections.push({
+      id: "top-tracks",
+      title: t("music.top_tracks"),
+      type: "tracks" as const,
+      data: topTracks,
+    });
+  }
+
+  // Albums section
+  if (albums && albums.length > 0) {
+    sections.push({
+      id: "albums",
+      title: t("music.tabs.albums"),
+      type: "albums" as const,
+      data: albums,
+    });
+  }
+
+  return (
+    <FlashList
+      data={sections}
+      contentContainerStyle={{
+        paddingBottom: insets.bottom + 100,
+      }}
+      ListHeaderComponent={
+        <View
+          className='items-center px-4 pb-6 bg-black'
+          style={{ paddingTop: insets.top + 50 }}
+        >
+          {/* Artist image */}
+          <View
+            style={{
+              width: ARTWORK_SIZE,
+              height: ARTWORK_SIZE,
+              borderRadius: ARTWORK_SIZE / 2,
+              overflow: "hidden",
+              backgroundColor: "#1a1a1a",
+              shadowColor: "#000",
+              shadowOffset: { width: 0, height: 8 },
+              shadowOpacity: 0.3,
+              shadowRadius: 12,
+              elevation: 8,
+            }}
+          >
+            {imageUrl ? (
+              <Image
+                source={{ uri: imageUrl }}
+                style={{ width: "100%", height: "100%" }}
+                contentFit='cover'
+                cachePolicy='memory-disk'
+              />
+            ) : (
+              <View className='flex-1 items-center justify-center bg-neutral-800'>
+                <Ionicons name='person' size={60} color='#666' />
+              </View>
+            )}
+          </View>
+
+          {/* Artist info */}
+          <Text className='text-white text-2xl font-bold mt-4 text-center'>
+            {artist.Name}
+          </Text>
+          <Text className='text-neutral-500 text-sm mt-1'>
+            {albums?.length || 0} {t("music.tabs.albums").toLowerCase()}
+          </Text>
+
+          {/* Play button */}
+          {topTracks && topTracks.length > 0 && (
+            <TouchableOpacity
+              onPress={handlePlayAllTracks}
+              className='flex flex-row items-center bg-purple-600 px-6 py-3 rounded-full mt-4'
+            >
+              <Ionicons name='play' size={20} color='white' />
+              <Text className='text-white font-medium ml-2'>
+                {t("music.play_top_tracks")}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      }
+      renderItem={({ item: section }) => (
+        <View className='mb-6'>
+          <Text className='text-lg font-bold px-4 mb-3'>{section.title}</Text>
+          {section.type === "albums" ? (
+            <HorizontalScroll
+              data={section.data}
+              height={178}
+              keyExtractor={(item) => item.Id!}
+              renderItem={(item) => <MusicAlbumCard album={item} />}
+            />
+          ) : (
+            section.data
+              .slice(0, 5)
+              .map((track, index) => (
+                <MusicTrackItem
+                  key={track.Id}
+                  track={track}
+                  index={index + 1}
+                  queue={section.data}
+                  onOptionsPress={handleTrackOptionsPress}
+                />
+              ))
+          )}
+        </View>
+      )}
+      keyExtractor={(item) => item.id}
+      ListFooterComponent={
+        <>
+          <TrackOptionsSheet
+            open={trackOptionsOpen}
+            setOpen={setTrackOptionsOpen}
+            track={selectedTrack}
+            onAddToPlaylist={handleAddToPlaylist}
+          />
+          <PlaylistPickerSheet
+            open={playlistPickerOpen}
+            setOpen={setPlaylistPickerOpen}
+            trackToAdd={selectedTrack}
+            onCreateNew={handleCreateNewPlaylist}
+          />
+          <CreatePlaylistModal
+            open={createPlaylistOpen}
+            setOpen={setCreatePlaylistOpen}
+            initialTrackId={selectedTrack?.Id}
+          />
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,315 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getItemsApi, getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
+import { MusicTrackItem } from "@/components/music/MusicTrackItem";
+import { PlaylistOptionsSheet } from "@/components/music/PlaylistOptionsSheet";
+import { PlaylistPickerSheet } from "@/components/music/PlaylistPickerSheet";
+import { TrackOptionsSheet } from "@/components/music/TrackOptionsSheet";
+import { useRemoveFromPlaylist } from "@/hooks/usePlaylistMutations";
+import { downloadTrack, getLocalPath } from "@/providers/AudioStorage";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
+import { getAudioStreamUrl } from "@/utils/jellyfin/audio/getAudioStreamUrl";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { runtimeTicksToMinutes } from "@/utils/time";
+
+const ARTWORK_SIZE = 120;
+
+export default function PlaylistDetailScreen() {
+  const { playlistId } = useLocalSearchParams<{ playlistId: string }>();
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+  const { t } = useTranslation();
+  const { playQueue } = useMusicPlayer();
+
+  const [selectedTrack, setSelectedTrack] = useState<BaseItemDto | null>(null);
+  const [trackOptionsOpen, setTrackOptionsOpen] = useState(false);
+  const [playlistPickerOpen, setPlaylistPickerOpen] = useState(false);
+  const [createPlaylistOpen, setCreatePlaylistOpen] = useState(false);
+  const [playlistOptionsOpen, setPlaylistOptionsOpen] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const removeFromPlaylist = useRemoveFromPlaylist();
+
+  const handleTrackOptionsPress = useCallback((track: BaseItemDto) => {
+    setSelectedTrack(track);
+    setTrackOptionsOpen(true);
+  }, []);
+
+  const handleAddToPlaylist = useCallback(() => {
+    setPlaylistPickerOpen(true);
+  }, []);
+
+  const handleCreateNewPlaylist = useCallback(() => {
+    setCreatePlaylistOpen(true);
+  }, []);
+
+  const handleRemoveFromPlaylist = useCallback(() => {
+    if (selectedTrack?.Id && playlistId) {
+      removeFromPlaylist.mutate({
+        playlistId,
+        entryIds: [selectedTrack.PlaylistItemId ?? selectedTrack.Id],
+      });
+    }
+  }, [selectedTrack, playlistId, removeFromPlaylist]);
+
+  const { data: playlist, isLoading: loadingPlaylist } = useQuery({
+    queryKey: ["music-playlist", playlistId, user?.Id],
+    queryFn: async () => {
+      const response = await getUserLibraryApi(api!).getItem({
+        userId: user?.Id,
+        itemId: playlistId!,
+      });
+      return response.data;
+    },
+    enabled: !!api && !!user?.Id && !!playlistId,
+  });
+
+  const { data: tracks, isLoading: loadingTracks } = useQuery({
+    queryKey: ["music-playlist-tracks", playlistId, user?.Id],
+    queryFn: async () => {
+      const response = await getItemsApi(api!).getItems({
+        userId: user?.Id,
+        parentId: playlistId,
+      });
+      return response.data.Items || [];
+    },
+    enabled: !!api && !!user?.Id && !!playlistId,
+  });
+
+  useEffect(() => {
+    navigation.setOptions({
+      title: playlist?.Name ?? "",
+      headerTransparent: true,
+      headerStyle: { backgroundColor: "transparent" },
+      headerShadowVisible: false,
+      headerRight: () => (
+        <TouchableOpacity
+          onPress={() => setPlaylistOptionsOpen(true)}
+          className='p-1.5'
+        >
+          <Ionicons name='ellipsis-horizontal' size={24} color='white' />
+        </TouchableOpacity>
+      ),
+    });
+  }, [playlist?.Name, navigation]);
+
+  const imageUrl = useMemo(
+    () => (playlist ? getPrimaryImageUrl({ api, item: playlist }) : null),
+    [api, playlist],
+  );
+
+  const totalDuration = useMemo(() => {
+    if (!tracks) return "";
+    const totalTicks = tracks.reduce(
+      (acc, track) => acc + (track.RunTimeTicks || 0),
+      0,
+    );
+    return runtimeTicksToMinutes(totalTicks);
+  }, [tracks]);
+
+  const handlePlayAll = useCallback(() => {
+    if (tracks && tracks.length > 0) {
+      playQueue(tracks, 0);
+    }
+  }, [playQueue, tracks]);
+
+  const handleShuffle = useCallback(() => {
+    if (tracks && tracks.length > 0) {
+      const shuffled = [...tracks].sort(() => Math.random() - 0.5);
+      playQueue(shuffled, 0);
+    }
+  }, [playQueue, tracks]);
+
+  // Check if all tracks are already downloaded
+  const allTracksDownloaded = useMemo(() => {
+    if (!tracks || tracks.length === 0) return false;
+    return tracks.every((track) => !!getLocalPath(track.Id));
+  }, [tracks]);
+
+  const handleDownloadPlaylist = useCallback(async () => {
+    if (!tracks || !api || !user?.Id || isDownloading) return;
+
+    setIsDownloading(true);
+    try {
+      for (const track of tracks) {
+        if (!track.Id || getLocalPath(track.Id)) continue;
+        const result = await getAudioStreamUrl(api, user.Id, track.Id);
+        if (result?.url && !result.isTranscoding) {
+          await downloadTrack(track.Id, result.url, {
+            permanent: true,
+            container: result.mediaSource?.Container || undefined,
+          });
+        }
+      }
+    } catch {
+      // Silent fail
+    }
+    setIsDownloading(false);
+  }, [tracks, api, user?.Id, isDownloading]);
+
+  const isLoading = loadingPlaylist || loadingTracks;
+
+  // Only show loading if we have no cached data to display
+  if (isLoading && !playlist) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Loader />
+      </View>
+    );
+  }
+
+  if (!playlist) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Text className='text-neutral-500'>
+          {t("music.playlist_not_found")}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <FlashList
+      data={tracks || []}
+      contentContainerStyle={{
+        paddingBottom: insets.bottom + 100,
+      }}
+      ListHeaderComponent={
+        <View
+          className='items-center px-4 pb-6 bg-black'
+          style={{ paddingTop: insets.top + 50 }}
+        >
+          {/* Playlist artwork */}
+          <View
+            style={{
+              width: ARTWORK_SIZE,
+              height: ARTWORK_SIZE,
+              borderRadius: 8,
+              overflow: "hidden",
+              backgroundColor: "#1a1a1a",
+              shadowColor: "#000",
+              shadowOffset: { width: 0, height: 8 },
+              shadowOpacity: 0.3,
+              shadowRadius: 12,
+              elevation: 8,
+            }}
+          >
+            {imageUrl ? (
+              <Image
+                source={{ uri: imageUrl }}
+                style={{ width: "100%", height: "100%" }}
+                contentFit='cover'
+                cachePolicy='memory-disk'
+              />
+            ) : (
+              <View className='flex-1 items-center justify-center bg-neutral-800'>
+                <Ionicons name='list' size={60} color='#666' />
+              </View>
+            )}
+          </View>
+
+          {/* Playlist info */}
+          <Text className='text-white text-xl font-bold mt-4 text-center'>
+            {playlist.Name}
+          </Text>
+          <Text className='text-neutral-500 text-sm mt-1'>
+            {tracks?.length} tracks • {totalDuration}
+          </Text>
+
+          {/* Play buttons */}
+          <View className='flex flex-row mt-4 items-center'>
+            <TouchableOpacity
+              onPress={handlePlayAll}
+              className='flex flex-row items-center bg-purple-600 px-6 py-3 rounded-full mr-3'
+            >
+              <Ionicons name='play' size={20} color='white' />
+              <Text className='text-white font-medium ml-2'>
+                {t("music.play")}
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={handleShuffle}
+              className='flex flex-row items-center bg-neutral-800 px-6 py-3 rounded-full mr-3'
+            >
+              <Ionicons name='shuffle' size={20} color='white' />
+              <Text className='text-white font-medium ml-2'>
+                {t("music.shuffle")}
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={handleDownloadPlaylist}
+              disabled={allTracksDownloaded || isDownloading}
+              className='flex items-center justify-center bg-neutral-800 p-3 rounded-full'
+            >
+              {isDownloading ? (
+                <ActivityIndicator size={20} color='white' />
+              ) : (
+                <Ionicons
+                  name={
+                    allTracksDownloaded
+                      ? "checkmark-circle"
+                      : "download-outline"
+                  }
+                  size={20}
+                  color={allTracksDownloaded ? "#22c55e" : "white"}
+                />
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      }
+      renderItem={({ item, index }) => (
+        <MusicTrackItem
+          track={item}
+          index={index + 1}
+          queue={tracks}
+          onOptionsPress={handleTrackOptionsPress}
+        />
+      )}
+      keyExtractor={(item) => item.Id!}
+      ListFooterComponent={
+        <>
+          <TrackOptionsSheet
+            open={trackOptionsOpen}
+            setOpen={setTrackOptionsOpen}
+            track={selectedTrack}
+            onAddToPlaylist={handleAddToPlaylist}
+            playlistId={playlistId}
+            onRemoveFromPlaylist={handleRemoveFromPlaylist}
+          />
+          <PlaylistPickerSheet
+            open={playlistPickerOpen}
+            setOpen={setPlaylistPickerOpen}
+            trackToAdd={selectedTrack}
+            onCreateNew={handleCreateNewPlaylist}
+          />
+          <CreatePlaylistModal
+            open={createPlaylistOpen}
+            setOpen={setCreatePlaylistOpen}
+            initialTrackId={selectedTrack?.Id}
+          />
+          <PlaylistOptionsSheet
+            open={playlistOptionsOpen}
+            setOpen={setPlaylistOptionsOpen}
+            playlist={playlist}
+          />
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,230 @@
+import { Ionicons } from "@expo/vector-icons";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import type React from "react";
+import { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, View } from "react-native";
+import { AddToFavorites } from "@/components/AddToFavorites";
+import { DownloadItems } from "@/components/DownloadItem";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { NextUp } from "@/components/series/NextUp";
+import { SeasonPicker } from "@/components/series/SeasonPicker";
+import { SeriesHeader } from "@/components/series/SeriesHeader";
+import { TVSeriesPage } from "@/components/series/TVSeriesPage";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
+import {
+  buildOfflineSeriesFromEpisodes,
+  getDownloadedEpisodesForSeries,
+} from "@/utils/downloads/offline-series";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { storage } from "@/utils/mmkv";
+
+const page: React.FC = () => {
+  const navigation = useNavigation();
+  const { t } = useTranslation();
+  const params = useLocalSearchParams();
+  const {
+    id: seriesId,
+    seasonIndex,
+    offline: offlineParam,
+  } = params as {
+    id: string;
+    seasonIndex: string;
+    offline?: string;
+  };
+
+  const isOffline = offlineParam === "true";
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const { getDownloadedItems, downloadedItems } = useDownload();
+
+  // For offline mode, construct series data from downloaded episodes
+  // Include downloadedItems.length so query refetches when items are deleted
+  const { data: item } = useQuery({
+    queryKey: ["series", seriesId, isOffline, downloadedItems.length],
+    queryFn: async () => {
+      if (isOffline) {
+        return buildOfflineSeriesFromEpisodes(getDownloadedItems(), seriesId);
+      }
+      return await getUserItemData({
+        api,
+        userId: user?.Id,
+        itemId: seriesId,
+      });
+    },
+    staleTime: isOffline ? Infinity : 60 * 1000,
+    enabled: isOffline || (!!api && !!user?.Id),
+  });
+
+  // For offline mode, use stored base64 image
+  const base64Image = useMemo(() => {
+    if (isOffline) {
+      return storage.getString(seriesId);
+    }
+    return null;
+  }, [isOffline, seriesId]);
+
+  const backdropUrl = useMemo(() => {
+    if (isOffline && base64Image) {
+      return `data:image/jpeg;base64,${base64Image}`;
+    }
+    return getBackdropUrl({
+      api,
+      item,
+      quality: 90,
+      width: 1000,
+    });
+  }, [isOffline, base64Image, api, item]);
+
+  const logoUrl = useMemo(() => {
+    if (isOffline) {
+      return null; // No logo in offline mode
+    }
+    return getLogoImageUrlById({
+      api,
+      item,
+    });
+  }, [isOffline, api, item]);
+
+  const { data: allEpisodes, isLoading } = useQuery({
+    queryKey: ["AllEpisodes", seriesId, isOffline, downloadedItems.length],
+    queryFn: async () => {
+      if (isOffline) {
+        return getDownloadedEpisodesForSeries(getDownloadedItems(), seriesId);
+      }
+      if (!api || !user?.Id) return [];
+
+      const res = await getTvShowsApi(api).getEpisodes({
+        seriesId: seriesId,
+        userId: user.Id,
+        enableUserData: true,
+        fields: ["MediaSources", "MediaStreams", "Overview", "Trickplay"],
+      });
+      return res?.data.Items || [];
+    },
+    select: (data) =>
+      [...(data || [])].sort(
+        (a, b) =>
+          (a.ParentIndexNumber ?? 0) - (b.ParentIndexNumber ?? 0) ||
+          (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0),
+      ),
+    staleTime: isOffline ? Infinity : 60,
+    enabled: isOffline || (!!api && !!user?.Id),
+  });
+
+  useEffect(() => {
+    // Don't show header buttons in offline mode
+    if (isOffline) {
+      navigation.setOptions({
+        headerRight: () => null,
+      });
+      return;
+    }
+
+    navigation.setOptions({
+      headerRight: () =>
+        !isLoading && item && allEpisodes && allEpisodes.length > 0 ? (
+          <View className='flex flex-row items-center space-x-2'>
+            <AddToFavorites item={item} />
+            {!Platform.isTV && (
+              <DownloadItems
+                size='large'
+                title={t("item_card.download.download_series")}
+                items={allEpisodes || []}
+                MissingDownloadIconComponent={() => (
+                  <Ionicons name='download' size={22} color='white' />
+                )}
+                DownloadedIconComponent={() => (
+                  <Ionicons
+                    name='checkmark-done-outline'
+                    size={24}
+                    color='#9333ea'
+                  />
+                )}
+              />
+            )}
+          </View>
+        ) : null,
+    });
+  }, [allEpisodes, isLoading, item, isOffline]);
+
+  // 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
+        headerHeight={400}
+        headerImage={
+          backdropUrl ? (
+            <Image
+              source={{
+                uri: backdropUrl,
+              }}
+              style={{
+                width: "100%",
+                height: "100%",
+              }}
+            />
+          ) : (
+            <View
+              style={{
+                width: "100%",
+                height: "100%",
+                backgroundColor: "#1a1a1a",
+              }}
+            />
+          )
+        }
+        logo={
+          logoUrl ? (
+            <Image
+              source={{
+                uri: logoUrl,
+              }}
+              style={{
+                height: 130,
+                width: "100%",
+              }}
+              contentFit='contain'
+            />
+          ) : undefined
+        }
+      >
+        <View className='flex flex-col pt-4'>
+          <SeriesHeader item={item} />
+          {!isOffline && (
+            <View className='mb-4'>
+              <NextUp seriesId={seriesId} />
+            </View>
+          )}
+          <SeasonPicker item={item} initialSeasonIndex={Number(seasonIndex)} />
+        </View>
+      </ParallaxScrollView>
+    </OfflineModeProvider>
+  );
+};
+
+export default page;

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

@@ -1,85 +1,208 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
-import { useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity } from "react-native";
-import { LibraryOptionsSheet } from "@/components/settings/LibraryOptionsSheet";
+import { Platform, View } from "react-native";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { useSettings } from "@/utils/atoms/settings";
 
 export default function IndexLayout() {
   const { settings, updateSettings, pluginSettings } = useSettings();
-  const [optionsSheetOpen, setOptionsSheetOpen] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
 
   const { t } = useTranslation();
 
+  // Reset dropdown state when component unmounts or navigates away
+  useEffect(() => {
+    return () => {
+      setDropdownOpen(false);
+    };
+  }, []);
+
+  // Memoize callbacks to prevent recreating on every render
+  const handleDisplayRow = useCallback(() => {
+    updateSettings({
+      libraryOptions: {
+        ...settings.libraryOptions,
+        display: "row",
+      },
+    });
+  }, [settings.libraryOptions, updateSettings]);
+
+  const handleDisplayList = useCallback(() => {
+    updateSettings({
+      libraryOptions: {
+        ...settings.libraryOptions,
+        display: "list",
+      },
+    });
+  }, [settings.libraryOptions, updateSettings]);
+
+  const handleImageStylePoster = useCallback(() => {
+    updateSettings({
+      libraryOptions: {
+        ...settings.libraryOptions,
+        imageStyle: "poster",
+      },
+    });
+  }, [settings.libraryOptions, updateSettings]);
+
+  const handleImageStyleCover = useCallback(() => {
+    updateSettings({
+      libraryOptions: {
+        ...settings.libraryOptions,
+        imageStyle: "cover",
+      },
+    });
+  }, [settings.libraryOptions, updateSettings]);
+
+  const handleToggleTitles = useCallback(() => {
+    updateSettings({
+      libraryOptions: {
+        ...settings.libraryOptions,
+        showTitles: !settings.libraryOptions.showTitles,
+      },
+    });
+  }, [settings.libraryOptions, updateSettings]);
+
+  const handleToggleStats = useCallback(() => {
+    updateSettings({
+      libraryOptions: {
+        ...settings.libraryOptions,
+        showStats: !settings.libraryOptions.showStats,
+      },
+    });
+  }, [settings.libraryOptions, updateSettings]);
+
+  // Memoize groups to prevent recreating the array on every render
+  const dropdownGroups = useMemo(
+    () => [
+      {
+        title: t("library.options.display"),
+        options: [
+          {
+            type: "radio" as const,
+            label: t("library.options.row"),
+            value: "row",
+            selected: settings.libraryOptions.display === "row",
+            onPress: handleDisplayRow,
+          },
+          {
+            type: "radio" as const,
+            label: t("library.options.list"),
+            value: "list",
+            selected: settings.libraryOptions.display === "list",
+            onPress: handleDisplayList,
+          },
+        ],
+      },
+      {
+        title: t("library.options.image_style"),
+        options: [
+          {
+            type: "radio" as const,
+            label: t("library.options.poster"),
+            value: "poster",
+            selected: settings.libraryOptions.imageStyle === "poster",
+            onPress: handleImageStylePoster,
+          },
+          {
+            type: "radio" as const,
+            label: t("library.options.cover"),
+            value: "cover",
+            selected: settings.libraryOptions.imageStyle === "cover",
+            onPress: handleImageStyleCover,
+          },
+        ],
+      },
+      {
+        title: "Options",
+        options: [
+          {
+            type: "toggle" as const,
+            label: t("library.options.show_titles"),
+            value: settings.libraryOptions.showTitles,
+            onToggle: handleToggleTitles,
+            disabled: settings.libraryOptions.imageStyle === "poster",
+          },
+          {
+            type: "toggle" as const,
+            label: t("library.options.show_stats"),
+            value: settings.libraryOptions.showStats,
+            onToggle: handleToggleStats,
+          },
+        ],
+      },
+    ],
+    [
+      t,
+      settings.libraryOptions,
+      handleDisplayRow,
+      handleDisplayList,
+      handleImageStylePoster,
+      handleImageStyleCover,
+      handleToggleTitles,
+      handleToggleStats,
+    ],
+  );
+
   if (!settings?.libraryOptions) return null;
 
   return (
-    <>
-      <Stack>
-        <Stack.Screen
-          name='index'
-          options={{
-            headerShown: !Platform.isTV,
-            headerTitle: t("tabs.library"),
-            headerBlurEffect: "none",
-            headerTransparent: Platform.OS === "ios",
-            headerShadowVisible: false,
-            headerRight: () =>
-              !pluginSettings?.libraryOptions?.locked &&
-              !Platform.isTV && (
-                <TouchableOpacity
-                  onPress={() => setOptionsSheetOpen(true)}
-                  className='flex flex-row items-center justify-center w-9 h-9'
-                >
-                  <Ionicons
-                    name='ellipsis-horizontal-outline'
-                    size={24}
-                    color='white'
-                  />
-                </TouchableOpacity>
-              ),
-          }}
-        />
-        <Stack.Screen
-          name='[libraryId]'
-          options={{
-            title: "",
-            headerShown: !Platform.isTV,
-            headerBlurEffect: "none",
-            headerTransparent: Platform.OS === "ios",
-            headerShadowVisible: false,
-          }}
-        />
-        {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
-          <Stack.Screen key={name} name={name} options={options} />
-        ))}
-        <Stack.Screen
-          name='collections/[collectionId]'
-          options={{
-            title: "",
-            headerShown: !Platform.isTV,
-            headerBlurEffect: "none",
-            headerTransparent: Platform.OS === "ios",
-            headerShadowVisible: false,
-          }}
-        />
-      </Stack>
-      <LibraryOptionsSheet
-        open={optionsSheetOpen}
-        setOpen={setOptionsSheetOpen}
-        settings={settings.libraryOptions}
-        updateSettings={(options) =>
-          updateSettings({
-            libraryOptions: {
-              ...settings.libraryOptions,
-              ...options,
-            },
-          })
-        }
-        disabled={pluginSettings?.libraryOptions?.locked}
+    <Stack>
+      <Stack.Screen
+        name='index'
+        options={{
+          headerShown: !Platform.isTV,
+          headerTitle: t("tabs.library"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerRight: () =>
+            !pluginSettings?.libraryOptions?.locked &&
+            !Platform.isTV && (
+              <PlatformDropdown
+                open={dropdownOpen}
+                onOpenChange={setDropdownOpen}
+                trigger={
+                  <View className='pl-1.5'>
+                    <Ionicons
+                      name='ellipsis-horizontal-outline'
+                      size={24}
+                      color='white'
+                    />
+                  </View>
+                }
+                title={t("library.options.display")}
+                groups={dropdownGroups}
+              />
+            ),
+        }}
       />
-    </>
+      <Stack.Screen
+        name='[libraryId]'
+        options={{
+          title: "",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+        }}
+      />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
+      <Stack.Screen
+        name='collections/[collectionId]'
+        options={{
+          title: "",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+        }}
+      />
+    </Stack>
   );
 }

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

@@ -1,111 +1,11 @@
-import {
-  getUserLibraryApi,
-  getUserViewsApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import { FlashList } from "@shopify/flash-list";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { useEffect, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { 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";
+import { Platform } from "react-native";
+import { Libraries } from "@/components/library/Libraries";
+import { TVLibraries } from "@/components/library/TVLibraries";
 
-export default function index() {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const queryClient = useQueryClient();
-  const { settings } = useSettings();
+export default function LibrariesPage() {
+  if (Platform.isTV) {
+    return <TVLibraries />;
+  }
 
-  const { t } = useTranslation();
-
-  const { data, isLoading } = useQuery({
-    queryKey: ["user-views", user?.Id],
-    queryFn: async () => {
-      const response = await getUserViewsApi(api!).getUserViews({
-        userId: user?.Id,
-      });
-
-      return response.data.Items || null;
-    },
-    staleTime: 60,
-  });
-
-  const libraries = useMemo(
-    () =>
-      data
-        ?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!))
-        .filter((l) => l.CollectionType !== "music")
-        .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: 17,
-        paddingHorizontal: settings?.libraryOptions?.display === "row" ? 0 : 17,
-        paddingBottom: 150,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
-      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' />
-        )
-      }
-      estimatedItemSize={200}
-    />
-  );
+  return <Libraries />;
 }

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

@@ -0,0 +1,85 @@
+import {
+  createMaterialTopTabNavigator,
+  MaterialTopTabNavigationEventMap,
+  MaterialTopTabNavigationOptions,
+} from "@react-navigation/material-top-tabs";
+import type {
+  ParamListBase,
+  TabNavigationState,
+} from "@react-navigation/native";
+import { Stack, useLocalSearchParams, withLayoutContext } from "expo-router";
+import { useTranslation } from "react-i18next";
+
+const { Navigator } = createMaterialTopTabNavigator();
+
+const TAB_LABEL_FONT_SIZE = 13;
+const TAB_ITEM_HORIZONTAL_PADDING = 12;
+
+export const Tab = withLayoutContext<
+  MaterialTopTabNavigationOptions,
+  typeof Navigator,
+  TabNavigationState<ParamListBase>,
+  MaterialTopTabNavigationEventMap
+>(Navigator);
+
+const Layout = () => {
+  const { libraryId } = useLocalSearchParams<{ libraryId: string }>();
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: t("music.title"),
+          headerStyle: { backgroundColor: "black" },
+          headerShadowVisible: false,
+        }}
+      />
+      <Tab
+        initialRouteName='suggestions'
+        keyboardDismissMode='none'
+        screenOptions={{
+          tabBarBounces: true,
+          tabBarLabelStyle: {
+            fontSize: TAB_LABEL_FONT_SIZE,
+            fontWeight: "600",
+            flexWrap: "nowrap",
+          },
+          tabBarItemStyle: {
+            width: "auto",
+            paddingHorizontal: TAB_ITEM_HORIZONTAL_PADDING,
+          },
+          tabBarStyle: { backgroundColor: "black" },
+          animationEnabled: true,
+          lazy: true,
+          swipeEnabled: true,
+          tabBarIndicatorStyle: { backgroundColor: "#9334E9" },
+          tabBarScrollEnabled: true,
+        }}
+      >
+        <Tab.Screen
+          name='suggestions'
+          initialParams={{ libraryId }}
+          options={{ title: t("music.tabs.suggestions") }}
+        />
+        <Tab.Screen
+          name='albums'
+          initialParams={{ libraryId }}
+          options={{ title: t("music.tabs.albums") }}
+        />
+        <Tab.Screen
+          name='artists'
+          initialParams={{ libraryId }}
+          options={{ title: t("music.tabs.artists") }}
+        />
+        <Tab.Screen
+          name='playlists'
+          initialParams={{ libraryId }}
+          options={{ title: t("music.tabs.playlists") }}
+        />
+      </Tab>
+    </>
+  );
+};
+
+export default Layout;

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

@@ -0,0 +1,120 @@
+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 { useAtom } from "jotai";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { RefreshControl, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { MusicAlbumRowCard } from "@/components/music/MusicAlbumRowCard";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
+const ITEMS_PER_PAGE = 40;
+
+export default function AlbumsScreen() {
+  const localParams = useLocalSearchParams<{ libraryId?: string | string[] }>();
+  const route = useRoute<any>();
+  const libraryId =
+    (Array.isArray(localParams.libraryId)
+      ? localParams.libraryId[0]
+      : localParams.libraryId) ?? route?.params?.libraryId;
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+
+  const {
+    data,
+    isLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    refetch,
+  } = useInfiniteQuery({
+    queryKey: ["music-albums", libraryId, user?.Id],
+    queryFn: async ({ pageParam = 0 }) => {
+      const response = await getItemsApi(api!).getItems({
+        userId: user?.Id,
+        parentId: libraryId,
+        includeItemTypes: ["MusicAlbum"],
+        sortBy: ["SortName"],
+        sortOrder: ["Ascending"],
+        limit: ITEMS_PER_PAGE,
+        startIndex: pageParam,
+        recursive: true,
+      });
+      return {
+        items: response.data.Items || [],
+        totalCount: response.data.TotalRecordCount || 0,
+        startIndex: pageParam,
+      };
+    },
+    getNextPageParam: (lastPage) => {
+      const nextStart = lastPage.startIndex + ITEMS_PER_PAGE;
+      return nextStart < lastPage.totalCount ? nextStart : undefined;
+    },
+    initialPageParam: 0,
+    enabled: !!api && !!user?.Id && !!libraryId,
+  });
+
+  const albums = useMemo(() => {
+    return data?.pages.flatMap((page) => page.items) || [];
+  }, [data]);
+
+  const handleEndReached = useCallback(() => {
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  if (isLoading) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Loader />
+      </View>
+    );
+  }
+
+  if (albums.length === 0) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Text className='text-neutral-500'>{t("music.no_albums")}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View className='flex-1 bg-black'>
+      <FlashList
+        data={albums}
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 100,
+          paddingTop: 8,
+          paddingHorizontal: 16,
+        }}
+        refreshControl={
+          <RefreshControl
+            refreshing={false}
+            onRefresh={refetch}
+            tintColor='#9334E9'
+          />
+        }
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={0.5}
+        renderItem={({ item }) => <MusicAlbumRowCard album={item} />}
+        keyExtractor={(item) => item.Id!}
+        ListFooterComponent={
+          isFetchingNextPage ? (
+            <View className='py-4'>
+              <Loader />
+            </View>
+          ) : null
+        }
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,157 @@
+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 { useAtom } from "jotai";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { RefreshControl, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { MusicArtistCard } from "@/components/music/MusicArtistCard";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
+// Web uses Limit=100
+const ITEMS_PER_PAGE = 100;
+
+export default function ArtistsScreen() {
+  const localParams = useLocalSearchParams<{ libraryId?: string | string[] }>();
+  const route = useRoute<any>();
+  const libraryId =
+    (Array.isArray(localParams.libraryId)
+      ? localParams.libraryId[0]
+      : localParams.libraryId) ?? route?.params?.libraryId;
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+
+  const isReady = Boolean(api && user?.Id && libraryId);
+
+  const {
+    data,
+    isLoading,
+    isError,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    refetch,
+  } = useInfiniteQuery({
+    queryKey: ["music-artists", libraryId, user?.Id],
+    queryFn: async ({ pageParam = 0 }) => {
+      const response = await getArtistsApi(api!).getArtists({
+        userId: user?.Id,
+        parentId: libraryId,
+        sortBy: ["SortName"],
+        sortOrder: ["Ascending"],
+        fields: ["PrimaryImageAspectRatio", "SortName"],
+        imageTypeLimit: 1,
+        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
+        limit: ITEMS_PER_PAGE,
+        startIndex: pageParam,
+      });
+      return {
+        items: response.data.Items || [],
+        totalCount: response.data.TotalRecordCount || 0,
+        startIndex: pageParam,
+      };
+    },
+    getNextPageParam: (lastPage) => {
+      const nextStart = lastPage.startIndex + ITEMS_PER_PAGE;
+      return nextStart < lastPage.totalCount ? nextStart : undefined;
+    },
+    initialPageParam: 0,
+    enabled: isReady,
+  });
+
+  const artists = useMemo(() => {
+    return data?.pages.flatMap((page) => page.items) || [];
+  }, [data]);
+
+  const handleEndReached = useCallback(() => {
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  if (!api || !user?.Id) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Loader />
+      </View>
+    );
+  }
+
+  if (!libraryId) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black px-6'>
+        <Text className='text-neutral-500 text-center'>
+          Missing music library id.
+        </Text>
+      </View>
+    );
+  }
+
+  // Only show loading if we have no cached data to display
+  if (isLoading && artists.length === 0) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Loader />
+      </View>
+    );
+  }
+
+  // Only show error if we have no cached data to display
+  // This allows offline access to previously cached artists
+  if (isError && artists.length === 0) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black px-6'>
+        <Text className='text-neutral-500 text-center'>
+          Failed to load artists: {(error as Error)?.message || "Unknown error"}
+        </Text>
+      </View>
+    );
+  }
+
+  if (artists.length === 0) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Text className='text-neutral-500'>{t("music.no_artists")}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View className='flex-1 bg-black'>
+      <FlashList
+        data={artists}
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 100,
+          paddingTop: 8,
+          paddingHorizontal: 16,
+        }}
+        refreshControl={
+          <RefreshControl
+            refreshing={false}
+            onRefresh={refetch}
+            tintColor='#9334E9'
+          />
+        }
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={0.5}
+        renderItem={({ item }) => <MusicArtistCard artist={item} />}
+        keyExtractor={(item) => item.Id!}
+        ListFooterComponent={
+          isFetchingNextPage ? (
+            <View className='py-4'>
+              <Loader />
+            </View>
+          ) : null
+        }
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,234 @@
+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 { useAtom } from "jotai";
+import { useCallback, useLayoutEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { RefreshControl, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
+import { MusicPlaylistCard } from "@/components/music/MusicPlaylistCard";
+import {
+  type PlaylistSortOption,
+  type PlaylistSortOrder,
+  PlaylistSortSheet,
+} from "@/components/music/PlaylistSortSheet";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
+const ITEMS_PER_PAGE = 40;
+
+export default function PlaylistsScreen() {
+  const localParams = useLocalSearchParams<{ libraryId?: string | string[] }>();
+  const route = useRoute<any>();
+  const navigation = useNavigation();
+  const libraryId =
+    (Array.isArray(localParams.libraryId)
+      ? localParams.libraryId[0]
+      : localParams.libraryId) ?? route?.params?.libraryId;
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [sortSheetOpen, setSortSheetOpen] = useState(false);
+  const [sortBy, setSortBy] = useState<PlaylistSortOption>("SortName");
+  const [sortOrder, setSortOrder] = useState<PlaylistSortOrder>("Ascending");
+
+  const isReady = Boolean(api && user?.Id && libraryId);
+
+  const handleSortChange = useCallback(
+    (newSortBy: PlaylistSortOption, newSortOrder: PlaylistSortOrder) => {
+      setSortBy(newSortBy);
+      setSortOrder(newSortOrder);
+    },
+    [],
+  );
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <TouchableOpacity
+          onPress={() => setCreateModalOpen(true)}
+          className='mr-4'
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <Ionicons name='add' size={28} color='white' />
+        </TouchableOpacity>
+      ),
+    });
+  }, [navigation]);
+
+  const {
+    data,
+    isLoading,
+    isError,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    refetch,
+  } = useInfiniteQuery({
+    queryKey: ["music-playlists", libraryId, user?.Id, sortBy, sortOrder],
+    queryFn: async ({ pageParam = 0 }) => {
+      const response = await getItemsApi(api!).getItems({
+        userId: user?.Id,
+        includeItemTypes: ["Playlist"],
+        sortBy: [sortBy],
+        sortOrder: [sortOrder],
+        limit: ITEMS_PER_PAGE,
+        startIndex: pageParam,
+        recursive: true,
+        mediaTypes: ["Audio"],
+      });
+      return {
+        items: response.data.Items || [],
+        totalCount: response.data.TotalRecordCount || 0,
+        startIndex: pageParam,
+      };
+    },
+    getNextPageParam: (lastPage) => {
+      const nextStart = lastPage.startIndex + ITEMS_PER_PAGE;
+      return nextStart < lastPage.totalCount ? nextStart : undefined;
+    },
+    initialPageParam: 0,
+    enabled: isReady,
+  });
+
+  const playlists = useMemo(() => {
+    return data?.pages.flatMap((page) => page.items) || [];
+  }, [data]);
+
+  const handleEndReached = useCallback(() => {
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  if (!api || !user?.Id) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Loader />
+      </View>
+    );
+  }
+
+  if (!libraryId) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black px-6'>
+        <Text className='text-neutral-500 text-center'>
+          Missing music library id.
+        </Text>
+      </View>
+    );
+  }
+
+  // Only show loading if we have no cached data to display
+  if (isLoading && playlists.length === 0) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Loader />
+      </View>
+    );
+  }
+
+  // Only show error if we have no cached data to display
+  // This allows offline access to previously cached playlists
+  if (isError && playlists.length === 0) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black px-6'>
+        <Text className='text-neutral-500 text-center'>
+          Failed to load playlists:{" "}
+          {(error as Error)?.message || "Unknown error"}
+        </Text>
+      </View>
+    );
+  }
+
+  if (playlists.length === 0) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Text className='text-neutral-500 mb-4'>{t("music.no_playlists")}</Text>
+        <TouchableOpacity
+          onPress={() => setCreateModalOpen(true)}
+          className='flex-row items-center bg-purple-600 px-6 py-3 rounded-full'
+        >
+          <Ionicons name='add' size={20} color='white' />
+          <Text className='text-white font-semibold ml-2'>
+            {t("music.playlists.create_playlist")}
+          </Text>
+        </TouchableOpacity>
+        <CreatePlaylistModal
+          open={createModalOpen}
+          setOpen={setCreateModalOpen}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View className='flex-1 bg-black'>
+      <FlashList
+        data={playlists}
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 100,
+          paddingTop: 8,
+          paddingHorizontal: 16,
+        }}
+        refreshControl={
+          <RefreshControl
+            refreshing={false}
+            onRefresh={refetch}
+            tintColor='#9334E9'
+          />
+        }
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={0.5}
+        ListHeaderComponent={
+          <TouchableOpacity
+            onPress={() => setSortSheetOpen(true)}
+            className='flex-row items-center mb-2 py-1'
+          >
+            <Ionicons name='swap-vertical' size={18} color='#9334E9' />
+            <Text className='text-purple-500 text-sm ml-1.5'>
+              {t(
+                `music.sort.${sortBy === "SortName" ? "alphabetical" : "date_created"}`,
+              )}
+            </Text>
+            <Ionicons
+              name={sortOrder === "Ascending" ? "arrow-up" : "arrow-down"}
+              size={14}
+              color='#9334E9'
+              style={{ marginLeft: 4 }}
+            />
+          </TouchableOpacity>
+        }
+        renderItem={({ item }) => <MusicPlaylistCard playlist={item} />}
+        keyExtractor={(item) => item.Id!}
+        ListFooterComponent={
+          isFetchingNextPage ? (
+            <View className='py-4'>
+              <Loader />
+            </View>
+          ) : null
+        }
+      />
+      <CreatePlaylistModal
+        open={createModalOpen}
+        setOpen={setCreateModalOpen}
+      />
+      <PlaylistSortSheet
+        open={sortSheetOpen}
+        setOpen={setSortSheetOpen}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
+        onSortChange={handleSortChange}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,333 @@
+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 { useAtom } from "jotai";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { RefreshControl, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { HorizontalScroll } from "@/components/common/HorizontalScroll";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
+import { MusicAlbumCard } from "@/components/music/MusicAlbumCard";
+import { MusicTrackItem } from "@/components/music/MusicTrackItem";
+import { PlaylistPickerSheet } from "@/components/music/PlaylistPickerSheet";
+import { TrackOptionsSheet } from "@/components/music/TrackOptionsSheet";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { writeDebugLog } from "@/utils/log";
+
+export default function SuggestionsScreen() {
+  const localParams = useLocalSearchParams<{ libraryId?: string | string[] }>();
+  const route = useRoute<any>();
+  const libraryId =
+    (Array.isArray(localParams.libraryId)
+      ? localParams.libraryId[0]
+      : localParams.libraryId) ?? route?.params?.libraryId;
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+
+  const [selectedTrack, setSelectedTrack] = useState<BaseItemDto | null>(null);
+  const [trackOptionsOpen, setTrackOptionsOpen] = useState(false);
+  const [playlistPickerOpen, setPlaylistPickerOpen] = useState(false);
+  const [createPlaylistOpen, setCreatePlaylistOpen] = useState(false);
+
+  const handleTrackOptionsPress = useCallback((track: BaseItemDto) => {
+    setSelectedTrack(track);
+    setTrackOptionsOpen(true);
+  }, []);
+
+  const handleAddToPlaylist = useCallback(() => {
+    setPlaylistPickerOpen(true);
+  }, []);
+
+  const handleCreateNewPlaylist = useCallback(() => {
+    setCreatePlaylistOpen(true);
+  }, []);
+
+  const isReady = Boolean(api && user?.Id && libraryId);
+
+  writeDebugLog("Music suggestions params", {
+    libraryId,
+    localParams,
+    routeParams: route?.params,
+    isReady,
+  });
+
+  // Latest audio - uses the same endpoint as web: /Users/{userId}/Items/Latest
+  // This returns the most recently added albums
+  const {
+    data: latestAlbums,
+    isLoading: loadingLatest,
+    isError: isLatestError,
+    error: latestError,
+    refetch: refetchLatest,
+  } = useQuery({
+    queryKey: ["music-latest", libraryId, user?.Id],
+    queryFn: async () => {
+      // Prefer the exact endpoint the Web client calls (HAR):
+      // /Users/{userId}/Items/Latest?IncludeItemTypes=Audio&ParentId=...
+      // IMPORTANT: must use api.get(...) (not axiosInstance.get(fullUrl)) so the auth header is attached.
+      const res = await api!.get<BaseItemDto[]>(
+        `/Users/${user!.Id}/Items/Latest`,
+        {
+          params: {
+            IncludeItemTypes: "Audio",
+            Limit: 20,
+            Fields: "PrimaryImageAspectRatio",
+            ParentId: libraryId,
+            ImageTypeLimit: 1,
+            EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
+            EnableTotalRecordCount: false,
+          },
+        },
+      );
+
+      if (Array.isArray(res.data) && res.data.length > 0) {
+        return res.data;
+      }
+
+      // Fallback: ask for albums directly via /Items (more reliable across server variants)
+      const fallback = await getItemsApi(api!).getItems({
+        userId: user!.Id,
+        parentId: libraryId,
+        includeItemTypes: ["MusicAlbum"],
+        sortBy: ["DateCreated"],
+        sortOrder: ["Descending"],
+        limit: 20,
+        recursive: true,
+        fields: ["PrimaryImageAspectRatio", "SortName"],
+        imageTypeLimit: 1,
+        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
+        enableTotalRecordCount: false,
+      });
+      return fallback.data.Items || [];
+    },
+    enabled: isReady,
+  });
+
+  // Recently played - matches web: SortBy=DatePlayed, Filters=IsPlayed
+  const {
+    data: recentlyPlayed,
+    isLoading: loadingRecentlyPlayed,
+    isError: isRecentlyPlayedError,
+    error: recentlyPlayedError,
+    refetch: refetchRecentlyPlayed,
+  } = useQuery({
+    queryKey: ["music-recently-played", libraryId, user?.Id],
+    queryFn: async () => {
+      const response = await getItemsApi(api!).getItems({
+        userId: user?.Id,
+        parentId: libraryId,
+        includeItemTypes: ["Audio"],
+        sortBy: ["DatePlayed"],
+        sortOrder: ["Descending"],
+        limit: 10,
+        recursive: true,
+        fields: ["PrimaryImageAspectRatio", "SortName"],
+        filters: ["IsPlayed"],
+        imageTypeLimit: 1,
+        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
+        enableTotalRecordCount: false,
+      });
+      return response.data.Items || [];
+    },
+    enabled: isReady,
+  });
+
+  // Frequently played - matches web: SortBy=PlayCount, Filters=IsPlayed
+  const {
+    data: frequentlyPlayed,
+    isLoading: loadingFrequent,
+    isError: isFrequentError,
+    error: frequentError,
+    refetch: refetchFrequent,
+  } = useQuery({
+    queryKey: ["music-frequently-played", libraryId, user?.Id],
+    queryFn: async () => {
+      const response = await getItemsApi(api!).getItems({
+        userId: user?.Id,
+        parentId: libraryId,
+        includeItemTypes: ["Audio"],
+        sortBy: ["PlayCount"],
+        sortOrder: ["Descending"],
+        limit: 10,
+        recursive: true,
+        fields: ["PrimaryImageAspectRatio", "SortName"],
+        filters: ["IsPlayed"],
+        imageTypeLimit: 1,
+        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
+        enableTotalRecordCount: false,
+      });
+      return response.data.Items || [];
+    },
+    enabled: isReady,
+  });
+
+  const isLoading = loadingLatest || loadingRecentlyPlayed || loadingFrequent;
+
+  const handleRefresh = useCallback(() => {
+    refetchLatest();
+    refetchRecentlyPlayed();
+    refetchFrequent();
+  }, [refetchLatest, refetchRecentlyPlayed, refetchFrequent]);
+
+  const sections = useMemo(() => {
+    const result: {
+      title: string;
+      data: BaseItemDto[];
+      type: "albums" | "tracks";
+    }[] = [];
+
+    // Latest albums section
+    if (latestAlbums && latestAlbums.length > 0) {
+      result.push({
+        title: t("music.recently_added"),
+        data: latestAlbums,
+        type: "albums",
+      });
+    }
+
+    // Recently played tracks
+    if (recentlyPlayed && recentlyPlayed.length > 0) {
+      result.push({
+        title: t("music.recently_played"),
+        data: recentlyPlayed,
+        type: "tracks",
+      });
+    }
+
+    // Frequently played tracks
+    if (frequentlyPlayed && frequentlyPlayed.length > 0) {
+      result.push({
+        title: t("music.frequently_played"),
+        data: frequentlyPlayed,
+        type: "tracks",
+      });
+    }
+
+    return result;
+  }, [latestAlbums, frequentlyPlayed, recentlyPlayed, t]);
+
+  if (!api || !user?.Id) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Loader />
+      </View>
+    );
+  }
+
+  if (!libraryId) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black px-6'>
+        <Text className='text-neutral-500 text-center'>
+          Missing music library id.
+        </Text>
+      </View>
+    );
+  }
+
+  // Only show loading if we have no cached data to display
+  if (isLoading && sections.length === 0) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Loader />
+      </View>
+    );
+  }
+
+  // Only show error if we have no cached data to display
+  // This allows offline access to previously cached suggestions
+  if (
+    (isLatestError || isRecentlyPlayedError || isFrequentError) &&
+    sections.length === 0
+  ) {
+    const msg =
+      (latestError as Error | undefined)?.message ||
+      (recentlyPlayedError as Error | undefined)?.message ||
+      (frequentError as Error | undefined)?.message ||
+      "Unknown error";
+    return (
+      <View className='flex-1 justify-center items-center bg-black px-6'>
+        <Text className='text-neutral-500 text-center'>
+          Failed to load music: {msg}
+        </Text>
+      </View>
+    );
+  }
+
+  if (sections.length === 0) {
+    return (
+      <View className='flex-1 justify-center items-center bg-black'>
+        <Text className='text-neutral-500'>{t("music.no_suggestions")}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View className='flex-1 bg-black'>
+      <FlashList
+        data={sections}
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 100,
+          paddingTop: 16,
+        }}
+        refreshControl={
+          <RefreshControl
+            refreshing={false}
+            onRefresh={handleRefresh}
+            tintColor='#9334E9'
+          />
+        }
+        renderItem={({ item: section }) => (
+          <View className='mb-6'>
+            <Text className='text-lg font-bold px-4 mb-3'>{section.title}</Text>
+            {section.type === "albums" ? (
+              <HorizontalScroll
+                data={section.data}
+                height={178}
+                keyExtractor={(item) => item.Id!}
+                renderItem={(item) => <MusicAlbumCard album={item} />}
+              />
+            ) : (
+              section.data
+                .slice(0, 5)
+                .map((track, index, _tracks) => (
+                  <MusicTrackItem
+                    key={track.Id}
+                    track={track}
+                    index={index + 1}
+                    queue={section.data}
+                    onOptionsPress={handleTrackOptionsPress}
+                  />
+                ))
+            )}
+          </View>
+        )}
+        keyExtractor={(item) => item.title}
+      />
+      <TrackOptionsSheet
+        open={trackOptionsOpen}
+        setOpen={setTrackOptionsOpen}
+        track={selectedTrack}
+        onAddToPlaylist={handleAddToPlaylist}
+      />
+      <PlaylistPickerSheet
+        open={playlistPickerOpen}
+        setOpen={setPlaylistPickerOpen}
+        trackToAdd={selectedTrack}
+        onCreateNew={handleCreateNewPlaylist}
+      />
+      <CreatePlaylistModal
+        open={createPlaylistOpen}
+        setOpen={setCreatePlaylistOpen}
+        initialTrackId={selectedTrack?.Id}
+      />
+    </View>
+  );
+}

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

@@ -28,7 +28,7 @@ export default function SearchLayout() {
         options={{
           title: "",
           headerShown: !Platform.isTV,
-          headerBlurEffect: "prominent",
+          headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
         }}

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

@@ -3,9 +3,11 @@ import type {
   BaseItemKind,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useAsyncDebouncer } from "@tanstack/react-pacer";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { router, useLocalSearchParams, useNavigation } from "expo-router";
+import { Image } from "expo-image";
+import { useLocalSearchParams, useNavigation, useSegments } from "expo-router";
 import { useAtom } from "jotai";
 import {
   useCallback,
@@ -19,13 +21,12 @@ import {
 import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useDebounce } from "use-debounce";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
-import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import { FilterButton } from "@/components/filters/FilterButton";
-import { Tag } from "@/components/GenreTags";
+import {
+  getItemNavigation,
+  TouchableItemRouter,
+} from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import {
   JellyseerrSearchSort,
@@ -33,12 +34,18 @@ import {
 } from "@/components/jellyseerr/JellyseerrIndexPage";
 import MoviePoster from "@/components/posters/MoviePoster";
 import SeriesPoster from "@/components/posters/SeriesPoster";
+import { DiscoverFilters } from "@/components/search/DiscoverFilters";
 import { LoadingSkeleton } from "@/components/search/LoadingSkeleton";
 import { SearchItemWrapper } from "@/components/search/SearchItemWrapper";
+import { SearchTabButtons } from "@/components/search/SearchTabButtons";
+import { TVSearchPage } from "@/components/search/TVSearchPage";
+import useRouter from "@/hooks/useAppRouter";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { createStreamystatsApi } from "@/utils/streamystats";
 
 type SearchType = "Library" | "Discover";
 
@@ -54,6 +61,9 @@ const exampleSearches = [
 export default function search() {
   const params = useLocalSearchParams();
   const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const segments = useSegments();
+  const from = (segments as string[])[2] || "(search)";
 
   const [user] = useAtom(userAtom);
 
@@ -67,7 +77,23 @@ export default function search() {
   const [searchType, setSearchType] = useState<SearchType>("Library");
   const [search, setSearch] = useState<string>("");
 
-  const [debouncedSearch] = useDebounce(search, 500);
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const searchDebouncer = useAsyncDebouncer(
+    async (query: string) => {
+      // Cancel previous in-flight requests
+      abortControllerRef.current?.abort();
+      abortControllerRef.current = new AbortController();
+      setDebouncedSearch(query);
+      return query;
+    },
+    { wait: 200 },
+  );
+
+  useEffect(() => {
+    searchDebouncer.maybeExecute(search);
+  }, [search]);
 
   const [api] = useAtom(apiAtom);
 
@@ -97,9 +123,11 @@ export default function search() {
     async ({
       types,
       query,
+      signal,
     }: {
       types: BaseItemKind[];
       query: string;
+      signal?: AbortSignal;
     }): Promise<BaseItemDto[]> => {
       if (!api || !query) {
         return [];
@@ -107,27 +135,80 @@ export default function search() {
 
       try {
         if (searchEngine === "Jellyfin") {
-          const searchApi = await getItemsApi(api).getItems({
-            searchTerm: query,
-            limit: 10,
-            includeItemTypes: types,
-            recursive: true,
-            userId: user?.Id,
-          });
+          const searchApi = await getItemsApi(api).getItems(
+            {
+              searchTerm: query,
+              limit: 10,
+              includeItemTypes: types,
+              recursive: true,
+              userId: user?.Id,
+            },
+            { signal },
+          );
 
           return (searchApi.data.Items as BaseItemDto[]) || [];
         }
+
+        if (searchEngine === "Streamystats") {
+          if (!settings?.streamyStatsServerUrl || !api.accessToken) {
+            return [];
+          }
+
+          const streamyStatsApi = createStreamystatsApi({
+            serverUrl: settings.streamyStatsServerUrl,
+            jellyfinToken: api.accessToken,
+          });
+
+          const typeMap: Record<BaseItemKind, string> = {
+            Movie: "movies",
+            Series: "series",
+            Episode: "episodes",
+            Person: "actors",
+            BoxSet: "movies",
+            Audio: "audio",
+          } as Record<BaseItemKind, string>;
+
+          const searchType = types.length === 1 ? typeMap[types[0]] : "media";
+          const response = await streamyStatsApi.searchIds(
+            query,
+            searchType as "movies" | "series" | "episodes" | "actors" | "media",
+            10,
+            signal,
+          );
+
+          const allIds: string[] = [
+            ...(response.data.movies || []),
+            ...(response.data.series || []),
+            ...(response.data.episodes || []),
+            ...(response.data.actors || []),
+            ...(response.data.audio || []),
+          ];
+
+          if (!allIds.length) {
+            return [];
+          }
+
+          const itemsResponse = await getItemsApi(api).getItems(
+            {
+              ids: allIds,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+            },
+            { signal },
+          );
+
+          return (itemsResponse.data.Items as BaseItemDto[]) || [];
+        }
+
+        // Marlin search
         if (!settings?.marlinServerUrl) {
           return [];
         }
 
-        const url = `${
-          settings.marlinServerUrl
-        }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
+        const url = `${settings.marlinServerUrl}/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
           .map((type) => encodeURIComponent(type))
           .join("&includeItemTypes=")}`;
 
-        const response1 = await axios.get(url);
+        const response1 = await axios.get(url, { signal });
 
         const ids = response1.data.ids;
 
@@ -135,18 +216,63 @@ export default function search() {
           return [];
         }
 
-        const response2 = await getItemsApi(api).getItems({
-          ids,
-          enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-        });
+        const response2 = await getItemsApi(api).getItems(
+          {
+            ids,
+            enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+          },
+          { signal },
+        );
 
         return (response2.data.Items as BaseItemDto[]) || [];
       } catch (error) {
-        console.error("Error during search:", error);
-        return []; // Ensure an empty array is returned in case of an error
+        // Silently handle aborted requests
+        if (error instanceof Error && error.name === "AbortError") {
+          return [];
+        }
+        return [];
       }
     },
-    [api, searchEngine, settings],
+    [api, searchEngine, settings, user?.Id],
+  );
+
+  // Separate search function for music types - always uses Jellyfin since Streamystats doesn't support music
+  const jellyfinSearchFn = useCallback(
+    async ({
+      types,
+      query,
+      signal,
+    }: {
+      types: BaseItemKind[];
+      query: string;
+      signal?: AbortSignal;
+    }): Promise<BaseItemDto[]> => {
+      if (!api || !query) {
+        return [];
+      }
+
+      try {
+        const searchApi = await getItemsApi(api).getItems(
+          {
+            searchTerm: query,
+            limit: 10,
+            includeItemTypes: types,
+            recursive: true,
+            userId: user?.Id,
+          },
+          { signal },
+        );
+
+        return (searchApi.data.Items as BaseItemDto[]) || [];
+      } catch (error) {
+        // Silently handle aborted requests
+        if (error instanceof Error && error.name === "AbortError") {
+          return [];
+        }
+        return [];
+      }
+    },
+    [api, user?.Id],
   );
 
   type HeaderSearchBarRef = {
@@ -195,6 +321,7 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Movie"],
+        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -205,6 +332,7 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Series"],
+        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -215,6 +343,7 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Episode"],
+        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -225,6 +354,7 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["BoxSet"],
+        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -235,6 +365,52 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Person"],
+        signal: abortControllerRef.current?.signal,
+      }),
+    enabled: searchType === "Library" && debouncedSearch.length > 0,
+  });
+
+  // Music search queries - always use Jellyfin since Streamystats doesn't support music
+  const { data: artists, isFetching: l9 } = useQuery({
+    queryKey: ["search", "artists", debouncedSearch],
+    queryFn: () =>
+      jellyfinSearchFn({
+        query: debouncedSearch,
+        types: ["MusicArtist"],
+        signal: abortControllerRef.current?.signal,
+      }),
+    enabled: searchType === "Library" && debouncedSearch.length > 0,
+  });
+
+  const { data: albums, isFetching: l10 } = useQuery({
+    queryKey: ["search", "albums", debouncedSearch],
+    queryFn: () =>
+      jellyfinSearchFn({
+        query: debouncedSearch,
+        types: ["MusicAlbum"],
+        signal: abortControllerRef.current?.signal,
+      }),
+    enabled: searchType === "Library" && debouncedSearch.length > 0,
+  });
+
+  const { data: songs, isFetching: l11 } = useQuery({
+    queryKey: ["search", "songs", debouncedSearch],
+    queryFn: () =>
+      jellyfinSearchFn({
+        query: debouncedSearch,
+        types: ["Audio"],
+        signal: abortControllerRef.current?.signal,
+      }),
+    enabled: searchType === "Library" && debouncedSearch.length > 0,
+  });
+
+  const { data: playlists, isFetching: l12 } = useQuery({
+    queryKey: ["search", "playlists", debouncedSearch],
+    queryFn: () =>
+      jellyfinSearchFn({
+        query: debouncedSearch,
+        types: ["Playlist"],
+        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -245,13 +421,59 @@ export default function search() {
       episodes?.length ||
       series?.length ||
       collections?.length ||
-      actors?.length
+      actors?.length ||
+      artists?.length ||
+      albums?.length ||
+      songs?.length ||
+      playlists?.length
     );
-  }, [episodes, movies, series, collections, actors]);
+  }, [
+    episodes,
+    movies,
+    series,
+    collections,
+    actors,
+    artists,
+    albums,
+    songs,
+    playlists,
+  ]);
 
   const loading = useMemo(() => {
-    return l1 || l2 || l3 || l7 || l8;
-  }, [l1, l2, l3, l7, l8]);
+    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],
+  );
+
+  // 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}
+      />
+    );
+  }
 
   return (
     <ScrollView
@@ -260,91 +482,35 @@ export default function search() {
       contentContainerStyle={{
         paddingLeft: insets.left,
         paddingRight: insets.right,
+        paddingBottom: 60,
       }}
     >
-      {/* <View
-        className='flex flex-col'
-        style={{
-          marginTop: Platform.OS === "android" ? 16 : 0,
-        }}
-      > */}
-      {Platform.isTV && (
-        <Input
-          placeholder={t("search.search")}
-          onChangeText={(text) => {
-            router.setParams({ q: "" });
-            setSearch(text);
-          }}
-          keyboardType='default'
-          returnKeyType='done'
-          autoCapitalize='none'
-          clearButtonMode='while-editing'
-          maxLength={500}
-        />
-      )}
       <View
         className='flex flex-col'
-        style={{
-          marginTop: Platform.OS === "android" ? 16 : 0,
-        }}
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
       >
         {jellyseerrApi && (
-          <ScrollView
-            horizontal
-            className='flex flex-row flex-wrap space-x-2 px-4 mb-2'
-          >
-            <TouchableOpacity onPress={() => setSearchType("Library")}>
-              <Tag
-                text={t("search.library")}
-                textClass='p-1'
-                className={
-                  searchType === "Library" ? "bg-purple-600" : undefined
-                }
-              />
-            </TouchableOpacity>
-            <TouchableOpacity onPress={() => setSearchType("Discover")}>
-              <Tag
-                text={t("search.discover")}
-                textClass='p-1'
-                className={
-                  searchType === "Discover" ? "bg-purple-600" : undefined
-                }
-              />
-            </TouchableOpacity>
+          <View className='pl-4 pr-4 flex flex-row'>
+            <SearchTabButtons
+              searchType={searchType}
+              setSearchType={setSearchType}
+              t={t}
+            />
             {searchType === "Discover" &&
               !loading &&
               noResults &&
               debouncedSearch.length > 0 && (
-                <View className='flex flex-row justify-end items-center space-x-1'>
-                  <FilterButton
-                    id={searchFilterId}
-                    queryKey='jellyseerr_search'
-                    queryFn={async () =>
-                      Object.keys(JellyseerrSearchSort).filter((v) =>
-                        Number.isNaN(Number(v)),
-                      )
-                    }
-                    set={(value) => setJellyseerrOrderBy(value[0])}
-                    values={[jellyseerrOrderBy]}
-                    title={t("library.filters.sort_by")}
-                    renderItemLabel={(item) =>
-                      t(`home.settings.plugins.jellyseerr.order_by.${item}`)
-                    }
-                    disableSearch={true}
-                  />
-                  <FilterButton
-                    id={orderFilterId}
-                    queryKey='jellysearr_search'
-                    queryFn={async () => ["asc", "desc"]}
-                    set={(value) => setJellyseerrSortOrder(value[0])}
-                    values={[jellyseerrSortOrder]}
-                    title={t("library.filters.sort_order")}
-                    renderItemLabel={(item) => t(`library.filters.${item}`)}
-                    disableSearch={true}
-                  />
-                </View>
+                <DiscoverFilters
+                  searchFilterId={searchFilterId}
+                  orderFilterId={orderFilterId}
+                  jellyseerrOrderBy={jellyseerrOrderBy}
+                  setJellyseerrOrderBy={setJellyseerrOrderBy}
+                  jellyseerrSortOrder={jellyseerrSortOrder}
+                  setJellyseerrSortOrder={setJellyseerrSortOrder}
+                  t={t}
+                />
               )}
-          </ScrollView>
+          </View>
         )}
 
         <View className='mt-2'>
@@ -435,6 +601,172 @@ export default function search() {
                 </TouchableItemRouter>
               )}
             />
+            {/* Music search results */}
+            <SearchItemWrapper
+              items={artists}
+              header={t("search.artists")}
+              renderItem={(item: BaseItemDto) => {
+                const imageUrl = getPrimaryImageUrl({ api, item });
+                return (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className='flex flex-col w-24 mr-2 items-center'
+                  >
+                    <View
+                      style={{
+                        width: 80,
+                        height: 80,
+                        borderRadius: 40,
+                        overflow: "hidden",
+                        backgroundColor: "#1a1a1a",
+                      }}
+                    >
+                      {imageUrl ? (
+                        <Image
+                          source={{ uri: imageUrl }}
+                          style={{ width: "100%", height: "100%" }}
+                          contentFit='cover'
+                        />
+                      ) : (
+                        <View className='flex-1 items-center justify-center bg-neutral-800'>
+                          <Text className='text-xl'>👤</Text>
+                        </View>
+                      )}
+                    </View>
+                    <Text numberOfLines={2} className='mt-2 text-center'>
+                      {item.Name}
+                    </Text>
+                  </TouchableItemRouter>
+                );
+              }}
+            />
+            <SearchItemWrapper
+              items={albums}
+              header={t("search.albums")}
+              renderItem={(item: BaseItemDto) => {
+                const imageUrl = getPrimaryImageUrl({ api, item });
+                return (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className='flex flex-col w-28 mr-2'
+                  >
+                    <View
+                      style={{
+                        width: 112,
+                        height: 112,
+                        borderRadius: 8,
+                        overflow: "hidden",
+                        backgroundColor: "#1a1a1a",
+                      }}
+                    >
+                      {imageUrl ? (
+                        <Image
+                          source={{ uri: imageUrl }}
+                          style={{ width: "100%", height: "100%" }}
+                          contentFit='cover'
+                        />
+                      ) : (
+                        <View className='flex-1 items-center justify-center bg-neutral-800'>
+                          <Text className='text-4xl'>🎵</Text>
+                        </View>
+                      )}
+                    </View>
+                    <Text numberOfLines={2} className='mt-2'>
+                      {item.Name}
+                    </Text>
+                    <Text className='opacity-50 text-xs' numberOfLines={1}>
+                      {item.AlbumArtist || item.Artists?.join(", ")}
+                    </Text>
+                  </TouchableItemRouter>
+                );
+              }}
+            />
+            <SearchItemWrapper
+              items={songs}
+              header={t("search.songs")}
+              renderItem={(item: BaseItemDto) => {
+                const imageUrl = getPrimaryImageUrl({ api, item });
+                return (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className='flex flex-col w-28 mr-2'
+                  >
+                    <View
+                      style={{
+                        width: 112,
+                        height: 112,
+                        borderRadius: 8,
+                        overflow: "hidden",
+                        backgroundColor: "#1a1a1a",
+                      }}
+                    >
+                      {imageUrl ? (
+                        <Image
+                          source={{ uri: imageUrl }}
+                          style={{ width: "100%", height: "100%" }}
+                          contentFit='cover'
+                        />
+                      ) : (
+                        <View className='flex-1 items-center justify-center bg-neutral-800'>
+                          <Text className='text-4xl'>🎵</Text>
+                        </View>
+                      )}
+                    </View>
+                    <Text numberOfLines={2} className='mt-2'>
+                      {item.Name}
+                    </Text>
+                    <Text className='opacity-50 text-xs' numberOfLines={1}>
+                      {item.Artists?.join(", ") || item.AlbumArtist}
+                    </Text>
+                  </TouchableItemRouter>
+                );
+              }}
+            />
+            <SearchItemWrapper
+              items={playlists}
+              header={t("search.playlists")}
+              renderItem={(item: BaseItemDto) => {
+                const imageUrl = getPrimaryImageUrl({ api, item });
+                return (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className='flex flex-col w-28 mr-2'
+                  >
+                    <View
+                      style={{
+                        width: 112,
+                        height: 112,
+                        borderRadius: 8,
+                        overflow: "hidden",
+                        backgroundColor: "#1a1a1a",
+                      }}
+                    >
+                      {imageUrl ? (
+                        <Image
+                          source={{ uri: imageUrl }}
+                          style={{ width: "100%", height: "100%" }}
+                          contentFit='cover'
+                        />
+                      ) : (
+                        <View className='flex-1 items-center justify-center bg-neutral-800'>
+                          <Text className='text-4xl'>🎶</Text>
+                        </View>
+                      )}
+                    </View>
+                    <Text numberOfLines={2} className='mt-2'>
+                      {item.Name}
+                    </Text>
+                    <Text className='opacity-50 text-xs'>
+                      {item.ChildCount} tracks
+                    </Text>
+                  </TouchableItemRouter>
+                );
+              }}
+            />
           </View>
         ) : (
           <JellyserrIndexPage

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

@@ -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

@@ -0,0 +1,361 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { FlashList } from "@shopify/flash-list";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  Alert,
+  Platform,
+  RefreshControl,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { HeaderBackButton } from "@/components/common/HeaderBackButton";
+import { Text } from "@/components/common/Text";
+import {
+  getItemNavigation,
+  TouchableItemRouter,
+} from "@/components/common/TouchableItemRouter";
+import { ItemCardText } from "@/components/ItemCardText";
+import { ItemPoster } from "@/components/posters/ItemPoster";
+import MoviePoster, {
+  TV_POSTER_WIDTH,
+} from "@/components/posters/MoviePoster.tv";
+import SeriesPoster from "@/components/posters/SeriesPoster.tv";
+import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
+import useRouter from "@/hooks/useAppRouter";
+import { useOrientation } from "@/hooks/useOrientation";
+import {
+  useDeleteWatchlist,
+  useRemoveFromWatchlist,
+} from "@/hooks/useWatchlistMutations";
+import {
+  useWatchlistDetailQuery,
+  useWatchlistItemsQuery,
+} from "@/hooks/useWatchlists";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { userAtom } from "@/providers/JellyfinProvider";
+
+const TV_ITEM_GAP = 16;
+const TV_SCALE_PADDING = 20;
+
+const TVItemCardText: React.FC<{ item: BaseItemDto }> = ({ item }) => (
+  <View style={{ marginTop: 12 }}>
+    <Text numberOfLines={1} style={{ fontSize: 16, color: "#FFFFFF" }}>
+      {item.Name}
+    </Text>
+    <Text style={{ fontSize: 14, color: "#9CA3AF", marginTop: 2 }}>
+      {item.ProductionYear}
+    </Text>
+  </View>
+);
+
+export default function WatchlistDetailScreen() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
+  const { watchlistId } = useLocalSearchParams<{ watchlistId: string }>();
+  const user = useAtomValue(userAtom);
+  const { width: screenWidth } = useWindowDimensions();
+  const { orientation } = useOrientation();
+
+  const watchlistIdNum = watchlistId
+    ? Number.parseInt(watchlistId, 10)
+    : undefined;
+
+  const nrOfCols = useMemo(() => {
+    if (Platform.isTV) {
+      // Calculate columns based on TV poster width + gap
+      const itemWidth = TV_POSTER_WIDTH + TV_ITEM_GAP;
+      return Math.max(
+        1,
+        Math.floor((screenWidth - TV_SCALE_PADDING * 2) / itemWidth),
+      );
+    }
+    if (screenWidth < 300) return 2;
+    if (screenWidth < 500) return 3;
+    if (screenWidth < 800) return 5;
+    if (screenWidth < 1000) return 6;
+    if (screenWidth < 1500) return 7;
+    return 6;
+  }, [screenWidth]);
+
+  const {
+    data: watchlist,
+    isLoading: watchlistLoading,
+    refetch: refetchWatchlist,
+  } = useWatchlistDetailQuery(watchlistIdNum);
+
+  const {
+    data: items,
+    isLoading: itemsLoading,
+    refetch: refetchItems,
+  } = useWatchlistItemsQuery(watchlistIdNum);
+
+  const deleteWatchlist = useDeleteWatchlist();
+  const removeFromWatchlist = useRemoveFromWatchlist();
+  const [refreshing, setRefreshing] = useState(false);
+
+  const isOwner = useMemo(
+    () => watchlist?.userId === user?.Id,
+    [watchlist?.userId, user?.Id],
+  );
+
+  // Set up header
+  useEffect(() => {
+    navigation.setOptions({
+      headerTitle: watchlist?.name || "",
+      headerLeft: () => <HeaderBackButton />,
+      headerRight: isOwner
+        ? () => (
+            <View className='flex-row gap-2'>
+              <TouchableOpacity
+                onPress={() =>
+                  router.push(`/(auth)/(tabs)/(watchlists)/edit/${watchlistId}`)
+                }
+                className='p-2'
+              >
+                <Ionicons name='pencil' size={20} color='white' />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={handleDelete} className='p-2'>
+                <Ionicons name='trash-outline' size={20} color='#ef4444' />
+              </TouchableOpacity>
+            </View>
+          )
+        : undefined,
+    });
+  }, [navigation, watchlist?.name, isOwner, watchlistId]);
+
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await Promise.all([refetchWatchlist(), refetchItems()]);
+    setRefreshing(false);
+  }, [refetchWatchlist, refetchItems]);
+
+  const handleDelete = useCallback(() => {
+    Alert.alert(
+      t("watchlists.delete_confirm_title"),
+      t("watchlists.delete_confirm_message", { name: watchlist?.name }),
+      [
+        { text: t("watchlists.cancel_button"), style: "cancel" },
+        {
+          text: t("watchlists.delete_button"),
+          style: "destructive",
+          onPress: async () => {
+            if (watchlistIdNum) {
+              await deleteWatchlist.mutateAsync(watchlistIdNum);
+              router.back();
+            }
+          },
+        },
+      ],
+    );
+  }, [deleteWatchlist, watchlistIdNum, watchlist?.name, router, t]);
+
+  const handleRemoveItem = useCallback(
+    (item: BaseItemDto) => {
+      if (!watchlistIdNum || !item.Id) return;
+
+      Alert.alert(
+        t("watchlists.remove_item_title"),
+        t("watchlists.remove_item_message", { name: item.Name }),
+        [
+          { text: t("watchlists.cancel_button"), style: "cancel" },
+          {
+            text: t("watchlists.remove_button"),
+            style: "destructive",
+            onPress: async () => {
+              await removeFromWatchlist.mutateAsync({
+                watchlistId: watchlistIdNum,
+                itemId: item.Id!,
+                watchlistName: watchlist?.name,
+              });
+            },
+          },
+        ],
+      );
+    },
+    [removeFromWatchlist, watchlistIdNum, watchlist?.name, t],
+  );
+
+  const renderTVItem = useCallback(
+    ({ item, index }: { item: BaseItemDto; index: number }) => {
+      const handlePress = () => {
+        const navigation = getItemNavigation(item, "(watchlists)");
+        router.push(navigation as any);
+      };
+
+      return (
+        <View
+          style={{
+            marginRight: TV_ITEM_GAP,
+            marginBottom: TV_ITEM_GAP,
+            width: TV_POSTER_WIDTH,
+          }}
+        >
+          <TVFocusablePoster
+            onPress={handlePress}
+            hasTVPreferredFocus={index === 0}
+          >
+            {item.Type === "Movie" && <MoviePoster item={item} />}
+            {(item.Type === "Series" || item.Type === "Episode") && (
+              <SeriesPoster item={item} />
+            )}
+          </TVFocusablePoster>
+          <TVItemCardText item={item} />
+        </View>
+      );
+    },
+    [router],
+  );
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: BaseItemDto; index: number }) => (
+      <TouchableItemRouter
+        key={item.Id}
+        style={{
+          width: "100%",
+          marginBottom: 4,
+        }}
+        item={item}
+        onLongPress={isOwner ? () => handleRemoveItem(item) : undefined}
+      >
+        <View
+          style={{
+            alignSelf:
+              orientation === ScreenOrientation.OrientationLock.PORTRAIT_UP
+                ? index % nrOfCols === 0
+                  ? "flex-end"
+                  : (index + 1) % nrOfCols === 0
+                    ? "flex-start"
+                    : "center"
+                : "center",
+            width: "89%",
+          }}
+        >
+          <ItemPoster item={item} />
+          <ItemCardText item={item} />
+        </View>
+      </TouchableItemRouter>
+    ),
+    [isOwner, handleRemoveItem, orientation, nrOfCols],
+  );
+
+  const ListHeader = useMemo(
+    () =>
+      watchlist ? (
+        <View className='px-4 pt-4 pb-6 mb-4 border-b border-neutral-800'>
+          {watchlist.description && (
+            <Text className='text-neutral-400 mb-2'>
+              {watchlist.description}
+            </Text>
+          )}
+          <View className='flex-row items-center gap-4'>
+            <View className='flex-row items-center gap-1'>
+              <Ionicons name='film-outline' size={14} color='#9ca3af' />
+              <Text className='text-neutral-400 text-sm'>
+                {items?.length ?? 0}{" "}
+                {(items?.length ?? 0) === 1
+                  ? t("watchlists.item")
+                  : t("watchlists.items")}
+              </Text>
+            </View>
+            <View className='flex-row items-center gap-1'>
+              <Ionicons
+                name={
+                  watchlist.isPublic ? "globe-outline" : "lock-closed-outline"
+                }
+                size={14}
+                color='#9ca3af'
+              />
+              <Text className='text-neutral-400 text-sm'>
+                {watchlist.isPublic
+                  ? t("watchlists.public")
+                  : t("watchlists.private")}
+              </Text>
+            </View>
+            {!isOwner && (
+              <Text className='text-neutral-500 text-sm'>
+                {t("watchlists.by_owner")}
+              </Text>
+            )}
+          </View>
+        </View>
+      ) : null,
+    [watchlist, items?.length, isOwner, t],
+  );
+
+  const EmptyComponent = useMemo(
+    () => (
+      <View className='flex-1 items-center justify-center px-8 py-16'>
+        <Ionicons name='film-outline' size={48} color='#4b5563' />
+        <Text className='text-neutral-400 text-center mt-4'>
+          {t("watchlists.empty_watchlist")}
+        </Text>
+        {isOwner && (
+          <Text className='text-neutral-500 text-center mt-2 text-sm'>
+            {t("watchlists.empty_watchlist_hint")}
+          </Text>
+        )}
+      </View>
+    ),
+    [isOwner, t],
+  );
+
+  const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
+
+  if (watchlistLoading || itemsLoading) {
+    return (
+      <View className='flex-1 items-center justify-center'>
+        <ActivityIndicator size='large' />
+      </View>
+    );
+  }
+
+  if (!watchlist) {
+    return (
+      <View className='flex-1 items-center justify-center px-8'>
+        <Text className='text-lg text-neutral-400'>
+          {t("watchlists.not_found")}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <FlashList
+      key={orientation}
+      data={items ?? []}
+      numColumns={nrOfCols}
+      contentInsetAdjustmentBehavior='automatic'
+      ListHeaderComponent={ListHeader}
+      ListEmptyComponent={EmptyComponent}
+      extraData={[orientation, nrOfCols]}
+      keyExtractor={keyExtractor}
+      contentContainerStyle={{
+        paddingBottom: 24,
+        paddingLeft: Platform.isTV ? TV_SCALE_PADDING : insets.left,
+        paddingRight: Platform.isTV ? TV_SCALE_PADDING : insets.right,
+        paddingTop: Platform.isTV ? TV_SCALE_PADDING : 0,
+      }}
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
+      }
+      renderItem={Platform.isTV ? renderTVItem : renderItem}
+      ItemSeparatorComponent={() => (
+        <View
+          style={{
+            width: 10,
+            height: 10,
+          }}
+        />
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,76 @@
+import { Ionicons } from "@expo/vector-icons";
+import { Stack } from "expo-router";
+import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
+import { Pressable } from "react-native-gesture-handler";
+import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
+import useRouter from "@/hooks/useAppRouter";
+import { useStreamystatsEnabled } from "@/hooks/useWatchlists";
+
+export default function WatchlistsLayout() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const streamystatsEnabled = useStreamystatsEnabled();
+
+  return (
+    <Stack>
+      <Stack.Screen
+        name='index'
+        options={{
+          headerShown: !Platform.isTV,
+          headerTitle: t("watchlists.title"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerRight: streamystatsEnabled
+            ? () => (
+                <Pressable
+                  onPress={() =>
+                    router.push("/(auth)/(tabs)/(watchlists)/create")
+                  }
+                  className='p-1.5'
+                >
+                  <Ionicons name='add' size={24} color='white' />
+                </Pressable>
+              )
+            : undefined,
+        }}
+      />
+      <Stack.Screen
+        name='[watchlistId]'
+        options={{
+          title: "",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+        }}
+      />
+      <Stack.Screen
+        name='create'
+        options={{
+          title: t("watchlists.create_title"),
+          presentation: "modal",
+          headerShown: !Platform.isTV,
+          headerStyle: { backgroundColor: "#171717" },
+          headerTintColor: "white",
+          contentStyle: { backgroundColor: "#171717" },
+        }}
+      />
+      <Stack.Screen
+        name='edit/[watchlistId]'
+        options={{
+          title: t("watchlists.edit_title"),
+          presentation: "modal",
+          headerShown: !Platform.isTV,
+          headerStyle: { backgroundColor: "#171717" },
+          headerTintColor: "white",
+          contentStyle: { backgroundColor: "#171717" },
+        }}
+      />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,221 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Switch,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
+import { useCreateWatchlist } from "@/hooks/useWatchlistMutations";
+import type {
+  StreamystatsWatchlistAllowedItemType,
+  StreamystatsWatchlistSortOrder,
+} from "@/utils/streamystats/types";
+
+const ITEM_TYPES: Array<{
+  value: StreamystatsWatchlistAllowedItemType;
+  label: string;
+}> = [
+  { value: null, label: "All Types" },
+  { value: "Movie", label: "Movies Only" },
+  { value: "Series", label: "Series Only" },
+  { value: "Episode", label: "Episodes Only" },
+];
+
+const SORT_OPTIONS: Array<{
+  value: StreamystatsWatchlistSortOrder;
+  label: string;
+}> = [
+  { value: "custom", label: "Custom Order" },
+  { value: "name", label: "Name" },
+  { value: "dateAdded", label: "Date Added" },
+  { value: "releaseDate", label: "Release Date" },
+];
+
+export default function CreateWatchlistScreen() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const createWatchlist = useCreateWatchlist();
+
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [isPublic, setIsPublic] = useState(false);
+  const [allowedItemType, setAllowedItemType] =
+    useState<StreamystatsWatchlistAllowedItemType>(null);
+  const [defaultSortOrder, setDefaultSortOrder] =
+    useState<StreamystatsWatchlistSortOrder>("custom");
+
+  const handleCreate = useCallback(async () => {
+    if (!name.trim()) return;
+
+    try {
+      await createWatchlist.mutateAsync({
+        name: name.trim(),
+        description: description.trim() || undefined,
+        isPublic,
+        allowedItemType,
+        defaultSortOrder,
+      });
+      router.back();
+    } catch {
+      // Error handled by mutation
+    }
+  }, [
+    name,
+    description,
+    isPublic,
+    allowedItemType,
+    defaultSortOrder,
+    createWatchlist,
+    router,
+  ]);
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      className='flex-1'
+      style={{ backgroundColor: "#171717" }}
+    >
+      <ScrollView
+        className='flex-1'
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 20,
+        }}
+        keyboardShouldPersistTaps='handled'
+      >
+        {/* Name */}
+        <View className='px-4 py-4'>
+          <Text className='text-sm font-medium text-neutral-400 mb-2'>
+            {t("watchlists.name_label")} *
+          </Text>
+          <TextInput
+            value={name}
+            onChangeText={setName}
+            placeholder={t("watchlists.name_placeholder")}
+            placeholderTextColor='#6b7280'
+            className='bg-neutral-800 text-white px-4 py-3 rounded-lg text-base'
+            autoFocus
+          />
+        </View>
+
+        {/* Description */}
+        <View className='px-4 py-4'>
+          <Text className='text-sm font-medium text-neutral-400 mb-2'>
+            {t("watchlists.description_label")}
+          </Text>
+          <TextInput
+            value={description}
+            onChangeText={setDescription}
+            placeholder={t("watchlists.description_placeholder")}
+            placeholderTextColor='#6b7280'
+            className='bg-neutral-800 text-white px-4 py-3 rounded-lg text-base'
+            multiline
+            numberOfLines={3}
+            textAlignVertical='top'
+            style={{ minHeight: 80 }}
+          />
+        </View>
+
+        {/* Public Toggle */}
+        <View className='px-4 py-4 flex-row items-center justify-between'>
+          <View className='flex-1 mr-4'>
+            <Text className='text-base font-medium text-white'>
+              {t("watchlists.is_public_label")}
+            </Text>
+            <Text className='text-sm text-neutral-400 mt-1'>
+              {t("watchlists.is_public_description")}
+            </Text>
+          </View>
+          <Switch
+            value={isPublic}
+            onValueChange={setIsPublic}
+            trackColor={{ false: "#374151", true: "#7c3aed" }}
+            thumbColor={isPublic ? "#a78bfa" : "#9ca3af"}
+          />
+        </View>
+
+        {/* Content Type */}
+        <View className='px-4 py-4'>
+          <Text className='text-sm font-medium text-neutral-400 mb-2'>
+            {t("watchlists.allowed_type_label")}
+          </Text>
+          <View className='flex-row flex-wrap gap-2'>
+            {ITEM_TYPES.map((type) => (
+              <TouchableOpacity
+                key={type.value ?? "all"}
+                onPress={() => setAllowedItemType(type.value)}
+                className={`px-4 py-2 rounded-lg ${allowedItemType === type.value ? "bg-purple-600" : "bg-neutral-800"}`}
+              >
+                <Text
+                  className={
+                    allowedItemType === type.value
+                      ? "text-white font-medium"
+                      : "text-neutral-300"
+                  }
+                >
+                  {type.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+
+        {/* Sort Order */}
+        <View className='px-4 py-4'>
+          <Text className='text-sm font-medium text-neutral-400 mb-2'>
+            {t("watchlists.sort_order_label")}
+          </Text>
+          <View className='flex-row flex-wrap gap-2'>
+            {SORT_OPTIONS.map((sort) => (
+              <TouchableOpacity
+                key={sort.value}
+                onPress={() => setDefaultSortOrder(sort.value)}
+                className={`px-4 py-2 rounded-lg ${defaultSortOrder === sort.value ? "bg-purple-600" : "bg-neutral-800"}`}
+              >
+                <Text
+                  className={
+                    defaultSortOrder === sort.value
+                      ? "text-white font-medium"
+                      : "text-neutral-300"
+                  }
+                >
+                  {sort.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+
+        {/* Create Button */}
+        <View className='px-4 pt-4'>
+          <Button
+            onPress={handleCreate}
+            disabled={!name.trim() || createWatchlist.isPending}
+            className={`py-3 ${!name.trim() ? "opacity-50" : ""}`}
+          >
+            {createWatchlist.isPending ? (
+              <ActivityIndicator color='white' />
+            ) : (
+              <View className='flex-row items-center'>
+                <Ionicons name='add' size={20} color='white' />
+                <Text className='text-white font-semibold text-base'>
+                  {t("watchlists.create_button")}
+                </Text>
+              </View>
+            )}
+          </Button>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

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

@@ -0,0 +1,274 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useLocalSearchParams } from "expo-router";
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Switch,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
+import { useUpdateWatchlist } from "@/hooks/useWatchlistMutations";
+import { useWatchlistDetailQuery } from "@/hooks/useWatchlists";
+import type {
+  StreamystatsWatchlistAllowedItemType,
+  StreamystatsWatchlistSortOrder,
+} from "@/utils/streamystats/types";
+
+const ITEM_TYPES: Array<{
+  value: StreamystatsWatchlistAllowedItemType;
+  label: string;
+}> = [
+  { value: null, label: "All Types" },
+  { value: "Movie", label: "Movies Only" },
+  { value: "Series", label: "Series Only" },
+  { value: "Episode", label: "Episodes Only" },
+];
+
+const SORT_OPTIONS: Array<{
+  value: StreamystatsWatchlistSortOrder;
+  label: string;
+}> = [
+  { value: "custom", label: "Custom Order" },
+  { value: "name", label: "Name" },
+  { value: "dateAdded", label: "Date Added" },
+  { value: "releaseDate", label: "Release Date" },
+];
+
+export default function EditWatchlistScreen() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const { watchlistId } = useLocalSearchParams<{ watchlistId: string }>();
+  const watchlistIdNum = watchlistId
+    ? Number.parseInt(watchlistId, 10)
+    : undefined;
+
+  const { data: watchlist, isLoading } =
+    useWatchlistDetailQuery(watchlistIdNum);
+  const updateWatchlist = useUpdateWatchlist();
+
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [isPublic, setIsPublic] = useState(false);
+  const [allowedItemType, setAllowedItemType] =
+    useState<StreamystatsWatchlistAllowedItemType>(null);
+  const [defaultSortOrder, setDefaultSortOrder] =
+    useState<StreamystatsWatchlistSortOrder>("custom");
+
+  // Initialize form with watchlist data
+  useEffect(() => {
+    if (watchlist) {
+      setName(watchlist.name);
+      setDescription(watchlist.description ?? "");
+      setIsPublic(watchlist.isPublic);
+      setAllowedItemType(
+        (watchlist.allowedItemType as StreamystatsWatchlistAllowedItemType) ??
+          null,
+      );
+      setDefaultSortOrder(
+        (watchlist.defaultSortOrder as StreamystatsWatchlistSortOrder) ??
+          "custom",
+      );
+    }
+  }, [watchlist]);
+
+  const handleSave = useCallback(async () => {
+    if (!name.trim() || !watchlistIdNum) return;
+
+    try {
+      await updateWatchlist.mutateAsync({
+        watchlistId: watchlistIdNum,
+        data: {
+          name: name.trim(),
+          description: description.trim() || undefined,
+          isPublic,
+          allowedItemType,
+          defaultSortOrder,
+        },
+      });
+      router.back();
+    } catch {
+      // Error handled by mutation
+    }
+  }, [
+    name,
+    description,
+    isPublic,
+    allowedItemType,
+    defaultSortOrder,
+    watchlistIdNum,
+    updateWatchlist,
+    router,
+  ]);
+
+  if (isLoading) {
+    return (
+      <View
+        className='flex-1 items-center justify-center'
+        style={{ backgroundColor: "#171717" }}
+      >
+        <ActivityIndicator size='large' />
+      </View>
+    );
+  }
+
+  if (!watchlist) {
+    return (
+      <View
+        className='flex-1 items-center justify-center px-8'
+        style={{ backgroundColor: "#171717" }}
+      >
+        <Text className='text-lg text-neutral-400'>
+          {t("watchlists.not_found")}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      className='flex-1'
+      style={{ backgroundColor: "#171717" }}
+    >
+      <ScrollView
+        className='flex-1'
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 20,
+        }}
+        keyboardShouldPersistTaps='handled'
+      >
+        {/* Name */}
+        <View className='px-4 py-4'>
+          <Text className='text-sm font-medium text-neutral-400 mb-2'>
+            {t("watchlists.name_label")} *
+          </Text>
+          <TextInput
+            value={name}
+            onChangeText={setName}
+            placeholder={t("watchlists.name_placeholder")}
+            placeholderTextColor='#6b7280'
+            className='bg-neutral-800 text-white px-4 py-3 rounded-lg text-base'
+          />
+        </View>
+
+        {/* Description */}
+        <View className='px-4 py-4'>
+          <Text className='text-sm font-medium text-neutral-400 mb-2'>
+            {t("watchlists.description_label")}
+          </Text>
+          <TextInput
+            value={description}
+            onChangeText={setDescription}
+            placeholder={t("watchlists.description_placeholder")}
+            placeholderTextColor='#6b7280'
+            className='bg-neutral-800 text-white px-4 py-3 rounded-lg text-base'
+            multiline
+            numberOfLines={3}
+            textAlignVertical='top'
+            style={{ minHeight: 80 }}
+          />
+        </View>
+
+        {/* Public Toggle */}
+        <View className='px-4 py-4 flex-row items-center justify-between'>
+          <View className='flex-1 mr-4'>
+            <Text className='text-base font-medium text-white'>
+              {t("watchlists.is_public_label")}
+            </Text>
+            <Text className='text-sm text-neutral-400 mt-1'>
+              {t("watchlists.is_public_description")}
+            </Text>
+          </View>
+          <Switch
+            value={isPublic}
+            onValueChange={setIsPublic}
+            trackColor={{ false: "#374151", true: "#7c3aed" }}
+            thumbColor={isPublic ? "#a78bfa" : "#9ca3af"}
+          />
+        </View>
+
+        {/* Content Type */}
+        <View className='px-4 py-4'>
+          <Text className='text-sm font-medium text-neutral-400 mb-2'>
+            {t("watchlists.allowed_type_label")}
+          </Text>
+          <View className='flex-row flex-wrap gap-2'>
+            {ITEM_TYPES.map((type) => (
+              <TouchableOpacity
+                key={type.value ?? "all"}
+                onPress={() => setAllowedItemType(type.value)}
+                className={`px-4 py-2 rounded-lg ${allowedItemType === type.value ? "bg-purple-600" : "bg-neutral-800"}`}
+              >
+                <Text
+                  className={
+                    allowedItemType === type.value
+                      ? "text-white font-medium"
+                      : "text-neutral-300"
+                  }
+                >
+                  {type.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+
+        {/* Sort Order */}
+        <View className='px-4 py-4'>
+          <Text className='text-sm font-medium text-neutral-400 mb-2'>
+            {t("watchlists.sort_order_label")}
+          </Text>
+          <View className='flex-row flex-wrap gap-2'>
+            {SORT_OPTIONS.map((sort) => (
+              <TouchableOpacity
+                key={sort.value}
+                onPress={() => setDefaultSortOrder(sort.value)}
+                className={`px-4 py-2 rounded-lg ${defaultSortOrder === sort.value ? "bg-purple-600" : "bg-neutral-800"}`}
+              >
+                <Text
+                  className={
+                    defaultSortOrder === sort.value
+                      ? "text-white font-medium"
+                      : "text-neutral-300"
+                  }
+                >
+                  {sort.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+
+        {/* Save Button */}
+        <View className='px-4 pt-4'>
+          <Button
+            onPress={handleSave}
+            disabled={!name.trim() || updateWatchlist.isPending}
+            className={`py-3 ${!name.trim() ? "opacity-50" : ""}`}
+          >
+            {updateWatchlist.isPending ? (
+              <ActivityIndicator color='white' />
+            ) : (
+              <View className='flex-row items-center'>
+                <Ionicons name='checkmark' size={20} color='white' />
+                <Text className='text-white font-semibold text-base'>
+                  {t("watchlists.save_button")}
+                </Text>
+              </View>
+            )}
+          </Button>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

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

@@ -0,0 +1,239 @@
+import { Ionicons } from "@expo/vector-icons";
+import { FlashList } from "@shopify/flash-list";
+import { useAtomValue } from "jotai";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, RefreshControl, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import useRouter from "@/hooks/useAppRouter";
+import {
+  useStreamystatsEnabled,
+  useWatchlistsQuery,
+} from "@/hooks/useWatchlists";
+import { userAtom } from "@/providers/JellyfinProvider";
+import type { StreamystatsWatchlist } from "@/utils/streamystats/types";
+
+interface WatchlistCardProps {
+  watchlist: StreamystatsWatchlist;
+  isOwner: boolean;
+  onPress: () => void;
+}
+
+const WatchlistCard: React.FC<WatchlistCardProps> = ({
+  watchlist,
+  isOwner,
+  onPress,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      className='bg-neutral-900 rounded-xl p-4 mx-4 mb-3'
+      activeOpacity={0.7}
+    >
+      <View className='flex-row items-center justify-between mb-2'>
+        <Text className='text-lg font-semibold flex-1' numberOfLines={1}>
+          {watchlist.name}
+        </Text>
+        <View className='flex-row items-center gap-2'>
+          {isOwner && (
+            <View className='bg-purple-600/20 px-2 py-1 rounded'>
+              <Text className='text-purple-400 text-xs'>
+                {t("watchlists.you")}
+              </Text>
+            </View>
+          )}
+          <Ionicons
+            name={watchlist.isPublic ? "globe-outline" : "lock-closed-outline"}
+            size={16}
+            color='#9ca3af'
+          />
+        </View>
+      </View>
+
+      {watchlist.description && (
+        <Text className='text-neutral-400 text-sm mb-2' numberOfLines={2}>
+          {watchlist.description}
+        </Text>
+      )}
+
+      <View className='flex-row items-center gap-4'>
+        <View className='flex-row items-center gap-1'>
+          <Ionicons name='film-outline' size={14} color='#9ca3af' />
+          <Text className='text-neutral-400 text-sm'>
+            {watchlist.itemCount ?? 0}{" "}
+            {(watchlist.itemCount ?? 0) === 1
+              ? t("watchlists.item")
+              : t("watchlists.items")}
+          </Text>
+        </View>
+        {watchlist.allowedItemType && (
+          <View className='bg-neutral-800 px-2 py-0.5 rounded'>
+            <Text className='text-neutral-400 text-xs'>
+              {watchlist.allowedItemType}
+            </Text>
+          </View>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const EmptyState: React.FC<{ onCreatePress: () => void }> = ({
+  onCreatePress: _onCreatePress,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <View className='flex-1 items-center justify-center px-8'>
+      <Ionicons name='list-outline' size={64} color='#4b5563' />
+      <Text className='text-xl font-semibold mt-4 text-center'>
+        {t("watchlists.empty_title")}
+      </Text>
+      <Text className='text-neutral-400 text-center mt-2 mb-6'>
+        {t("watchlists.empty_description")}
+      </Text>
+    </View>
+  );
+};
+
+const NotConfiguredState: React.FC = () => {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  return (
+    <View className='flex-1 items-center justify-center px-8'>
+      <Ionicons name='settings-outline' size={64} color='#4b5563' />
+      <Text className='text-xl font-semibold mt-4 text-center'>
+        {t("watchlists.not_configured_title")}
+      </Text>
+      <Text className='text-neutral-400 text-center mt-2 mb-6'>
+        {t("watchlists.not_configured_description")}
+      </Text>
+      <Button
+        onPress={() =>
+          router.push(
+            "/(auth)/(tabs)/(home)/settings/plugins/streamystats/page",
+          )
+        }
+        className='px-6'
+      >
+        <Text className='font-semibold'>{t("watchlists.go_to_settings")}</Text>
+      </Button>
+    </View>
+  );
+};
+
+export default function WatchlistsScreen() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const user = useAtomValue(userAtom);
+  const streamystatsEnabled = useStreamystatsEnabled();
+  const { data: watchlists, isLoading, refetch } = useWatchlistsQuery();
+  const [refreshing, setRefreshing] = useState(false);
+
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await refetch();
+    setRefreshing(false);
+  }, [refetch]);
+
+  const handleCreatePress = useCallback(() => {
+    router.push("/(auth)/(tabs)/(watchlists)/create");
+  }, [router]);
+
+  const handleWatchlistPress = useCallback(
+    (watchlistId: number) => {
+      router.push(`/(auth)/(tabs)/(watchlists)/${watchlistId}`);
+    },
+    [router],
+  );
+
+  // Separate watchlists into "mine" and "public"
+  const { myWatchlists, publicWatchlists } = useMemo(() => {
+    if (!watchlists) return { myWatchlists: [], publicWatchlists: [] };
+
+    const mine: StreamystatsWatchlist[] = [];
+    const pub: StreamystatsWatchlist[] = [];
+
+    for (const w of watchlists) {
+      if (w.userId === user?.Id) {
+        mine.push(w);
+      } else {
+        pub.push(w);
+      }
+    }
+
+    return { myWatchlists: mine, publicWatchlists: pub };
+  }, [watchlists, user?.Id]);
+
+  // Combine into sections for FlashList
+  const sections = useMemo(() => {
+    const result: Array<
+      | { type: "header"; title: string }
+      | { type: "watchlist"; data: StreamystatsWatchlist; isOwner: boolean }
+    > = [];
+
+    if (myWatchlists.length > 0) {
+      result.push({ type: "header", title: t("watchlists.my_watchlists") });
+      for (const w of myWatchlists) {
+        result.push({ type: "watchlist", data: w, isOwner: true });
+      }
+    }
+
+    if (publicWatchlists.length > 0) {
+      result.push({ type: "header", title: t("watchlists.public_watchlists") });
+      for (const w of publicWatchlists) {
+        result.push({ type: "watchlist", data: w, isOwner: false });
+      }
+    }
+
+    return result;
+  }, [myWatchlists, publicWatchlists, t]);
+
+  if (!streamystatsEnabled) {
+    return <NotConfiguredState />;
+  }
+
+  if (!isLoading && (!watchlists || watchlists.length === 0)) {
+    return <EmptyState onCreatePress={handleCreatePress} />;
+  }
+
+  return (
+    <FlashList
+      data={sections}
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingTop: Platform.OS === "android" ? 10 : 0,
+        paddingBottom: 100,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
+      }
+      renderItem={({ item }) => {
+        if (item.type === "header") {
+          return (
+            <Text className='text-lg font-bold px-4 pt-4 pb-2'>
+              {item.title}
+            </Text>
+          );
+        }
+
+        return (
+          <WatchlistCard
+            watchlist={item.data}
+            isOwner={item.isOwner}
+            onPress={() => handleWatchlistPress(item.data.id)}
+          />
+        );
+      }}
+      getItemType={(item) => item.type}
+    />
+  );
+}

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

@@ -7,15 +7,21 @@ import type {
   ParamListBase,
   TabNavigationState,
 } from "@react-navigation/native";
-import { useFocusEffect, useRouter, withLayoutContext } from "expo-router";
-import { useCallback } from "react";
+import { withLayoutContext } from "expo-router";
 import { useTranslation } from "react-i18next";
-import { Platform } from "react-native";
+import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { Colors } from "@/constants/Colors";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
-import { storage } from "@/utils/mmkv";
+
+// 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();
 
@@ -29,25 +35,9 @@ export const NativeTabs = withLayoutContext<
 export default function TabLayout() {
   const { settings } = useSettings();
   const { t } = useTranslation();
-  const router = useRouter();
-
-  useFocusEffect(
-    useCallback(() => {
-      const hasShownIntro = storage.getBoolean("hasShownIntro");
-      if (!hasShownIntro) {
-        const timer = setTimeout(() => {
-          router.push("/intro/page");
-        }, 1000);
-
-        return () => {
-          clearTimeout(timer);
-        };
-      }
-    }, []),
-  );
 
   return (
-    <>
+    <View style={{ flex: 1 }}>
       <SystemBars hidden={false} style='light' />
       <NativeTabs
         sidebarAdaptable={false}
@@ -55,6 +45,7 @@ export default function TabLayout() {
           backgroundColor: "#121212",
         }}
         tabBarActiveTintColor={Colors.primary}
+        activeIndicatorColor={"#392c3b"}
         scrollEdgeAppearance='default'
       >
         <NativeTabs.Screen redirect name='index' />
@@ -70,10 +61,7 @@ export default function TabLayout() {
             tabBarIcon:
               Platform.OS === "android"
                 ? (_e) => require("@/assets/icons/house.fill.png")
-                : ({ focused }) =>
-                    focused
-                      ? { sfSymbol: "house.fill" }
-                      : { sfSymbol: "house" },
+                : (_e) => ({ sfSymbol: "house.fill" }),
           }}
         />
         <NativeTabs.Screen
@@ -84,14 +72,12 @@ export default function TabLayout() {
           })}
           name='(search)'
           options={{
+            role: "search",
             title: t("tabs.search"),
             tabBarIcon:
               Platform.OS === "android"
                 ? (_e) => require("@/assets/icons/magnifyingglass.png")
-                : ({ focused }) =>
-                    focused
-                      ? { sfSymbol: "magnifyingglass" }
-                      : { sfSymbol: "magnifyingglass" },
+                : (_e) => ({ sfSymbol: "magnifyingglass" }),
           }}
         />
         <NativeTabs.Screen
@@ -100,14 +86,20 @@ export default function TabLayout() {
             title: t("tabs.favorites"),
             tabBarIcon:
               Platform.OS === "android"
-                ? ({ focused }) =>
-                    focused
-                      ? require("@/assets/icons/heart.fill.png")
-                      : require("@/assets/icons/heart.png")
-                : ({ focused }) =>
-                    focused
-                      ? { sfSymbol: "heart.fill" }
-                      : { sfSymbol: "heart" },
+                ? (_e) => require("@/assets/icons/heart.fill.png")
+                : (_e) => ({ sfSymbol: "heart.fill" }),
+          }}
+        />
+        <NativeTabs.Screen
+          name='(watchlists)'
+          options={{
+            title: t("watchlists.title"),
+            tabBarItemHidden:
+              !settings?.streamyStatsServerUrl || settings?.hideWatchlistsTab,
+            tabBarIcon:
+              Platform.OS === "android"
+                ? (_e) => require("@/assets/icons/list.png")
+                : (_e) => ({ sfSymbol: "list.bullet.rectangle" }),
           }}
         />
         <NativeTabs.Screen
@@ -117,10 +109,7 @@ export default function TabLayout() {
             tabBarIcon:
               Platform.OS === "android"
                 ? (_e) => require("@/assets/icons/server.rack.png")
-                : ({ focused }) =>
-                    focused
-                      ? { sfSymbol: "rectangle.stack.fill" }
-                      : { sfSymbol: "rectangle.stack" },
+                : (_e) => ({ sfSymbol: "rectangle.stack.fill" }),
           }}
         />
         <NativeTabs.Screen
@@ -131,13 +120,23 @@ export default function TabLayout() {
             tabBarIcon:
               Platform.OS === "android"
                 ? (_e) => require("@/assets/icons/list.png")
-                : ({ focused }) =>
-                    focused
-                      ? { sfSymbol: "list.dash.fill" }
-                      : { sfSymbol: "list.dash" },
+                : (_e) => ({ sfSymbol: "list.dash.fill" }),
+          }}
+        />
+        <NativeTabs.Screen
+          name='(settings)'
+          options={{
+            title: t("tabs.settings"),
+            tabBarItemHidden: !Platform.isTV,
+            tabBarIcon:
+              Platform.OS === "android"
+                ? (_e) => require("@/assets/icons/list.png")
+                : (_e) => ({ sfSymbol: "gearshape.fill" }),
           }}
         />
       </NativeTabs>
-    </>
+      <MiniPlayerBar />
+      <MusicPlaybackEngine />
+    </View>
   );
 }

app/(auth)/now-playing.tsx

@@ -0,0 +1,845 @@
+import { ExpoAvRoutePickerView } from "@douglowder/expo-av-route-picker-view";
+import { Ionicons } from "@expo/vector-icons";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  ActivityIndicator,
+  Dimensions,
+  Platform,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import DraggableFlatList, {
+  type RenderItemParams,
+  ScaleDecorator,
+} from "react-native-draggable-flatlist";
+import { CastButton, CastState } from "react-native-google-cast";
+import { useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import TextTicker from "react-native-text-ticker";
+import type { VolumeResult } from "react-native-volume-manager";
+import { Badge } from "@/components/Badge";
+import { Text } from "@/components/common/Text";
+import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
+import { PlaylistPickerSheet } from "@/components/music/PlaylistPickerSheet";
+import { TrackOptionsSheet } from "@/components/music/TrackOptionsSheet";
+import useRouter from "@/hooks/useAppRouter";
+import { useFavorite } from "@/hooks/useFavorite";
+import { useMusicCast } from "@/hooks/useMusicCast";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  type RepeatMode,
+  useMusicPlayer,
+} from "@/providers/MusicPlayerProvider";
+import { formatBitrate } from "@/utils/bitrate";
+import { formatDuration } from "@/utils/time";
+
+// Conditionally require VolumeManager (not available on TV)
+const VolumeManager = Platform.isTV
+  ? null
+  : require("react-native-volume-manager");
+
+const formatFileSize = (bytes?: number | null) => {
+  if (!bytes) return null;
+  const sizes = ["B", "KB", "MB", "GB"];
+  if (bytes === 0) return "0 B";
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${Math.round((bytes / 1024 ** i) * 100) / 100} ${sizes[i]}`;
+};
+
+const formatSampleRate = (sampleRate?: number | null) => {
+  if (!sampleRate) return null;
+  return `${(sampleRate / 1000).toFixed(1)} kHz`;
+};
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+const ARTWORK_SIZE = SCREEN_WIDTH - 80;
+
+type ViewMode = "player" | "queue";
+
+export default function NowPlayingScreen() {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const [viewMode, setViewMode] = useState<ViewMode>("player");
+  const [trackOptionsOpen, setTrackOptionsOpen] = useState(false);
+  const [playlistPickerOpen, setPlaylistPickerOpen] = useState(false);
+  const [createPlaylistOpen, setCreatePlaylistOpen] = useState(false);
+
+  const {
+    isConnected: isCastConnected,
+    castQueue,
+    castState,
+  } = useMusicCast({
+    api,
+    userId: user?.Id,
+  });
+
+  const {
+    currentTrack,
+    queue,
+    queueIndex,
+    isPlaying,
+    isLoading,
+    progress,
+    duration,
+    repeatMode,
+    shuffleEnabled,
+    mediaSource,
+    isTranscoding,
+    togglePlayPause,
+    next,
+    previous,
+    seek,
+    setRepeatMode,
+    toggleShuffle,
+    jumpToIndex,
+    removeFromQueue,
+    reorderQueue,
+    stop,
+    pause,
+  } = useMusicPlayer();
+
+  const { isFavorite, toggleFavorite } = useFavorite(
+    currentTrack ?? ({ Id: "" } as BaseItemDto),
+  );
+
+  const sliderProgress = useSharedValue(0);
+  const sliderMin = useSharedValue(0);
+  const sliderMax = useSharedValue(1);
+
+  useEffect(() => {
+    sliderProgress.value = progress;
+  }, [progress, sliderProgress]);
+
+  useEffect(() => {
+    sliderMax.value = duration > 0 ? duration : 1;
+  }, [duration, sliderMax]);
+
+  // Auto-cast queue when Chromecast becomes connected and pause local playback
+  const prevCastState = useRef<CastState | null | undefined>(null);
+  useEffect(() => {
+    if (
+      castState === CastState.CONNECTED &&
+      prevCastState.current !== CastState.CONNECTED &&
+      queue.length > 0
+    ) {
+      // Just connected - pause local playback and cast the queue
+      pause();
+      castQueue({ queue, startIndex: queueIndex });
+    }
+    prevCastState.current = castState;
+  }, [castState, queue, queueIndex, castQueue, pause]);
+
+  const imageUrl = useMemo(() => {
+    if (!api || !currentTrack) return null;
+    const albumId = currentTrack.AlbumId || currentTrack.ParentId;
+    if (albumId) {
+      return `${api.basePath}/Items/${albumId}/Images/Primary?maxHeight=600&maxWidth=600`;
+    }
+    return `${api.basePath}/Items/${currentTrack.Id}/Images/Primary?maxHeight=600&maxWidth=600`;
+  }, [api, currentTrack]);
+
+  const progressText = useMemo(() => {
+    const progressTicks = progress * 10000000;
+    return formatDuration(progressTicks);
+  }, [progress]);
+
+  const _durationText = useMemo(() => {
+    const durationTicks = duration * 10000000;
+    return formatDuration(durationTicks);
+  }, [duration]);
+
+  const remainingText = useMemo(() => {
+    const remaining = Math.max(0, duration - progress);
+    const remainingTicks = remaining * 10000000;
+    return `-${formatDuration(remainingTicks)}`;
+  }, [duration, progress]);
+
+  const handleSliderComplete = useCallback(
+    (value: number) => {
+      seek(value);
+    },
+    [seek],
+  );
+
+  const handleClose = useCallback(() => {
+    router.back();
+  }, [router]);
+
+  const _handleStop = useCallback(() => {
+    stop();
+    router.back();
+  }, [stop, router]);
+
+  const cycleRepeatMode = useCallback(() => {
+    const modes: RepeatMode[] = ["off", "all", "one"];
+    const currentIndex = modes.indexOf(repeatMode);
+    const nextMode = modes[(currentIndex + 1) % modes.length];
+    setRepeatMode(nextMode);
+  }, [repeatMode, setRepeatMode]);
+
+  const handleOptionsPress = useCallback(() => {
+    setTrackOptionsOpen(true);
+  }, []);
+
+  const handleAddToPlaylist = useCallback(() => {
+    setPlaylistPickerOpen(true);
+  }, []);
+
+  const handleCreateNewPlaylist = useCallback(() => {
+    setCreatePlaylistOpen(true);
+  }, []);
+
+  const getRepeatIcon = (): string => {
+    switch (repeatMode) {
+      case "one":
+        return "repeat";
+      case "all":
+        return "repeat";
+      default:
+        return "repeat";
+    }
+  };
+
+  const canGoNext = queueIndex < queue.length - 1 || repeatMode === "all";
+  const canGoPrevious = queueIndex > 0 || progress > 3 || repeatMode === "all";
+
+  if (!currentTrack) {
+    return (
+      <BottomSheetModalProvider>
+        <View
+          className='flex-1 bg-[#121212] items-center justify-center'
+          style={{
+            paddingTop: Platform.OS === "android" ? insets.top : 0,
+            paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
+          }}
+        >
+          <Text className='text-neutral-500'>No track playing</Text>
+        </View>
+      </BottomSheetModalProvider>
+    );
+  }
+
+  return (
+    <BottomSheetModalProvider>
+      <View
+        className='flex-1 bg-[#121212]'
+        style={{
+          paddingTop: Platform.OS === "android" ? insets.top : 0,
+          paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
+        }}
+      >
+        {/* Header */}
+        <View className='flex-row items-center justify-between px-4 pt-3 pb-2'>
+          <TouchableOpacity
+            onPress={handleClose}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            className='p-2'
+          >
+            <Ionicons name='chevron-down' size={28} color='white' />
+          </TouchableOpacity>
+
+          <View className='flex-row'>
+            <TouchableOpacity
+              onPress={() => setViewMode("player")}
+              className='px-3 py-1'
+            >
+              <Text
+                className={
+                  viewMode === "player"
+                    ? "text-white font-semibold"
+                    : "text-neutral-500"
+                }
+              >
+                Now Playing
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => setViewMode("queue")}
+              className='px-3 py-1'
+            >
+              <Text
+                className={
+                  viewMode === "queue"
+                    ? "text-white font-semibold"
+                    : "text-neutral-500"
+                }
+              >
+                Queue ({queue.length})
+              </Text>
+            </TouchableOpacity>
+          </View>
+          {/* Empty placeholder to balance header layout */}
+          <View className='p-2' style={{ width: 44 }} />
+        </View>
+
+        {viewMode === "player" ? (
+          <PlayerView
+            api={api}
+            currentTrack={currentTrack}
+            imageUrl={imageUrl}
+            sliderProgress={sliderProgress}
+            sliderMin={sliderMin}
+            sliderMax={sliderMax}
+            progressText={progressText}
+            remainingText={remainingText}
+            isPlaying={isPlaying}
+            isLoading={isLoading}
+            repeatMode={repeatMode}
+            shuffleEnabled={shuffleEnabled}
+            canGoNext={canGoNext}
+            canGoPrevious={canGoPrevious}
+            onSliderComplete={handleSliderComplete}
+            onTogglePlayPause={togglePlayPause}
+            onNext={next}
+            onPrevious={previous}
+            onCycleRepeat={cycleRepeatMode}
+            onToggleShuffle={toggleShuffle}
+            getRepeatIcon={getRepeatIcon}
+            mediaSource={mediaSource}
+            isTranscoding={isTranscoding}
+            isFavorite={isFavorite}
+            onToggleFavorite={toggleFavorite}
+            onOptionsPress={handleOptionsPress}
+            isCastConnected={isCastConnected}
+          />
+        ) : (
+          <QueueView
+            api={api}
+            queue={queue}
+            queueIndex={queueIndex}
+            onJumpToIndex={jumpToIndex}
+            onRemoveFromQueue={removeFromQueue}
+            onReorderQueue={reorderQueue}
+          />
+        )}
+
+        <TrackOptionsSheet
+          open={trackOptionsOpen}
+          setOpen={setTrackOptionsOpen}
+          track={currentTrack}
+          onAddToPlaylist={handleAddToPlaylist}
+        />
+        <PlaylistPickerSheet
+          open={playlistPickerOpen}
+          setOpen={setPlaylistPickerOpen}
+          trackToAdd={currentTrack}
+          onCreateNew={handleCreateNewPlaylist}
+        />
+        <CreatePlaylistModal
+          open={createPlaylistOpen}
+          setOpen={setCreatePlaylistOpen}
+          initialTrackId={currentTrack?.Id}
+        />
+      </View>
+    </BottomSheetModalProvider>
+  );
+}
+
+interface PlayerViewProps {
+  api: any;
+  currentTrack: BaseItemDto;
+  imageUrl: string | null;
+  sliderProgress: any;
+  sliderMin: any;
+  sliderMax: any;
+  progressText: string;
+  remainingText: string;
+  isPlaying: boolean;
+  isLoading: boolean;
+  repeatMode: RepeatMode;
+  shuffleEnabled: boolean;
+  canGoNext: boolean;
+  canGoPrevious: boolean;
+  onSliderComplete: (value: number) => void;
+  onTogglePlayPause: () => void;
+  onNext: () => void;
+  onPrevious: () => void;
+  onCycleRepeat: () => void;
+  onToggleShuffle: () => void;
+  getRepeatIcon: () => string;
+  mediaSource: MediaSourceInfo | null;
+  isTranscoding: boolean;
+  isFavorite: boolean | undefined;
+  onToggleFavorite: () => void;
+  onOptionsPress: () => void;
+  isCastConnected: boolean;
+}
+
+const PlayerView: React.FC<PlayerViewProps> = ({
+  currentTrack,
+  imageUrl,
+  sliderProgress,
+  sliderMin,
+  sliderMax,
+  progressText,
+  remainingText,
+  isPlaying,
+  isLoading,
+  repeatMode,
+  shuffleEnabled,
+  canGoNext,
+  canGoPrevious,
+  onSliderComplete,
+  onTogglePlayPause,
+  onNext,
+  onPrevious,
+  onCycleRepeat,
+  onToggleShuffle,
+  getRepeatIcon,
+  mediaSource,
+  isTranscoding,
+  isFavorite,
+  onToggleFavorite,
+  onOptionsPress,
+  isCastConnected,
+}) => {
+  const audioStream = useMemo(() => {
+    return mediaSource?.MediaStreams?.find((stream) => stream.Type === "Audio");
+  }, [mediaSource]);
+
+  // Volume slider state
+  const volumeProgress = useSharedValue(0);
+  const volumeMin = useSharedValue(0);
+  const volumeMax = useSharedValue(1);
+  const isTv = Platform.isTV;
+
+  useEffect(() => {
+    if (isTv || !VolumeManager) return;
+    // Get initial volume
+    VolumeManager.getVolume().then(({ volume }: { volume: number }) => {
+      volumeProgress.value = volume;
+    });
+    // Listen to volume changes
+    const listener = VolumeManager.addVolumeListener((result: VolumeResult) => {
+      volumeProgress.value = result.volume;
+    });
+    return () => listener.remove();
+  }, [isTv, volumeProgress]);
+
+  const handleVolumeChange = useCallback((value: number) => {
+    if (VolumeManager) {
+      VolumeManager.setVolume(value);
+    }
+  }, []);
+
+  const fileSize = formatFileSize(mediaSource?.Size);
+  const codec = audioStream?.Codec?.toUpperCase();
+  const bitrate = formatBitrate(audioStream?.BitRate);
+  const sampleRate = formatSampleRate(audioStream?.SampleRate);
+  const playbackMethod = isTranscoding ? "Transcoding" : "Direct";
+
+  const hasAudioStats =
+    mediaSource && (fileSize || codec || bitrate || sampleRate);
+  return (
+    <ScrollView className='flex-1 px-6' showsVerticalScrollIndicator={false}>
+      {/* Album artwork */}
+      <View
+        className='self-center mb-8 mt-4'
+        style={{
+          width: ARTWORK_SIZE,
+          height: ARTWORK_SIZE,
+          borderRadius: 12,
+          overflow: "hidden",
+          backgroundColor: "#1a1a1a",
+          shadowColor: "#000",
+          shadowOffset: { width: 0, height: 8 },
+          shadowOpacity: 0.4,
+          shadowRadius: 16,
+          elevation: 10,
+        }}
+      >
+        {imageUrl ? (
+          <Image
+            source={{ uri: imageUrl }}
+            style={{ width: "100%", height: "100%" }}
+            contentFit='cover'
+            cachePolicy='memory-disk'
+          />
+        ) : (
+          <View className='flex-1 items-center justify-center bg-neutral-800'>
+            <Ionicons name='musical-note' size={80} color='#666' />
+          </View>
+        )}
+      </View>
+
+      {/* Track info with actions */}
+      <View className='mb-6'>
+        <View className='flex-row items-start justify-between'>
+          <View className='flex-1 mr-4'>
+            <TextTicker
+              style={{ color: "white", fontSize: 24, fontWeight: "bold" }}
+              duration={Math.max(4000, (currentTrack.Name?.length || 0) * 250)}
+              loop
+              bounce={false}
+              repeatSpacer={80}
+              marqueeDelay={1500}
+              scroll={false}
+              animationType='scroll'
+              easing={(t) => t}
+            >
+              {currentTrack.Name}
+            </TextTicker>
+            <TextTicker
+              style={{ color: "#a3a3a3", fontSize: 18 }}
+              duration={Math.max(
+                4000,
+                (
+                  currentTrack.Artists?.join(", ") ||
+                  currentTrack.AlbumArtist ||
+                  ""
+                ).length * 250,
+              )}
+              loop
+              bounce={false}
+              repeatSpacer={80}
+              marqueeDelay={2000}
+              scroll={false}
+              animationType='scroll'
+              easing={(t) => t}
+            >
+              {currentTrack.Artists?.join(", ") || currentTrack.AlbumArtist}
+            </TextTicker>
+          </View>
+          <TouchableOpacity
+            onPress={onToggleFavorite}
+            className='p-2'
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            activeOpacity={0.7}
+          >
+            <Ionicons
+              name={isFavorite ? "heart" : "heart-outline"}
+              size={24}
+              color={isFavorite ? "#ec4899" : "white"}
+            />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={onOptionsPress} className='p-2'>
+            <Ionicons name='ellipsis-horizontal' size={24} color='white' />
+          </TouchableOpacity>
+        </View>
+
+        {/* Audio Stats */}
+        {hasAudioStats && (
+          <View className='flex-row flex-wrap gap-1.5 mt-3'>
+            {fileSize && <Badge variant='gray' text={fileSize} />}
+            {codec && <Badge variant='gray' text={codec} />}
+            <Badge
+              variant='gray'
+              text={playbackMethod}
+              iconLeft={
+                <Ionicons
+                  name={isTranscoding ? "swap-horizontal" : "play"}
+                  size={12}
+                  color='white'
+                />
+              }
+            />
+            {bitrate && bitrate !== "N/A" && (
+              <Badge variant='gray' text={bitrate} />
+            )}
+            {sampleRate && <Badge variant='gray' text={sampleRate} />}
+          </View>
+        )}
+      </View>
+
+      {/* Progress slider */}
+      <View className='mb-4'>
+        <Slider
+          theme={{
+            maximumTrackTintColor: "rgba(255,255,255,0.2)",
+            minimumTrackTintColor: "#fff",
+            bubbleBackgroundColor: "#fff",
+            bubbleTextColor: "#666",
+          }}
+          progress={sliderProgress}
+          minimumValue={sliderMin}
+          maximumValue={sliderMax}
+          onSlidingComplete={onSliderComplete}
+          renderThumb={() => null}
+          sliderHeight={8}
+          containerStyle={{ borderRadius: 100 }}
+          renderBubble={() => null}
+        />
+        <View className='flex flex-row justify-between mt-2'>
+          <Text className='text-neutral-500 text-xs'>{progressText}</Text>
+          <Text className='text-neutral-500 text-xs'>{remainingText}</Text>
+        </View>
+      </View>
+
+      {/* Main Controls with Shuffle & Repeat */}
+      <View className='flex flex-row items-center justify-center mb-6'>
+        <TouchableOpacity onPress={onToggleShuffle} className='p-3'>
+          <Ionicons
+            name='shuffle'
+            size={24}
+            color={shuffleEnabled ? "#9334E9" : "#666"}
+          />
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={onPrevious}
+          disabled={!canGoPrevious || isLoading}
+          className='p-4'
+          style={{ opacity: canGoPrevious && !isLoading ? 1 : 0.3 }}
+        >
+          <Ionicons name='play-skip-back' size={32} color='white' />
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={onTogglePlayPause}
+          disabled={isLoading}
+          className='mx-4 bg-white rounded-full p-4'
+        >
+          {isLoading ? (
+            <ActivityIndicator size={36} color='#121212' />
+          ) : (
+            <Ionicons
+              name={isPlaying ? "pause" : "play"}
+              size={36}
+              color='#121212'
+              style={isPlaying ? {} : { marginLeft: 4 }}
+            />
+          )}
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={onNext}
+          disabled={!canGoNext || isLoading}
+          className='p-4'
+          style={{ opacity: canGoNext && !isLoading ? 1 : 0.3 }}
+        >
+          <Ionicons name='play-skip-forward' size={32} color='white' />
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={onCycleRepeat} className='p-3 relative'>
+          <Ionicons
+            name={getRepeatIcon() as any}
+            size={24}
+            color={repeatMode !== "off" ? "#9334E9" : "#666"}
+          />
+          {repeatMode === "one" && (
+            <View className='absolute right-0 top-1 bg-purple-600 rounded-full w-4 h-4 items-center justify-center'>
+              <Text className='text-white text-[10px] font-bold'>1</Text>
+            </View>
+          )}
+        </TouchableOpacity>
+      </View>
+
+      {/* Volume Slider */}
+      {!isTv && VolumeManager && (
+        <View className='flex-row items-center mb-6'>
+          <Ionicons name='volume-low' size={20} color='#666' />
+          <View className='flex-1 mx-3'>
+            <Slider
+              theme={{
+                maximumTrackTintColor: "rgba(255,255,255,0.2)",
+                minimumTrackTintColor: "#fff",
+              }}
+              progress={volumeProgress}
+              minimumValue={volumeMin}
+              maximumValue={volumeMax}
+              onSlidingComplete={handleVolumeChange}
+              renderThumb={() => null}
+              sliderHeight={8}
+              containerStyle={{ borderRadius: 100 }}
+              renderBubble={() => null}
+            />
+          </View>
+          <Ionicons name='volume-high' size={20} color='#666' />
+        </View>
+      )}
+
+      {/* AirPlay & Chromecast Buttons */}
+      {!isTv && (
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 32,
+            marginBottom: 16,
+          }}
+        >
+          {/* AirPlay (iOS only) */}
+          {Platform.OS === "ios" && (
+            <View style={{ transform: [{ scale: 2.8 }] }}>
+              <ExpoAvRoutePickerView
+                style={{ width: 24, height: 24 }}
+                tintColor='#666666'
+                activeTintColor='#9334E9'
+              />
+            </View>
+          )}
+          {/* Chromecast */}
+          <CastButton
+            style={{
+              width: 24,
+              height: 24,
+              tintColor: isCastConnected ? "#9334E9" : "#666",
+              transform: [{ translateY: 1 }],
+            }}
+          />
+        </View>
+      )}
+    </ScrollView>
+  );
+};
+
+interface QueueViewProps {
+  api: any;
+  queue: BaseItemDto[];
+  queueIndex: number;
+  onJumpToIndex: (index: number) => void;
+  onRemoveFromQueue: (index: number) => void;
+  onReorderQueue: (newQueue: BaseItemDto[]) => void;
+}
+
+const QueueView: React.FC<QueueViewProps> = ({
+  api,
+  queue,
+  queueIndex,
+  onJumpToIndex,
+  onRemoveFromQueue,
+  onReorderQueue,
+}) => {
+  const renderQueueItem = useCallback(
+    ({ item, drag, isActive, getIndex }: RenderItemParams<BaseItemDto>) => {
+      const index = getIndex() ?? 0;
+      const isCurrentTrack = index === queueIndex;
+      const isPast = index < queueIndex;
+
+      const albumId = item.AlbumId || item.ParentId;
+      const imageUrl = api
+        ? albumId
+          ? `${api.basePath}/Items/${albumId}/Images/Primary?maxHeight=80&maxWidth=80`
+          : `${api.basePath}/Items/${item.Id}/Images/Primary?maxHeight=80&maxWidth=80`
+        : null;
+
+      return (
+        <ScaleDecorator>
+          <TouchableOpacity
+            onPress={() => onJumpToIndex(index)}
+            onLongPress={drag}
+            disabled={isActive}
+            className='flex-row items-center px-4 py-3'
+            style={{
+              opacity: isPast && !isActive ? 0.5 : 1,
+              backgroundColor: isActive
+                ? "#2a2a2a"
+                : isCurrentTrack
+                  ? "rgba(147, 52, 233, 0.3)"
+                  : "#121212",
+            }}
+          >
+            {/* Drag handle */}
+            <TouchableOpacity
+              onPressIn={drag}
+              disabled={isActive}
+              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+              className='pr-2'
+            >
+              <Ionicons
+                name='reorder-three'
+                size={20}
+                color={isActive ? "#9334E9" : "#666"}
+              />
+            </TouchableOpacity>
+
+            {/* Album art */}
+            <View className='w-12 h-12 rounded overflow-hidden bg-neutral-800 mr-3'>
+              {imageUrl ? (
+                <Image
+                  source={{ uri: imageUrl }}
+                  style={{ width: "100%", height: "100%" }}
+                  contentFit='cover'
+                  cachePolicy='memory-disk'
+                />
+              ) : (
+                <View className='flex-1 items-center justify-center'>
+                  <Ionicons name='musical-note' size={16} color='#666' />
+                </View>
+              )}
+            </View>
+
+            {/* Track info */}
+            <View className='flex-1 mr-2'>
+              <Text
+                numberOfLines={1}
+                className={`text-base ${isCurrentTrack ? "text-purple-400 font-semibold" : "text-white"}`}
+              >
+                {item.Name}
+              </Text>
+              <Text numberOfLines={1} className='text-neutral-500 text-sm'>
+                {item.Artists?.join(", ") || item.AlbumArtist}
+              </Text>
+            </View>
+
+            {/* Now playing indicator */}
+            {isCurrentTrack && (
+              <Ionicons name='musical-note' size={16} color='#9334E9' />
+            )}
+
+            {/* Remove button (not for current track) */}
+            {!isCurrentTrack && (
+              <TouchableOpacity
+                onPress={() => onRemoveFromQueue(index)}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                className='p-2'
+              >
+                <Ionicons name='close' size={20} color='#666' />
+              </TouchableOpacity>
+            )}
+          </TouchableOpacity>
+        </ScaleDecorator>
+      );
+    },
+    [api, queueIndex, onJumpToIndex, onRemoveFromQueue],
+  );
+
+  const handleDragEnd = useCallback(
+    ({ data }: { data: BaseItemDto[] }) => {
+      onReorderQueue(data);
+    },
+    [onReorderQueue],
+  );
+
+  const history = queue.slice(0, queueIndex);
+
+  return (
+    <DraggableFlatList
+      data={queue}
+      keyExtractor={(item, index) => `${item.Id}-${index}`}
+      renderItem={renderQueueItem}
+      onDragEnd={handleDragEnd}
+      showsVerticalScrollIndicator={false}
+      ListHeaderComponent={
+        <View className='px-4 py-2'>
+          <Text className='text-neutral-400 text-xs uppercase tracking-wider'>
+            {history.length > 0 ? "Playing from queue" : "Up next"}
+          </Text>
+        </View>
+      }
+      ListEmptyComponent={
+        <View className='flex-1 items-center justify-center py-20'>
+          <Text className='text-neutral-500'>Queue is empty</Text>
+        </View>
+      }
+    />
+  );
+};

app/(auth)/player/_layout.tsx

@@ -1,7 +1,33 @@
 import { Stack } from "expo-router";
+import { useEffect } from "react";
+import { AppState } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 
+import { useOrientation } from "@/hooks/useOrientation";
+import { useSettings } from "@/utils/atoms/settings";
+
 export default function Layout() {
+  const { settings } = useSettings();
+  const { lockOrientation, unlockOrientation } = useOrientation();
+
+  useEffect(() => {
+    if (settings?.defaultVideoOrientation) {
+      lockOrientation(settings.defaultVideoOrientation);
+    }
+
+    // Re-apply orientation lock when app returns to foreground (iOS resets it)
+    const subscription = AppState.addEventListener("change", (nextAppState) => {
+      if (nextAppState === "active" && settings?.defaultVideoOrientation) {
+        lockOrientation(settings.defaultVideoOrientation);
+      }
+    });
+
+    return () => {
+      subscription.remove();
+      unlockOrientation();
+    };
+  }, [settings?.defaultVideoOrientation, lockOrientation, unlockOrientation]);
+
   return (
     <>
       <SystemBars hidden />

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

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

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

@@ -0,0 +1,918 @@
+import { Ionicons } from "@expo/vector-icons";
+import { BlurView } from "expo-blur";
+import { useAtomValue } from "jotai";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  Animated,
+  Easing,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  TVFocusGuideView,
+  View,
+} from "react-native";
+import { Text } from "@/components/common/Text";
+import { TVTabButton, useTVFocusAnimation } from "@/components/tv";
+import useRouter from "@/hooks/useAppRouter";
+import {
+  type SubtitleSearchResult,
+  useRemoteSubtitles,
+} from "@/hooks/useRemoteSubtitles";
+import { tvSubtitleModalAtom } from "@/utils/atoms/tvSubtitleModal";
+import { COMMON_SUBTITLE_LANGUAGES } from "@/utils/opensubtitles/api";
+import { store } from "@/utils/store";
+
+type TabType = "tracks" | "download";
+
+// Track card for subtitle track selection
+const TVTrackCard = React.forwardRef<
+  View,
+  {
+    label: string;
+    sublabel?: string;
+    selected: boolean;
+    hasTVPreferredFocus?: boolean;
+    onPress: () => void;
+  }
+>(({ label, sublabel, selected, hasTVPreferredFocus, onPress }, ref) => {
+  const { focused, handleFocus, handleBlur, animatedStyle } =
+    useTVFocusAnimation({ scaleAmount: 1.05 });
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onPress}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      hasTVPreferredFocus={hasTVPreferredFocus}
+    >
+      <Animated.View
+        style={[
+          styles.trackCard,
+          animatedStyle,
+          {
+            backgroundColor: focused
+              ? "#fff"
+              : selected
+                ? "rgba(255,255,255,0.2)"
+                : "rgba(255,255,255,0.08)",
+          },
+        ]}
+      >
+        <Text
+          style={[
+            styles.trackCardText,
+            { color: focused ? "#000" : "#fff" },
+            (focused || selected) && { fontWeight: "600" },
+          ]}
+          numberOfLines={2}
+        >
+          {label}
+        </Text>
+        {sublabel && (
+          <Text
+            style={[
+              styles.trackCardSublabel,
+              { color: focused ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.5)" },
+            ]}
+            numberOfLines={1}
+          >
+            {sublabel}
+          </Text>
+        )}
+        {selected && !focused && (
+          <View style={styles.checkmark}>
+            <Ionicons
+              name='checkmark'
+              size={16}
+              color='rgba(255,255,255,0.8)'
+            />
+          </View>
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+});
+
+// Language selector card
+const LanguageCard = React.forwardRef<
+  View,
+  {
+    code: string;
+    name: string;
+    selected: boolean;
+    hasTVPreferredFocus?: boolean;
+    onPress: () => void;
+  }
+>(({ code, name, selected, hasTVPreferredFocus, onPress }, ref) => {
+  const { focused, handleFocus, handleBlur, animatedStyle } =
+    useTVFocusAnimation({ scaleAmount: 1.05 });
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onPress}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      hasTVPreferredFocus={hasTVPreferredFocus}
+    >
+      <Animated.View
+        style={[
+          styles.languageCard,
+          animatedStyle,
+          {
+            backgroundColor: focused
+              ? "#fff"
+              : selected
+                ? "rgba(255,255,255,0.2)"
+                : "rgba(255,255,255,0.08)",
+          },
+        ]}
+      >
+        <Text
+          style={[
+            styles.languageCardText,
+            { color: focused ? "#000" : "#fff" },
+            (focused || selected) && { fontWeight: "600" },
+          ]}
+          numberOfLines={1}
+        >
+          {name}
+        </Text>
+        <Text
+          style={[
+            styles.languageCardCode,
+            { color: focused ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.5)" },
+          ]}
+        >
+          {code.toUpperCase()}
+        </Text>
+        {selected && !focused && (
+          <View style={styles.checkmark}>
+            <Ionicons
+              name='checkmark'
+              size={16}
+              color='rgba(255,255,255,0.8)'
+            />
+          </View>
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+});
+
+// Subtitle result card
+const SubtitleResultCard = React.forwardRef<
+  View,
+  {
+    result: SubtitleSearchResult;
+    hasTVPreferredFocus?: boolean;
+    isDownloading?: boolean;
+    onPress: () => void;
+  }
+>(({ result, hasTVPreferredFocus, isDownloading, onPress }, ref) => {
+  const { focused, handleFocus, handleBlur, animatedStyle } =
+    useTVFocusAnimation({ scaleAmount: 1.03 });
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onPress}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      hasTVPreferredFocus={hasTVPreferredFocus}
+      disabled={isDownloading}
+    >
+      <Animated.View
+        style={[
+          styles.resultCard,
+          animatedStyle,
+          {
+            backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.08)",
+            borderColor: focused
+              ? "rgba(255,255,255,0.8)"
+              : "rgba(255,255,255,0.1)",
+          },
+        ]}
+      >
+        {/* Provider/Source badge */}
+        <View
+          style={[
+            styles.providerBadge,
+            {
+              backgroundColor: focused
+                ? "rgba(0,0,0,0.1)"
+                : "rgba(255,255,255,0.1)",
+            },
+          ]}
+        >
+          <Text
+            style={[
+              styles.providerText,
+              { color: focused ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)" },
+            ]}
+          >
+            {result.providerName}
+          </Text>
+        </View>
+
+        {/* Name */}
+        <Text
+          style={[styles.resultName, { color: focused ? "#000" : "#fff" }]}
+          numberOfLines={2}
+        >
+          {result.name}
+        </Text>
+
+        {/* Meta info row */}
+        <View style={styles.resultMeta}>
+          {/* Format */}
+          <Text
+            style={[
+              styles.resultMetaText,
+              { color: focused ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.5)" },
+            ]}
+          >
+            {result.format?.toUpperCase()}
+          </Text>
+
+          {/* Rating if available */}
+          {result.communityRating !== undefined &&
+            result.communityRating > 0 && (
+              <View style={styles.ratingContainer}>
+                <Ionicons
+                  name='star'
+                  size={12}
+                  color={focused ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.5)"}
+                />
+                <Text
+                  style={[
+                    styles.resultMetaText,
+                    {
+                      color: focused
+                        ? "rgba(0,0,0,0.6)"
+                        : "rgba(255,255,255,0.5)",
+                    },
+                  ]}
+                >
+                  {result.communityRating.toFixed(1)}
+                </Text>
+              </View>
+            )}
+
+          {/* Download count if available */}
+          {result.downloadCount !== undefined && result.downloadCount > 0 && (
+            <View style={styles.downloadCountContainer}>
+              <Ionicons
+                name='download-outline'
+                size={12}
+                color={focused ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.5)"}
+              />
+              <Text
+                style={[
+                  styles.resultMetaText,
+                  {
+                    color: focused
+                      ? "rgba(0,0,0,0.6)"
+                      : "rgba(255,255,255,0.5)",
+                  },
+                ]}
+              >
+                {result.downloadCount.toLocaleString()}
+              </Text>
+            </View>
+          )}
+        </View>
+
+        {/* Flags */}
+        <View style={styles.flagsContainer}>
+          {result.isHashMatch && (
+            <View
+              style={[
+                styles.flag,
+                {
+                  backgroundColor: focused
+                    ? "rgba(0,150,0,0.2)"
+                    : "rgba(0,200,0,0.2)",
+                },
+              ]}
+            >
+              <Text style={styles.flagText}>Hash Match</Text>
+            </View>
+          )}
+          {result.hearingImpaired && (
+            <View
+              style={[
+                styles.flag,
+                {
+                  backgroundColor: focused
+                    ? "rgba(0,0,0,0.1)"
+                    : "rgba(255,255,255,0.1)",
+                },
+              ]}
+            >
+              <Ionicons
+                name='ear-outline'
+                size={12}
+                color={focused ? "#000" : "#fff"}
+              />
+            </View>
+          )}
+          {result.aiTranslated && (
+            <View
+              style={[
+                styles.flag,
+                {
+                  backgroundColor: focused
+                    ? "rgba(0,0,150,0.2)"
+                    : "rgba(100,100,255,0.2)",
+                },
+              ]}
+            >
+              <Text style={styles.flagText}>AI</Text>
+            </View>
+          )}
+        </View>
+
+        {/* Loading indicator when downloading */}
+        {isDownloading && (
+          <View style={styles.downloadingOverlay}>
+            <ActivityIndicator size='small' color='#fff' />
+          </View>
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+});
+
+export default function TVSubtitleModal() {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const modalState = useAtomValue(tvSubtitleModalAtom);
+
+  const [activeTab, setActiveTab] = useState<TabType>("tracks");
+  const [selectedLanguage, setSelectedLanguage] = useState("eng");
+  const [downloadingId, setDownloadingId] = useState<string | null>(null);
+  const [hasSearchedThisSession, setHasSearchedThisSession] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [isTabContentReady, setIsTabContentReady] = useState(false);
+  const firstTrackRef = useRef<View>(null);
+
+  const overlayOpacity = useRef(new Animated.Value(0)).current;
+  const sheetTranslateY = useRef(new Animated.Value(300)).current;
+
+  const {
+    hasOpenSubtitlesApiKey,
+    isSearching,
+    searchError,
+    searchResults,
+    search,
+    downloadAsync,
+    reset,
+  } = useRemoteSubtitles({
+    itemId: modalState?.item?.Id ?? "",
+    item: modalState?.item ?? ({} as any),
+    mediaSourceId: modalState?.mediaSourceId,
+  });
+
+  const resetRef = useRef(reset);
+  resetRef.current = reset;
+
+  const subtitleTracks = modalState?.subtitleTracks ?? [];
+  const currentSubtitleIndex = modalState?.currentSubtitleIndex ?? -1;
+
+  const initialSelectedTrackIndex = useMemo(() => {
+    if (currentSubtitleIndex === -1) return 0;
+    const trackIdx = subtitleTracks.findIndex(
+      (t) => t.Index === currentSubtitleIndex,
+    );
+    return trackIdx >= 0 ? trackIdx + 1 : 0;
+  }, [subtitleTracks, currentSubtitleIndex]);
+
+  // Animate in on mount
+  useEffect(() => {
+    overlayOpacity.setValue(0);
+    sheetTranslateY.setValue(300);
+
+    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);
+  }, [overlayOpacity, sheetTranslateY]);
+
+  useEffect(() => {
+    if (activeTab === "download" && !hasSearchedThisSession && modalState) {
+      search({ language: selectedLanguage });
+      setHasSearchedThisSession(true);
+    }
+  }, [activeTab, hasSearchedThisSession, search, selectedLanguage, modalState]);
+
+  useEffect(() => {
+    if (isReady) {
+      setIsTabContentReady(false);
+      const timer = setTimeout(() => setIsTabContentReady(true), 50);
+      return () => clearTimeout(timer);
+    }
+    setIsTabContentReady(false);
+  }, [activeTab, isReady]);
+
+  const handleClose = useCallback(() => {
+    store.set(tvSubtitleModalAtom, null);
+    router.back();
+  }, [router]);
+
+  const handleLanguageSelect = useCallback(
+    (code: string) => {
+      setSelectedLanguage(code);
+      search({ language: code });
+    },
+    [search],
+  );
+
+  const handleTrackSelect = useCallback(
+    (index: number) => {
+      modalState?.onSubtitleIndexChange(index);
+      handleClose();
+    },
+    [modalState, handleClose],
+  );
+
+  const handleDownload = useCallback(
+    async (result: SubtitleSearchResult) => {
+      setDownloadingId(result.id);
+
+      try {
+        const downloadResult = await downloadAsync(result);
+
+        if (downloadResult.type === "server") {
+          modalState?.onServerSubtitleDownloaded?.();
+        } else if (downloadResult.type === "local" && downloadResult.path) {
+          modalState?.onLocalSubtitleDownloaded?.(downloadResult.path);
+        }
+
+        handleClose();
+      } catch (error) {
+        console.error("Failed to download subtitle:", error);
+      } finally {
+        setDownloadingId(null);
+      }
+    },
+    [downloadAsync, modalState, handleClose],
+  );
+
+  const displayLanguages = useMemo(
+    () => COMMON_SUBTITLE_LANGUAGES.slice(0, 16),
+    [],
+  );
+
+  const trackOptions = useMemo(() => {
+    const noneOption = {
+      label: t("item_card.subtitles.none"),
+      sublabel: undefined as string | undefined,
+      value: -1,
+      selected: currentSubtitleIndex === -1,
+    };
+    const options = subtitleTracks.map((track) => ({
+      label:
+        track.DisplayTitle || `${track.Language || "Unknown"} (${track.Codec})`,
+      sublabel: track.Codec?.toUpperCase(),
+      value: track.Index!,
+      selected: track.Index === currentSubtitleIndex,
+    }));
+    return [noneOption, ...options];
+  }, [subtitleTracks, currentSubtitleIndex, t]);
+
+  if (!modalState) {
+    return null;
+  }
+
+  return (
+    <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
+      <Animated.View
+        style={[
+          styles.sheetContainer,
+          { transform: [{ translateY: sheetTranslateY }] },
+        ]}
+      >
+        <BlurView intensity={90} tint='dark' style={styles.blurContainer}>
+          <TVFocusGuideView
+            autoFocus
+            trapFocusUp
+            trapFocusDown
+            trapFocusLeft
+            trapFocusRight
+            style={styles.content}
+          >
+            {/* Header with tabs */}
+            <View style={styles.header}>
+              <Text style={styles.title}>
+                {t("item_card.subtitles.label") || "Subtitles"}
+              </Text>
+
+              {/* Tab bar */}
+              <View style={styles.tabRow}>
+                <TVTabButton
+                  label={t("item_card.subtitles.tracks") || "Tracks"}
+                  active={activeTab === "tracks"}
+                  onSelect={() => setActiveTab("tracks")}
+                />
+                <TVTabButton
+                  label={t("player.download") || "Download"}
+                  active={activeTab === "download"}
+                  onSelect={() => setActiveTab("download")}
+                />
+              </View>
+            </View>
+
+            {/* Tracks Tab Content */}
+            {activeTab === "tracks" && isTabContentReady && (
+              <View style={styles.section}>
+                <ScrollView
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  style={styles.tracksScroll}
+                  contentContainerStyle={styles.tracksScrollContent}
+                >
+                  {trackOptions.map((option, index) => (
+                    <TVTrackCard
+                      key={option.value}
+                      ref={
+                        index === initialSelectedTrackIndex
+                          ? firstTrackRef
+                          : undefined
+                      }
+                      label={option.label}
+                      sublabel={option.sublabel}
+                      selected={option.selected}
+                      hasTVPreferredFocus={index === initialSelectedTrackIndex}
+                      onPress={() => handleTrackSelect(option.value)}
+                    />
+                  ))}
+                </ScrollView>
+              </View>
+            )}
+
+            {/* Download Tab Content */}
+            {activeTab === "download" && isTabContentReady && (
+              <>
+                {/* Language Selector */}
+                <View style={styles.section}>
+                  <Text style={styles.sectionTitle}>
+                    {t("player.language") || "Language"}
+                  </Text>
+                  <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    style={styles.languageScroll}
+                    contentContainerStyle={styles.languageScrollContent}
+                  >
+                    {displayLanguages.map((lang, index) => (
+                      <LanguageCard
+                        key={lang.code}
+                        code={lang.code}
+                        name={lang.name}
+                        selected={selectedLanguage === lang.code}
+                        hasTVPreferredFocus={
+                          index === 0 &&
+                          (!searchResults || searchResults.length === 0)
+                        }
+                        onPress={() => handleLanguageSelect(lang.code)}
+                      />
+                    ))}
+                  </ScrollView>
+                </View>
+
+                {/* Results Section */}
+                <View style={styles.section}>
+                  <Text style={styles.sectionTitle}>
+                    {t("player.results") || "Results"}
+                    {searchResults && ` (${searchResults.length})`}
+                  </Text>
+
+                  {/* Loading state */}
+                  {isSearching && (
+                    <View style={styles.loadingContainer}>
+                      <ActivityIndicator size='small' color='#fff' />
+                    </View>
+                  )}
+
+                  {/* Error state */}
+                  {searchError && !isSearching && (
+                    <View style={styles.errorContainer}>
+                      <Ionicons
+                        name='alert-circle-outline'
+                        size={32}
+                        color='rgba(255,100,100,0.8)'
+                      />
+                      <Text style={styles.errorText}>
+                        {t("player.search_failed") || "Search failed"}
+                      </Text>
+                      <Text style={styles.errorHint}>
+                        {!hasOpenSubtitlesApiKey
+                          ? t("player.no_subtitle_provider") ||
+                            "No subtitle provider configured on server"
+                          : String(searchError)}
+                      </Text>
+                    </View>
+                  )}
+
+                  {/* No results */}
+                  {searchResults &&
+                    searchResults.length === 0 &&
+                    !isSearching &&
+                    !searchError && (
+                      <View style={styles.emptyContainer}>
+                        <Ionicons
+                          name='document-text-outline'
+                          size={32}
+                          color='rgba(255,255,255,0.4)'
+                        />
+                        <Text style={styles.emptyText}>
+                          {t("player.no_subtitles_found") ||
+                            "No subtitles found"}
+                        </Text>
+                      </View>
+                    )}
+
+                  {/* Results list */}
+                  {searchResults &&
+                    searchResults.length > 0 &&
+                    !isSearching && (
+                      <ScrollView
+                        horizontal
+                        showsHorizontalScrollIndicator={false}
+                        style={styles.resultsScroll}
+                        contentContainerStyle={styles.resultsScrollContent}
+                      >
+                        {searchResults.map((result, index) => (
+                          <SubtitleResultCard
+                            key={result.id}
+                            result={result}
+                            hasTVPreferredFocus={index === 0}
+                            isDownloading={downloadingId === result.id}
+                            onPress={() => handleDownload(result)}
+                          />
+                        ))}
+                      </ScrollView>
+                    )}
+                </View>
+
+                {/* API Key hint if no fallback available */}
+                {!hasOpenSubtitlesApiKey && (
+                  <View style={styles.apiKeyHint}>
+                    <Ionicons
+                      name='information-circle-outline'
+                      size={16}
+                      color='rgba(255,255,255,0.4)'
+                    />
+                    <Text style={styles.apiKeyHintText}>
+                      {t("player.add_opensubtitles_key_hint") ||
+                        "Add OpenSubtitles API key in settings for client-side fallback"}
+                    </Text>
+                  </View>
+                )}
+              </>
+            )}
+          </TVFocusGuideView>
+        </BlurView>
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    justifyContent: "flex-end",
+  },
+  sheetContainer: {
+    maxHeight: "70%",
+  },
+  blurContainer: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    overflow: "hidden",
+  },
+  content: {
+    paddingTop: 24,
+    paddingBottom: 48,
+  },
+  header: {
+    paddingHorizontal: 48,
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "600",
+    color: "#fff",
+    marginBottom: 16,
+  },
+  tabRow: {
+    flexDirection: "row",
+    gap: 24,
+  },
+  section: {
+    marginBottom: 20,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "rgba(255,255,255,0.5)",
+    textTransform: "uppercase",
+    letterSpacing: 1,
+    marginBottom: 12,
+    paddingHorizontal: 48,
+  },
+  tracksScroll: {
+    overflow: "visible",
+  },
+  tracksScrollContent: {
+    paddingHorizontal: 48,
+    paddingVertical: 8,
+    gap: 12,
+  },
+  trackCard: {
+    width: 180,
+    height: 80,
+    borderRadius: 14,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 12,
+  },
+  trackCardText: {
+    fontSize: 16,
+    textAlign: "center",
+  },
+  trackCardSublabel: {
+    fontSize: 12,
+    marginTop: 2,
+  },
+  checkmark: {
+    position: "absolute",
+    top: 8,
+    right: 8,
+  },
+  languageScroll: {
+    overflow: "visible",
+  },
+  languageScrollContent: {
+    paddingHorizontal: 48,
+    paddingVertical: 8,
+    gap: 10,
+  },
+  languageCard: {
+    width: 120,
+    height: 60,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 12,
+  },
+  languageCardText: {
+    fontSize: 15,
+    fontWeight: "500",
+  },
+  languageCardCode: {
+    fontSize: 11,
+    marginTop: 2,
+  },
+  resultsScroll: {
+    overflow: "visible",
+  },
+  resultsScrollContent: {
+    paddingHorizontal: 48,
+    paddingVertical: 8,
+    gap: 12,
+  },
+  resultCard: {
+    width: 220,
+    height: 130,
+    borderRadius: 14,
+    padding: 14,
+    borderWidth: 1,
+    overflow: "hidden",
+  },
+  providerBadge: {
+    alignSelf: "flex-start",
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 6,
+    marginBottom: 8,
+  },
+  providerText: {
+    fontSize: 11,
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+  resultName: {
+    fontSize: 14,
+    fontWeight: "500",
+    marginBottom: 8,
+    lineHeight: 18,
+  },
+  resultMeta: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    marginBottom: 8,
+  },
+  resultMetaText: {
+    fontSize: 12,
+  },
+  ratingContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3,
+  },
+  downloadCountContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3,
+  },
+  flagsContainer: {
+    flexDirection: "row",
+    gap: 6,
+    flexWrap: "wrap",
+  },
+  flag: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  flagText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: "#fff",
+  },
+  downloadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    borderRadius: 14,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  loadingContainer: {
+    paddingVertical: 20,
+    alignItems: "center",
+  },
+  errorContainer: {
+    paddingVertical: 40,
+    paddingHorizontal: 48,
+    alignItems: "center",
+  },
+  errorText: {
+    color: "rgba(255,100,100,0.9)",
+    marginTop: 8,
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  errorHint: {
+    color: "rgba(255,255,255,0.5)",
+    marginTop: 4,
+    fontSize: 13,
+    textAlign: "center",
+  },
+  emptyContainer: {
+    paddingVertical: 40,
+    alignItems: "center",
+  },
+  emptyText: {
+    color: "rgba(255,255,255,0.5)",
+    marginTop: 8,
+    fontSize: 14,
+  },
+  apiKeyHint: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 48,
+    paddingTop: 8,
+  },
+  apiKeyHintText: {
+    color: "rgba(255,255,255,0.4)",
+    fontSize: 12,
+  },
+});

app/_layout.tsx

@@ -1,18 +1,31 @@
 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 { Platform } from "react-native";
+import { GlobalModal } from "@/components/GlobalModal";
+
 import i18n from "@/i18n";
 import { DownloadProvider } from "@/providers/DownloadProvider";
+import { GlobalModalProvider } from "@/providers/GlobalModalProvider";
+import { IntroSheetProvider } from "@/providers/IntroSheetProvider";
 import {
   apiAtom,
   getOrSetDeviceId,
-  getTokenFromStorage,
   JellyfinProvider,
 } from "@/providers/JellyfinProvider";
+import { MusicPlayerProvider } from "@/providers/MusicPlayerProvider";
+import { NetworkStatusProvider } from "@/providers/NetworkStatusProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
+import { ServerUrlProvider } from "@/providers/ServerUrlProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
-import { type Settings, useSettings } from "@/utils/atoms/settings";
+import { useSettings } from "@/utils/atoms/settings";
 import {
   BACKGROUND_FETCH_TASK,
   BACKGROUND_FETCH_TASK_SESSIONS,
@@ -26,44 +39,30 @@ import {
 } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
 
-const BackGroundDownloader = !Platform.isTV
-  ? require("@kesha-antonov/react-native-background-downloader")
-  : null;
-
-import { DarkTheme, ThemeProvider } from "@react-navigation/native";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
-import * as BackgroundTask from "expo-background-task";
-
-import * as Device from "expo-device";
-import * as FileSystem from "expo-file-system";
-
 const Notifications = !Platform.isTV ? require("expo-notifications") : null;
 
-import { getLocales } from "expo-localization";
-import { router, Stack, useSegments } from "expo-router";
-import * as SplashScreen from "expo-splash-screen";
-
-import * as TaskManager from "expo-task-manager";
-import { Provider as JotaiProvider } from "jotai";
-import { useEffect, useRef, useState } from "react";
-import { I18nextProvider } from "react-i18next";
-import { Appearance, AppState } from "react-native";
-import { SystemBars } from "react-native-edge-to-edge";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
-import "react-native-reanimated";
 import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
+import { getLocales } from "expo-localization";
 import type { EventSubscription } from "expo-modules-core";
 import type {
   Notification,
   NotificationResponse,
 } from "expo-notifications/build/Notifications.types";
 import type { ExpoPushToken } from "expo-notifications/build/Tokens.types";
-import { useAtom } from "jotai";
-import { Toaster } from "sonner-native";
+import { Stack, useSegments } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+import * as TaskManager from "expo-task-manager";
+import { Provider as JotaiProvider, useAtom } from "jotai";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { I18nextProvider } from "react-i18next";
+import { Appearance } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import useRouter from "@/hooks/useAppRouter";
 import { userAtom } from "@/providers/JellyfinProvider";
-import { store } from "@/utils/store";
+import { store as jotaiStore, store } from "@/utils/store";
+import "react-native-reanimated";
+import { Toaster } from "sonner-native";
 
 if (!Platform.isTV) {
   Notifications.setNotificationHandler({
@@ -84,14 +83,9 @@ SplashScreen.setOptions({
   fade: true,
 });
 
-function redirect(notification: typeof Notifications.Notification) {
-  const url = notification.request.content.data?.url;
-  if (url) {
-    router.push(url);
-  }
-}
-
 function useNotificationObserver() {
+  const router = useRouter();
+
   useEffect(() => {
     if (Platform.isTV) return;
 
@@ -102,14 +96,17 @@ function useNotificationObserver() {
         if (!isMounted || !response?.notification) {
           return;
         }
-        redirect(response?.notification);
+        const url = response?.notification.request.content.data?.url;
+        if (url) {
+          router.push(url);
+        }
       },
     );
 
     return () => {
       isMounted = false;
     };
-  }, []);
+  }, [router]);
 }
 
 if (!Platform.isTV) {
@@ -131,24 +128,7 @@ if (!Platform.isTV) {
 
   TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
     console.log("TaskManager ~ trigger");
-
-    const settingsData = storage.getString("settings");
-
-    if (!settingsData) return BackgroundTask.BackgroundTaskResult.Failed;
-
-    const settings: Partial<Settings> = JSON.parse(settingsData);
-
-    if (!settings?.autoDownload)
-      return BackgroundTask.BackgroundTaskResult.Failed;
-
-    const token = getTokenFromStorage();
-    const deviceId = getOrSetDeviceId();
-    const baseDirectory = FileSystem.documentDirectory;
-
-    if (!token || !deviceId || !baseDirectory)
-      return BackgroundTask.BackgroundTaskResult.Failed;
-
-    // Be sure to return the successful result type!
+    // Background fetch task placeholder - currently unused
     return BackgroundTask.BackgroundTaskResult.Success;
   });
 }
@@ -199,7 +179,7 @@ export default function RootLayout() {
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <JotaiProvider>
+      <JotaiProvider store={jotaiStore}>
         <ActionSheetProvider>
           <I18nextProvider i18n={i18n}>
             <Layout />
@@ -210,15 +190,39 @@ export default function RootLayout() {
   );
 }
 
+// Set up online manager for network-aware query behavior
+onlineManager.setEventListener((setOnline) => {
+  return NetInfo.addEventListener((state) => {
+    setOnline(!!state.isConnected);
+  });
+});
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 0,
-      refetchOnMount: true,
-      refetchOnReconnect: true,
-      refetchOnWindowFocus: true,
-      retryOnMount: true,
+      staleTime: 0, // Always stale - triggers background refetch on mount
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours - keep in cache for offline
+      networkMode: "offlineFirst", // Return cache first, refetch if online
+      refetchOnMount: true, // Refetch when component mounts
+      refetchOnReconnect: true, // Refetch when network reconnects
+      refetchOnWindowFocus: false, // Not needed for mobile
+      retry: (failureCount) => {
+        if (!onlineManager.isOnline()) return false;
+        return failureCount < 3;
+      },
     },
+    mutations: {
+      networkMode: "online", // Only run mutations when online
+    },
+  },
+});
+
+// Create MMKV-based persister for offline support
+const mmkvPersister = createSyncStoragePersister({
+  storage: {
+    getItem: (key) => storage.getString(key) ?? null,
+    setItem: (key, value) => storage.set(key, value),
+    removeItem: (key) => storage.remove(key),
   },
 });
 
@@ -226,8 +230,8 @@ function Layout() {
   const { settings } = useSettings();
   const [user] = useAtom(userAtom);
   const [api] = useAtom(apiAtom);
-  const appState = useRef(AppState.currentState);
-  const segments = useSegments();
+  const _segments = useSegments();
+  const router = useRouter();
 
   useEffect(() => {
     i18n.changeLanguage(
@@ -256,7 +260,7 @@ function Layout() {
     } else console.log("No token available");
   }, [api, expoPushToken, user]);
 
-  async function registerNotifications() {
+  const registerNotifications = useCallback(async () => {
     if (Platform.OS === "android") {
       console.log("Setting android notification channel 'default'");
       await Notifications?.setNotificationChannelAsync("default", {
@@ -287,11 +291,21 @@ function Layout() {
 
     // only create push token for real devices (pointless for emulators)
     if (Device.isDevice) {
-      Notifications?.getExpoPushTokenAsync()
-        .then((token: ExpoPushToken) => token && setExpoPushToken(token))
-        .catch((reason: any) => console.log("Failed to get token", reason));
+      Notifications?.getExpoPushTokenAsync({
+        projectId: "e79219d1-797f-4fbe-9fa1-cfd360690a68",
+      })
+        .then((token: ExpoPushToken) => {
+          if (token) {
+            console.log("Expo push token obtained:", token.data);
+            setExpoPushToken(token);
+          }
+        })
+        .catch((reason: any) => {
+          console.error("Failed to get push token:", reason);
+          writeErrorLog("Failed to get Expo push token", reason);
+        });
     }
-  }
+  }, [user]);
 
   useEffect(() => {
     if (!Platform.isTV) {
@@ -310,9 +324,6 @@ function Layout() {
       responseListener.current =
         Notifications?.addNotificationResponseReceivedListener(
           (response: NotificationResponse) => {
-            // redirect if internal notification
-            redirect(response?.notification);
-
             // Currently the notifications supported by the plugin will send data for deep links.
             const { title, data } = response.notification.request.content;
             writeInfoLog(`Notification ${title} opened`, data);
@@ -355,120 +366,113 @@ function Layout() {
         responseListener.current?.remove();
       };
     }
-  }, [user, api]);
-
-  useEffect(() => {
-    if (Platform.isTV) {
-      return;
-    }
-
-    if (segments.includes("direct-player" as never)) {
-      if (
-        !settings.followDeviceOrientation &&
-        settings.defaultVideoOrientation
-      ) {
-        ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
-      }
-      return;
-    }
-
-    if (settings.followDeviceOrientation === true) {
-      ScreenOrientation.unlockAsync();
-    } else {
-      ScreenOrientation.lockAsync(
-        ScreenOrientation.OrientationLock.PORTRAIT_UP,
-      );
-    }
-  }, [
-    settings.followDeviceOrientation,
-    settings.defaultVideoOrientation,
-    segments,
-  ]);
-
-  useEffect(() => {
-    if (Platform.isTV) {
-      return;
-    }
-
-    const subscription = AppState.addEventListener("change", (nextAppState) => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === "active"
-      ) {
-        BackGroundDownloader.checkForExistingDownloads().catch(
-          (error: unknown) => {
-            writeErrorLog("Failed to resume background downloads", error);
-          },
-        );
-      }
-    });
-
-    BackGroundDownloader.checkForExistingDownloads().catch((error: unknown) => {
-      writeErrorLog("Failed to resume background downloads", error);
-    });
-    return () => {
-      subscription.remove();
-    };
-  }, []);
+  }, [user]);
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{
+        persister: mmkvPersister,
+        maxAge: 1000 * 60 * 60 * 24, // 24 hours max cache age
+        dehydrateOptions: {
+          shouldDehydrateQuery: (query) => {
+            // Only persist successful queries
+            return query.state.status === "success";
+          },
+        },
+      }}
+    >
       <JellyfinProvider>
-        <PlaySettingsProvider>
-          <LogProvider>
-            <WebSocketProvider>
-              <DownloadProvider>
-                <BottomSheetModalProvider>
-                  <SystemBars style='light' hidden={false} />
-                  <ThemeProvider value={DarkTheme}>
-                    <Stack initialRouteName='(auth)/(tabs)'>
-                      <Stack.Screen
-                        name='(auth)/(tabs)'
-                        options={{
-                          headerShown: false,
-                          title: "",
-                          header: () => null,
-                        }}
-                      />
-                      <Stack.Screen
-                        name='(auth)/player'
-                        options={{
-                          headerShown: false,
-                          title: "",
-                          header: () => null,
-                        }}
-                      />
-                      <Stack.Screen
-                        name='login'
-                        options={{
-                          headerShown: true,
-                          title: "",
-                          headerTransparent: true,
-                        }}
-                      />
-                      <Stack.Screen name='+not-found' />
-                    </Stack>
-                    <Toaster
-                      duration={4000}
-                      toastOptions={{
-                        style: {
-                          backgroundColor: "#262626",
-                          borderColor: "#363639",
-                          borderWidth: 1,
-                        },
-                        titleStyle: {
-                          color: "white",
-                        },
-                      }}
-                      closeButton
-                    />
-                  </ThemeProvider>
-                </BottomSheetModalProvider>
-              </DownloadProvider>
-            </WebSocketProvider>
-          </LogProvider>
-        </PlaySettingsProvider>
+        <ServerUrlProvider>
+          <NetworkStatusProvider>
+            <PlaySettingsProvider>
+              <LogProvider>
+                <WebSocketProvider>
+                  <DownloadProvider>
+                    <MusicPlayerProvider>
+                      <GlobalModalProvider>
+                        <BottomSheetModalProvider>
+                          <IntroSheetProvider>
+                            <ThemeProvider value={DarkTheme}>
+                              <SystemBars style='light' hidden={false} />
+                              <Stack initialRouteName='(auth)/(tabs)'>
+                                <Stack.Screen
+                                  name='(auth)/(tabs)'
+                                  options={{
+                                    headerShown: false,
+                                    title: "",
+                                    header: () => null,
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/player'
+                                  options={{
+                                    headerShown: false,
+                                    title: "",
+                                    header: () => null,
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/now-playing'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "modal",
+                                    gestureEnabled: true,
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='login'
+                                  options={{
+                                    headerShown: true,
+                                    title: "",
+                                    headerTransparent: Platform.OS === "ios",
+                                  }}
+                                />
+                                <Stack.Screen name='+not-found' />
+                                <Stack.Screen
+                                  name='(auth)/tv-option-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/tv-subtitle-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                              </Stack>
+                              <Toaster
+                                duration={4000}
+                                toastOptions={{
+                                  style: {
+                                    backgroundColor: "#262626",
+                                    borderColor: "#363639",
+                                    borderWidth: 1,
+                                  },
+                                  titleStyle: {
+                                    color: "white",
+                                  },
+                                }}
+                                closeButton
+                              />
+                              {!Platform.isTV && <GlobalModal />}
+                            </ThemeProvider>
+                          </IntroSheetProvider>
+                        </BottomSheetModalProvider>
+                      </GlobalModalProvider>
+                    </MusicPlayerProvider>
+                  </DownloadProvider>
+                </WebSocketProvider>
+              </LogProvider>
+            </PlaySettingsProvider>
+          </NetworkStatusProvider>
+        </ServerUrlProvider>
       </JellyfinProvider>
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   );
 }

app/login.tsx

@@ -1,504 +1,13 @@
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import type { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
-import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation } from "expo-router";
-import { t } from "i18next";
-import { useAtomValue } from "jotai";
-import type React from "react";
-import { useCallback, useEffect, useState } from "react";
-import {
-  Alert,
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  SafeAreaView,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { z } from "zod";
-import { Button } from "@/components/Button";
-import { Input } from "@/components/common/Input";
-import { Text } from "@/components/common/Text";
-import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
-import { PreviousServersList } from "@/components/PreviousServersList";
-import { Colors } from "@/constants/Colors";
-import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
+import { Platform } from "react-native";
+import { Login } from "@/components/login/Login";
+import { TVLogin } from "@/components/login/TVLogin";
 
-const CredentialsSchema = z.object({
-  username: z.string().min(1, t("login.username_required")),
-});
-
-const Login: React.FC = () => {
-  const api = useAtomValue(apiAtom);
-  const navigation = useNavigation();
-  const params = useLocalSearchParams();
-  const { setServer, login, removeServer, initiateQuickConnect } =
-    useJellyfin();
-
-  const {
-    apiUrl: _apiUrl,
-    username: _username,
-    password: _password,
-  } = params as { apiUrl: string; username: string; password: string };
-
-  const [loadingServerCheck, setLoadingServerCheck] = useState<boolean>(false);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [serverURL, setServerURL] = useState<string>(_apiUrl);
-  const [serverName, setServerName] = useState<string>("");
-  const [credentials, setCredentials] = useState<{
-    username: string;
-    password: string;
-  }>({
-    username: _username,
-    password: _password,
-  });
-
-  /**
-   * A way to auto login based on a link
-   */
-  useEffect(() => {
-    (async () => {
-      if (_apiUrl) {
-        await setServer({
-          address: _apiUrl,
-        });
-
-        setTimeout(() => {
-          if (_username && _password) {
-            setCredentials({ username: _username, password: _password });
-            login(_username, _password);
-          }
-        }, 300);
-      }
-    })();
-  }, [_apiUrl, _username, _password]);
-
-  useEffect(() => {
-    navigation.setOptions({
-      headerTitle: serverName,
-      headerLeft: () =>
-        api?.basePath ? (
-          <TouchableOpacity
-            onPress={() => {
-              removeServer();
-            }}
-            className='flex flex-row items-center'
-          >
-            <Ionicons name='chevron-back' size={18} color={Colors.primary} />
-            <Text className='ml-2 text-purple-600'>
-              {t("login.change_server")}
-            </Text>
-          </TouchableOpacity>
-        ) : null,
-    });
-  }, [serverName, navigation, api?.basePath]);
-
-  const handleLogin = async () => {
-    Keyboard.dismiss();
-
-    setLoading(true);
-    try {
-      const result = CredentialsSchema.safeParse(credentials);
-      if (result.success) {
-        await login(credentials.username, credentials.password);
-      }
-    } catch (error) {
-      if (error instanceof Error) {
-        Alert.alert(t("login.connection_failed"), error.message);
-      } else {
-        Alert.alert(
-          t("login.connection_failed"),
-          t("login.an_unexpected_error_occured"),
-        );
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  /**
-   * Checks the availability and validity of a Jellyfin server URL.
-   *
-   * This function attempts to connect to a Jellyfin server using the provided URL.
-   * It tries both HTTPS and HTTP protocols, with a timeout to handle long 404 responses.
-   *
-   * @param {string} url - The base URL of the Jellyfin server to check.
-   * @returns {Promise<string | undefined>} A Promise that resolves to:
-   *   - The full URL (including protocol) if a valid Jellyfin server is found.
-   *   - undefined if no valid server is found at the given URL.
-   *
-   * Side effects:
-   * - Sets loadingServerCheck state to true at the beginning and false at the end.
-   * - Logs errors and timeout information to the console.
-   */
-  const checkUrl = useCallback(async (url: string) => {
-    setLoadingServerCheck(true);
-    const baseUrl = url.replace(/^https?:\/\//i, "");
-    const protocols = ["https", "http"];
-    try {
-      return checkHttp(baseUrl, protocols);
-    } catch (e) {
-      if (e instanceof Error && e.message === "Server too old") {
-        throw e;
-      }
-      return undefined;
-    } finally {
-      setLoadingServerCheck(false);
-    }
-  }, []);
-
-  async function checkHttp(baseUrl: string, protocols: string[]) {
-    for (const protocol of protocols) {
-      try {
-        const response = await fetch(
-          `${protocol}://${baseUrl}/System/Info/Public`,
-          {
-            mode: "cors",
-          },
-        );
-        if (response.ok) {
-          const data = (await response.json()) as PublicSystemInfo;
-          const serverVersion = data.Version?.split(".");
-          if (serverVersion && +serverVersion[0] <= 10) {
-            if (+serverVersion[1] < 10) {
-              Alert.alert(
-                t("login.too_old_server_text"),
-                t("login.too_old_server_description"),
-              );
-              throw new Error("Server too old");
-            }
-          }
-          setServerName(data.ServerName || "");
-          return `${protocol}://${baseUrl}`;
-        }
-      } catch (e) {
-        if (e instanceof Error && e.message === "Server too old") {
-          throw e;
-        }
-      }
-    }
-    return undefined;
+const LoginPage: React.FC = () => {
+  if (Platform.isTV) {
+    return <TVLogin />;
   }
-  /**
-   * 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 () => {
-    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({ ...credentials, username: text })
-                }
-                value={credentials.username}
-                keyboardType='default'
-                returnKeyType='done'
-                autoCapitalize='none'
-                textContentType='oneTimeCode'
-                clearButtonMode='while-editing'
-                maxLength={500}
-                extraClassName='mb-4'
-              />
-
-              {/* Password */}
-              <Input
-                placeholder={t("login.password_placeholder")}
-                onChangeText={(text: string) =>
-                  setCredentials({ ...credentials, password: text })
-                }
-                value={credentials.password}
-                secureTextEntry
-                keyboardType='default'
-                returnKeyType='done'
-                autoCapitalize='none'
-                textContentType='password'
-                clearButtonMode='while-editing'
-                maxLength={500}
-                extraClassName='mb-4'
-              />
-
-              <View className='mt-4'>
-                <Button onPress={handleLogin}>{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}
-              />
-
-              {/* Full-width primary button */}
-              <View className='mt-4'>
-                <Button
-                  onPress={async () => {
-                    await handleConnect(serverURL);
-                  }}
-                >
-                  {t("server.connect_button")}
-                </Button>
-              </View>
-
-              {/* Lists stay full width but inside max width container */}
-              <View className='mt-2'>
-                <JellyfinServerDiscovery
-                  onServerSelect={async (server: any) => {
-                    setServerURL(server.address);
-                    if (server.serverName) setServerName(server.serverName);
-                    await handleConnect(server.address);
-                  }}
-                />
-                <PreviousServersList
-                  onServerSelect={async (s: any) => {
-                    await handleConnect(s.address);
-                  }}
-                />
-              </View>
-            </View>
-          </View>
-        )}
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  ) : (
-    // Mobile layout
-    <SafeAreaView style={{ flex: 1, paddingBottom: 16 }}>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
-      >
-        {api?.basePath ? (
-          <View className='flex flex-col h-full relative items-center justify-center'>
-            <View className='px-4 -mt-20 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({ ...credentials, username: text })
-                  }
-                  value={credentials.username}
-                  keyboardType='default'
-                  returnKeyType='done'
-                  autoCapitalize='none'
-                  // Changed from username to oneTimeCode because it is a known issue in RN
-                  // https://github.com/facebook/react-native/issues/47106#issuecomment-2521270037
-                  textContentType='oneTimeCode'
-                  clearButtonMode='while-editing'
-                  maxLength={500}
-                />
-
-                <Input
-                  placeholder={t("login.password_placeholder")}
-                  onChangeText={(text) =>
-                    setCredentials({ ...credentials, password: text })
-                  }
-                  value={credentials.password}
-                  secureTextEntry
-                  keyboardType='default'
-                  returnKeyType='done'
-                  autoCapitalize='none'
-                  textContentType='password'
-                  clearButtonMode='while-editing'
-                  maxLength={500}
-                />
-                <View className='flex flex-row items-center justify-between'>
-                  <Button
-                    onPress={handleLogin}
-                    loading={loading}
-                    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 h-full items-center justify-center w-full'>
-            <View className='flex flex-col gap-y-2 px-4 w-full -mt-36'>
-              <Image
-                style={{
-                  width: 100,
-                  height: 100,
-                  marginLeft: -23,
-                  marginBottom: -20,
-                }}
-                source={require("@/assets/images/icon-ios-plain.png")}
-              />
-              <Text className='text-3xl font-bold'>Streamyfin</Text>
-              <Text className='text-neutral-500'>
-                {t("server.enter_url_to_jellyfin_server")}
-              </Text>
-              <Input
-                aria-label='Server URL'
-                placeholder={t("server.server_url_placeholder")}
-                onChangeText={setServerURL}
-                value={serverURL}
-                keyboardType='url'
-                returnKeyType='done'
-                autoCapitalize='none'
-                textContentType='URL'
-                maxLength={500}
-              />
-              <Button
-                loading={loadingServerCheck}
-                disabled={loadingServerCheck}
-                onPress={async () => {
-                  await handleConnect(serverURL);
-                }}
-                className='w-full grow'
-              >
-                {t("server.connect_button")}
-              </Button>
-              <JellyfinServerDiscovery
-                onServerSelect={async (server) => {
-                  setServerURL(server.address);
-                  if (server.serverName) {
-                    setServerName(server.serverName);
-                  }
-                  await handleConnect(server.address);
-                }}
-              />
-              <PreviousServersList
-                onServerSelect={async (s) => {
-                  await handleConnect(s.address);
-                }}
-              />
-            </View>
-          </View>
-        )}
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  );
+  return <Login />;
 };
 
-export default Login;
+export default LoginPage;

assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer1.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 384 415" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.133333,0,0,-0.133333,-110.933,512.698)">
+        <g id="g10">
+            <path id="path88" d="M3547.01,1831.49C3493.38,1822.66 3262.53,1779.28 2992.01,1820.24C2424.16,1906.21 2154.85,2275.8 1882,2420.24C1473.31,2636.6 1060.97,2644.95 832,2592.03L832,1445.92C832,1321.76 863.078,1198.06 925.307,1090.27C1057.09,862.011 1323.38,718.405 1586.6,736.145C1695.48,743.482 1801.3,777.735 1895.64,832.199L3357.51,1676.21C3424.47,1714.87 3482.92,1761.76 3532.01,1815.41L3547.01,1831.49Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2879.19,0,0,2879.19,832.651,2289.93)"><stop offset="0" style="stop-color:rgb(149,41,235);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(98,22,247);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>

assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer2.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 384 415" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.133333,0,0,-0.133333,-110.933,512.698)">
+        <g id="g10">
+            <path id="path66" d="M3357.51,2903.64L1895.64,3747.65C1670.29,3877.76 1412.33,3877.76 1186.98,3747.65C961.629,3617.55 832.648,3394.14 832.648,3133.93L832.648,1445.92C832.648,1185.71 961.629,962.305 1186.98,832.199C1412.33,702.094 1670.29,702.094 1895.64,832.199L3357.51,1676.21C3582.86,1806.31 3711.84,2029.71 3711.84,2289.93C3711.84,2550.14 3582.86,2773.54 3357.51,2903.64ZM1721.48,3213.68L3098.31,2454.7C3163.9,2418.55 3193.45,2364.85 3193.45,2289.93C3193.45,2215 3163.93,2161.32 3098.31,2125.15L1721.48,1366.18C1655.87,1330.01 1596.09,1328.72 1531.21,1366.18C1466.34,1403.63 1436.08,1456.03 1436.08,1530.96L1436.08,3048.89C1436.08,3123.77 1466.35,3176.23 1531.21,3213.68C1596.08,3251.11 1655.89,3249.83 1721.48,3213.68" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2879.19,0,0,2879.19,832.651,2289.93)"><stop offset="0" style="stop-color:rgb(188,74,241);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(227,105,219);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>

assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer3.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 384 415" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g>
+        <g id="g10">
+            <path id="path88" d="M0,319.909L0,234C17.667,234.844 138.649,236.708 195,190C220.441,168.912 271.21,169.515 294.001,178.788C332.576,194.487 378.643,259.549 360,270.644C353.455,277.797 345.662,284.049 336.734,289.204L141.818,401.738C129.24,409 115.13,413.567 100.613,414.546C65.517,416.911 30.012,397.763 12.441,367.329C4.144,352.957 0,336.464 0,319.909Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2879.19,0,0,2879.19,832.651,2289.93)"><stop offset="0" style="stop-color:rgb(225,102,222);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(204,88,233);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>

assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer4.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 384 415" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.133333,0,0,-0.133333,-110.933,512.698)">
+        <g id="g10">
+            <path id="path28" d="M1427.29,1523.37C1427.29,1447.7 1457.85,1394.77 1523.38,1356.94C1588.91,1319.11 1649.28,1320.41 1715.55,1356.94L3106.14,2123.5C3172.42,2160.03 3202.24,2214.25 3202.24,2289.93C3202.24,2365.6 3172.39,2419.83 3106.14,2456.35L1715.55,3222.91C1649.31,3259.43 1588.89,3260.73 1523.38,3222.91C1457.87,3185.1 1427.29,3132.11 1427.29,3056.48L1427.29,1523.37" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.17673e-13,-1921.74,1921.74,1.17673e-13,2314.76,3250.79)"><stop offset="0" style="stop-color:rgb(93,17,250);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(143,40,236);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>

assets/images/icon-ios-liquid-glass.icon/icon.json

@@ -0,0 +1,184 @@
+{
+  "fill": {
+    "solid": "display-p3:0.18039,0.18039,0.18039,1.00000"
+  },
+  "groups": [
+    {
+      "blur-material": 0.3,
+      "layers": [
+        {
+          "fill-specializations": [
+            {
+              "value": "none"
+            },
+            {
+              "appearance": "tinted",
+              "value": {
+                "automatic-gradient": "display-p3:0.76482,0.76482,0.76482,0.84903"
+              }
+            }
+          ],
+          "glass": true,
+          "hidden": false,
+          "image-name": "streamyfin_logo_layer1.svg",
+          "name": "streamyfin_logo_layer1"
+        }
+      ],
+      "opacity": 1,
+      "position": {
+        "scale": 1.7,
+        "translation-in-points": [30, 0]
+      },
+      "shadow": {
+        "kind": "none",
+        "opacity": 1
+      },
+      "specular": true,
+      "translucency": {
+        "enabled": true,
+        "value": 0.6
+      }
+    },
+    {
+      "blend-mode": "normal",
+      "blur-material": 0.8,
+      "hidden": false,
+      "layers": [
+        {
+          "blend-mode": "normal",
+          "fill-specializations": [
+            {
+              "value": "none"
+            },
+            {
+              "appearance": "tinted",
+              "value": {
+                "automatic-gradient": "gray:0.75000,1.00000"
+              }
+            }
+          ],
+          "hidden": false,
+          "image-name": "streamyfin_logo_layer2.svg",
+          "name": "streamyfin_logo_layer2",
+          "opacity": 1,
+          "position": {
+            "scale": 1,
+            "translation-in-points": [0, 0]
+          }
+        }
+      ],
+      "lighting": "individual",
+      "name": "Group",
+      "opacity": 1,
+      "position": {
+        "scale": 1.7,
+        "translation-in-points": [30, -0.01613253252572302]
+      },
+      "shadow": {
+        "kind": "layer-color",
+        "opacity": 0.35
+      },
+      "specular": true,
+      "translucency-specializations": [
+        {
+          "value": {
+            "enabled": true,
+            "value": 0.5
+          }
+        },
+        {
+          "appearance": "tinted",
+          "value": {
+            "enabled": true,
+            "value": 0.8
+          }
+        }
+      ]
+    },
+    {
+      "blend-mode": "normal",
+      "blur-material": 0.5,
+      "layers": [
+        {
+          "fill-specializations": [
+            {
+              "appearance": "tinted",
+              "value": {
+                "automatic-gradient": "gray:0.29000,1.00000"
+              }
+            }
+          ],
+          "glass": true,
+          "hidden": false,
+          "image-name": "streamyfin_logo_layer3.svg",
+          "name": "streamyfin_logo_layer3",
+          "opacity": 0.9
+        }
+      ],
+      "name": "Group",
+      "opacity": 0.8,
+      "position": {
+        "scale": 1.7,
+        "translation-in-points": [30, 0]
+      },
+      "shadow": {
+        "kind": "none",
+        "opacity": 0.5
+      },
+      "specular": true,
+      "translucency": {
+        "enabled": true,
+        "value": 0.7
+      }
+    },
+    {
+      "blur-material": 0.5,
+      "hidden": false,
+      "layers": [
+        {
+          "glass": true,
+          "hidden-specializations": [
+            {
+              "value": false
+            },
+            {
+              "appearance": "tinted",
+              "value": true
+            }
+          ],
+          "image-name": "streamyfin_logo_layer4.svg",
+          "name": "streamyfin_logo_layer4",
+          "opacity-specializations": [
+            {
+              "value": 1
+            },
+            {
+              "appearance": "tinted",
+              "value": 0
+            }
+          ]
+        }
+      ],
+      "lighting": "combined",
+      "name": "Group",
+      "opacity": 0.9,
+      "position": {
+        "scale": 1.7,
+        "translation-in-points": [30, 0]
+      },
+      "shadow": {
+        "kind": "neutral",
+        "opacity": 0.5
+      },
+      "specular": false,
+      "translucency": {
+        "enabled": true,
+        "value": 0.5
+      }
+    }
+  ],
+  "supported-platforms": {
+    "circles": ["watchOS"],
+    "squares": "shared"
+  }
+}