feat(home): add see all navigation from recently added sections

Co-authored-by: Alex Kim <alexkim@Alexs-MacBook-Pro.local>
Co-authored-by: Alex <111128610+Alexk2309@users.noreply.github.com>
Co-authored-by: Simon-Eklundh <simon.eklundh@proton.me>

.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/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

@@ -21,7 +21,7 @@ jobs:
 
     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
@@ -29,12 +29,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 +48,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 +61,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 +76,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: streamyfin-android-phone-apk-${{ env.DATE_TAG }}
           path: |
@@ -92,7 +92,7 @@ jobs:
 
     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
@@ -100,12 +100,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 +119,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 +132,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 +147,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: streamyfin-android-tv-apk-${{ env.DATE_TAG }}
           path: |
@@ -163,7 +163,7 @@ jobs:
 
     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 +171,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') }}
@@ -215,7 +215,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload IPA artifact
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: streamyfin-ios-phone-ipa-${{ env.DATE_TAG }}
           path: build-*.ipa

.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,16 +24,16 @@ jobs:
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
+        uses: github/codeql-action/init@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended,security-and-quality
 
       - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
+        uses: github/codeql-action/autobuild@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
+        uses: github/codeql-action/analyze@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9

.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@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.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,7 +51,7 @@ 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
@@ -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,7 +100,7 @@ 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
@@ -112,7 +112,7 @@ jobs:
           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/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,7 +18,7 @@ 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@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
@@ -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
 

CLAUDE.md

@@ -1,5 +1,7 @@
 # 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

README.md

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

app.config.js

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

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.51.0",
+    "version": "0.52.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -34,7 +34,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 91,
+      "versionCode": 92,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon-android-plain.png",
         "monochromeImage": "./assets/images/icon-android-themed.png",
@@ -58,7 +58,8 @@
         "expo-build-properties",
         {
           "ios": {
-            "deploymentTarget": "15.6"
+            "deploymentTarget": "15.6",
+            "useFrameworks": "static"
           },
           "android": {
             "buildArchs": ["arm64-v8a", "x86_64"],
@@ -66,7 +67,7 @@
             "targetSdkVersion": 35,
             "buildToolsVersion": "35.0.0",
             "kotlinVersion": "2.0.21",
-            "minSdkVersion": 24,
+            "minSdkVersion": 26,
             "usesCleartextTraffic": true,
             "packagingOptions": {
               "jniLibs": {
@@ -84,12 +85,6 @@
           "initialOrientation": "DEFAULT"
         }
       ],
-      [
-        "expo-sensors",
-        {
-          "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
-        }
-      ],
       "expo-localization",
       "expo-asset",
       [
@@ -120,7 +115,14 @@
       ["./plugins/withChangeNativeAndroidTextToWhite.js"],
       ["./plugins/withAndroidManifest.js"],
       ["./plugins/withTrustLocalCerts.js"],
-      ["./plugins/withGradleProperties.js"]
+      ["./plugins/withGradleProperties.js"],
+      [
+        "./plugins/withGitPod.js",
+        {
+          "podName": "MPVKit-GPL",
+          "podspecUrl": "https://raw.githubusercontent.com/streamyfin/MPVKit/0.40.0-av/MPVKit-GPL.podspec"
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true

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)/(home)/_layout.tsx

@@ -1,7 +1,8 @@
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { Stack, useRouter } 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";
 
 const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");
@@ -46,13 +47,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           title: t("home.downloads.downloads_title"),
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -65,13 +66,13 @@ export default function IndexLayout() {
           headerShadowVisible: false,
           title: t("home.downloads.tvseries"),
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -84,13 +85,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -102,13 +103,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -120,13 +121,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -138,13 +139,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -156,13 +157,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -174,13 +175,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -192,13 +193,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -210,13 +211,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -228,13 +229,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -246,13 +247,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -264,13 +265,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -282,13 +283,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -300,13 +301,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
@@ -318,29 +319,16 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
         }}
       />
-      <Stack.Screen
-        name='intro/page'
-        options={{
-          headerShown: false,
-          title: "",
-          headerLeft: () => (
-            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
-          presentation: "modal",
-        }}
-      />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={options} />
       ))}
@@ -349,9 +337,9 @@ export default function IndexLayout() {
         options={{
           title: "",
           headerLeft: () => (
-            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+            <Pressable onPress={() => _router.back()} className='pl-0.5'>
               <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
+            </Pressable>
           ),
           headerShown: true,
           headerBlurEffect: "prominent",
@@ -367,13 +355,13 @@ const SettingsButton = () => {
   const router = useRouter();
 
   return (
-    <TouchableOpacity
+    <Pressable
       onPress={() => {
         router.push("/(auth)/settings");
       }}
     >
       <Feather name='settings' color={"white"} size={22} />
-    </TouchableOpacity>
+    </Pressable>
   );
 };
 
@@ -382,7 +370,7 @@ const SessionsButton = () => {
   const { sessions = [] } = useSessions({} as useSessionsProps);
 
   return (
-    <TouchableOpacity
+    <Pressable
       onPress={() => {
         router.push("/(auth)/sessions");
       }}
@@ -393,6 +381,6 @@ const SessionsButton = () => {
         color={sessions.length === 0 ? "white" : "#9333ea"}
         size={28}
       />
-    </TouchableOpacity>
+    </Pressable>
   );
 };

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

@@ -3,13 +3,8 @@ import { useNavigation, useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Alert,
-  Platform,
-  ScrollView,
-  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 { Text } from "@/components/common/Text";
@@ -103,12 +98,12 @@ export default function page() {
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <TouchableOpacity
+        <Pressable
           onPress={bottomSheetModalRef.current?.present}
           className='px-2'
         >
           <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
-        </TouchableOpacity>
+        </Pressable>
       ),
     });
   }, [downloadedFiles]);

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)/settings/audio-subtitles/page.tsx

@@ -2,6 +2,7 @@ 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() {
@@ -22,6 +23,7 @@ export default function AudioSubtitlesPage() {
         <MediaProvider>
           <AudioToggles className='mb-4' />
           <SubtitleToggles className='mb-4' />
+          <MpvSubtitleSettings className='mb-4' />
         </MediaProvider>
       </View>
     </ScrollView>

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

@@ -1,13 +1,13 @@
-import { useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
+import { useIntroSheet } from "@/providers/IntroSheetProvider";
 import { storage } from "@/utils/mmkv";
 
 export default function IntroPage() {
-  const router = useRouter();
+  const { showIntro } = useIntroSheet();
   const insets = useSafeAreaInsets();
   const { t } = useTranslation();
 
@@ -26,7 +26,7 @@ export default function IntroPage() {
         <ListGroup title={t("home.settings.intro.title")}>
           <ListItem
             onPress={() => {
-              router.push("/intro/page");
+              showIntro();
             }}
             title={t("home.settings.intro.show_intro")}
           />

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

@@ -1,13 +1,22 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useMemo } from "react";
+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 = [
@@ -29,6 +38,40 @@ 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(
     () => [
@@ -171,6 +214,37 @@ export default function MusicSettingsPage() {
             </ListItem>
           </ListGroup>
         </View>
+
+        {!Platform.isTV && (
+          <View className='mt-4'>
+            <ListGroup
+              title={t("home.settings.storage.music_cache_title")}
+              description={
+                <Text className='text-[#8E8D91] text-xs'>
+                  {t("home.settings.storage.music_cache_description")}
+                </Text>
+              }
+            >
+              <ListItem
+                onPress={onClearMusicCacheClicked}
+                title={t("home.settings.storage.clear_music_cache")}
+                subtitle={t("home.settings.storage.music_cache_size", {
+                  size: (musicCacheStats?.cacheSize ?? 0).bytesToReadable(),
+                })}
+              />
+            </ListGroup>
+            <ListGroup>
+              <ListItem
+                textColor='red'
+                onPress={onDeleteDownloadedSongsClicked}
+                title={t("home.settings.storage.delete_all_downloaded_songs")}
+                subtitle={t("home.settings.storage.downloaded_songs_size", {
+                  size: (musicCacheStats?.permanentSize ?? 0).bytesToReadable(),
+                })}
+              />
+            </ListGroup>
+          </View>
+        )}
       </View>
     </ScrollView>
   );

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

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

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

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

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

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

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

@@ -8,12 +8,7 @@ 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 { 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";
@@ -30,8 +25,7 @@ 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;
+const ARTWORK_SIZE = 120;
 
 export default function PlaylistDetailScreen() {
   const { playlistId } = useLocalSearchParams<{ playlistId: string }>();

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

@@ -50,8 +50,13 @@ import {
 import { useSettings } from "@/utils/atoms/settings";
 
 const Page = () => {
-  const searchParams = useLocalSearchParams();
-  const { libraryId } = searchParams as { libraryId: string };
+  const searchParams = useLocalSearchParams() as {
+    libraryId: string;
+    sortBy?: string;
+    sortOrder?: string;
+    filterBy?: string;
+  };
+  const { libraryId } = searchParams;
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -76,23 +81,33 @@ const Page = () => {
   const { t } = useTranslation();
 
   useEffect(() => {
-    const sop = getSortOrderPreference(libraryId, sortOrderPreference);
-    if (sop) {
-      _setSortOrder([sop]);
+    // Check for URL params first (from "See All" navigation)
+    const urlSortBy = searchParams.sortBy as SortByOption | undefined;
+    const urlSortOrder = searchParams.sortOrder as SortOrderOption | undefined;
+    const urlFilterBy = searchParams.filterBy as FilterByOption | undefined;
+
+    // Apply sortOrder: URL param > saved preference > default
+    if (urlSortOrder && Object.values(SortOrderOption).includes(urlSortOrder)) {
+      _setSortOrder([urlSortOrder]);
     } else {
-      _setSortOrder([SortOrderOption.Ascending]);
+      const sop = getSortOrderPreference(libraryId, sortOrderPreference);
+      _setSortOrder([sop || SortOrderOption.Ascending]);
     }
-    const obp = getSortByPreference(libraryId, sortByPreference);
-    if (obp) {
-      _setSortBy([obp]);
+
+    // Apply sortBy: URL param > saved preference > default
+    if (urlSortBy && Object.values(SortByOption).includes(urlSortBy)) {
+      _setSortBy([urlSortBy]);
     } else {
-      _setSortBy([SortByOption.SortName]);
+      const obp = getSortByPreference(libraryId, sortByPreference);
+      _setSortBy([obp || SortByOption.SortName]);
     }
-    const fp = getFilterByPreference(libraryId, filterByPreference);
-    if (fp) {
-      _setFilterBy([fp]);
+
+    // Apply filterBy: URL param > saved preference > default
+    if (urlFilterBy && Object.values(FilterByOption).includes(urlFilterBy)) {
+      _setFilterBy([urlFilterBy]);
     } else {
-      _setFilterBy([]);
+      const fp = getFilterByPreference(libraryId, filterByPreference);
+      _setFilterBy(fp ? [fp] : []);
     }
   }, [
     libraryId,
@@ -102,6 +117,9 @@ const Page = () => {
     _setSortBy,
     filterByPreference,
     _setFilterBy,
+    searchParams.sortBy,
+    searchParams.sortOrder,
+    searchParams.filterBy,
   ]);
 
   const setSortBy = useCallback(

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

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

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

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

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

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

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

@@ -7,17 +7,17 @@ import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Dimensions,
-  RefreshControl,
-  TouchableOpacity,
-  View,
-} from "react-native";
+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;
@@ -36,9 +36,20 @@ export default function PlaylistsScreen() {
   const { t } = useTranslation();
 
   const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [sortSheetOpen, setSortSheetOpen] = useState(false);
+  const [sortBy, setSortBy] = useState<PlaylistSortOption>("SortName");
+  const [sortOrder, setSortOrder] = useState<PlaylistSortOrder>("Ascending");
 
   const isReady = Boolean(api && user?.Id && libraryId);
 
+  const handleSortChange = useCallback(
+    (newSortBy: PlaylistSortOption, newSortOrder: PlaylistSortOrder) => {
+      setSortBy(newSortBy);
+      setSortOrder(newSortOrder);
+    },
+    [],
+  );
+
   useLayoutEffect(() => {
     navigation.setOptions({
       headerRight: () => (
@@ -63,13 +74,13 @@ export default function PlaylistsScreen() {
     isFetchingNextPage,
     refetch,
   } = useInfiniteQuery({
-    queryKey: ["music-playlists", libraryId, user?.Id],
+    queryKey: ["music-playlists", libraryId, user?.Id, sortBy, sortOrder],
     queryFn: async ({ pageParam = 0 }) => {
       const response = await getItemsApi(api!).getItems({
         userId: user?.Id,
         includeItemTypes: ["Playlist"],
-        sortBy: ["SortName"],
-        sortOrder: ["Ascending"],
+        sortBy: [sortBy],
+        sortOrder: [sortOrder],
         limit: ITEMS_PER_PAGE,
         startIndex: pageParam,
         recursive: true,
@@ -93,13 +104,6 @@ export default function PlaylistsScreen() {
     return data?.pages.flatMap((page) => page.items) || [];
   }, [data]);
 
-  const numColumns = 2;
-  const screenWidth = Dimensions.get("window").width;
-  const gap = 12;
-  const padding = 16;
-  const itemWidth =
-    (screenWidth - padding * 2 - gap * (numColumns - 1)) / numColumns;
-
   const handleEndReached = useCallback(() => {
     if (hasNextPage && !isFetchingNextPage) {
       fetchNextPage();
@@ -171,11 +175,10 @@ export default function PlaylistsScreen() {
     <View className='flex-1 bg-black'>
       <FlashList
         data={playlists}
-        numColumns={numColumns}
         contentContainerStyle={{
           paddingBottom: insets.bottom + 100,
-          paddingTop: 16,
-          paddingHorizontal: padding,
+          paddingTop: 8,
+          paddingHorizontal: 16,
         }}
         refreshControl={
           <RefreshControl
@@ -186,17 +189,26 @@ export default function PlaylistsScreen() {
         }
         onEndReached={handleEndReached}
         onEndReachedThreshold={0.5}
-        renderItem={({ item, index }) => (
-          <View
-            style={{
-              width: itemWidth,
-              marginRight: index % numColumns === 0 ? gap : 0,
-              marginBottom: gap,
-            }}
+        ListHeaderComponent={
+          <TouchableOpacity
+            onPress={() => setSortSheetOpen(true)}
+            className='flex-row items-center mb-2 py-1'
           >
-            <MusicPlaylistCard playlist={item} width={itemWidth} />
-          </View>
-        )}
+            <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 ? (
@@ -210,6 +222,13 @@ export default function PlaylistsScreen() {
         open={createModalOpen}
         setOpen={setCreateModalOpen}
       />
+      <PlaylistSortSheet
+        open={sortSheetOpen}
+        setOpen={setSortSheetOpen}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
+        onSortChange={handleSortChange}
+      />
     </View>
   );
 }

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

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

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

@@ -3,8 +3,10 @@ import type {
   BaseItemKind,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useAsyncDebouncer } from "@tanstack/react-pacer";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
+import { Image } from "expo-image";
 import { router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import {
@@ -19,7 +21,6 @@ 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";
@@ -39,6 +40,7 @@ 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";
@@ -68,7 +70,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);
 
@@ -98,9 +116,11 @@ export default function search() {
     async ({
       types,
       query,
+      signal,
     }: {
       types: BaseItemKind[];
       query: string;
+      signal?: AbortSignal;
     }): Promise<BaseItemDto[]> => {
       if (!api || !query) {
         return [];
@@ -108,13 +128,16 @@ 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[]) || [];
         }
@@ -143,6 +166,7 @@ export default function search() {
             query,
             searchType as "movies" | "series" | "episodes" | "actors" | "media",
             10,
+            signal,
           );
 
           const allIds: string[] = [
@@ -157,10 +181,13 @@ export default function search() {
             return [];
           }
 
-          const itemsResponse = await getItemsApi(api).getItems({
-            ids: allIds,
-            enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-          });
+          const itemsResponse = await getItemsApi(api).getItems(
+            {
+              ids: allIds,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+            },
+            { signal },
+          );
 
           return (itemsResponse.data.Items as BaseItemDto[]) || [];
         }
@@ -176,7 +203,7 @@ export default function search() {
           .map((type) => encodeURIComponent(type))
           .join("&includeItemTypes=")}`;
 
-        const response1 = await axios.get(url);
+        const response1 = await axios.get(url, { signal });
 
         const ids = response1.data.ids;
 
@@ -184,19 +211,65 @@ 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) {
+      } catch (error) {
+        // Silently handle aborted requests
+        if (error instanceof Error && error.name === "AbortError") {
+          return [];
+        }
         return [];
       }
     },
     [api, searchEngine, settings, user?.Id],
   );
 
+  // Separate search function for music types - always uses Jellyfin since Streamystats doesn't support music
+  const jellyfinSearchFn = useCallback(
+    async ({
+      types,
+      query,
+      signal,
+    }: {
+      types: BaseItemKind[];
+      query: string;
+      signal?: AbortSignal;
+    }): Promise<BaseItemDto[]> => {
+      if (!api || !query) {
+        return [];
+      }
+
+      try {
+        const searchApi = await getItemsApi(api).getItems(
+          {
+            searchTerm: query,
+            limit: 10,
+            includeItemTypes: types,
+            recursive: true,
+            userId: user?.Id,
+          },
+          { signal },
+        );
+
+        return (searchApi.data.Items as BaseItemDto[]) || [];
+      } catch (error) {
+        // Silently handle aborted requests
+        if (error instanceof Error && error.name === "AbortError") {
+          return [];
+        }
+        return [];
+      }
+    },
+    [api, user?.Id],
+  );
+
   type HeaderSearchBarRef = {
     focus: () => void;
     blur: () => void;
@@ -243,6 +316,7 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Movie"],
+        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -253,6 +327,7 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Series"],
+        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -263,6 +338,7 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Episode"],
+        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -273,6 +349,7 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["BoxSet"],
+        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -283,6 +360,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,
   });
@@ -293,13 +416,27 @@ 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]);
 
   return (
     <ScrollView
@@ -308,6 +445,7 @@ export default function search() {
       contentContainerStyle={{
         paddingLeft: insets.left,
         paddingRight: insets.right,
+        paddingBottom: 60,
       }}
     >
       {/* <View
@@ -446,6 +584,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)/(watchlists)/_layout.tsx

@@ -1,7 +1,8 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity } from "react-native";
+import { Platform } from "react-native";
+import { Pressable } from "react-native-gesture-handler";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { useStreamystatsEnabled } from "@/hooks/useWatchlists";
 
@@ -22,14 +23,14 @@ export default function WatchlistsLayout() {
           headerShadowVisible: false,
           headerRight: streamystatsEnabled
             ? () => (
-                <TouchableOpacity
+                <Pressable
                   onPress={() =>
                     router.push("/(auth)/(tabs)/(watchlists)/create")
                   }
                   className='p-1.5'
                 >
                   <Ionicons name='add' size={24} color='white' />
-                </TouchableOpacity>
+                </Pressable>
               )
             : undefined,
         }}

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

@@ -7,8 +7,7 @@ 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, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
@@ -17,7 +16,6 @@ import { MusicPlaybackEngine } from "@/components/music/MusicPlaybackEngine";
 import { Colors } from "@/constants/Colors";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
-import { storage } from "@/utils/mmkv";
 
 const { Navigator } = createNativeBottomTabNavigator();
 
@@ -31,22 +29,6 @@ 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 }}>

app/(auth)/now-playing.tsx

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

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

@@ -3,7 +3,6 @@ import {
   type MediaSourceInfo,
   PlaybackOrder,
   PlaybackProgressInfo,
-  PlaybackStartInfo,
   RepeatMode,
 } from "@jellyfin/sdk/lib/generated-client";
 import {
@@ -15,7 +14,7 @@ import { router, useGlobalSearchParams, useNavigation } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, Platform, View } from "react-native";
+import { Alert, Platform, useWindowDimensions, View } from "react-native";
 import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
 
 import { BITRATES } from "@/components/BitrateSelector";
@@ -35,24 +34,17 @@ import usePlaybackSpeed from "@/hooks/usePlaybackSpeed";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import {
-  type PlaybackStatePayload,
-  type ProgressUpdatePayload,
-  type SfOnErrorEventPayload,
-  type SfOnPictureInPictureChangePayload,
-  type SfOnPlaybackStateChangePayload,
-  type SfOnProgressEventPayload,
-  SfPlayerView,
-  type SfPlayerViewRef,
-  type SfVideoSource,
-  setHardwareDecode,
-  type VlcPlayerSource,
-  VlcPlayerView,
-  type VlcPlayerViewRef,
+  type MpvOnErrorEventPayload,
+  type MpvOnPlaybackStateChangePayload,
+  type MpvOnProgressEventPayload,
+  MpvPlayerView,
+  type MpvPlayerViewRef,
+  type MpvVideoSource,
 } from "@/modules";
 import { useDownload } from "@/providers/DownloadProvider";
 import { DownloadedItem } from "@/providers/Downloads/types";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings, VideoPlayerIOS } from "@/utils/atoms/settings";
+import { useSettings } from "@/utils/atoms/settings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import {
   getMpvAudioId,
@@ -63,29 +55,21 @@ import { generateDeviceProfile } from "@/utils/profiles/native";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
 
 export default function page() {
-  const videoRef = useRef<SfPlayerViewRef | VlcPlayerViewRef>(null);
+  const videoRef = useRef<MpvPlayerViewRef>(null);
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);
   const { t } = useTranslation();
   const navigation = useNavigation();
   const { settings, updateSettings } = useSettings();
 
-  // Determine which player to use:
-  // - Android always uses VLC
-  // - iOS uses user setting (KSPlayer by default, VLC optional)
-  const useVlcPlayer =
-    Platform.OS === "android" ||
-    (Platform.OS === "ios" && settings.videoPlayerIOS === VideoPlayerIOS.VLC);
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, _setShowControls] = useState(true);
   const [isPipMode, setIsPipMode] = useState(false);
-  const [aspectRatio, setAspectRatio] = useState<
-    "default" | "16:9" | "4:3" | "1:1" | "21:9"
-  >("default");
-  const [scaleFactor, setScaleFactor] = useState<
-    0 | 0.25 | 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 2.0
-  >(0);
+  const [aspectRatio] = useState<"default" | "16:9" | "4:3" | "1:1" | "21:9">(
+    "default",
+  );
   const [isZoomedToFill, setIsZoomedToFill] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isMuted, setIsMuted] = useState(false);
@@ -140,7 +124,9 @@ export default function page() {
   const offline = offlineStr === "true";
   const playbackManager = usePlaybackManager({ isOffline: offline });
 
-  const audioIndex = audioIndexStr
+  // Audio index: use URL param if provided, otherwise use stored index for offline playback
+  // This is computed after downloadedItem is available, see audioIndexResolved below
+  const audioIndexFromUrl = audioIndexStr
     ? Number.parseInt(audioIndexStr, 10)
     : undefined;
   const subtitleIndex = subtitleIndexStr
@@ -159,6 +145,17 @@ export default function page() {
     isError: false,
   });
 
+  // Resolve audio index: use URL param if provided, otherwise use stored index for offline playback
+  const audioIndex = useMemo(() => {
+    if (audioIndexFromUrl !== undefined) {
+      return audioIndexFromUrl;
+    }
+    if (offline && downloadedItem?.userData?.audioStreamIndex !== undefined) {
+      return downloadedItem.userData.audioStreamIndex;
+    }
+    return undefined;
+  }, [audioIndexFromUrl, offline, downloadedItem?.userData?.audioStreamIndex]);
+
   // Get the playback speed for this item based on settings
   const { playbackSpeed: initialPlaybackSpeed } = usePlaybackSpeed(
     item,
@@ -177,15 +174,11 @@ export default function page() {
         updateSettings,
       );
 
-      // Apply speed to the current player
+      // Apply speed to the current player (MPV)
       setCurrentPlaybackSpeed(speed);
-      if (useVlcPlayer) {
-        await (videoRef.current as VlcPlayerViewRef)?.setRate?.(speed);
-      } else {
-        await (videoRef.current as SfPlayerViewRef)?.setSpeed?.(speed);
-      }
+      await videoRef.current?.setSpeed?.(speed);
     },
-    [item, settings, updateSettings, useVlcPlayer],
+    [item, settings, updateSettings],
   );
 
   /** Gets the initial playback position from the URL. */
@@ -333,9 +326,12 @@ export default function page() {
   useEffect(() => {
     if (!stream || !api || offline) return;
     const reportPlaybackStart = async () => {
-      await getPlaystateApi(api).reportPlaybackStart({
-        playbackStartInfo: currentPlayStateInfo() as PlaybackStartInfo,
-      });
+      const progressInfo = currentPlayStateInfo();
+      if (progressInfo) {
+        await getPlaystateApi(api).reportPlaybackStart({
+          playbackStartInfo: progressInfo,
+        });
+      }
     };
     reportPlaybackStart();
   }, [stream, api, offline]);
@@ -345,14 +341,16 @@ export default function page() {
     setIsPlaying(!isPlaying);
     if (isPlaying) {
       await videoRef.current?.pause();
-      playbackManager.reportPlaybackProgress(
-        currentPlayStateInfo() as PlaybackProgressInfo,
-      );
+      const progressInfo = currentPlayStateInfo();
+      if (progressInfo) {
+        playbackManager.reportPlaybackProgress(progressInfo);
+      }
     } else {
       videoRef.current?.play();
+      const progressInfo = currentPlayStateInfo();
       if (!offline && api) {
         await getPlaystateApi(api).reportPlaybackStart({
-          playbackStartInfo: currentPlayStateInfo() as PlaybackStartInfo,
+          playbackStartInfo: progressInfo,
         });
       }
     }
@@ -385,7 +383,6 @@ export default function page() {
     });
     reportPlaybackStopped();
     setIsPlaybackStopped(true);
-    // KSPlayer doesn't have a stop method, use pause instead
     videoRef.current?.pause();
     revalidateProgressCache();
   }, [videoRef, reportPlaybackStopped, progress]);
@@ -397,22 +394,24 @@ export default function page() {
     };
   }, [navigation, stop]);
 
-  const currentPlayStateInfo = useCallback(() => {
+  const currentPlayStateInfo = useCallback(():
+    | PlaybackProgressInfo
+    | undefined => {
     if (!stream || !item?.Id) return;
 
     return {
-      itemId: item.Id,
-      audioStreamIndex: audioIndex ? audioIndex : undefined,
-      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-      mediaSourceId: mediaSourceId,
-      positionTicks: msToTicks(progress.get()),
-      isPaused: !isPlaying,
-      playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-      playSessionId: stream.sessionId,
-      isMuted: isMuted,
-      canSeek: true,
-      repeatMode: RepeatMode.RepeatNone,
-      playbackOrder: PlaybackOrder.Default,
+      ItemId: item.Id,
+      AudioStreamIndex: audioIndex ? audioIndex : undefined,
+      SubtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+      MediaSourceId: mediaSourceId,
+      PositionTicks: msToTicks(progress.get()),
+      IsPaused: !isPlaying,
+      PlayMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+      PlaySessionId: stream.sessionId,
+      IsMuted: isMuted,
+      CanSeek: true,
+      RepeatMode: RepeatMode.RepeatNone,
+      PlaybackOrder: PlaybackOrder.Default,
     };
   }, [
     stream,
@@ -441,13 +440,13 @@ export default function page() {
     [],
   );
 
-  /** Progress handler for iOS (SfPlayer) - position in seconds */
-  const onProgressSf = useCallback(
-    async (data: { nativeEvent: SfOnProgressEventPayload }) => {
+  /** Progress handler for MPV - position in seconds */
+  const onProgress = useCallback(
+    async (data: { nativeEvent: MpvOnProgressEventPayload }) => {
       if (isSeeking.get() || isPlaybackStopped) return;
 
       const { position } = data.nativeEvent;
-      // KSPlayer reports position in seconds, convert to ms
+      // MPV reports position in seconds, convert to ms
       const currentTime = position * 1000;
 
       if (isBuffering) {
@@ -490,68 +489,21 @@ export default function page() {
     ],
   );
 
-  /** Progress handler for Android (VLC) - currentTime in milliseconds */
-  const onProgressVlc = useCallback(
-    async (data: ProgressUpdatePayload) => {
-      if (isSeeking.get() || isPlaybackStopped) return;
-
-      const { currentTime } = data.nativeEvent;
-      // VLC reports currentTime in milliseconds
-
-      if (isBuffering) {
-        setIsBuffering(false);
-      }
-
-      progress.set(currentTime);
-
-      // Update URL immediately after seeking, or every 30 seconds during normal playback
-      const now = Date.now();
-      const shouldUpdateUrl = wasJustSeeking.get();
-      wasJustSeeking.value = false;
-
-      if (
-        shouldUpdateUrl ||
-        now - lastUrlUpdateTime.get() > URL_UPDATE_INTERVAL
-      ) {
-        router.setParams({
-          playbackPosition: msToTicks(currentTime).toString(),
-        });
-        lastUrlUpdateTime.value = now;
-      }
-
-      if (!item?.Id) return;
-
-      playbackManager.reportPlaybackProgress(
-        currentPlayStateInfo() as PlaybackProgressInfo,
-      );
-    },
-    [
-      item?.Id,
-      audioIndex,
-      subtitleIndex,
-      mediaSourceId,
-      isPlaying,
-      stream,
-      isSeeking,
-      isPlaybackStopped,
-      isBuffering,
-    ],
-  );
-
   /** Gets the initial playback position in seconds. */
-  const startPosition = useMemo(() => {
+  const _startPosition = useMemo(() => {
     return ticksToSeconds(getInitialPlaybackTicks());
   }, [getInitialPlaybackTicks]);
 
-  /** Build video source config for iOS (SfPlayer/KSPlayer) */
-  const sfVideoSource = useMemo<SfVideoSource | undefined>(() => {
-    if (!stream?.url || useVlcPlayer) return undefined;
+  /** Build video source config for MPV */
+  const videoSource = useMemo<MpvVideoSource | undefined>(() => {
+    if (!stream?.url) return undefined;
 
     const mediaSource = stream.mediaSource;
     const isTranscoding = Boolean(mediaSource?.TranscodingUrl);
 
-    // For offline playback, subtitles are embedded in the downloaded file
-    // For online playback, get external subtitle URLs from server
+    // Get external subtitle URLs
+    // - Online: prepend API base path to server URLs
+    // - Offline: use local file paths (stored in DeliveryUrl during download)
     let externalSubs: string[] | undefined;
     if (!offline && api?.basePath) {
       externalSubs = mediaSource?.MediaStreams?.filter(
@@ -560,6 +512,13 @@ export default function page() {
           s.DeliveryMethod === "External" &&
           s.DeliveryUrl,
       ).map((s) => `${api.basePath}${s.DeliveryUrl}`);
+    } else if (offline) {
+      externalSubs = mediaSource?.MediaStreams?.filter(
+        (s) =>
+          s.Type === "Subtitle" &&
+          s.DeliveryMethod === "External" &&
+          s.DeliveryUrl,
+      ).map((s) => s.DeliveryUrl!);
     }
 
     // Calculate track IDs for initial selection
@@ -576,15 +535,10 @@ export default function page() {
       : (item?.UserData?.PlaybackPositionTicks ?? 0);
     const startPos = ticksToSeconds(startTicks);
 
-    // For transcoded streams, the server already handles seeking via startTimeTicks,
-    // so we should NOT also tell the player to seek (would cause double-seeking).
-    // For direct play/stream, the player needs to seek itself.
-    const playerStartPos = isTranscoding ? 0 : startPos;
-
     // Build source config - headers only needed for online streaming
-    const source: SfVideoSource = {
+    const source: MpvVideoSource = {
       url: stream.url,
-      startPosition: playerStartPos,
+      startPosition: startPos,
       autoplay: true,
       initialSubtitleId,
       initialAudioId,
@@ -613,96 +567,6 @@ export default function page() {
     subtitleIndex,
     audioIndex,
     offline,
-    useVlcPlayer,
-  ]);
-
-  /** Build video source config for Android (VLC) */
-  const vlcVideoSource = useMemo<VlcPlayerSource | undefined>(() => {
-    if (!stream?.url || !useVlcPlayer) return undefined;
-
-    const mediaSource = stream.mediaSource;
-    const isTranscoding = Boolean(mediaSource?.TranscodingUrl);
-
-    // For VLC, external subtitles need name and DeliveryUrl
-    let externalSubs: { name: string; DeliveryUrl: string }[] | undefined;
-    if (!offline && api?.basePath) {
-      externalSubs = mediaSource?.MediaStreams?.filter(
-        (s) =>
-          s.Type === "Subtitle" &&
-          s.DeliveryMethod === "External" &&
-          s.DeliveryUrl,
-      ).map((s) => ({
-        name: s.DisplayTitle || s.Title || `Subtitle ${s.Index}`,
-        DeliveryUrl: `${api.basePath}${s.DeliveryUrl}`,
-      }));
-    }
-
-    // Build VLC init options (required for VLC to work properly)
-    const initOptions: string[] = [""];
-
-    // Get all subtitle and audio streams
-    const allSubs =
-      mediaSource?.MediaStreams?.filter((s) => s.Type === "Subtitle") ?? [];
-    const textSubs = allSubs.filter((s) => s.IsTextSubtitleStream);
-    const allAudio =
-      mediaSource?.MediaStreams?.filter((s) => s.Type === "Audio") ?? [];
-
-    // Find chosen tracks
-    const chosenSubtitleTrack = allSubs.find((s) => s.Index === subtitleIndex);
-    const chosenAudioTrack = allAudio.find((a) => a.Index === audioIndex);
-
-    // Set subtitle track
-    if (
-      chosenSubtitleTrack &&
-      (!isTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)
-    ) {
-      const finalIndex = !isTranscoding
-        ? allSubs.indexOf(chosenSubtitleTrack)
-        : [...textSubs].reverse().indexOf(chosenSubtitleTrack);
-      if (finalIndex >= 0) {
-        initOptions.push(`--sub-track=${finalIndex}`);
-      }
-    }
-
-    // Set audio track
-    if (!isTranscoding && chosenAudioTrack) {
-      const audioTrackIndex = allAudio.indexOf(chosenAudioTrack);
-      if (audioTrackIndex >= 0) {
-        initOptions.push(`--audio-track=${audioTrackIndex}`);
-      }
-    }
-
-    // Add subtitle styling
-    if (settings.subtitleSize) {
-      initOptions.push(`--sub-text-scale=${settings.subtitleSize}`);
-    }
-    initOptions.push("--sub-margin=40");
-
-    // For transcoded streams, the server already handles seeking via startTimeTicks,
-    // so we should NOT also tell the player to seek (would cause double-seeking).
-    // For direct play/stream, the player needs to seek itself.
-    const playerStartPos = isTranscoding ? 0 : startPosition;
-
-    const source: VlcPlayerSource = {
-      uri: stream.url,
-      startPosition: playerStartPos,
-      autoplay: true,
-      isNetwork: !offline,
-      externalSubtitles: externalSubs,
-      initOptions,
-    };
-
-    return source;
-  }, [
-    stream?.url,
-    stream?.mediaSource,
-    startPosition,
-    useVlcPlayer,
-    api?.basePath,
-    offline,
-    subtitleIndex,
-    audioIndex,
-    settings.subtitleSize,
   ]);
 
   const volumeUpCb = useCallback(async () => {
@@ -784,9 +648,9 @@ export default function page() {
     setVolume: setVolumeCb,
   });
 
-  /** Playback state handler for iOS (SfPlayer) */
-  const onPlaybackStateChangedSf = useCallback(
-    async (e: { nativeEvent: SfOnPlaybackStateChangePayload }) => {
+  /** Playback state handler for MPV */
+  const onPlaybackStateChanged = useCallback(
+    async (e: { nativeEvent: MpvOnPlaybackStateChangePayload }) => {
       const { isPaused, isPlaying: playing, isLoading } = e.nativeEvent;
 
       if (playing) {
@@ -820,49 +684,9 @@ export default function page() {
     [playbackManager, item?.Id, progress],
   );
 
-  /** Playback state handler for Android (VLC) */
-  const onPlaybackStateChangedVlc = useCallback(
-    async (e: PlaybackStatePayload) => {
-      const {
-        state,
-        isBuffering: buffering,
-        isPlaying: playing,
-      } = e.nativeEvent;
-
-      if (state === "Playing" || playing) {
-        setIsPlaying(true);
-        setIsBuffering(false);
-        setHasPlaybackStarted(true);
-        if (item?.Id) {
-          playbackManager.reportPlaybackProgress(
-            currentPlayStateInfo() as PlaybackProgressInfo,
-          );
-        }
-        if (!Platform.isTV) await activateKeepAwakeAsync();
-        return;
-      }
-
-      if (state === "Paused") {
-        setIsPlaying(false);
-        if (item?.Id) {
-          playbackManager.reportPlaybackProgress(
-            currentPlayStateInfo() as PlaybackProgressInfo,
-          );
-        }
-        if (!Platform.isTV) await deactivateKeepAwake();
-        return;
-      }
-
-      if (state === "Buffering" || buffering) {
-        setIsBuffering(true);
-      }
-    },
-    [playbackManager, item?.Id, progress],
-  );
-
-  /** PiP handler for iOS (SfPlayer) */
-  const onPictureInPictureChangeSf = useCallback(
-    (e: { nativeEvent: SfOnPictureInPictureChangePayload }) => {
+  /** PiP handler for MPV */
+  const _onPictureInPictureChange = useCallback(
+    (e: { nativeEvent: { isActive: boolean } }) => {
       const { isActive } = e.nativeEvent;
       setIsPipMode(isActive);
       // Hide controls when entering PiP
@@ -873,19 +697,6 @@ export default function page() {
     [],
   );
 
-  /** PiP handler for Android (VLC) */
-  const onPipStartedVlc = useCallback(
-    (e: { nativeEvent: { pipStarted: boolean } }) => {
-      const { pipStarted } = e.nativeEvent;
-      setIsPipMode(pipStarted);
-      // Hide controls when entering PiP
-      if (pipStarted) {
-        _setShowControls(false);
-      }
-    },
-    [],
-  );
-
   const [isMounted, setIsMounted] = useState(false);
 
   // Add useEffect to handle mounting
@@ -907,96 +718,79 @@ export default function page() {
     videoRef.current?.pause?.();
   }, []);
 
-  const seek = useCallback(
-    (position: number) => {
-      if (useVlcPlayer) {
-        // VLC expects milliseconds
-        videoRef.current?.seekTo?.(position);
-      } else {
-        // KSPlayer expects seconds, convert from ms
-        videoRef.current?.seekTo?.(position / 1000);
-      }
-    },
-    [useVlcPlayer],
-  );
+  const seek = useCallback((position: number) => {
+    // MPV expects seconds, convert from ms
+    videoRef.current?.seekTo?.(position / 1000);
+  }, []);
 
   const handleZoomToggle = useCallback(async () => {
-    // Zoom toggle only supported when using SfPlayer (KSPlayer)
-    if (useVlcPlayer) return;
     const newZoomState = !isZoomedToFill;
+    await videoRef.current?.setZoomedToFill?.(newZoomState);
     setIsZoomedToFill(newZoomState);
-    await (videoRef.current as SfPlayerViewRef)?.setVideoZoomToFill?.(
-      newZoomState,
-    );
-  }, [isZoomedToFill, useVlcPlayer]);
 
-  // VLC-specific handlers for aspect ratio and scale factor
-  const handleSetVideoAspectRatio = useCallback(
-    async (newAspectRatio: string | null) => {
-      if (!useVlcPlayer) return;
-      const ratio = (newAspectRatio ?? "default") as
-        | "default"
-        | "16:9"
-        | "4:3"
-        | "1:1"
-        | "21:9";
-      setAspectRatio(ratio);
-      await (videoRef.current as VlcPlayerViewRef)?.setVideoAspectRatio?.(
-        newAspectRatio,
+    // Adjust subtitle position to compensate for video cropping when zoomed
+    if (newZoomState) {
+      // Get video dimensions from mediaSource
+      const videoStream = stream?.mediaSource?.MediaStreams?.find(
+        (s) => s.Type === "Video",
       );
-    },
-    [useVlcPlayer],
-  );
+      const videoWidth = videoStream?.Width ?? 1920;
+      const videoHeight = videoStream?.Height ?? 1080;
 
-  const handleSetVideoScaleFactor = useCallback(
-    async (newScaleFactor: number) => {
-      if (!useVlcPlayer) return;
-      setScaleFactor(
-        newScaleFactor as 0 | 0.25 | 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 2.0,
-      );
-      await (videoRef.current as VlcPlayerViewRef)?.setVideoScaleFactor?.(
-        newScaleFactor,
-      );
-    },
-    [useVlcPlayer],
-  );
+      const videoAR = videoWidth / videoHeight;
+      const screenAR = screenWidth / screenHeight;
 
-  // Apply KSPlayer global settings before video loads (only when using KSPlayer)
-  useEffect(() => {
-    if (Platform.OS === "ios" && !useVlcPlayer) {
-      setHardwareDecode(settings.ksHardwareDecode);
+      if (screenAR > videoAR) {
+        // Screen is wider than video - video height extends beyond screen
+        // Calculate how much of the video is cropped at the bottom (as % of video height)
+        const bottomCropPercent = 50 * (1 - videoAR / screenAR);
+        // Only adjust by 70% of the crop to keep a comfortable margin from the edge
+        // (subtitles already have some built-in padding from the bottom)
+        const adjustmentFactor = 0.7;
+        const newSubPos = Math.round(
+          100 - bottomCropPercent * adjustmentFactor,
+        );
+        await videoRef.current?.setSubtitlePosition?.(newSubPos);
+      }
+      // If videoAR >= screenAR, sides are cropped but bottom is visible, no adjustment needed
+    } else {
+      // Restore to default position (bottom of video frame)
+      await videoRef.current?.setSubtitlePosition?.(100);
     }
-  }, [settings.ksHardwareDecode, useVlcPlayer]);
+  }, [isZoomedToFill, stream?.mediaSource, screenWidth, screenHeight]);
 
-  // Apply subtitle settings when video loads (SfPlayer-specific)
+  // Apply subtitle settings when video loads
   useEffect(() => {
-    if (useVlcPlayer || !isVideoLoaded || !videoRef.current) return;
+    if (!isVideoLoaded || !videoRef.current) return;
 
-    const sfRef = videoRef.current as SfPlayerViewRef;
     const applySubtitleSettings = async () => {
       if (settings.mpvSubtitleScale !== undefined) {
-        await sfRef?.setSubtitleScale?.(settings.mpvSubtitleScale);
+        await videoRef.current?.setSubtitleScale?.(settings.mpvSubtitleScale);
       }
       if (settings.mpvSubtitleMarginY !== undefined) {
-        await sfRef?.setSubtitleMarginY?.(settings.mpvSubtitleMarginY);
+        await videoRef.current?.setSubtitleMarginY?.(
+          settings.mpvSubtitleMarginY,
+        );
       }
       if (settings.mpvSubtitleAlignX !== undefined) {
-        await sfRef?.setSubtitleAlignX?.(settings.mpvSubtitleAlignX);
+        await videoRef.current?.setSubtitleAlignX?.(settings.mpvSubtitleAlignX);
       }
       if (settings.mpvSubtitleAlignY !== undefined) {
-        await sfRef?.setSubtitleAlignY?.(settings.mpvSubtitleAlignY);
+        await videoRef.current?.setSubtitleAlignY?.(settings.mpvSubtitleAlignY);
       }
       if (settings.mpvSubtitleFontSize !== undefined) {
-        await sfRef?.setSubtitleFontSize?.(settings.mpvSubtitleFontSize);
+        await videoRef.current?.setSubtitleFontSize?.(
+          settings.mpvSubtitleFontSize,
+        );
       }
       // Apply subtitle size from general settings
       if (settings.subtitleSize) {
-        await sfRef?.setSubtitleFontSize?.(settings.subtitleSize);
+        await videoRef.current?.setSubtitleFontSize?.(settings.subtitleSize);
       }
     };
 
     applySubtitleSettings();
-  }, [isVideoLoaded, settings, useVlcPlayer]);
+  }, [isVideoLoaded, settings]);
 
   // Apply initial playback speed when video loads
   useEffect(() => {
@@ -1005,20 +799,12 @@ export default function page() {
     const applyInitialPlaybackSpeed = async () => {
       if (initialPlaybackSpeed !== 1.0) {
         setCurrentPlaybackSpeed(initialPlaybackSpeed);
-        if (useVlcPlayer) {
-          await (videoRef.current as VlcPlayerViewRef)?.setRate?.(
-            initialPlaybackSpeed,
-          );
-        } else {
-          await (videoRef.current as SfPlayerViewRef)?.setSpeed?.(
-            initialPlaybackSpeed,
-          );
-        }
+        await videoRef.current?.setSpeed?.(initialPlaybackSpeed);
       }
     };
 
     applyInitialPlaybackSpeed();
-  }, [isVideoLoaded, initialPlaybackSpeed, useVlcPlayer]);
+  }, [isVideoLoaded, initialPlaybackSpeed]);
 
   // Show error UI first, before checking loading/missing‐data
   if (itemStatus.isError || streamStatus.isError) {
@@ -1053,6 +839,8 @@ export default function page() {
       mediaSource={stream?.mediaSource}
       isVideoLoaded={isVideoLoaded}
       tracksReady={tracksReady}
+      offline={offline}
+      downloadedItem={downloadedItem}
     >
       <VideoProvider>
         <View
@@ -1073,47 +861,25 @@ export default function page() {
               justifyContent: "center",
             }}
           >
-            {useVlcPlayer ? (
-              <VlcPlayerView
-                ref={videoRef as React.RefObject<VlcPlayerViewRef>}
-                source={vlcVideoSource!}
-                style={{ width: "100%", height: "100%" }}
-                onVideoProgress={onProgressVlc}
-                onVideoStateChange={onPlaybackStateChangedVlc}
-                onPipStarted={onPipStartedVlc}
-                onVideoLoadEnd={() => setIsVideoLoaded(true)}
-                onVideoError={(e: PlaybackStatePayload) => {
-                  console.error("Video Error:", e.nativeEvent);
-                  Alert.alert(
-                    t("player.error"),
-                    t("player.an_error_occured_while_playing_the_video"),
-                  );
-                  writeToLog("ERROR", "Video Error", e.nativeEvent);
-                }}
-                progressUpdateInterval={1000}
-              />
-            ) : (
-              <SfPlayerView
-                ref={videoRef as React.RefObject<SfPlayerViewRef>}
-                source={sfVideoSource}
-                style={{ width: "100%", height: "100%" }}
-                onProgress={onProgressSf}
-                onPlaybackStateChange={onPlaybackStateChangedSf}
-                onPictureInPictureChange={onPictureInPictureChangeSf}
-                onLoad={() => setIsVideoLoaded(true)}
-                onError={(e: { nativeEvent: SfOnErrorEventPayload }) => {
-                  console.error("Video Error:", e.nativeEvent);
-                  Alert.alert(
-                    t("player.error"),
-                    t("player.an_error_occured_while_playing_the_video"),
-                  );
-                  writeToLog("ERROR", "Video Error", e.nativeEvent);
-                }}
-                onTracksReady={() => {
-                  setTracksReady(true);
-                }}
-              />
-            )}
+            <MpvPlayerView
+              ref={videoRef}
+              source={videoSource}
+              style={{ width: "100%", height: "100%" }}
+              onProgress={onProgress}
+              onPlaybackStateChange={onPlaybackStateChanged}
+              onLoad={() => setIsVideoLoaded(true)}
+              onError={(e: { nativeEvent: MpvOnErrorEventPayload }) => {
+                console.error("Video Error:", e.nativeEvent);
+                Alert.alert(
+                  t("player.error"),
+                  t("player.an_error_occured_while_playing_the_video"),
+                );
+                writeToLog("ERROR", "Video Error", e.nativeEvent);
+              }}
+              onTracksReady={() => {
+                setTracksReady(true);
+              }}
+            />
             {!hasPlaybackStarted && (
               <View
                 style={{
@@ -1149,11 +915,7 @@ export default function page() {
               seek={seek}
               enableTrickplay={true}
               offline={offline}
-              useVlcPlayer={useVlcPlayer}
               aspectRatio={aspectRatio}
-              setVideoAspectRatio={handleSetVideoAspectRatio}
-              scaleFactor={scaleFactor}
-              setVideoScaleFactor={handleSetVideoScaleFactor}
               isZoomedToFill={isZoomedToFill}
               onZoomToggle={handleZoomToggle}
               api={api}

app/_layout.tsx

@@ -1,9 +1,10 @@
 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 { QueryClient } from "@tanstack/react-query";
+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";
@@ -12,6 +13,7 @@ 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,
@@ -187,11 +189,29 @@ 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: 30000, // 30 seconds - data is fresh
-      gcTime: 1000 * 60 * 60 * 24, // 24 hours - keep in cache for persistence
+      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
     },
   },
 });
@@ -372,59 +392,61 @@ function Layout() {
                   <MusicPlayerProvider>
                     <GlobalModalProvider>
                       <BottomSheetModalProvider>
-                        <ThemeProvider value={DarkTheme}>
-                          <SystemBars style='light' hidden={false} />
-                          <Stack initialRouteName='(auth)/(tabs)'>
-                            <Stack.Screen
-                              name='(auth)/(tabs)'
-                              options={{
-                                headerShown: false,
-                                title: "",
-                                header: () => null,
+                        <IntroSheetProvider>
+                          <ThemeProvider value={DarkTheme}>
+                            <SystemBars style='light' hidden={false} />
+                            <Stack initialRouteName='(auth)/(tabs)'>
+                              <Stack.Screen
+                                name='(auth)/(tabs)'
+                                options={{
+                                  headerShown: false,
+                                  title: "",
+                                  header: () => null,
+                                }}
+                              />
+                              <Stack.Screen
+                                name='(auth)/player'
+                                options={{
+                                  headerShown: false,
+                                  title: "",
+                                  header: () => null,
+                                }}
+                              />
+                              <Stack.Screen
+                                name='(auth)/now-playing'
+                                options={{
+                                  headerShown: false,
+                                  presentation: "modal",
+                                  gestureEnabled: true,
+                                }}
+                              />
+                              <Stack.Screen
+                                name='login'
+                                options={{
+                                  headerShown: true,
+                                  title: "",
+                                  headerTransparent: Platform.OS === "ios",
+                                }}
+                              />
+                              <Stack.Screen name='+not-found' />
+                            </Stack>
+                            <Toaster
+                              duration={4000}
+                              toastOptions={{
+                                style: {
+                                  backgroundColor: "#262626",
+                                  borderColor: "#363639",
+                                  borderWidth: 1,
+                                },
+                                titleStyle: {
+                                  color: "white",
+                                },
                               }}
+                              closeButton
                             />
-                            <Stack.Screen
-                              name='(auth)/player'
-                              options={{
-                                headerShown: false,
-                                title: "",
-                                header: () => null,
-                              }}
-                            />
-                            <Stack.Screen
-                              name='(auth)/now-playing'
-                              options={{
-                                headerShown: false,
-                                presentation: "modal",
-                                gestureEnabled: true,
-                              }}
-                            />
-                            <Stack.Screen
-                              name='login'
-                              options={{
-                                headerShown: true,
-                                title: "",
-                                headerTransparent: Platform.OS === "ios",
-                              }}
-                            />
-                            <Stack.Screen name='+not-found' />
-                          </Stack>
-                          <Toaster
-                            duration={4000}
-                            toastOptions={{
-                              style: {
-                                backgroundColor: "#262626",
-                                borderColor: "#363639",
-                                borderWidth: 1,
-                              },
-                              titleStyle: {
-                                color: "white",
-                              },
-                            }}
-                            closeButton
-                          />
-                          <GlobalModal />
-                        </ThemeProvider>
+                            <GlobalModal />
+                          </ThemeProvider>
+                        </IntroSheetProvider>
                       </BottomSheetModalProvider>
                     </GlobalModalProvider>
                   </MusicPlayerProvider>

app/login.tsx

@@ -10,6 +10,7 @@ import {
   Keyboard,
   KeyboardAvoidingView,
   Platform,
+  Switch,
   TouchableOpacity,
   View,
 } from "react-native";
@@ -20,8 +21,13 @@ import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
 import { PreviousServersList } from "@/components/PreviousServersList";
+import { SaveAccountModal } from "@/components/SaveAccountModal";
 import { Colors } from "@/constants/Colors";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
+import type {
+  AccountSecurityType,
+  SavedServer,
+} from "@/utils/secureCredentials";
 
 const CredentialsSchema = z.object({
   username: z.string().min(1, t("login.username_required")),
@@ -31,8 +37,14 @@ const Login: React.FC = () => {
   const api = useAtomValue(apiAtom);
   const navigation = useNavigation();
   const params = useLocalSearchParams();
-  const { setServer, login, removeServer, initiateQuickConnect } =
-    useJellyfin();
+  const {
+    setServer,
+    login,
+    removeServer,
+    initiateQuickConnect,
+    loginWithSavedCredential,
+    loginWithPassword,
+  } = useJellyfin();
 
   const {
     apiUrl: _apiUrl,
@@ -52,6 +64,14 @@ const Login: React.FC = () => {
     password: _password || "",
   });
 
+  // Save account state
+  const [saveAccount, setSaveAccount] = useState(false);
+  const [showSaveModal, setShowSaveModal] = useState(false);
+  const [pendingLogin, setPendingLogin] = useState<{
+    username: string;
+    password: string;
+  } | null>(null);
+
   /**
    * A way to auto login based on a link
    */
@@ -96,12 +116,34 @@ const Login: React.FC = () => {
   const handleLogin = async () => {
     Keyboard.dismiss();
 
+    const result = CredentialsSchema.safeParse(credentials);
+    if (!result.success) return;
+
+    if (saveAccount) {
+      // Show save account modal to choose security type
+      setPendingLogin({
+        username: credentials.username,
+        password: credentials.password,
+      });
+      setShowSaveModal(true);
+    } else {
+      // Login without saving
+      await performLogin(credentials.username, credentials.password);
+    }
+  };
+
+  const performLogin = async (
+    username: string,
+    password: string,
+    options?: {
+      saveAccount?: boolean;
+      securityType?: AccountSecurityType;
+      pinCode?: string;
+    },
+  ) => {
     setLoading(true);
     try {
-      const result = CredentialsSchema.safeParse(credentials);
-      if (result.success) {
-        await login(credentials.username, credentials.password);
-      }
+      await login(username, password, serverName, options);
     } catch (error) {
       if (error instanceof Error) {
         Alert.alert(t("login.connection_failed"), error.message);
@@ -113,6 +155,44 @@ const Login: React.FC = () => {
       }
     } finally {
       setLoading(false);
+      setPendingLogin(null);
+    }
+  };
+
+  const handleSaveAccountConfirm = async (
+    securityType: AccountSecurityType,
+    pinCode?: string,
+  ) => {
+    setShowSaveModal(false);
+    if (pendingLogin) {
+      await performLogin(pendingLogin.username, pendingLogin.password, {
+        saveAccount: true,
+        securityType,
+        pinCode,
+      });
+    }
+  };
+
+  const handleQuickLoginWithSavedCredential = async (
+    serverUrl: string,
+    userId: string,
+  ) => {
+    await loginWithSavedCredential(serverUrl, userId);
+  };
+
+  const handlePasswordLogin = async (
+    serverUrl: string,
+    username: string,
+    password: string,
+  ) => {
+    await loginWithPassword(serverUrl, username, password);
+  };
+
+  const handleAddAccount = (server: SavedServer) => {
+    // Server is already selected, go to credential entry
+    setServer({ address: server.address });
+    if (server.name) {
+      setServerName(server.name);
     }
   };
 
@@ -274,7 +354,8 @@ const Login: React.FC = () => {
                 keyboardType='default'
                 returnKeyType='done'
                 autoCapitalize='none'
-                textContentType='oneTimeCode'
+                autoCorrect={false}
+                textContentType='username'
                 clearButtonMode='while-editing'
                 maxLength={500}
                 extraClassName='mb-4'
@@ -380,9 +461,12 @@ const Login: React.FC = () => {
                   }}
                 />
                 <PreviousServersList
-                  onServerSelect={async (s: any) => {
+                  onServerSelect={async (s) => {
                     await handleConnect(s.address);
                   }}
+                  onQuickLogin={handleQuickLoginWithSavedCredential}
+                  onPasswordLogin={handlePasswordLogin}
+                  onAddAccount={handleAddAccount}
                 />
               </View>
             </View>
@@ -430,9 +514,8 @@ const Login: React.FC = () => {
                   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'
+                  autoCorrect={false}
+                  textContentType='username'
                   clearButtonMode='while-editing'
                   maxLength={500}
                 />
@@ -460,6 +543,21 @@ const Login: React.FC = () => {
                   clearButtonMode='while-editing'
                   maxLength={500}
                 />
+                <TouchableOpacity
+                  onPress={() => setSaveAccount(!saveAccount)}
+                  className='flex flex-row items-center py-2'
+                  activeOpacity={0.7}
+                >
+                  <Switch
+                    value={saveAccount}
+                    onValueChange={setSaveAccount}
+                    trackColor={{ false: "#3f3f46", true: Colors.primary }}
+                    thumbColor='white'
+                  />
+                  <Text className='ml-3 text-neutral-300'>
+                    {t("save_account.save_for_later")}
+                  </Text>
+                </TouchableOpacity>
                 <View className='flex flex-row items-center justify-between'>
                   <Button
                     onPress={handleLogin}
@@ -535,11 +633,25 @@ const Login: React.FC = () => {
                 onServerSelect={async (s) => {
                   await handleConnect(s.address);
                 }}
+                onQuickLogin={handleQuickLoginWithSavedCredential}
+                onPasswordLogin={handlePasswordLogin}
+                onAddAccount={handleAddAccount}
               />
             </View>
           </View>
         )}
       </KeyboardAvoidingView>
+
+      {/* Save Account Modal */}
+      <SaveAccountModal
+        visible={showSaveModal}
+        onClose={() => {
+          setShowSaveModal(false);
+          setPendingLogin(null);
+        }}
+        onSave={handleSaveAccountConfirm}
+        username={pendingLogin?.username || credentials.username}
+      />
     </SafeAreaView>
   );
 };

biome.json

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

bun.lock

@@ -6,6 +6,7 @@
       "name": "streamyfin",
       "dependencies": {
         "@bottom-tabs/react-navigation": "1.1.0",
+        "@douglowder/expo-av-route-picker-view": "^0.0.5",
         "@expo/metro-runtime": "~6.1.1",
         "@expo/react-native-action-sheet": "^4.1.1",
         "@expo/ui": "0.2.0-beta.9",
@@ -17,17 +18,19 @@
         "@react-navigation/native": "^7.0.14",
         "@shopify/flash-list": "2.0.2",
         "@tanstack/query-sync-storage-persister": "^5.90.18",
+        "@tanstack/react-pacer": "^0.19.1",
         "@tanstack/react-query": "5.90.12",
         "@tanstack/react-query-persist-client": "^5.90.18",
         "axios": "^1.7.9",
-        "expo": "~54.0.30",
+        "expo": "~54.0.31",
         "expo-application": "~7.0.8",
         "expo-asset": "~12.0.12",
         "expo-background-task": "~1.0.10",
         "expo-blur": "~15.0.8",
         "expo-brightness": "~14.0.8",
         "expo-build-properties": "~1.0.10",
-        "expo-constants": "~18.0.12",
+        "expo-constants": "18.0.13",
+        "expo-crypto": "^15.0.8",
         "expo-dev-client": "~6.0.20",
         "expo-device": "~8.0.10",
         "expo-font": "~14.0.10",
@@ -36,10 +39,10 @@
         "expo-linear-gradient": "~15.0.8",
         "expo-linking": "~8.0.11",
         "expo-localization": "~17.0.8",
-        "expo-notifications": "~0.32.15",
+        "expo-notifications": "~0.32.16",
         "expo-router": "~6.0.21",
         "expo-screen-orientation": "~9.0.8",
-        "expo-sensors": "~15.0.8",
+        "expo-secure-store": "^15.0.8",
         "expo-sharing": "~14.0.8",
         "expo-splash-screen": "~31.0.13",
         "expo-status-bar": "~3.0.9",
@@ -53,7 +56,7 @@
         "patch-package": "^8.0.0",
         "react": "19.1.0",
         "react-dom": "19.1.0",
-        "react-i18next": "16.0.0",
+        "react-i18next": "16.5.1",
         "react-native": "0.81.5",
         "react-native-awesome-slider": "^2.9.0",
         "react-native-bottom-tabs": "1.1.0",
@@ -69,7 +72,7 @@
         "react-native-image-colors": "^2.4.0",
         "react-native-ios-context-menu": "^3.2.1",
         "react-native-ios-utilities": "5.2.0",
-        "react-native-mmkv": "4.0.0",
+        "react-native-mmkv": "4.0.1",
         "react-native-nitro-modules": "^0.31.5",
         "react-native-pager-view": "^6.9.1",
         "react-native-reanimated": "~4.1.1",
@@ -77,6 +80,7 @@
         "react-native-safe-area-context": "~5.6.0",
         "react-native-screens": "~4.18.0",
         "react-native-svg": "15.12.1",
+        "react-native-text-ticker": "^1.15.0",
         "react-native-track-player": "github:lovegaoshi/react-native-track-player#APM",
         "react-native-udp": "^4.1.7",
         "react-native-url-polyfill": "^2.0.0",
@@ -91,24 +95,24 @@
       },
       "devDependencies": {
         "@babel/core": "7.28.5",
-        "@biomejs/biome": "2.3.5",
-        "@react-native-community/cli": "20.0.2",
+        "@biomejs/biome": "2.3.11",
+        "@react-native-community/cli": "20.1.0",
         "@react-native-tvos/config-tv": "0.1.4",
         "@types/jest": "29.5.14",
-        "@types/lodash": "4.17.20",
-        "@types/react": "~19.1.10",
+        "@types/lodash": "4.17.21",
+        "@types/react": "19.1.17",
         "@types/react-test-renderer": "19.1.0",
         "cross-env": "10.1.0",
-        "expo-doctor": "1.17.11",
+        "expo-doctor": "1.17.14",
         "husky": "9.1.7",
-        "lint-staged": "16.2.6",
-        "react-test-renderer": "19.1.1",
+        "lint-staged": "16.2.7",
+        "react-test-renderer": "19.2.3",
         "typescript": "5.9.3",
       },
     },
   },
   "overrides": {
-    "expo-constants": "~18.0.10",
+    "expo-constants": "18.0.13",
     "expo-task-manager": "~14.0.8",
   },
   "packages": {
@@ -304,35 +308,37 @@
 
     "@babel/types": ["@babel/types@7.28.5", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA=="],
 
-    "@biomejs/biome": ["@biomejs/biome@2.3.5", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.3.5", "@biomejs/cli-darwin-x64": "2.3.5", "@biomejs/cli-linux-arm64": "2.3.5", "@biomejs/cli-linux-arm64-musl": "2.3.5", "@biomejs/cli-linux-x64": "2.3.5", "@biomejs/cli-linux-x64-musl": "2.3.5", "@biomejs/cli-win32-arm64": "2.3.5", "@biomejs/cli-win32-x64": "2.3.5" }, "bin": { "biome": "bin/biome" } }, "sha512-HvLhNlIlBIbAV77VysRIBEwp55oM/QAjQEin74QQX9Xb259/XP/D5AGGnZMOyF1el4zcvlNYYR3AyTMUV3ILhg=="],
+    "@biomejs/biome": ["@biomejs/biome@2.3.11", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.3.11", "@biomejs/cli-darwin-x64": "2.3.11", "@biomejs/cli-linux-arm64": "2.3.11", "@biomejs/cli-linux-arm64-musl": "2.3.11", "@biomejs/cli-linux-x64": "2.3.11", "@biomejs/cli-linux-x64-musl": "2.3.11", "@biomejs/cli-win32-arm64": "2.3.11", "@biomejs/cli-win32-x64": "2.3.11" }, "bin": { "biome": "bin/biome" } }, "sha512-/zt+6qazBWguPG6+eWmiELqO+9jRsMZ/DBU3lfuU2ngtIQYzymocHhKiZRyrbra4aCOoyTg/BmY+6WH5mv9xmQ=="],
 
-    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.3.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-fLdTur8cJU33HxHUUsii3GLx/TR0BsfQx8FkeqIiW33cGMtUD56fAtrh+2Fx1uhiCsVZlFh6iLKUU3pniZREQw=="],
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.3.11", "", { "os": "darwin", "cpu": "arm64" }, "sha512-/uXXkBcPKVQY7rc9Ys2CrlirBJYbpESEDme7RKiBD6MmqR2w3j0+ZZXRIL2xiaNPsIMMNhP1YnA+jRRxoOAFrA=="],
 
-    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.3.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-qpT8XDqeUlzrOW8zb4k3tjhT7rmvVRumhi2657I2aGcY4B+Ft5fNwDdZGACzn8zj7/K1fdWjgwYE3i2mSZ+vOA=="],
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.3.11", "", { "os": "darwin", "cpu": "x64" }, "sha512-fh7nnvbweDPm2xEmFjfmq7zSUiox88plgdHF9OIW4i99WnXrAC3o2P3ag9judoUMv8FCSUnlwJCM1B64nO5Fbg=="],
 
-    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.3.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-u/pybjTBPGBHB66ku4pK1gj+Dxgx7/+Z0jAriZISPX1ocTO8aHh8x8e7Kb1rB4Ms0nA/SzjtNOVJ4exVavQBCw=="],
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.3.11", "", { "os": "linux", "cpu": "arm64" }, "sha512-l4xkGa9E7Uc0/05qU2lMYfN1H+fzzkHgaJoy98wO+b/7Gl78srbCRRgwYSW+BTLixTBrM6Ede5NSBwt7rd/i6g=="],
 
-    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.3.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-eGUG7+hcLgGnMNl1KHVZUYxahYAhC462jF/wQolqu4qso2MSk32Q+QrpN7eN4jAHAg7FUMIo897muIhK4hXhqg=="],
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.3.11", "", { "os": "linux", "cpu": "arm64" }, "sha512-XPSQ+XIPZMLaZ6zveQdwNjbX+QdROEd1zPgMwD47zvHV+tCGB88VH+aynyGxAHdzL+Tm/+DtKST5SECs4iwCLg=="],
 
-    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.3.5", "", { "os": "linux", "cpu": "x64" }, "sha512-XrIVi9YAW6ye0CGQ+yax0gLfx+BFOtKaNX74n+xHWla6Cl6huUmcKNO7HPx7BiKnJUzrxXY1qYlm7xMvi08X4g=="],
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.3.11", "", { "os": "linux", "cpu": "x64" }, "sha512-/1s9V/H3cSe0r0Mv/Z8JryF5x9ywRxywomqZVLHAoa/uN0eY7F8gEngWKNS5vbbN/BsfpCG5yeBT5ENh50Frxg=="],
 
-    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.3.5", "", { "os": "linux", "cpu": "x64" }, "sha512-awVuycTPpVTH/+WDVnEEYSf6nbCBHf/4wB3lquwT7puhNg8R4XvonWNZzUsfHZrCkjkLhFH/vCZK5jHatD9FEg=="],
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.3.11", "", { "os": "linux", "cpu": "x64" }, "sha512-vU7a8wLs5C9yJ4CB8a44r12aXYb8yYgBn+WeyzbMjaCMklzCv1oXr8x+VEyWodgJt9bDmhiaW/I0RHbn7rsNmw=="],
 
-    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.3.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-DlBiMlBZZ9eIq4H7RimDSGsYcOtfOIfZOaI5CqsWiSlbTfqbPVfWtCf92wNzx8GNMbu1s7/g3ZZESr6+GwM/SA=="],
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.3.11", "", { "os": "win32", "cpu": "arm64" }, "sha512-PZQ6ElCOnkYapSsysiTy0+fYX+agXPlWugh6+eQ6uPKI3vKAqNp6TnMhoM3oY2NltSB89hz59o8xIfOdyhi9Iw=="],
 
-    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.3.5", "", { "os": "win32", "cpu": "x64" }, "sha512-nUmR8gb6yvrKhtRgzwo/gDimPwnO5a4sCydf8ZS2kHIJhEmSmk+STsusr1LHTuM//wXppBawvSQi2xFXJCdgKQ=="],
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.3.11", "", { "os": "win32", "cpu": "x64" }, "sha512-43VrG813EW+b5+YbDbz31uUsheX+qFKCpXeY9kfdAx+ww3naKxeVkTD9zLIWxUPfJquANMHrmW3wbe/037G0Qg=="],
 
     "@bottom-tabs/react-navigation": ["@bottom-tabs/react-navigation@1.1.0", "", { "dependencies": { "color": "^5.0.0" }, "peerDependencies": { "@react-navigation/native": ">=7", "react": "*", "react-native": "*", "react-native-bottom-tabs": "*" } }, "sha512-+4YppCodABcSNIgJiq95QUQ+3ClVBG+rLG3WmYI0+/nbxqKbCz6luFBep4KFOj98Iplj1JY2Ki6ix8CcOZVQ/Q=="],
 
     "@dominicstop/ts-event-emitter": ["@dominicstop/ts-event-emitter@1.1.0", "", {}, "sha512-CcxmJIvUb1vsFheuGGVSQf4KdPZC44XolpUT34+vlal+LyQoBUOn31pjFET5M9ctOxEpt8xa0M3/2M7uUiAoJw=="],
 
+    "@douglowder/expo-av-route-picker-view": ["@douglowder/expo-av-route-picker-view@0.0.5", "", { "peerDependencies": { "expo": "*", "react": "*" } }, "sha512-oT4wf8aYYNfLEuZEkwZIH7CtEHKnEHWnjs6/hNwbFGEC0FnfjjWBNrQEt4fo5/gkafqa2G5ILkxndMyBZvk5dg=="],
+
     "@egjs/hammerjs": ["@egjs/hammerjs@2.0.17", "", { "dependencies": { "@types/hammerjs": "^2.0.36" } }, "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A=="],
 
     "@epic-web/invariant": ["@epic-web/invariant@1.0.0", "", {}, "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA=="],
 
-    "@expo/cli": ["@expo/cli@54.0.20", "", { "dependencies": { "@0no-co/graphql.web": "^1.0.8", "@expo/code-signing-certificates": "^0.0.5", "@expo/config": "~12.0.13", "@expo/config-plugins": "~54.0.4", "@expo/devcert": "^1.2.1", "@expo/env": "~2.0.8", "@expo/image-utils": "^0.8.8", "@expo/json-file": "^10.0.8", "@expo/metro": "~54.2.0", "@expo/metro-config": "~54.0.12", "@expo/osascript": "^2.3.8", "@expo/package-manager": "^1.9.9", "@expo/plist": "^0.4.8", "@expo/prebuild-config": "^54.0.8", "@expo/schema-utils": "^0.1.8", "@expo/spawn-async": "^1.7.2", "@expo/ws-tunnel": "^1.0.1", "@expo/xcpretty": "^4.3.0", "@react-native/dev-middleware": "0.81.5", "@urql/core": "^5.0.6", "@urql/exchange-retry": "^1.3.0", "accepts": "^1.3.8", "arg": "^5.0.2", "better-opn": "~3.0.2", "bplist-creator": "0.1.0", "bplist-parser": "^0.3.1", "chalk": "^4.0.0", "ci-info": "^3.3.0", "compression": "^1.7.4", "connect": "^3.7.0", "debug": "^4.3.4", "env-editor": "^0.4.1", "expo-server": "^1.0.5", "freeport-async": "^2.0.0", "getenv": "^2.0.0", "glob": "^13.0.0", "lan-network": "^0.1.6", "minimatch": "^9.0.0", "node-forge": "^1.3.1", "npm-package-arg": "^11.0.0", "ora": "^3.4.0", "picomatch": "^3.0.1", "pretty-bytes": "^5.6.0", "pretty-format": "^29.7.0", "progress": "^2.0.3", "prompts": "^2.3.2", "qrcode-terminal": "0.11.0", "require-from-string": "^2.0.2", "requireg": "^0.2.2", "resolve": "^1.22.2", "resolve-from": "^5.0.0", "resolve.exports": "^2.0.3", "semver": "^7.6.0", "send": "^0.19.0", "slugify": "^1.3.4", "source-map-support": "~0.5.21", "stacktrace-parser": "^0.1.10", "structured-headers": "^0.4.1", "tar": "^7.5.2", "terminal-link": "^2.1.1", "undici": "^6.18.2", "wrap-ansi": "^7.0.0", "ws": "^8.12.1" }, "peerDependencies": { "expo": "*", "expo-router": "*", "react-native": "*" }, "optionalPeers": ["expo-router", "react-native"], "bin": { "expo-internal": "build/bin/cli" } }, "sha512-cwsXmhftvS0p9NNYOhXGnicBAZl9puWwRt19Qq5eQ6njLnaj8WvcR+kDZyADtgZxBsZiyVlrKXvnjt43HXywQA=="],
+    "@expo/cli": ["@expo/cli@54.0.21", "", { "dependencies": { "@0no-co/graphql.web": "^1.0.8", "@expo/code-signing-certificates": "^0.0.6", "@expo/config": "~12.0.13", "@expo/config-plugins": "~54.0.4", "@expo/devcert": "^1.2.1", "@expo/env": "~2.0.8", "@expo/image-utils": "^0.8.8", "@expo/json-file": "^10.0.8", "@expo/metro": "~54.2.0", "@expo/metro-config": "~54.0.13", "@expo/osascript": "^2.3.8", "@expo/package-manager": "^1.9.9", "@expo/plist": "^0.4.8", "@expo/prebuild-config": "^54.0.8", "@expo/schema-utils": "^0.1.8", "@expo/spawn-async": "^1.7.2", "@expo/ws-tunnel": "^1.0.1", "@expo/xcpretty": "^4.3.0", "@react-native/dev-middleware": "0.81.5", "@urql/core": "^5.0.6", "@urql/exchange-retry": "^1.3.0", "accepts": "^1.3.8", "arg": "^5.0.2", "better-opn": "~3.0.2", "bplist-creator": "0.1.0", "bplist-parser": "^0.3.1", "chalk": "^4.0.0", "ci-info": "^3.3.0", "compression": "^1.7.4", "connect": "^3.7.0", "debug": "^4.3.4", "env-editor": "^0.4.1", "expo-server": "^1.0.5", "freeport-async": "^2.0.0", "getenv": "^2.0.0", "glob": "^13.0.0", "lan-network": "^0.1.6", "minimatch": "^9.0.0", "node-forge": "^1.3.3", "npm-package-arg": "^11.0.0", "ora": "^3.4.0", "picomatch": "^3.0.1", "pretty-bytes": "^5.6.0", "pretty-format": "^29.7.0", "progress": "^2.0.3", "prompts": "^2.3.2", "qrcode-terminal": "0.11.0", "require-from-string": "^2.0.2", "requireg": "^0.2.2", "resolve": "^1.22.2", "resolve-from": "^5.0.0", "resolve.exports": "^2.0.3", "semver": "^7.6.0", "send": "^0.19.0", "slugify": "^1.3.4", "source-map-support": "~0.5.21", "stacktrace-parser": "^0.1.10", "structured-headers": "^0.4.1", "tar": "^7.5.2", "terminal-link": "^2.1.1", "undici": "^6.18.2", "wrap-ansi": "^7.0.0", "ws": "^8.12.1" }, "peerDependencies": { "expo": "*", "expo-router": "*", "react-native": "*" }, "optionalPeers": ["expo-router", "react-native"], "bin": { "expo-internal": "build/bin/cli" } }, "sha512-L/FdpyZDsg/Nq6xW6kfiyF9DUzKfLZCKFXEVZcDqCNar6bXxQVotQyvgexRvtUF5nLinuT/UafLOdC3FUALUmA=="],
 
-    "@expo/code-signing-certificates": ["@expo/code-signing-certificates@0.0.5", "", { "dependencies": { "node-forge": "^1.2.1", "nullthrows": "^1.1.1" } }, "sha512-BNhXkY1bblxKZpltzAx98G2Egj9g1Q+JRcvR7E99DOj862FTCX+ZPsAUtPTr7aHxwtrL7+fL3r0JSmM9kBm+Bw=="],
+    "@expo/code-signing-certificates": ["@expo/code-signing-certificates@0.0.6", "", { "dependencies": { "node-forge": "^1.3.3" } }, "sha512-iNe0puxwBNEcuua9gmTGzq+SuMDa0iATai1FlFTMHJ/vUmKvN/V//drXoLJkVb5i5H3iE/n/qIJxyoBnXouD0w=="],
 
     "@expo/config": ["@expo/config@12.0.13", "", { "dependencies": { "@babel/code-frame": "~7.10.4", "@expo/config-plugins": "~54.0.4", "@expo/config-types": "^54.0.10", "@expo/json-file": "^10.0.8", "deepmerge": "^4.3.1", "getenv": "^2.0.0", "glob": "^13.0.0", "require-from-string": "^2.0.2", "resolve-from": "^5.0.0", "resolve-workspace-root": "^2.0.0", "semver": "^7.6.0", "slugify": "^1.3.4", "sucrase": "~3.35.1" } }, "sha512-Cu52arBa4vSaupIWsF0h7F/Cg//N374nYb7HAxV0I4KceKA7x2UXpYaHOL7EEYYvp7tZdThBjvGpVmr8ScIvaQ=="],
 
@@ -344,7 +350,7 @@
 
     "@expo/devtools": ["@expo/devtools@0.1.8", "", { "dependencies": { "chalk": "^4.1.2" }, "peerDependencies": { "react": "*", "react-native": "*" }, "optionalPeers": ["react", "react-native"] }, "sha512-SVLxbuanDjJPgc0sy3EfXUMLb/tXzp6XIHkhtPVmTWJAp+FOr6+5SeiCfJrCzZFet0Ifyke2vX3sFcKwEvCXwQ=="],
 
-    "@expo/env": ["@expo/env@2.0.7", "", { "dependencies": { "chalk": "^4.0.0", "debug": "^4.3.4", "dotenv": "~16.4.5", "dotenv-expand": "~11.0.6", "getenv": "^2.0.0" } }, "sha512-BNETbLEohk3HQ2LxwwezpG8pq+h7Fs7/vAMP3eAtFT1BCpprLYoBBFZH7gW4aqGfqOcVP4Lc91j014verrYNGg=="],
+    "@expo/env": ["@expo/env@2.0.8", "", { "dependencies": { "chalk": "^4.0.0", "debug": "^4.3.4", "dotenv": "~16.4.5", "dotenv-expand": "~11.0.6", "getenv": "^2.0.0" } }, "sha512-5VQD6GT8HIMRaSaB5JFtOXuvfDVU80YtZIuUT/GDhUF782usIXY13Tn3IdDz1Tm/lqA9qnRZQ1BF4t7LlvdJPA=="],
 
     "@expo/fingerprint": ["@expo/fingerprint@0.15.4", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "arg": "^5.0.2", "chalk": "^4.1.2", "debug": "^4.3.4", "getenv": "^2.0.0", "glob": "^13.0.0", "ignore": "^5.3.1", "minimatch": "^9.0.0", "p-limit": "^3.1.0", "resolve-from": "^5.0.0", "semver": "^7.6.0" }, "bin": { "fingerprint": "bin/cli.js" } }, "sha512-eYlxcrGdR2/j2M6pEDXo9zU9KXXF1vhP+V+Tl+lyY+bU8lnzrN6c637mz6Ye3em2ANy8hhUR03Raf8VsT9Ogng=="],
 
@@ -354,7 +360,7 @@
 
     "@expo/metro": ["@expo/metro@54.2.0", "", { "dependencies": { "metro": "0.83.3", "metro-babel-transformer": "0.83.3", "metro-cache": "0.83.3", "metro-cache-key": "0.83.3", "metro-config": "0.83.3", "metro-core": "0.83.3", "metro-file-map": "0.83.3", "metro-minify-terser": "0.83.3", "metro-resolver": "0.83.3", "metro-runtime": "0.83.3", "metro-source-map": "0.83.3", "metro-symbolicate": "0.83.3", "metro-transform-plugins": "0.83.3", "metro-transform-worker": "0.83.3" } }, "sha512-h68TNZPGsk6swMmLm9nRSnE2UXm48rWwgcbtAHVMikXvbxdS41NDHHeqg1rcQ9AbznDRp6SQVC2MVpDnsRKU1w=="],
 
-    "@expo/metro-config": ["@expo/metro-config@54.0.12", "", { "dependencies": { "@babel/code-frame": "^7.20.0", "@babel/core": "^7.20.0", "@babel/generator": "^7.20.5", "@expo/config": "~12.0.13", "@expo/env": "~2.0.8", "@expo/json-file": "~10.0.8", "@expo/metro": "~54.2.0", "@expo/spawn-async": "^1.7.2", "browserslist": "^4.25.0", "chalk": "^4.1.0", "debug": "^4.3.2", "dotenv": "~16.4.5", "dotenv-expand": "~11.0.6", "getenv": "^2.0.0", "glob": "^13.0.0", "hermes-parser": "^0.29.1", "jsc-safe-url": "^0.2.4", "lightningcss": "^1.30.1", "minimatch": "^9.0.0", "postcss": "~8.4.32", "resolve-from": "^5.0.0" }, "peerDependencies": { "expo": "*" }, "optionalPeers": ["expo"] }, "sha512-Xhv1z/ak/cuJWeLxlnWr2u22q2AM/klASbjpP5eE34y91lGWa2NUwrFWoS830MhJ6kuAqtGdoQhwyPa3TES7sA=="],
+    "@expo/metro-config": ["@expo/metro-config@54.0.13", "", { "dependencies": { "@babel/code-frame": "^7.20.0", "@babel/core": "^7.20.0", "@babel/generator": "^7.20.5", "@expo/config": "~12.0.13", "@expo/env": "~2.0.8", "@expo/json-file": "~10.0.8", "@expo/metro": "~54.2.0", "@expo/spawn-async": "^1.7.2", "browserslist": "^4.25.0", "chalk": "^4.1.0", "debug": "^4.3.2", "dotenv": "~16.4.5", "dotenv-expand": "~11.0.6", "getenv": "^2.0.0", "glob": "^13.0.0", "hermes-parser": "^0.29.1", "jsc-safe-url": "^0.2.4", "lightningcss": "^1.30.1", "minimatch": "^9.0.0", "postcss": "~8.4.32", "resolve-from": "^5.0.0" }, "peerDependencies": { "expo": "*" }, "optionalPeers": ["expo"] }, "sha512-RRufMCgLR2Za1WGsh02OatIJo5qZFt31yCnIOSfoubNc3Qqe92Z41pVsbrFnmw5CIaisv1NgdBy05DHe7pEyuw=="],
 
     "@expo/metro-runtime": ["@expo/metro-runtime@6.1.2", "", { "dependencies": { "anser": "^1.4.9", "pretty-format": "^29.7.0", "stacktrace-parser": "^0.1.10", "whatwg-fetch": "^3.0.0" }, "peerDependencies": { "expo": "*", "react": "*", "react-dom": "*", "react-native": "*" }, "optionalPeers": ["react-dom"] }, "sha512-nvM+Qv45QH7pmYvP8JB1G8JpScrWND3KrMA6ZKe62cwwNiX/BjHU28Ear0v/4bQWXlOY0mv6B8CDIm8JxXde9g=="],
 
@@ -506,29 +512,29 @@
 
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
-    "@react-native-community/cli": ["@react-native-community/cli@20.0.2", "", { "dependencies": { "@react-native-community/cli-clean": "20.0.2", "@react-native-community/cli-config": "20.0.2", "@react-native-community/cli-doctor": "20.0.2", "@react-native-community/cli-server-api": "20.0.2", "@react-native-community/cli-tools": "20.0.2", "@react-native-community/cli-types": "20.0.2", "chalk": "^4.1.2", "commander": "^9.4.1", "deepmerge": "^4.3.0", "execa": "^5.0.0", "find-up": "^5.0.0", "fs-extra": "^8.1.0", "graceful-fs": "^4.1.3", "prompts": "^2.4.2", "semver": "^7.5.2" }, "bin": { "rnc-cli": "build/bin.js" } }, "sha512-ocgRFKRLX8b5rEK38SJfpr0AMl6SqseWljk6c5LxCG/zpCfPPNQdXq1OsDvmEwsqO4OEQ6tmOaSm9OgTm6FhbQ=="],
+    "@react-native-community/cli": ["@react-native-community/cli@20.1.0", "", { "dependencies": { "@react-native-community/cli-clean": "20.1.0", "@react-native-community/cli-config": "20.1.0", "@react-native-community/cli-doctor": "20.1.0", "@react-native-community/cli-server-api": "20.1.0", "@react-native-community/cli-tools": "20.1.0", "@react-native-community/cli-types": "20.1.0", "commander": "^9.4.1", "deepmerge": "^4.3.0", "execa": "^5.0.0", "find-up": "^5.0.0", "fs-extra": "^8.1.0", "graceful-fs": "^4.1.3", "picocolors": "^1.1.1", "prompts": "^2.4.2", "semver": "^7.5.2" }, "bin": { "rnc-cli": "build/bin.js" } }, "sha512-441WsVtRe4nGJ9OzA+QMU1+22lA6Q2hRWqqIMKD0wjEMLqcSfOZyu2UL9a/yRpL/dRpyUsU4n7AxqKfTKO/Csg=="],
 
-    "@react-native-community/cli-clean": ["@react-native-community/cli-clean@20.0.2", "", { "dependencies": { "@react-native-community/cli-tools": "20.0.2", "chalk": "^4.1.2", "execa": "^5.0.0", "fast-glob": "^3.3.2" } }, "sha512-hfbC69fTD0fqZCCep8aqnVztBXUhAckNhi76lEV7USENtgBRwNq2s1wATgKAzOhxKuAL9TEkf5TZ/Dhp/YLhCQ=="],
+    "@react-native-community/cli-clean": ["@react-native-community/cli-clean@20.1.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.0", "execa": "^5.0.0", "fast-glob": "^3.3.2", "picocolors": "^1.1.1" } }, "sha512-77L4DifWfxAT8ByHnkypge7GBMYpbJAjBGV+toowt5FQSGaTBDcBHCX+FFqFRukD5fH6i8sZ41Gtw+nbfCTTIA=="],
 
-    "@react-native-community/cli-config": ["@react-native-community/cli-config@20.0.2", "", { "dependencies": { "@react-native-community/cli-tools": "20.0.2", "chalk": "^4.1.2", "cosmiconfig": "^9.0.0", "deepmerge": "^4.3.0", "fast-glob": "^3.3.2", "joi": "^17.2.1" } }, "sha512-OuSAyqTv0MBbRqSyO+80IKasHnwLESydZBTrLjIGwGhDokMH07mZo8Io2H8X300WWa57LC2L8vQf73TzGS3ikQ=="],
+    "@react-native-community/cli-config": ["@react-native-community/cli-config@20.1.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.0", "cosmiconfig": "^9.0.0", "deepmerge": "^4.3.0", "fast-glob": "^3.3.2", "joi": "^17.2.1", "picocolors": "^1.1.1" } }, "sha512-1x9rhLLR/dKKb92Lb5O0l0EmUG08FHf+ZVyVEf9M+tX+p5QIm52MRiy43R0UAZ2jJnFApxRk+N3sxoYK4Dtnag=="],
 
-    "@react-native-community/cli-config-android": ["@react-native-community/cli-config-android@20.0.2", "", { "dependencies": { "@react-native-community/cli-tools": "20.0.2", "chalk": "^4.1.2", "fast-glob": "^3.3.2", "fast-xml-parser": "^4.4.1" } }, "sha512-5yZ2Grr89omnMptV36ilV4EIrRLrIYQAsTTVU/hNI2vL7lz6WB8rPhP5QuovXk3TIjl1Wz2r9A6ZNO2SNJ8nig=="],
+    "@react-native-community/cli-config-android": ["@react-native-community/cli-config-android@20.1.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.0", "fast-glob": "^3.3.2", "fast-xml-parser": "^4.4.1", "picocolors": "^1.1.1" } }, "sha512-3A01ZDyFeCALzzPcwP/fleHoP3sGNq1UX7FzxkTrOFX8RRL9ntXNXQd27E56VU4BBxGAjAJT4Utw8pcOjJceIA=="],
 
-    "@react-native-community/cli-config-apple": ["@react-native-community/cli-config-apple@20.0.2", "", { "dependencies": { "@react-native-community/cli-tools": "20.0.2", "chalk": "^4.1.2", "execa": "^5.0.0", "fast-glob": "^3.3.2" } }, "sha512-6MLL9Duu/JytqI6XfYuc78LSkRGfJoCqTSfqTJzBNSnz6S7XJps9spGBlgvrGh/j0howBpQlFH0J8Ws4N4mCxA=="],
+    "@react-native-community/cli-config-apple": ["@react-native-community/cli-config-apple@20.1.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.0", "execa": "^5.0.0", "fast-glob": "^3.3.2", "picocolors": "^1.1.1" } }, "sha512-n6JVs8Q3yxRbtZQOy05ofeb1kGtspGN3SgwPmuaqvURF9fsuS7c4/9up2Kp9C+1D2J1remPJXiZLNGOcJvfpOA=="],
 
-    "@react-native-community/cli-doctor": ["@react-native-community/cli-doctor@20.0.2", "", { "dependencies": { "@react-native-community/cli-config": "20.0.2", "@react-native-community/cli-platform-android": "20.0.2", "@react-native-community/cli-platform-apple": "20.0.2", "@react-native-community/cli-platform-ios": "20.0.2", "@react-native-community/cli-tools": "20.0.2", "chalk": "^4.1.2", "command-exists": "^1.2.8", "deepmerge": "^4.3.0", "envinfo": "^7.13.0", "execa": "^5.0.0", "node-stream-zip": "^1.9.1", "ora": "^5.4.1", "semver": "^7.5.2", "wcwidth": "^1.0.1", "yaml": "^2.2.1" } }, "sha512-PQ8BdoNDE2OaMGLH66HZE7FV4qj0iWBHi0lkPUTb8eJJ+vlvzUtBf0N9QSv2TAzFjA59a2FElk6jBWnDC/ql1A=="],
+    "@react-native-community/cli-doctor": ["@react-native-community/cli-doctor@20.1.0", "", { "dependencies": { "@react-native-community/cli-config": "20.1.0", "@react-native-community/cli-platform-android": "20.1.0", "@react-native-community/cli-platform-apple": "20.1.0", "@react-native-community/cli-platform-ios": "20.1.0", "@react-native-community/cli-tools": "20.1.0", "command-exists": "^1.2.8", "deepmerge": "^4.3.0", "envinfo": "^7.13.0", "execa": "^5.0.0", "node-stream-zip": "^1.9.1", "ora": "^5.4.1", "picocolors": "^1.1.1", "semver": "^7.5.2", "wcwidth": "^1.0.1", "yaml": "^2.2.1" } }, "sha512-QfJF1GVjA4PBrIT3SJ0vFFIu0km1vwOmLDlOYVqfojajZJ+Dnvl0f94GN1il/jT7fITAxom///XH3/URvi7YTQ=="],
 
-    "@react-native-community/cli-platform-android": ["@react-native-community/cli-platform-android@20.0.2", "", { "dependencies": { "@react-native-community/cli-config-android": "20.0.2", "@react-native-community/cli-tools": "20.0.2", "chalk": "^4.1.2", "execa": "^5.0.0", "logkitty": "^0.7.1" } }, "sha512-Wo2AIkdv3PMEMT4k7QiNm3smNpWK6rd+glVH4Nm6Hco1EgLQ4I9x+gwcS1yN53UHYtq9YnguDCXk2L8duUESDQ=="],
+    "@react-native-community/cli-platform-android": ["@react-native-community/cli-platform-android@20.1.0", "", { "dependencies": { "@react-native-community/cli-config-android": "20.1.0", "@react-native-community/cli-tools": "20.1.0", "execa": "^5.0.0", "logkitty": "^0.7.1", "picocolors": "^1.1.1" } }, "sha512-TeHPDThOwDppQRpndm9kCdRCBI8AMy3HSIQ+iy7VYQXL5BtZ5LfmGdusoj7nVN/ZGn0Lc6Gwts5qowyupXdeKg=="],
 
-    "@react-native-community/cli-platform-apple": ["@react-native-community/cli-platform-apple@20.0.2", "", { "dependencies": { "@react-native-community/cli-config-apple": "20.0.2", "@react-native-community/cli-tools": "20.0.2", "chalk": "^4.1.2", "execa": "^5.0.0", "fast-xml-parser": "^4.4.1" } }, "sha512-PdsQVFLY+wGnAN1kZ38XzzWiUlqaG1cXdpkQ1rYaiiNu3PVTc2/KtteLcPG/wbApbfoPggQ/ffh+JGg7NL+HNw=="],
+    "@react-native-community/cli-platform-apple": ["@react-native-community/cli-platform-apple@20.1.0", "", { "dependencies": { "@react-native-community/cli-config-apple": "20.1.0", "@react-native-community/cli-tools": "20.1.0", "execa": "^5.0.0", "fast-xml-parser": "^4.4.1", "picocolors": "^1.1.1" } }, "sha512-0ih1hrYezSM2cuOlVnwBEFtMwtd8YgpTLmZauDJCv50rIumtkI1cQoOgLoS4tbPCj9U/Vn2a9BFH0DLFOOIacg=="],
 
-    "@react-native-community/cli-platform-ios": ["@react-native-community/cli-platform-ios@20.0.2", "", { "dependencies": { "@react-native-community/cli-platform-apple": "20.0.2" } }, "sha512-bVOqLsBztT+xVV65uztJ7R/dtjj4vaPXJU1RLi35zLtr1APAxzf+2ydiixxtBjNFylM3AZlF8iL5WXjeWVqrmA=="],
+    "@react-native-community/cli-platform-ios": ["@react-native-community/cli-platform-ios@20.1.0", "", { "dependencies": { "@react-native-community/cli-platform-apple": "20.1.0" } }, "sha512-XN7Da9z4WsJxtqVtEzY8q2bv22OsvzaFP5zy5+phMWNoJlU4lf7IvBSxqGYMpQ9XhYP7arDw5vmW4W34s06rnA=="],
 
-    "@react-native-community/cli-server-api": ["@react-native-community/cli-server-api@20.0.2", "", { "dependencies": { "@react-native-community/cli-tools": "20.0.2", "body-parser": "^1.20.3", "compression": "^1.7.1", "connect": "^3.6.5", "errorhandler": "^1.5.1", "nocache": "^3.0.1", "open": "^6.2.0", "pretty-format": "^29.7.0", "serve-static": "^1.13.1", "ws": "^6.2.3" } }, "sha512-u4tUzWnc+qthaDvd1NxdCqCNMY7Px6dAH1ODAXMtt+N27llGMJOl0J3slMx03dScftOWbGM61KA5cCpaxphYVQ=="],
+    "@react-native-community/cli-server-api": ["@react-native-community/cli-server-api@20.1.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.0", "body-parser": "^1.20.3", "compression": "^1.7.1", "connect": "^3.6.5", "errorhandler": "^1.5.1", "nocache": "^3.0.1", "open": "^6.2.0", "pretty-format": "^29.7.0", "serve-static": "^1.13.1", "ws": "^6.2.3" } }, "sha512-Tb415Oh8syXNT2zOzLzFkBXznzGaqKCiaichxKzGCDKg6JGHp3jSuCmcTcaPeYC7oc32n/S3Psw7798r4Q/7lA=="],
 
-    "@react-native-community/cli-tools": ["@react-native-community/cli-tools@20.0.2", "", { "dependencies": { "@vscode/sudo-prompt": "^9.0.0", "appdirsjs": "^1.2.4", "chalk": "^4.1.2", "execa": "^5.0.0", "find-up": "^5.0.0", "launch-editor": "^2.9.1", "mime": "^2.4.1", "ora": "^5.4.1", "prompts": "^2.4.2", "semver": "^7.5.2" } }, "sha512-bPYhRYggW9IIM8pvrZF/0r6HaxCyEWDn6zfPQPMWlkQUwkzFZ8GBY/M7yiHgDzozWKPT4DqZPumrq806Vcksow=="],
+    "@react-native-community/cli-tools": ["@react-native-community/cli-tools@20.1.0", "", { "dependencies": { "@vscode/sudo-prompt": "^9.0.0", "appdirsjs": "^1.2.4", "execa": "^5.0.0", "find-up": "^5.0.0", "launch-editor": "^2.9.1", "mime": "^2.4.1", "ora": "^5.4.1", "picocolors": "^1.1.1", "prompts": "^2.4.2", "semver": "^7.5.2" } }, "sha512-/YmzHGOkY6Bgrv4OaA1L8rFqsBlQd1EB2/ipAoKPiieV0EcB5PUamUSuNeFU3sBZZTYQCUENwX4wgOHgFUlDnQ=="],
 
-    "@react-native-community/cli-types": ["@react-native-community/cli-types@20.0.2", "", { "dependencies": { "joi": "^17.2.1" } }, "sha512-OZzy6U4M8Szg8iiF459OoTjRKggxLrdhZVHKfRhrAUfojhjRiWbJNkkPxJtOIPeNSgsB0heizgpE4QwCgnYeuQ=="],
+    "@react-native-community/cli-types": ["@react-native-community/cli-types@20.1.0", "", { "dependencies": { "joi": "^17.2.1" } }, "sha512-D0kDspcwgbVXyNjwicT7Bb1JgXjijTw1JJd+qxyF/a9+sHv7TU4IchV+gN38QegeXqVyM4Ym7YZIvXMFBmyJqA=="],
 
     "@react-native-community/netinfo": ["@react-native-community/netinfo@11.4.1", "", { "peerDependencies": { "react-native": ">=0.59" } }, "sha512-B0BYAkghz3Q2V09BF88RA601XursIEA111tnc2JOaN7axJWmNefmfjZqw/KdSxKZp7CZUuPpjBmz/WCR9uaHYg=="],
 
@@ -584,16 +590,26 @@
 
     "@sinonjs/fake-timers": ["@sinonjs/fake-timers@10.3.0", "", { "dependencies": { "@sinonjs/commons": "^3.0.0" } }, "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA=="],
 
+    "@tanstack/devtools-event-client": ["@tanstack/devtools-event-client@0.4.0", "", {}, "sha512-RPfGuk2bDZgcu9bAJodvO2lnZeHuz4/71HjZ0bGb/SPg8+lyTA+RLSKQvo7fSmPSi8/vcH3aKQ8EM9ywf1olaw=="],
+
+    "@tanstack/pacer": ["@tanstack/pacer@0.17.1", "", { "dependencies": { "@tanstack/devtools-event-client": "^0.4.0", "@tanstack/store": "^0.8.0" } }, "sha512-52GytGu07L73lNCWB1N02NWBp/tzK2jZ20U8sFInXyiq2KHtHxbXaN1Qw/MR1REqFIKgEy5DOBNZRjuSy5zaRg=="],
+
     "@tanstack/query-core": ["@tanstack/query-core@5.90.16", "", {}, "sha512-MvtWckSVufs/ja463/K4PyJeqT+HMlJWtw6PrCpywznd2NSgO3m4KwO9RqbFqGg6iDE8vVMFWMeQI4Io3eEYww=="],
 
     "@tanstack/query-persist-client-core": ["@tanstack/query-persist-client-core@5.91.15", "", { "dependencies": { "@tanstack/query-core": "5.90.16" } }, "sha512-vnPSfQVo41EKJN8v20nkhWNZPyB1dMJIy5icOvCGzcCJzsmRefYY1owtr63ICOcjOiPPTuNEfPsdjdBhkzYnmA=="],
 
     "@tanstack/query-sync-storage-persister": ["@tanstack/query-sync-storage-persister@5.90.18", "", { "dependencies": { "@tanstack/query-core": "5.90.16", "@tanstack/query-persist-client-core": "5.91.15" } }, "sha512-tKngFopz/TuAe7LBDg7IOhWPh9blxdQ6QG/vVL2dFzRmlPNcSo4WdCSONqSDioJkcyTwh1YCSlcikmJ1WnSb3Q=="],
 
+    "@tanstack/react-pacer": ["@tanstack/react-pacer@0.19.1", "", { "dependencies": { "@tanstack/pacer": "0.17.1", "@tanstack/react-store": "^0.8.0" }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-wfGwKLo2gosKr5tsXico+jWJ8LsWsBC8MA1HVtUY/D6dhFduEVizKxRUcvP60I3dRvnoXDbN202g4feJHlivnA=="],
+
     "@tanstack/react-query": ["@tanstack/react-query@5.90.12", "", { "dependencies": { "@tanstack/query-core": "5.90.12" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-graRZspg7EoEaw0a8faiUASCyJrqjKPdqJ9EwuDRUF9mEYJ1YPczI9H+/agJ0mOJkPCJDk0lsz5QTrLZ/jQ2rg=="],
 
     "@tanstack/react-query-persist-client": ["@tanstack/react-query-persist-client@5.90.18", "", { "dependencies": { "@tanstack/query-persist-client-core": "5.91.15" }, "peerDependencies": { "@tanstack/react-query": "^5.90.16", "react": "^18 || ^19" } }, "sha512-ToVRTVpjzTrd9S/p7JIvGdLs+Xtz9aDMM/7+TQGSV9notY8Jt64irfAAAkZ05syftLKS+3KPgyKAnHcVeKVbWQ=="],
 
+    "@tanstack/react-store": ["@tanstack/react-store@0.8.0", "", { "dependencies": { "@tanstack/store": "0.8.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-1vG9beLIuB7q69skxK9r5xiLN3ztzIPfSQSs0GfeqWGO2tGIyInZx0x1COhpx97RKaONSoAb8C3dxacWksm1ow=="],
+
+    "@tanstack/store": ["@tanstack/store@0.8.0", "", {}, "sha512-Om+BO0YfMZe//X2z0uLF2j+75nQga6TpTJgLJQBiq85aOyZNIhkCgleNcud2KQg4k4v9Y9l+Uhru3qWMPGTOzQ=="],
+
     "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],
 
     "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
@@ -618,7 +634,7 @@
 
     "@types/jest": ["@types/jest@29.5.14", "", { "dependencies": { "expect": "^29.0.0", "pretty-format": "^29.0.0" } }, "sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ=="],
 
-    "@types/lodash": ["@types/lodash@4.17.20", "", {}, "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA=="],
+    "@types/lodash": ["@types/lodash@4.17.21", "", {}, "sha512-FOvQ0YPD5NOfPgMzJihoT+Za5pdkDJWcbpuj1DjaKZIr/gxodQjY/uWEFlTNqW2ugXHUiL8lRQgw63dzKHZdeQ=="],
 
     "@types/node": ["@types/node@24.10.0", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A=="],
 
@@ -684,7 +700,7 @@
 
     "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
-    "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+    "ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
 
     "any-base": ["any-base@1.1.0", "", {}, "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg=="],
 
@@ -986,7 +1002,7 @@
 
     "expect": ["expect@29.7.0", "", { "dependencies": { "@jest/expect-utils": "^29.7.0", "jest-get-type": "^29.6.3", "jest-matcher-utils": "^29.7.0", "jest-message-util": "^29.7.0", "jest-util": "^29.7.0" } }, "sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw=="],
 
-    "expo": ["expo@54.0.30", "", { "dependencies": { "@babel/runtime": "^7.20.0", "@expo/cli": "54.0.20", "@expo/config": "~12.0.13", "@expo/config-plugins": "~54.0.4", "@expo/devtools": "0.1.8", "@expo/fingerprint": "0.15.4", "@expo/metro": "~54.2.0", "@expo/metro-config": "54.0.12", "@expo/vector-icons": "^15.0.3", "@ungap/structured-clone": "^1.3.0", "babel-preset-expo": "~54.0.9", "expo-asset": "~12.0.12", "expo-constants": "~18.0.12", "expo-file-system": "~19.0.21", "expo-font": "~14.0.10", "expo-keep-awake": "~15.0.8", "expo-modules-autolinking": "3.0.23", "expo-modules-core": "3.0.29", "pretty-format": "^29.7.0", "react-refresh": "^0.14.2", "whatwg-url-without-unicode": "8.0.0-3" }, "peerDependencies": { "@expo/dom-webview": "*", "@expo/metro-runtime": "*", "react": "*", "react-native": "*", "react-native-webview": "*" }, "optionalPeers": ["@expo/dom-webview", "@expo/metro-runtime", "react-native-webview"], "bin": { "expo": "bin/cli", "fingerprint": "bin/fingerprint", "expo-modules-autolinking": "bin/autolinking" } }, "sha512-6q+aFfKL0SpT8prfdpR3V8HcN51ov0mCGuwQTzyuk6eeO9rg7a7LWbgPv9rEVXGZEuyULstL8LGNwHqusand7Q=="],
+    "expo": ["expo@54.0.31", "", { "dependencies": { "@babel/runtime": "^7.20.0", "@expo/cli": "54.0.21", "@expo/config": "~12.0.13", "@expo/config-plugins": "~54.0.4", "@expo/devtools": "0.1.8", "@expo/fingerprint": "0.15.4", "@expo/metro": "~54.2.0", "@expo/metro-config": "54.0.13", "@expo/vector-icons": "^15.0.3", "@ungap/structured-clone": "^1.3.0", "babel-preset-expo": "~54.0.9", "expo-asset": "~12.0.12", "expo-constants": "~18.0.13", "expo-file-system": "~19.0.21", "expo-font": "~14.0.10", "expo-keep-awake": "~15.0.8", "expo-modules-autolinking": "3.0.24", "expo-modules-core": "3.0.29", "pretty-format": "^29.7.0", "react-refresh": "^0.14.2", "whatwg-url-without-unicode": "8.0.0-3" }, "peerDependencies": { "@expo/dom-webview": "*", "@expo/metro-runtime": "*", "react": "*", "react-native": "*", "react-native-webview": "*" }, "optionalPeers": ["@expo/dom-webview", "@expo/metro-runtime", "react-native-webview"], "bin": { "expo": "bin/cli", "fingerprint": "bin/fingerprint", "expo-modules-autolinking": "bin/autolinking" } }, "sha512-kQ3RDqA/a59I7y+oqQGyrPbbYlgPMUdKBOgvFLpoHbD2bCM+F75i4N0mUijy7dG5F/CUCu2qHmGGUCXBbMDkCg=="],
 
     "expo-application": ["expo-application@7.0.8", "", { "peerDependencies": { "expo": "*" } }, "sha512-qFGyxk7VJbrNOQWBbE09XUuGuvkOgFS9QfToaK2FdagM2aQ+x3CvGV2DuVgl/l4ZxPgIf3b/MNh9xHpwSwn74Q=="],
 
@@ -1000,7 +1016,9 @@
 
     "expo-build-properties": ["expo-build-properties@1.0.10", "", { "dependencies": { "ajv": "^8.11.0", "semver": "^7.6.0" }, "peerDependencies": { "expo": "*" } }, "sha512-mFCZbrbrv0AP5RB151tAoRzwRJelqM7bCJzCkxpu+owOyH+p/rFC/q7H5q8B9EpVWj8etaIuszR+gKwohpmu1Q=="],
 
-    "expo-constants": ["expo-constants@18.0.10", "", { "dependencies": { "@expo/config": "~12.0.10", "@expo/env": "~2.0.7" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-Rhtv+X974k0Cahmvx6p7ER5+pNhBC0XbP1lRviL2J1Xl4sT2FBaIuIxF/0I0CbhOsySf0ksqc5caFweAy9Ewiw=="],
+    "expo-constants": ["expo-constants@18.0.13", "", { "dependencies": { "@expo/config": "~12.0.13", "@expo/env": "~2.0.8" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-FnZn12E1dRYKDHlAdIyNFhBurKTS3F9CrfrBDJI5m3D7U17KBHMQ6JEfYlSj7LG7t+Ulr+IKaj58L1k5gBwTcQ=="],
+
+    "expo-crypto": ["expo-crypto@15.0.8", "", { "dependencies": { "base64-js": "^1.3.0" }, "peerDependencies": { "expo": "*" } }, "sha512-aF7A914TB66WIlTJvl5J6/itejfY78O7dq3ibvFltL9vnTALJ/7LYHvLT4fwmx9yUNS6ekLBtDGWivFWnj2Fcw=="],
 
     "expo-dev-client": ["expo-dev-client@6.0.20", "", { "dependencies": { "expo-dev-launcher": "6.0.20", "expo-dev-menu": "7.0.18", "expo-dev-menu-interface": "2.0.0", "expo-manifests": "~1.0.10", "expo-updates-interface": "~2.0.0" }, "peerDependencies": { "expo": "*" } }, "sha512-5XjoVlj1OxakNxy55j/AUaGPrDOlQlB6XdHLLWAw61w5ffSpUDHDnuZzKzs9xY1eIaogOqTOQaAzZ2ddBkdXLA=="],
 
@@ -1012,7 +1030,7 @@
 
     "expo-device": ["expo-device@8.0.10", "", { "dependencies": { "ua-parser-js": "^0.7.33" }, "peerDependencies": { "expo": "*" } }, "sha512-jd5BxjaF7382JkDMaC+P04aXXknB2UhWaVx5WiQKA05ugm/8GH5uaz9P9ckWdMKZGQVVEOC8MHaUADoT26KmFA=="],
 
-    "expo-doctor": ["expo-doctor@1.17.11", "", { "bin": { "expo-doctor": "build/index.js" } }, "sha512-4eYZPJm4op2aRQWvd6RA6dZt1mVQQe79n7iqqFi6P927K8w2ld8kZ2D7m/4ahjj9/HBW9NS98m4qGomKJFDuPg=="],
+    "expo-doctor": ["expo-doctor@1.17.14", "", { "bin": { "expo-doctor": "build/index.js" } }, "sha512-+UsXFP5ZTVobDuGS5Du8aKU6O6s2sa49QOdGHdzP8UEjQKH8gPb59uw6hxEQmo6YtVboLwQd13QEdcSolBMvLw=="],
 
     "expo-file-system": ["expo-file-system@19.0.21", "", { "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-s3DlrDdiscBHtab/6W1osrjGL+C2bvoInPJD7sOwmxfJ5Woynv2oc+Fz1/xVXaE/V7HE/+xrHC/H45tu6lZzzg=="],
 
@@ -1034,17 +1052,17 @@
 
     "expo-manifests": ["expo-manifests@1.0.10", "", { "dependencies": { "@expo/config": "~12.0.11", "expo-json-utils": "~0.15.0" }, "peerDependencies": { "expo": "*" } }, "sha512-oxDUnURPcL4ZsOBY6X1DGWGuoZgVAFzp6PISWV7lPP2J0r8u1/ucuChBgpK7u1eLGFp6sDIPwXyEUCkI386XSQ=="],
 
-    "expo-modules-autolinking": ["expo-modules-autolinking@3.0.23", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "chalk": "^4.1.0", "commander": "^7.2.0", "require-from-string": "^2.0.2", "resolve-from": "^5.0.0" }, "bin": { "expo-modules-autolinking": "bin/expo-modules-autolinking.js" } }, "sha512-YZnaE0G+52xftjH5nsIRaWsoVBY38SQCECclpdgLisdbRY/6Mzo7ndokjauOv3mpFmzMZACHyJNu1YSAffQwTg=="],
+    "expo-modules-autolinking": ["expo-modules-autolinking@3.0.24", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "chalk": "^4.1.0", "commander": "^7.2.0", "require-from-string": "^2.0.2", "resolve-from": "^5.0.0" }, "bin": { "expo-modules-autolinking": "bin/expo-modules-autolinking.js" } }, "sha512-TP+6HTwhL7orDvsz2VzauyQlXJcAWyU3ANsZ7JGL4DQu8XaZv/A41ZchbtAYLfozNA2Ya1Hzmhx65hXryBMjaQ=="],
 
     "expo-modules-core": ["expo-modules-core@3.0.29", "", { "dependencies": { "invariant": "^2.2.4" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-LzipcjGqk8gvkrOUf7O2mejNWugPkf3lmd9GkqL9WuNyeN2fRwU0Dn77e3ZUKI3k6sI+DNwjkq4Nu9fNN9WS7Q=="],
 
-    "expo-notifications": ["expo-notifications@0.32.15", "", { "dependencies": { "@expo/image-utils": "^0.8.8", "@ide/backoff": "^1.0.0", "abort-controller": "^3.0.0", "assert": "^2.0.0", "badgin": "^1.1.5", "expo-application": "~7.0.8", "expo-constants": "~18.0.12" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-gnJcauheC2S0Wl0RuJaFkaBRVzCG011j5hlG0TEbsuOCPBuB/F30YEk8yurK8Psv+zHkVfeiJ5AC+nL0LWk0WA=="],
+    "expo-notifications": ["expo-notifications@0.32.16", "", { "dependencies": { "@expo/image-utils": "^0.8.8", "@ide/backoff": "^1.0.0", "abort-controller": "^3.0.0", "assert": "^2.0.0", "badgin": "^1.1.5", "expo-application": "~7.0.8", "expo-constants": "~18.0.13" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-QQD/UA6v7LgvwIJ+tS7tSvqJZkdp0nCSj9MxsDk/jU1GttYdK49/5L2LvE/4U0H7sNBz1NZAyhDZozg8xgBLXw=="],
 
     "expo-router": ["expo-router@6.0.21", "", { "dependencies": { "@expo/metro-runtime": "^6.1.2", "@expo/schema-utils": "^0.1.8", "@radix-ui/react-slot": "1.2.0", "@radix-ui/react-tabs": "^1.1.12", "@react-navigation/bottom-tabs": "^7.4.0", "@react-navigation/native": "^7.1.8", "@react-navigation/native-stack": "^7.3.16", "client-only": "^0.0.1", "debug": "^4.3.4", "escape-string-regexp": "^4.0.0", "expo-server": "^1.0.5", "fast-deep-equal": "^3.1.3", "invariant": "^2.2.4", "nanoid": "^3.3.8", "query-string": "^7.1.3", "react-fast-compare": "^3.2.2", "react-native-is-edge-to-edge": "^1.1.6", "semver": "~7.6.3", "server-only": "^0.0.1", "sf-symbols-typescript": "^2.1.0", "shallowequal": "^1.1.0", "use-latest-callback": "^0.2.1", "vaul": "^1.1.2" }, "peerDependencies": { "@react-navigation/drawer": "^7.5.0", "@testing-library/react-native": ">= 12.0.0", "expo": "*", "expo-constants": "^18.0.12", "expo-linking": "^8.0.11", "react": "*", "react-dom": "*", "react-native": "*", "react-native-gesture-handler": "*", "react-native-reanimated": "*", "react-native-safe-area-context": ">= 5.4.0", "react-native-screens": "*", "react-native-web": "*", "react-server-dom-webpack": "~19.0.3 || ~19.1.4 || ~19.2.3" }, "optionalPeers": ["@react-navigation/drawer", "@testing-library/react-native", "react-dom", "react-native-gesture-handler", "react-native-reanimated", "react-native-web", "react-server-dom-webpack"] }, "sha512-wjTUjrnWj6gRYjaYl1kYfcRnNE4ZAQ0kz0+sQf6/mzBd/OU6pnOdD7WrdAW3pTTpm52Q8sMoeX98tNQEddg2uA=="],
 
     "expo-screen-orientation": ["expo-screen-orientation@9.0.8", "", { "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-qRoPi3E893o3vQHT4h1NKo51+7g2hjRSbDeg1fsSo/u2pOW5s6FCeoacLvD+xofOP33cH2MkE4ua54aWWO7Icw=="],
 
-    "expo-sensors": ["expo-sensors@15.0.8", "", { "dependencies": { "invariant": "^2.2.4" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-ttibOSCYjFAMIfjV+vVukO1v7GKlbcPRfxcRqbTaSMGneewDwVSXbGFImY530fj1BR3mWq4n9jHnuDp8tAEY9g=="],
+    "expo-secure-store": ["expo-secure-store@15.0.8", "", { "peerDependencies": { "expo": "*" } }, "sha512-lHnzvRajBu4u+P99+0GEMijQMFCOYpWRO4dWsXSuMt77+THPIGjzNvVKrGSl6mMrLsfVaKL8BpwYZLGlgA+zAw=="],
 
     "expo-server": ["expo-server@1.0.5", "", {}, "sha512-IGR++flYH70rhLyeXF0Phle56/k4cee87WeQ4mamS+MkVAVP+dDlOHf2nN06Z9Y2KhU0Gp1k+y61KkghF7HdhA=="],
 
@@ -1350,7 +1368,7 @@
 
     "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
 
-    "lint-staged": ["lint-staged@16.2.6", "", { "dependencies": { "commander": "^14.0.1", "listr2": "^9.0.5", "micromatch": "^4.0.8", "nano-spawn": "^2.0.0", "pidtree": "^0.6.0", "string-argv": "^0.3.2", "yaml": "^2.8.1" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-s1gphtDbV4bmW1eylXpVMk2u7is7YsrLl8hzrtvC70h4ByhcMLZFY01Fx05ZUDNuv1H8HO4E+e2zgejV1jVwNw=="],
+    "lint-staged": ["lint-staged@16.2.7", "", { "dependencies": { "commander": "^14.0.2", "listr2": "^9.0.5", "micromatch": "^4.0.8", "nano-spawn": "^2.0.0", "pidtree": "^0.6.0", "string-argv": "^0.3.2", "yaml": "^2.8.1" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-lDIj4RnYmK7/kXMya+qJsmkRFkGolciXjrsZ6PC25GdTfWOAWetR0ZbsNXRAj1EHHImRSalc+whZFg56F5DVow=="],
 
     "listr2": ["listr2@9.0.5", "", { "dependencies": { "cli-truncate": "^5.0.0", "colorette": "^2.0.20", "eventemitter3": "^5.0.1", "log-update": "^6.1.0", "rfdc": "^1.4.1", "wrap-ansi": "^9.0.0" } }, "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g=="],
 
@@ -1456,7 +1474,7 @@
 
     "node-fetch": ["node-fetch@2.7.0", "", { "dependencies": { "whatwg-url": "^5.0.0" }, "peerDependencies": { "encoding": "^0.1.0" }, "optionalPeers": ["encoding"] }, "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A=="],
 
-    "node-forge": ["node-forge@1.3.1", "", {}, "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="],
+    "node-forge": ["node-forge@1.3.3", "", {}, "sha512-rLvcdSyRCyouf6jcOIPe/BgwG/d7hKjzMKOas33/pHEr6gbq18IK9zV7DiPvzsz0oBJPme6qr6H6kGZuI9/DZg=="],
 
     "node-int64": ["node-int64@0.4.0", "", {}, "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="],
 
@@ -1620,9 +1638,9 @@
 
     "react-freeze": ["react-freeze@1.0.4", "", { "peerDependencies": { "react": ">=17.0.0" } }, "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA=="],
 
-    "react-i18next": ["react-i18next@16.0.0", "", { "dependencies": { "@babel/runtime": "^7.27.6", "html-parse-stringify": "^3.0.1" }, "peerDependencies": { "i18next": ">= 25.5.2", "react": ">= 16.8.0", "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-JQ+dFfLnFSKJQt7W01lJHWRC0SX7eDPobI+MSTJ3/gP39xH2g33AuTE7iddAfXYHamJdAeMGM0VFboPaD3G68Q=="],
+    "react-i18next": ["react-i18next@16.5.1", "", { "dependencies": { "@babel/runtime": "^7.28.4", "html-parse-stringify": "^3.0.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "i18next": ">= 25.6.2", "react": ">= 16.8.0", "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-Hks6UIRZWW4c+qDAnx1csVsCGYeIR4MoBGQgJ+NUoNnO6qLxXuf8zu0xdcinyXUORgGzCdRsexxO1Xzv3sTdnw=="],
 
-    "react-is": ["react-is@19.2.0", "", {}, "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA=="],
+    "react-is": ["react-is@19.2.3", "", {}, "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA=="],
 
     "react-native": ["react-native@0.81.5", "", { "dependencies": { "@jest/create-cache-key-function": "^29.7.0", "@react-native/assets-registry": "0.81.5", "@react-native/codegen": "0.81.5", "@react-native/community-cli-plugin": "0.81.5", "@react-native/gradle-plugin": "0.81.5", "@react-native/js-polyfills": "0.81.5", "@react-native/normalize-colors": "0.81.5", "@react-native/virtualized-lists": "0.81.5", "abort-controller": "^3.0.0", "anser": "^1.4.9", "ansi-regex": "^5.0.0", "babel-jest": "^29.7.0", "babel-plugin-syntax-hermes-parser": "0.29.1", "base64-js": "^1.5.1", "commander": "^12.0.0", "flow-enums-runtime": "^0.0.6", "glob": "^7.1.1", "invariant": "^2.2.4", "jest-environment-node": "^29.7.0", "memoize-one": "^5.0.0", "metro-runtime": "^0.83.1", "metro-source-map": "^0.83.1", "nullthrows": "^1.1.1", "pretty-format": "^29.7.0", "promise": "^8.3.0", "react-devtools-core": "^6.1.5", "react-refresh": "^0.14.0", "regenerator-runtime": "^0.13.2", "scheduler": "0.26.0", "semver": "^7.1.3", "stacktrace-parser": "^0.1.10", "whatwg-fetch": "^3.0.0", "ws": "^6.2.3", "yargs": "^17.6.2" }, "peerDependencies": { "@types/react": "^19.1.0", "react": "^19.1.0" }, "optionalPeers": ["@types/react"], "bin": { "react-native": "cli.js" } }, "sha512-1w+/oSjEXZjMqsIvmkCRsOc8UBYv163bTWKTI8+1mxztvQPhCRYGTvZ/PL1w16xXHneIj/SLGfxWg2GWN2uexw=="],
 
@@ -1656,7 +1674,7 @@
 
     "react-native-is-edge-to-edge": ["react-native-is-edge-to-edge@1.2.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-FLbPWl/MyYQWz+KwqOZsSyj2JmLKglHatd3xLZWskXOpRaio4LfEDEz8E/A6uD8QoTHW6Aobw1jbEwK7KMgR7Q=="],
 
-    "react-native-mmkv": ["react-native-mmkv@4.0.0", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-nitro-modules": "*" } }, "sha512-Osoy8as2ZLzO1TTsKxc4tX14Qk19qRVMWnS4ZVBwxie9Re5cjt7rqlpDkJczK3H/y3z70EQ6rmKI/cNMCLGAYQ=="],
+    "react-native-mmkv": ["react-native-mmkv@4.0.1", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-nitro-modules": "*" } }, "sha512-0JjO0U33b2hngFACsGwxoMCOZlCChP6R42aqvU85kXBaxY/kltSYr0FW9T6lkU3uEkE4IWMV1eLjoJplEY920w=="],
 
     "react-native-nitro-modules": ["react-native-nitro-modules@0.31.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-h/IbVsK5IH7JkvseihAoz/o5dy6CafvGo7j4jTvAa+gnxZWFtXQZg8EDvu0en88LFAumKd/pcF20dzxMiNOmug=="],
 
@@ -1674,6 +1692,8 @@
 
     "react-native-tab-view": ["react-native-tab-view@4.2.0", "", { "dependencies": { "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*", "react-native-pager-view": ">= 6.0.0" } }, "sha512-TUbh7Yr0tE/99t1pJQLbQ+4/Px67xkT7/r3AhfV+93Q3WoUira0Lx7yuKUP2C118doqxub8NCLERwcqsHr29nQ=="],
 
+    "react-native-text-ticker": ["react-native-text-ticker@1.15.0", "", {}, "sha512-d/uK+PIOhsYMy1r8h825iq/nADiHsabz3WMbRJSnkpQYn+K9aykUAXRRhu8ZbTAzk4CgnUWajJEFxS5ZDygsdg=="],
+
     "react-native-track-player": ["react-native-track-player@github:lovegaoshi/react-native-track-player#003afd0", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-windows": "*", "shaka-player": "^4.7.9" }, "optionalPeers": ["react-native-windows", "shaka-player"] }, "lovegaoshi-react-native-track-player-003afd0"],
 
     "react-native-udp": ["react-native-udp@4.1.7", "", { "dependencies": { "buffer": "^5.6.0", "events": "^3.1.0" } }, "sha512-NUE3zewu61NCdSsLlj+l0ad6qojcVEZPT4hVG/x6DU9U4iCzwtfZSASh9vm7teAcVzLkdD+cO3411LHshAi/wA=="],
@@ -1696,7 +1716,7 @@
 
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
-    "react-test-renderer": ["react-test-renderer@19.1.1", "", { "dependencies": { "react-is": "^19.1.1", "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.1" } }, "sha512-aGRXI+zcBTtg0diHofc7+Vy97nomBs9WHHFY1Csl3iV0x6xucjNYZZAkiVKGiNYUv23ecOex5jE67t8ZzqYObA=="],
+    "react-test-renderer": ["react-test-renderer@19.2.3", "", { "dependencies": { "react-is": "^19.2.3", "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-TMR1LnSFiWZMJkCgNf5ATSvAheTT2NvKIwiVwdBPHxjBI7n/JbWd4gaZ16DVd9foAXdvDz+sB5yxZTwMjPRxpw=="],
 
     "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
 
@@ -1756,7 +1776,7 @@
 
     "sax": ["sax@1.4.3", "", {}, "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ=="],
 
-    "scheduler": ["scheduler@0.26.0", "", {}, "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="],
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
 
     "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
@@ -2030,8 +2050,6 @@
 
     "@babel/plugin-transform-runtime/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
 
-    "@expo/cli/@expo/env": ["@expo/env@2.0.8", "", { "dependencies": { "chalk": "^4.0.0", "debug": "^4.3.4", "dotenv": "~16.4.5", "dotenv-expand": "~11.0.6", "getenv": "^2.0.0" } }, "sha512-5VQD6GT8HIMRaSaB5JFtOXuvfDVU80YtZIuUT/GDhUF782usIXY13Tn3IdDz1Tm/lqA9qnRZQ1BF4t7LlvdJPA=="],
-
     "@expo/cli/getenv": ["getenv@2.0.0", "", {}, "sha512-VilgtJj/ALgGY77fiLam5iD336eSWi96Q15JSAG1zi8NRBysm3LXKdGnHb4m5cuyxvOLQQKWpBZAT6ni4FI2iQ=="],
 
     "@expo/cli/glob": ["glob@13.0.0", "", { "dependencies": { "minimatch": "^10.1.1", "minipass": "^7.1.2", "path-scurry": "^2.0.0" } }, "sha512-tvZgpqk6fz4BaNZ66ZsRaZnbHvP/jG3uKJvAZOwEVUL4RTA5nJeeLYfyN9/VA8NX/V3IBG+hkeuGpKjvELkVhA=="],
@@ -2080,8 +2098,6 @@
 
     "@expo/json-file/@babel/code-frame": ["@babel/code-frame@7.10.4", "", { "dependencies": { "@babel/highlight": "^7.10.4" } }, "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg=="],
 
-    "@expo/metro-config/@expo/env": ["@expo/env@2.0.8", "", { "dependencies": { "chalk": "^4.0.0", "debug": "^4.3.4", "dotenv": "~16.4.5", "dotenv-expand": "~11.0.6", "getenv": "^2.0.0" } }, "sha512-5VQD6GT8HIMRaSaB5JFtOXuvfDVU80YtZIuUT/GDhUF782usIXY13Tn3IdDz1Tm/lqA9qnRZQ1BF4t7LlvdJPA=="],
-
     "@expo/metro-config/getenv": ["getenv@2.0.0", "", {}, "sha512-VilgtJj/ALgGY77fiLam5iD336eSWi96Q15JSAG1zi8NRBysm3LXKdGnHb4m5cuyxvOLQQKWpBZAT6ni4FI2iQ=="],
 
     "@expo/metro-config/glob": ["glob@13.0.0", "", { "dependencies": { "minimatch": "^10.1.1", "minipass": "^7.1.2", "path-scurry": "^2.0.0" } }, "sha512-tvZgpqk6fz4BaNZ66ZsRaZnbHvP/jG3uKJvAZOwEVUL4RTA5nJeeLYfyN9/VA8NX/V3IBG+hkeuGpKjvELkVhA=="],
@@ -2136,6 +2152,8 @@
 
     "@react-navigation/bottom-tabs/color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
 
+    "@react-navigation/core/react-is": ["react-is@19.2.0", "", {}, "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA=="],
+
     "@react-navigation/elements/color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
 
     "@react-navigation/material-top-tabs/color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
@@ -2154,8 +2172,6 @@
 
     "ansi-fragments/strip-ansi": ["strip-ansi@5.2.0", "", { "dependencies": { "ansi-regex": "^4.1.0" } }, "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA=="],
 
-    "ansi-styles/color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
-
     "babel-jest/slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
 
     "babel-preset-expo/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
@@ -2164,6 +2180,8 @@
 
     "body-parser/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
 
+    "chalk/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+
     "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "cli-truncate/string-width": ["string-width@8.1.0", "", { "dependencies": { "get-east-asian-width": "^1.3.0", "strip-ansi": "^7.1.0" } }, "sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg=="],
@@ -2180,8 +2198,6 @@
 
     "expo-build-properties/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
 
-    "expo-constants/@expo/config": ["@expo/config@12.0.10", "", { "dependencies": { "@babel/code-frame": "~7.10.4", "@expo/config-plugins": "~54.0.2", "@expo/config-types": "^54.0.8", "@expo/json-file": "^10.0.7", "deepmerge": "^4.3.1", "getenv": "^2.0.0", "glob": "^10.4.2", "require-from-string": "^2.0.2", "resolve-from": "^5.0.0", "resolve-workspace-root": "^2.0.0", "semver": "^7.6.0", "slugify": "^1.3.4", "sucrase": "3.35.0" } }, "sha512-lJMof5Nqakq1DxGYlghYB/ogSBjmv4Fxn1ovyDmcjlRsQdFCXgu06gEUogkhPtc9wBt9WlTTfqENln5HHyLW6w=="],
-
     "expo-manifests/@expo/config": ["@expo/config@12.0.11", "", { "dependencies": { "@babel/code-frame": "~7.10.4", "@expo/config-plugins": "~54.0.3", "@expo/config-types": "^54.0.9", "@expo/json-file": "^10.0.7", "deepmerge": "^4.3.1", "getenv": "^2.0.0", "glob": "^13.0.0", "require-from-string": "^2.0.2", "resolve-from": "^5.0.0", "resolve-workspace-root": "^2.0.0", "semver": "^7.6.0", "slugify": "^1.3.4", "sucrase": "~3.35.1" } }, "sha512-bGKNCbHirwgFlcOJHXpsAStQvM0nU3cmiobK0o07UkTfcUxl9q9lOQQh2eoMGqpm6Vs1IcwBpYye6thC3Nri/w=="],
 
     "expo-modules-autolinking/commander": ["commander@7.2.0", "", {}, "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="],
@@ -2254,16 +2270,18 @@
 
     "postcss-load-config/lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
 
-    "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
-
     "pretty-format/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
 
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
     "react-devtools-core/ws": ["ws@7.5.10", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": "^5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ=="],
 
+    "react-dom/scheduler": ["scheduler@0.26.0", "", {}, "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="],
+
     "react-native/commander": ["commander@12.1.0", "", {}, "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA=="],
 
+    "react-native/scheduler": ["scheduler@0.26.0", "", {}, "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="],
+
     "react-native/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
 
     "react-native-reanimated/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
@@ -2318,6 +2336,8 @@
 
     "wrap-ansi/strip-ansi": ["strip-ansi@7.1.2", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA=="],
 
+    "wrap-ansi-cjs/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+
     "xml2js/xmlbuilder": ["xmlbuilder@11.0.1", "", {}, "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="],
 
     "@babel/highlight/chalk/ansi-styles": ["ansi-styles@3.2.1", "", { "dependencies": { "color-convert": "^1.9.0" } }, "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA=="],
@@ -2336,6 +2356,8 @@
 
     "@expo/cli/ora/strip-ansi": ["strip-ansi@5.2.0", "", { "dependencies": { "ansi-regex": "^4.1.0" } }, "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA=="],
 
+    "@expo/cli/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+
     "@expo/config-plugins/glob/minimatch": ["minimatch@10.1.1", "", { "dependencies": { "@isaacs/brace-expansion": "^5.0.0" } }, "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ=="],
 
     "@expo/config/glob/minimatch": ["minimatch@10.1.1", "", { "dependencies": { "@isaacs/brace-expansion": "^5.0.0" } }, "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ=="],
@@ -2420,30 +2442,18 @@
 
     "ansi-fragments/strip-ansi/ansi-regex": ["ansi-regex@4.1.1", "", {}, "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="],
 
-    "ansi-styles/color-convert/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
-
     "body-parser/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
 
+    "chalk/ansi-styles/color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
     "cli-truncate/string-width/strip-ansi": ["strip-ansi@7.1.2", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA=="],
 
+    "cliui/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+
     "compression/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
 
     "connect/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
 
-    "expo-constants/@expo/config/@babel/code-frame": ["@babel/code-frame@7.10.4", "", { "dependencies": { "@babel/highlight": "^7.10.4" } }, "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg=="],
-
-    "expo-constants/@expo/config/@expo/config-plugins": ["@expo/config-plugins@54.0.2", "", { "dependencies": { "@expo/config-types": "^54.0.8", "@expo/json-file": "~10.0.7", "@expo/plist": "^0.4.7", "@expo/sdk-runtime-versions": "^1.0.0", "chalk": "^4.1.2", "debug": "^4.3.5", "getenv": "^2.0.0", "glob": "^10.4.2", "resolve-from": "^5.0.0", "semver": "^7.5.4", "slash": "^3.0.0", "slugify": "^1.6.6", "xcode": "^3.0.1", "xml2js": "0.6.0" } }, "sha512-jD4qxFcURQUVsUFGMcbo63a/AnviK8WUGard+yrdQE3ZrB/aurn68SlApjirQQLEizhjI5Ar2ufqflOBlNpyPg=="],
-
-    "expo-constants/@expo/config/@expo/config-types": ["@expo/config-types@54.0.8", "", {}, "sha512-lyIn/x/Yz0SgHL7IGWtgTLg6TJWC9vL7489++0hzCHZ4iGjVcfZmPTUfiragZ3HycFFj899qN0jlhl49IHa94A=="],
-
-    "expo-constants/@expo/config/@expo/json-file": ["@expo/json-file@10.0.7", "", { "dependencies": { "@babel/code-frame": "~7.10.4", "json5": "^2.2.3" } }, "sha512-z2OTC0XNO6riZu98EjdNHC05l51ySeTto6GP7oSQrCvQgG9ARBwD1YvMQaVZ9wU7p/4LzSf1O7tckL3B45fPpw=="],
-
-    "expo-constants/@expo/config/getenv": ["getenv@2.0.0", "", {}, "sha512-VilgtJj/ALgGY77fiLam5iD336eSWi96Q15JSAG1zi8NRBysm3LXKdGnHb4m5cuyxvOLQQKWpBZAT6ni4FI2iQ=="],
-
-    "expo-constants/@expo/config/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
-
-    "expo-constants/@expo/config/semver": ["semver@7.6.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A=="],
-
     "expo-manifests/@expo/config/@babel/code-frame": ["@babel/code-frame@7.10.4", "", { "dependencies": { "@babel/highlight": "^7.10.4" } }, "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg=="],
 
     "expo-manifests/@expo/config/@expo/config-plugins": ["@expo/config-plugins@54.0.3", "", { "dependencies": { "@expo/config-types": "^54.0.9", "@expo/json-file": "~10.0.7", "@expo/plist": "^0.4.7", "@expo/sdk-runtime-versions": "^1.0.0", "chalk": "^4.1.2", "debug": "^4.3.5", "getenv": "^2.0.0", "glob": "^13.0.0", "resolve-from": "^5.0.0", "semver": "^7.5.4", "slash": "^3.0.0", "slugify": "^1.6.6", "xcode": "^3.0.1", "xml2js": "0.6.0" } }, "sha512-tBIUZIxLQfCu5jmqTO+UOeeDUGIB0BbK6xTMkPRObAXRQeTLPPfokZRCo818d2owd+Bcmq1wBaDz0VY3g+glfw=="],
@@ -2502,6 +2512,8 @@
 
     "test-exclude/minimatch/brace-expansion": ["brace-expansion@1.1.12", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg=="],
 
+    "wrap-ansi-cjs/ansi-styles/color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
     "wrap-ansi/string-width/emoji-regex": ["emoji-regex@10.6.0", "", {}, "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A=="],
 
     "wrap-ansi/strip-ansi/ansi-regex": ["ansi-regex@6.2.2", "", {}, "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg=="],
@@ -2520,6 +2532,8 @@
 
     "@expo/cli/ora/strip-ansi/ansi-regex": ["ansi-regex@4.1.1", "", {}, "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="],
 
+    "@expo/cli/wrap-ansi/ansi-styles/color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
     "@expo/package-manager/ora/chalk/ansi-styles": ["ansi-styles@3.2.1", "", { "dependencies": { "color-convert": "^1.9.0" } }, "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA=="],
 
     "@expo/package-manager/ora/chalk/escape-string-regexp": ["escape-string-regexp@1.0.5", "", {}, "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="],
@@ -2556,13 +2570,11 @@
 
     "ansi-fragments/slice-ansi/ansi-styles/color-convert": ["color-convert@1.9.3", "", { "dependencies": { "color-name": "1.1.3" } }, "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="],
 
+    "chalk/ansi-styles/color-convert/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
     "cli-truncate/string-width/strip-ansi/ansi-regex": ["ansi-regex@6.2.2", "", {}, "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg=="],
 
-    "expo-constants/@expo/config/@expo/config-plugins/@expo/plist": ["@expo/plist@0.4.7", "", { "dependencies": { "@xmldom/xmldom": "^0.8.8", "base64-js": "^1.2.3", "xmlbuilder": "^15.1.1" } }, "sha512-dGxqHPvCZKeRKDU1sJZMmuyVtcASuSYh1LPFVaM1DuffqPL36n6FMEL0iUqq2Tx3xhWk8wCnWl34IKplUjJDdA=="],
-
-    "expo-constants/@expo/config/@expo/config-plugins/slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
-
-    "expo-constants/@expo/config/glob/path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
+    "cliui/wrap-ansi/ansi-styles/color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
 
     "expo-manifests/@expo/config/@expo/config-plugins/slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
 
@@ -2584,6 +2596,8 @@
 
     "sucrase/glob/path-scurry/lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
 
+    "wrap-ansi-cjs/ansi-styles/color-convert/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
     "@babel/highlight/chalk/ansi-styles/color-convert/color-name": ["color-name@1.1.3", "", {}, "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="],
 
     "@expo/cli/ora/chalk/ansi-styles/color-convert": ["color-convert@1.9.3", "", { "dependencies": { "color-name": "1.1.3" } }, "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="],
@@ -2592,6 +2606,8 @@
 
     "@expo/cli/ora/cli-cursor/restore-cursor/onetime": ["onetime@2.0.1", "", { "dependencies": { "mimic-fn": "^1.0.0" } }, "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ=="],
 
+    "@expo/cli/wrap-ansi/ansi-styles/color-convert/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
     "@expo/package-manager/ora/chalk/ansi-styles/color-convert": ["color-convert@1.9.3", "", { "dependencies": { "color-name": "1.1.3" } }, "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="],
 
     "@expo/package-manager/ora/chalk/supports-color/has-flag": ["has-flag@3.0.0", "", {}, "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="],
@@ -2602,7 +2618,9 @@
 
     "ansi-fragments/slice-ansi/ansi-styles/color-convert/color-name": ["color-name@1.1.3", "", {}, "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="],
 
-    "expo-constants/@expo/config/glob/path-scurry/lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
+    "cliui/wrap-ansi/ansi-styles/color-convert/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "logkitty/yargs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
     "logkitty/yargs/find-up/locate-path/p-locate": ["p-locate@4.1.0", "", { "dependencies": { "p-limit": "^2.2.0" } }, "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="],
 
@@ -2614,6 +2632,10 @@
 
     "@expo/package-manager/ora/cli-cursor/restore-cursor/onetime/mimic-fn": ["mimic-fn@1.2.0", "", {}, "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="],
 
+    "logkitty/yargs/cliui/wrap-ansi/ansi-styles/color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
     "logkitty/yargs/find-up/locate-path/p-locate/p-limit": ["p-limit@2.3.0", "", { "dependencies": { "p-try": "^2.0.0" } }, "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w=="],
+
+    "logkitty/yargs/cliui/wrap-ansi/ansi-styles/color-convert/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
   }
 }

components/AccountsSheet.tsx

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

components/Chromecast.tsx

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

components/DownloadItem.tsx

@@ -209,6 +209,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
           subtitleStreamIndex: subtitleIndex ?? -1,
           maxBitrate: selectedOptions?.bitrate || defaultBitrate,
           deviceId: api.deviceInfo.id,
+          audioMode: settings?.audioTranscodeMode,
         });
 
         return {
@@ -236,11 +237,23 @@ export const DownloadItems: React.FC<DownloadProps> = ({
           );
           continue;
         }
+        // Get the audio/subtitle indices that were used for this download
+        const downloadAudioIndex =
+          itemsNotDownloaded.length > 1
+            ? getDefaultPlaySettings(item, settings!).audioIndex
+            : selectedOptions?.audioIndex;
+        const downloadSubtitleIndex =
+          itemsNotDownloaded.length > 1
+            ? getDefaultPlaySettings(item, settings!).subtitleIndex
+            : selectedOptions?.subtitleIndex;
+
         await startBackgroundDownload(
           url,
           item,
           mediaSource,
           selectedOptions?.bitrate || defaultBitrate,
+          downloadAudioIndex,
+          downloadSubtitleIndex,
         );
       }
     },

components/IntroSheet.tsx

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

components/PINEntryModal.tsx

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

components/PasswordEntryModal.tsx

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

components/PlayButton.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from "react-i18next";
 import { Alert, Platform, TouchableOpacity, View } from "react-native";
 import CastContext, {
   CastButton,
+  MediaStreamType,
   PlayServicesState,
   useMediaStatus,
   useRemoteMediaClient,
@@ -185,11 +186,23 @@ export const PlayButton: React.FC<Props> = ({
                     return;
                   }
 
+                  // Calculate start time in seconds from playback position
+                  const startTimeSeconds =
+                    (item?.UserData?.PlaybackPositionTicks ?? 0) / 10000000;
+
+                  // Calculate stream duration in seconds from runtime
+                  const streamDurationSeconds = item.RunTimeTicks
+                    ? item.RunTimeTicks / 10000000
+                    : undefined;
+
                   client
                     .loadMedia({
                       mediaInfo: {
+                        contentId: item.Id,
                         contentUrl: data?.url,
                         contentType: "video/mp4",
+                        streamType: MediaStreamType.BUFFERED,
+                        streamDuration: streamDurationSeconds,
                         metadata:
                           item.Type === "Episode"
                             ? {
@@ -241,7 +254,7 @@ export const PlayButton: React.FC<Props> = ({
                                   ],
                                 },
                       },
-                      startTime: 0,
+                      startTime: startTimeSeconds,
                     })
                     .then(() => {
                       // state is already set when reopening current media, so skip it here.

components/PreviousServersList.tsx

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

components/RoundButton.tsx

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

components/SaveAccountModal.tsx

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

components/common/HeaderBackButton.tsx

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

components/common/TouchableItemRouter.tsx

@@ -82,13 +82,49 @@ export const getItemNavigation = (item: BaseItemDto, _from: string) => {
     };
   }
 
-  if (item.Type === "CollectionFolder" || item.Type === "Playlist") {
+  if (item.Type === "CollectionFolder") {
     return {
       pathname: "/[libraryId]" as const,
       params: { libraryId: item.Id! },
     };
   }
 
+  // Music types - use shared routes for proper back navigation
+  if (item.Type === "MusicArtist") {
+    return {
+      pathname: "/music/artist/[artistId]" as const,
+      params: { artistId: item.Id! },
+    };
+  }
+
+  if (item.Type === "MusicAlbum") {
+    return {
+      pathname: "/music/album/[albumId]" as const,
+      params: { albumId: item.Id! },
+    };
+  }
+
+  if (item.Type === "Audio") {
+    // Navigate to the album if available, otherwise to the item page
+    if (item.AlbumId) {
+      return {
+        pathname: "/music/album/[albumId]" as const,
+        params: { albumId: item.AlbumId },
+      };
+    }
+    return {
+      pathname: "/items/page" as const,
+      params: { id: item.Id! },
+    };
+  }
+
+  if (item.Type === "Playlist") {
+    return {
+      pathname: "/music/playlist/[playlistId]" as const,
+      params: { playlistId: item.Id! },
+    };
+  }
+
   // Default case - items page
   return {
     pathname: "/items/page" as const,

components/downloads/DownloadCard.tsx

@@ -1,5 +1,4 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useQueryClient } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useRouter } from "expo-router";
 import { t } from "i18next";
@@ -12,6 +11,7 @@ import {
 } from "react-native";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
+import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useDownload } from "@/providers/DownloadProvider";
 import { calculateSmoothedETA } from "@/providers/Downloads/hooks/useDownloadSpeedCalculator";
 import { JobStatus } from "@/providers/Downloads/types";
@@ -37,7 +37,7 @@ interface DownloadCardProps extends TouchableOpacityProps {
 export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
   const { cancelDownload } = useDownload();
   const router = useRouter();
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
 
   const handleDelete = async (id: string) => {
     try {

components/home/Home.tsx

@@ -21,9 +21,9 @@ import {
   Platform,
   RefreshControl,
   ScrollView,
-  TouchableOpacity,
   View,
 } from "react-native";
+import { Pressable } from "react-native-gesture-handler";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
@@ -36,9 +36,12 @@ import { Colors } from "@/constants/Colors";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";
+import { useIntroSheet } from "@/providers/IntroSheetProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { SortByOption, SortOrderOption } from "@/utils/atoms/filters";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
+import { storage } from "@/utils/mmkv";
 
 type InfiniteScrollingCollectionListSection = {
   type: "InfiniteScrollingCollectionList";
@@ -48,6 +51,7 @@ type InfiniteScrollingCollectionListSection = {
   orientation?: "horizontal" | "vertical";
   pageSize?: number;
   priority?: 1 | 2; // 1 = high priority (loads first), 2 = low priority
+  parentId?: string; // Library ID for "See All" navigation
 };
 
 type MediaListSectionType = {
@@ -79,6 +83,21 @@ export const Home = () => {
   } = useNetworkStatus();
   const invalidateCache = useInvalidatePlaybackProgressCache();
   const [loadedSections, setLoadedSections] = useState<Set<string>>(new Set());
+  const { showIntro } = useIntroSheet();
+
+  // Show intro modal on first launch
+  useEffect(() => {
+    const hasShownIntro = storage.getBoolean("hasShownIntro");
+    if (!hasShownIntro) {
+      const timer = setTimeout(() => {
+        showIntro();
+      }, 1000);
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [showIntro]);
 
   useEffect(() => {
     if (isConnected && !prevIsConnected.current) {
@@ -101,7 +120,7 @@ export const Home = () => {
     }
     navigation.setOptions({
       headerLeft: () => (
-        <TouchableOpacity
+        <Pressable
           onPress={() => {
             router.push("/(auth)/downloads");
           }}
@@ -113,7 +132,7 @@ export const Home = () => {
             color={hasDownloads ? Colors.primary : "white"}
             size={24}
           />
-        </TouchableOpacity>
+        </Pressable>
       ),
     });
   }, [navigation, router, hasDownloads]);
@@ -213,6 +232,7 @@ export const Home = () => {
       },
       type: "InfiniteScrollingCollectionList",
       pageSize,
+      parentId,
     }),
     [api, user?.Id],
   );
@@ -616,6 +636,18 @@ export const Home = () => {
             ) : null;
           if (section.type === "InfiniteScrollingCollectionList") {
             const isHighPriority = section.priority === 1;
+            const handleSeeAll = section.parentId
+              ? () => {
+                  router.push({
+                    pathname: "/(auth)/(tabs)/(libraries)/[libraryId]",
+                    params: {
+                      libraryId: section.parentId!,
+                      sortBy: SortByOption.DateCreated,
+                      sortOrder: SortOrderOption.Descending,
+                    },
+                  } as any);
+                }
+              : undefined;
             return (
               <View key={index} className='flex flex-col space-y-4'>
                 <InfiniteScrollingCollectionList
@@ -631,6 +663,7 @@ export const Home = () => {
                       ? () => markSectionLoaded(section.queryKey)
                       : undefined
                   }
+                  onPressSeeAll={handleSeeAll}
                 />
                 {streamystatsSections}
               </View>

components/music/AnimatedEqualizer.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect } from "react";
+import { View } from "react-native";
+import Animated, {
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+
+interface Props {
+  color?: string;
+  barWidth?: number;
+  barCount?: number;
+  height?: number;
+  gap?: number;
+}
+
+const MIN_SCALE = 0.35;
+const MAX_SCALE = 1;
+const DURATIONS = [800, 650, 750];
+const DELAYS = [0, 200, 100];
+
+const Bar: React.FC<{
+  color: string;
+  barWidth: number;
+  height: number;
+  duration: number;
+  delay: number;
+}> = ({ color, barWidth, height, duration, delay }) => {
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    progress.value = withDelay(
+      delay,
+      withRepeat(
+        withTiming(1, { duration, easing: Easing.inOut(Easing.ease) }),
+        -1,
+        true,
+      ),
+    );
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        scaleY: interpolate(progress.value, [0, 1], [MIN_SCALE, MAX_SCALE]),
+      },
+    ],
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: barWidth,
+          height,
+          backgroundColor: color,
+          borderRadius: 1,
+        },
+        animatedStyle,
+      ]}
+    />
+  );
+};
+
+export const AnimatedEqualizer: React.FC<Props> = ({
+  color = "#9334E9",
+  barWidth = 3,
+  barCount = 3,
+  height = 12,
+  gap = 2,
+}) => {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "flex-end",
+        height,
+        gap,
+        marginRight: 6,
+      }}
+    >
+      {Array.from({ length: barCount }).map((_, index) => (
+        <Bar
+          key={index}
+          color={color}
+          barWidth={barWidth}
+          height={height}
+          duration={DURATIONS[index % DURATIONS.length]}
+          delay={DELAYS[index % DELAYS.length]}
+        />
+      ))}
+    </View>
+  );
+};

components/music/MiniPlayerBar.tsx

@@ -26,7 +26,7 @@ import { Text } from "@/components/common/Text";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
 
-const HORIZONTAL_MARGIN = Platform.OS === "android" ? 8 : 16;
+const HORIZONTAL_MARGIN = Platform.OS === "android" ? 12 : 20;
 const BOTTOM_TAB_HEIGHT = Platform.OS === "android" ? 56 : 52;
 const BAR_HEIGHT = Platform.OS === "android" ? 58 : 50;
 

components/music/MusicAlbumCard.tsx

@@ -13,7 +13,7 @@ interface Props {
   width?: number;
 }
 
-export const MusicAlbumCard: React.FC<Props> = ({ album, width = 150 }) => {
+export const MusicAlbumCard: React.FC<Props> = ({ album, width = 130 }) => {
   const [api] = useAtom(apiAtom);
   const router = useRouter();
 

components/music/MusicAlbumRowCard.tsx

@@ -0,0 +1,70 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { useRouter } from "expo-router";
+import { useAtom } from "jotai";
+import React, { useCallback, useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+
+interface Props {
+  album: BaseItemDto;
+}
+
+const IMAGE_SIZE = 56;
+
+export const MusicAlbumRowCard: React.FC<Props> = ({ album }) => {
+  const [api] = useAtom(apiAtom);
+  const router = useRouter();
+
+  const imageUrl = useMemo(
+    () => getPrimaryImageUrl({ api, item: album }),
+    [api, album],
+  );
+
+  const handlePress = useCallback(() => {
+    router.push({
+      pathname: "/music/album/[albumId]",
+      params: { albumId: album.Id! },
+    });
+  }, [router, album.Id]);
+
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      className='flex-row items-center py-2'
+    >
+      <View
+        style={{
+          width: IMAGE_SIZE,
+          height: IMAGE_SIZE,
+          borderRadius: 8,
+          overflow: "hidden",
+          backgroundColor: "#1a1a1a",
+        }}
+      >
+        {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'>
+            <Text className='text-2xl'>🎵</Text>
+          </View>
+        )}
+      </View>
+      <View className='flex-1 ml-3'>
+        <Text numberOfLines={1} className='text-white text-base font-medium'>
+          {album.Name}
+        </Text>
+        <Text numberOfLines={1} className='text-neutral-400 text-sm mt-0.5'>
+          {album.AlbumArtist || album.Artists?.join(", ")}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};

components/music/MusicArtistCard.tsx

@@ -13,7 +13,9 @@ interface Props {
   size?: number;
 }
 
-export const MusicArtistCard: React.FC<Props> = ({ artist, size = 100 }) => {
+const IMAGE_SIZE = 48;
+
+export const MusicArtistCard: React.FC<Props> = ({ artist }) => {
   const [api] = useAtom(apiAtom);
   const router = useRouter();
 
@@ -32,14 +34,13 @@ export const MusicArtistCard: React.FC<Props> = ({ artist, size = 100 }) => {
   return (
     <TouchableOpacity
       onPress={handlePress}
-      style={{ width: size }}
-      className='flex flex-col items-center'
+      className='flex-row items-center py-2'
     >
       <View
         style={{
-          width: size,
-          height: size,
-          borderRadius: size / 2,
+          width: IMAGE_SIZE,
+          height: IMAGE_SIZE,
+          borderRadius: IMAGE_SIZE / 2,
           overflow: "hidden",
           backgroundColor: "#1a1a1a",
         }}
@@ -53,13 +54,13 @@ export const MusicArtistCard: React.FC<Props> = ({ artist, size = 100 }) => {
           />
         ) : (
           <View className='flex-1 items-center justify-center bg-neutral-800'>
-            <Text className='text-3xl'>👤</Text>
+            <Text className='text-xl'>👤</Text>
           </View>
         )}
       </View>
       <Text
-        numberOfLines={2}
-        className='text-white text-xs font-medium mt-2 text-center'
+        numberOfLines={1}
+        className='text-white text-base font-medium ml-3 flex-1'
       >
         {artist.Name}
       </Text>

components/music/MusicPlaybackEngine.tsx

@@ -7,7 +7,11 @@ import TrackPlayer, {
   usePlaybackState,
   useProgress,
 } from "react-native-track-player";
-import { audioStorageEvents, getLocalPath } from "@/providers/AudioStorage";
+import {
+  audioStorageEvents,
+  deleteTrack,
+  getLocalPath,
+} from "@/providers/AudioStorage";
 import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
 
 export const MusicPlaybackEngine: React.FC = () => {
@@ -168,6 +172,51 @@ export const MusicPlaybackEngine: React.FC = () => {
     };
   }, []);
 
+  // Listen for playback errors (corrupted cache files)
+  useEffect(() => {
+    const subscription = TrackPlayer.addEventListener(
+      Event.PlaybackError,
+      async (event) => {
+        const activeTrack = await TrackPlayer.getActiveTrack();
+        if (!activeTrack?.url) return;
+
+        // Only handle local file errors
+        const url = activeTrack.url as string;
+        if (!url.startsWith("file://")) return;
+
+        console.warn(
+          `[MusicPlayer] Playback error for cached file: ${activeTrack.id}`,
+          event,
+        );
+
+        // Delete corrupted cache file
+        if (activeTrack.id) {
+          try {
+            await deleteTrack(activeTrack.id);
+            console.log(
+              `[MusicPlayer] Deleted corrupted cache file: ${activeTrack.id}`,
+            );
+          } catch (error) {
+            console.warn(
+              "[MusicPlayer] Failed to delete corrupted file:",
+              error,
+            );
+          }
+        }
+
+        // Skip to next track
+        try {
+          await TrackPlayer.skipToNext();
+        } catch {
+          // No next track available, stop playback
+          await TrackPlayer.stop();
+        }
+      },
+    );
+
+    return () => subscription.remove();
+  }, []);
+
   // No visual component needed - TrackPlayer is headless
   return null;
 };

components/music/MusicPlaylistCard.tsx

@@ -1,11 +1,15 @@
+import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { Text } from "@/components/common/Text";
-import { apiAtom } from "@/providers/JellyfinProvider";
+import { getLocalPath } from "@/providers/AudioStorage";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 
 interface Props {
@@ -13,11 +17,11 @@ interface Props {
   width?: number;
 }
 
-export const MusicPlaylistCard: React.FC<Props> = ({
-  playlist,
-  width = 150,
-}) => {
+const IMAGE_SIZE = 56;
+
+export const MusicPlaylistCard: React.FC<Props> = ({ playlist }) => {
   const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
   const router = useRouter();
 
   const imageUrl = useMemo(
@@ -25,6 +29,37 @@ export const MusicPlaylistCard: React.FC<Props> = ({
     [api, playlist],
   );
 
+  // Fetch playlist tracks to check download status
+  const { data: tracks } = useQuery({
+    queryKey: ["playlist-tracks-status", playlist.Id, user?.Id],
+    queryFn: async () => {
+      const response = await getItemsApi(api!).getItems({
+        userId: user?.Id,
+        parentId: playlist.Id,
+        fields: ["MediaSources"],
+      });
+      return response.data.Items || [];
+    },
+    enabled: !!api && !!user?.Id && !!playlist.Id,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+
+  // Calculate download status
+  const downloadStatus = useMemo(() => {
+    if (!tracks || tracks.length === 0) {
+      return { downloaded: 0, total: playlist.ChildCount || 0 };
+    }
+    const downloaded = tracks.filter(
+      (track) => !!getLocalPath(track.Id),
+    ).length;
+    return { downloaded, total: tracks.length };
+  }, [tracks, playlist.ChildCount]);
+
+  const allDownloaded =
+    downloadStatus.total > 0 &&
+    downloadStatus.downloaded === downloadStatus.total;
+  const hasDownloads = downloadStatus.downloaded > 0;
+
   const handlePress = useCallback(() => {
     router.push({
       pathname: "/music/playlist/[playlistId]",
@@ -35,13 +70,12 @@ export const MusicPlaylistCard: React.FC<Props> = ({
   return (
     <TouchableOpacity
       onPress={handlePress}
-      style={{ width }}
-      className='flex flex-col'
+      className='flex-row items-center py-2'
     >
       <View
         style={{
-          width,
-          height: width,
+          width: IMAGE_SIZE,
+          height: IMAGE_SIZE,
           borderRadius: 8,
           overflow: "hidden",
           backgroundColor: "#1a1a1a",
@@ -56,16 +90,31 @@ export const MusicPlaylistCard: React.FC<Props> = ({
           />
         ) : (
           <View className='flex-1 items-center justify-center bg-neutral-800'>
-            <Text className='text-4xl'>🎶</Text>
+            <Text className='text-2xl'>🎶</Text>
           </View>
         )}
       </View>
-      <Text numberOfLines={1} className='text-white text-sm font-medium mt-2'>
-        {playlist.Name}
-      </Text>
-      <Text numberOfLines={1} className='text-neutral-400 text-xs'>
-        {playlist.ChildCount} tracks
-      </Text>
+      <View className='flex-1 ml-3'>
+        <Text numberOfLines={1} className='text-white text-base font-medium'>
+          {playlist.Name}
+        </Text>
+        <Text numberOfLines={1} className='text-neutral-400 text-sm mt-0.5'>
+          {playlist.ChildCount} tracks
+        </Text>
+      </View>
+      {/* Download status indicator */}
+      {allDownloaded ? (
+        <Ionicons
+          name='checkmark-circle'
+          size={18}
+          color='#22c55e'
+          style={{ marginRight: 4 }}
+        />
+      ) : hasDownloads ? (
+        <Text className='text-neutral-500 text-xs mr-1'>
+          {downloadStatus.downloaded}/{downloadStatus.total}
+        </Text>
+      ) : null}
     </TouchableOpacity>
   );
 };

components/music/MusicTrackItem.tsx

@@ -5,10 +5,13 @@ import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { AnimatedEqualizer } from "@/components/music/AnimatedEqualizer";
+import { useHaptic } from "@/hooks/useHaptic";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import {
   audioStorageEvents,
   getLocalPath,
+  isCached,
   isPermanentDownloading,
   isPermanentlyDownloaded,
 } from "@/providers/AudioStorage";
@@ -27,7 +30,7 @@ interface Props {
 
 export const MusicTrackItem: React.FC<Props> = ({
   track,
-  index,
+  index: _index,
   queue,
   showArtwork = true,
   onOptionsPress,
@@ -36,6 +39,7 @@ export const MusicTrackItem: React.FC<Props> = ({
   const { playTrack, currentTrack, isPlaying, loadingTrackId } =
     useMusicPlayer();
   const { isConnected, serverConnected } = useNetworkStatus();
+  const haptic = useHaptic("light");
 
   const imageUrl = useMemo(() => {
     const albumId = track.AlbumId || track.ParentId;
@@ -49,20 +53,20 @@ export const MusicTrackItem: React.FC<Props> = ({
   const isTrackLoading = loadingTrackId === track.Id;
 
   // Track download status with reactivity to completion events
-  // Only track permanent downloads - we don't show UI for auto-caching
   const [downloadStatus, setDownloadStatus] = useState<
-    "none" | "downloading" | "downloaded"
+    "none" | "downloading" | "downloaded" | "cached"
   >(() => {
     if (isPermanentlyDownloaded(track.Id)) return "downloaded";
     if (isPermanentDownloading(track.Id)) return "downloading";
+    if (isCached(track.Id)) return "cached";
     return "none";
   });
 
-  // Listen for download completion/error events (only for permanent downloads)
+  // Listen for download completion/error events
   useEffect(() => {
     const onComplete = (event: { itemId: string; permanent: boolean }) => {
-      if (event.itemId === track.Id && event.permanent) {
-        setDownloadStatus("downloaded");
+      if (event.itemId === track.Id) {
+        setDownloadStatus(event.permanent ? "downloaded" : "cached");
       }
     };
     const onError = (event: { itemId: string }) => {
@@ -80,12 +84,18 @@ export const MusicTrackItem: React.FC<Props> = ({
     };
   }, [track.Id]);
 
-  // Also check periodically if permanent download started (for when download is triggered externally)
+  // Re-check status when track changes (for list item recycling)
   useEffect(() => {
-    if (downloadStatus === "none" && isPermanentDownloading(track.Id)) {
+    if (isPermanentlyDownloaded(track.Id)) {
+      setDownloadStatus("downloaded");
+    } else if (isPermanentDownloading(track.Id)) {
       setDownloadStatus("downloading");
+    } else if (isCached(track.Id)) {
+      setDownloadStatus("cached");
+    } else {
+      setDownloadStatus("none");
     }
-  });
+  }, [track.Id]);
 
   const _isDownloaded = downloadStatus === "downloaded";
   // Check if available locally (either cached or permanently downloaded)
@@ -109,8 +119,9 @@ export const MusicTrackItem: React.FC<Props> = ({
   }, [onOptionsPress, track]);
 
   const handleOptionsPress = useCallback(() => {
+    haptic();
     onOptionsPress?.(track);
-  }, [onOptionsPress, track]);
+  }, [haptic, onOptionsPress, track]);
 
   return (
     <TouchableOpacity
@@ -118,24 +129,15 @@ export const MusicTrackItem: React.FC<Props> = ({
       onLongPress={handleLongPress}
       delayLongPress={300}
       disabled={isUnavailableOffline}
-      className={`flex flex-row items-center py-3 ${isCurrentTrack ? "bg-purple-900/20" : ""}`}
+      className={`flex-row items-center py-1.5 pl-4 pr-3 ${isCurrentTrack ? "bg-purple-900/20" : ""}`}
       style={isUnavailableOffline ? { opacity: 0.5 } : undefined}
     >
-      {index !== undefined && (
-        <View className='w-8 items-center'>
-          {isCurrentTrack && isPlaying ? (
-            <Ionicons name='musical-note' size={16} color='#9334E9' />
-          ) : (
-            <Text className='text-neutral-500 text-sm'>{index}</Text>
-          )}
-        </View>
-      )}
-
+      {/* Album artwork */}
       {showArtwork && (
         <View
           style={{
-            width: 48,
-            height: 48,
+            width: 44,
+            height: 44,
             borderRadius: 4,
             overflow: "hidden",
             backgroundColor: "#1a1a1a",
@@ -151,7 +153,7 @@ export const MusicTrackItem: React.FC<Props> = ({
             />
           ) : (
             <View className='flex-1 items-center justify-center bg-neutral-800'>
-              <Ionicons name='musical-note' size={20} color='#737373' />
+              <Ionicons name='musical-note' size={18} color='#737373' />
             </View>
           )}
           {isTrackLoading && (
@@ -173,21 +175,23 @@ export const MusicTrackItem: React.FC<Props> = ({
         </View>
       )}
 
+      {/* Track info */}
       <View className='flex-1 mr-3'>
-        <Text
-          numberOfLines={1}
-          className={`text-sm ${isCurrentTrack ? "text-purple-400 font-medium" : "text-white"}`}
-        >
-          {track.Name}
-        </Text>
-        <Text numberOfLines={1} className='text-neutral-400 text-xs mt-0.5'>
+        <View className='flex-row items-center'>
+          {isCurrentTrack && isPlaying && <AnimatedEqualizer />}
+          <Text
+            numberOfLines={1}
+            className={`flex-1 text-sm ${isCurrentTrack ? "text-purple-400 font-medium" : "text-white"}`}
+          >
+            {track.Name}
+          </Text>
+        </View>
+        <Text numberOfLines={1} className='text-neutral-500 text-xs mt-0.5'>
           {track.Artists?.join(", ") || track.AlbumArtist}
         </Text>
       </View>
 
-      <Text className='text-neutral-500 text-xs mr-2'>{duration}</Text>
-
-      {/* Download status indicator */}
+      {/* Download/cache status indicator */}
       {downloadStatus === "downloading" && (
         <ActivityIndicator
           size={14}
@@ -198,19 +202,23 @@ export const MusicTrackItem: React.FC<Props> = ({
       {downloadStatus === "downloaded" && (
         <Ionicons
           name='checkmark-circle'
-          size={16}
+          size={14}
           color='#22c55e'
           style={{ marginRight: 8 }}
         />
       )}
 
+      {/* Duration */}
+      <Text className='text-neutral-500 text-xs'>{duration}</Text>
+
+      {/* Options button */}
       {onOptionsPress && (
         <TouchableOpacity
           onPress={handleOptionsPress}
           hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-          className='p-1'
+          className='pl-3 py-1'
         >
-          <Ionicons name='ellipsis-vertical' size={18} color='#737373' />
+          <Ionicons name='ellipsis-vertical' size={16} color='#737373' />
         </TouchableOpacity>
       )}
     </TouchableOpacity>

components/music/PlaylistSortSheet.tsx

@@ -0,0 +1,173 @@
+import { Ionicons } from "@expo/vector-icons";
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+
+export type PlaylistSortOption = "SortName" | "DateCreated";
+
+export type PlaylistSortOrder = "Ascending" | "Descending";
+
+interface Props {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  sortBy: PlaylistSortOption;
+  sortOrder: PlaylistSortOrder;
+  onSortChange: (
+    sortBy: PlaylistSortOption,
+    sortOrder: PlaylistSortOrder,
+  ) => void;
+}
+
+const SORT_OPTIONS: { key: PlaylistSortOption; label: string; icon: string }[] =
+  [
+    { key: "SortName", label: "music.sort.alphabetical", icon: "text-outline" },
+    {
+      key: "DateCreated",
+      label: "music.sort.date_created",
+      icon: "time-outline",
+    },
+  ];
+
+export const PlaylistSortSheet: React.FC<Props> = ({
+  open,
+  setOpen,
+  sortBy,
+  sortOrder,
+  onSortChange,
+}) => {
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+
+  const snapPoints = useMemo(() => ["40%"], []);
+
+  useEffect(() => {
+    if (open) bottomSheetModalRef.current?.present();
+    else bottomSheetModalRef.current?.dismiss();
+  }, [open]);
+
+  const handleSheetChanges = useCallback(
+    (index: number) => {
+      if (index === -1) {
+        setOpen(false);
+      }
+    },
+    [setOpen],
+  );
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    [],
+  );
+
+  const handleSortSelect = useCallback(
+    (option: PlaylistSortOption) => {
+      // If selecting same option, toggle order; otherwise use sensible default
+      if (option === sortBy) {
+        onSortChange(
+          option,
+          sortOrder === "Ascending" ? "Descending" : "Ascending",
+        );
+      } else {
+        // Default order based on sort type
+        const defaultOrder: PlaylistSortOrder =
+          option === "SortName" ? "Ascending" : "Descending";
+        onSortChange(option, defaultOrder);
+      }
+      setOpen(false);
+    },
+    [sortBy, sortOrder, onSortChange, setOpen],
+  );
+
+  return (
+    <BottomSheetModal
+      ref={bottomSheetModalRef}
+      index={0}
+      snapPoints={snapPoints}
+      onChange={handleSheetChanges}
+      backdropComponent={renderBackdrop}
+      handleIndicatorStyle={{
+        backgroundColor: "white",
+      }}
+      backgroundStyle={{
+        backgroundColor: "#171717",
+      }}
+    >
+      <BottomSheetView
+        style={{
+          flex: 1,
+          paddingLeft: Math.max(16, insets.left),
+          paddingRight: Math.max(16, insets.right),
+          paddingBottom: insets.bottom,
+        }}
+      >
+        <Text className='text-white text-lg font-semibold mb-4'>
+          {t("music.sort.title")}
+        </Text>
+        <View className='flex-col rounded-xl overflow-hidden bg-neutral-800'>
+          {SORT_OPTIONS.map((option, index) => {
+            const isSelected = sortBy === option.key;
+            return (
+              <React.Fragment key={option.key}>
+                {index > 0 && <View style={styles.separator} />}
+                <TouchableOpacity
+                  onPress={() => handleSortSelect(option.key)}
+                  className='flex-row items-center px-4 py-3.5'
+                >
+                  <Ionicons
+                    name={option.icon as any}
+                    size={22}
+                    color={isSelected ? "#9334E9" : "#fff"}
+                  />
+                  <Text
+                    className={`ml-4 text-base flex-1 ${isSelected ? "text-purple-500 font-medium" : "text-white"}`}
+                  >
+                    {t(option.label)}
+                  </Text>
+                  {isSelected && (
+                    <View className='flex-row items-center'>
+                      <Ionicons
+                        name={
+                          sortOrder === "Ascending" ? "arrow-up" : "arrow-down"
+                        }
+                        size={18}
+                        color='#9334E9'
+                      />
+                      <Ionicons
+                        name='checkmark'
+                        size={22}
+                        color='#9334E9'
+                        style={{ marginLeft: 8 }}
+                      />
+                    </View>
+                  )}
+                </TouchableOpacity>
+              </React.Fragment>
+            );
+          })}
+        </View>
+      </BottomSheetView>
+    </BottomSheetModal>
+  );
+};
+
+const styles = StyleSheet.create({
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: "#404040",
+  },
+});

components/music/TrackOptionsSheet.tsx

@@ -28,6 +28,7 @@ import { Text } from "@/components/common/Text";
 import { useFavorite } from "@/hooks/useFavorite";
 import {
   audioStorageEvents,
+  deleteTrack,
   downloadTrack,
   isCached,
   isPermanentDownloading,
@@ -80,13 +81,16 @@ export const TrackOptionsSheet: React.FC<Props> = ({
     };
   }, [track?.Id]);
 
+  // Force re-evaluation of cache status when track changes
+  useEffect(() => {
+    setStorageUpdateCounter((c) => c + 1);
+  }, [track?.Id]);
+
   // Use a placeholder item for useFavorite when track is null
   const { isFavorite, toggleFavorite } = useFavorite(
     track ?? ({ Id: "", UserData: { IsFavorite: false } } as BaseItemDto),
   );
 
-  const snapPoints = useMemo(() => ["65%"], []);
-
   // Check download status (storageUpdateCounter triggers re-evaluation when download completes)
   const isAlreadyDownloaded = useMemo(
     () => isPermanentlyDownloaded(track?.Id),
@@ -182,6 +186,13 @@ export const TrackOptionsSheet: React.FC<Props> = ({
     setOpen(false);
   }, [track?.Id, api, user?.Id, isAlreadyDownloaded, setOpen]);
 
+  const handleDelete = useCallback(async () => {
+    if (!track?.Id) return;
+    await deleteTrack(track.Id);
+    setStorageUpdateCounter((c) => c + 1);
+    setOpen(false);
+  }, [track?.Id, setOpen]);
+
   const handleGoToArtist = useCallback(() => {
     const artistId = track?.ArtistItems?.[0]?.Id;
     if (artistId) {
@@ -220,8 +231,7 @@ export const TrackOptionsSheet: React.FC<Props> = ({
   return (
     <BottomSheetModal
       ref={bottomSheetModalRef}
-      index={0}
-      snapPoints={snapPoints}
+      enableDynamicSizing
       onChange={handleSheetChanges}
       backdropComponent={renderBackdrop}
       handleIndicatorStyle={{
@@ -391,6 +401,23 @@ export const TrackOptionsSheet: React.FC<Props> = ({
               </View>
             </>
           )}
+
+          {(isAlreadyDownloaded || isOnlyCached) && (
+            <>
+              <View style={styles.separator} />
+              <TouchableOpacity
+                onPress={handleDelete}
+                className='flex-row items-center px-4 py-3.5'
+              >
+                <Ionicons name='trash-outline' size={22} color='#ef4444' />
+                <Text className='text-red-500 ml-4 text-base'>
+                  {isAlreadyDownloaded
+                    ? t("music.track_options.delete_download")
+                    : t("music.track_options.delete_cache")}
+                </Text>
+              </TouchableOpacity>
+            </>
+          )}
         </View>
 
         {/* Navigation Options */}

components/settings/AudioToggles.tsx

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
 import { Switch } from "react-native-gesture-handler";
-import { useSettings } from "@/utils/atoms/settings";
+import { AudioTranscodeMode, useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -54,6 +54,70 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
     ];
   }, [cultures, settings?.defaultAudioLanguage, t, updateSettings]);
 
+  const audioTranscodeModeLabels: Record<AudioTranscodeMode, string> = {
+    [AudioTranscodeMode.Auto]: t("home.settings.audio.transcode_mode.auto"),
+    [AudioTranscodeMode.ForceStereo]: t(
+      "home.settings.audio.transcode_mode.stereo",
+    ),
+    [AudioTranscodeMode.Allow51]: t("home.settings.audio.transcode_mode.5_1"),
+    [AudioTranscodeMode.AllowAll]: t(
+      "home.settings.audio.transcode_mode.passthrough",
+    ),
+  };
+
+  const audioTranscodeModeOptions = useMemo(
+    () => [
+      {
+        options: [
+          {
+            type: "radio" as const,
+            label: t("home.settings.audio.transcode_mode.auto"),
+            value: AudioTranscodeMode.Auto,
+            selected:
+              settings?.audioTranscodeMode === AudioTranscodeMode.Auto ||
+              !settings?.audioTranscodeMode,
+            onPress: () =>
+              updateSettings({ audioTranscodeMode: AudioTranscodeMode.Auto }),
+          },
+          {
+            type: "radio" as const,
+            label: t("home.settings.audio.transcode_mode.stereo"),
+            value: AudioTranscodeMode.ForceStereo,
+            selected:
+              settings?.audioTranscodeMode === AudioTranscodeMode.ForceStereo,
+            onPress: () =>
+              updateSettings({
+                audioTranscodeMode: AudioTranscodeMode.ForceStereo,
+              }),
+          },
+          {
+            type: "radio" as const,
+            label: t("home.settings.audio.transcode_mode.5_1"),
+            value: AudioTranscodeMode.Allow51,
+            selected:
+              settings?.audioTranscodeMode === AudioTranscodeMode.Allow51,
+            onPress: () =>
+              updateSettings({
+                audioTranscodeMode: AudioTranscodeMode.Allow51,
+              }),
+          },
+          {
+            type: "radio" as const,
+            label: t("home.settings.audio.transcode_mode.passthrough"),
+            value: AudioTranscodeMode.AllowAll,
+            selected:
+              settings?.audioTranscodeMode === AudioTranscodeMode.AllowAll,
+            onPress: () =>
+              updateSettings({
+                audioTranscodeMode: AudioTranscodeMode.AllowAll,
+              }),
+          },
+        ],
+      },
+    ],
+    [settings?.audioTranscodeMode, t, updateSettings],
+  );
+
   if (isTv) return null;
   if (!settings) return null;
 
@@ -98,6 +162,31 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
             title={t("home.settings.audio.language")}
           />
         </ListItem>
+        <ListItem
+          title={t("home.settings.audio.transcode_mode.title")}
+          subtitle={t("home.settings.audio.transcode_mode.description")}
+        >
+          <PlatformDropdown
+            groups={audioTranscodeModeOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {
+                    audioTranscodeModeLabels[
+                      settings?.audioTranscodeMode || AudioTranscodeMode.Auto
+                    ]
+                  }
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.audio.transcode_mode.title")}
+          />
+        </ListItem>
       </ListGroup>
     </View>
   );

components/settings/KSPlayerSettings.tsx

@@ -1,40 +0,0 @@
-import type React from "react";
-import { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { Platform, Switch } from "react-native";
-import { setHardwareDecode } from "@/modules/sf-player";
-import { useSettings } from "@/utils/atoms/settings";
-import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
-
-export const KSPlayerSettings: React.FC = () => {
-  const { settings, updateSettings } = useSettings();
-  const { t } = useTranslation();
-
-  const handleHardwareDecodeChange = useCallback(
-    (value: boolean) => {
-      updateSettings({ ksHardwareDecode: value });
-      setHardwareDecode(value);
-    },
-    [updateSettings],
-  );
-
-  if (Platform.OS !== "ios" || !settings) return null;
-
-  return (
-    <ListGroup
-      title={t("home.settings.subtitles.ksplayer_title")}
-      className='mt-4'
-    >
-      <ListItem
-        title={t("home.settings.subtitles.hardware_decode")}
-        subtitle={t("home.settings.subtitles.hardware_decode_description")}
-      >
-        <Switch
-          value={settings.ksHardwareDecode}
-          onValueChange={handleHardwareDecodeChange}
-        />
-      </ListItem>
-    </ListGroup>
-  );
-};

components/settings/MediaContext.tsx

@@ -4,9 +4,10 @@ import type {
   UserDto,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getLocalizationApi, getUserApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { createContext, type ReactNode, useContext, useEffect } from "react";
+import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { type Settings, useSettings } from "@/utils/atoms/settings";
 
@@ -30,7 +31,7 @@ export const useMedia = () => {
 export const MediaProvider = ({ children }: { children: ReactNode }) => {
   const { settings, updateSettings } = useSettings();
   const api = useAtomValue(apiAtom);
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
 
   const updateSetingsWrapper = (update: Partial<Settings>) => {
     const updateUserConfiguration = async (

components/settings/MpvSubtitleSettings.tsx

@@ -0,0 +1,133 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useMemo } from "react";
+import { Platform, View, type ViewProps } from "react-native";
+import { Stepper } from "@/components/inputs/Stepper";
+import { Text } from "../common/Text";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+import { PlatformDropdown } from "../PlatformDropdown";
+import { useMedia } from "./MediaContext";
+
+interface Props extends ViewProps {}
+
+type AlignX = "left" | "center" | "right";
+type AlignY = "top" | "center" | "bottom";
+
+export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
+  const isTv = Platform.isTV;
+  const media = useMedia();
+  const { settings, updateSettings } = media;
+
+  const alignXOptions: AlignX[] = ["left", "center", "right"];
+  const alignYOptions: AlignY[] = ["top", "center", "bottom"];
+
+  const alignXLabels: Record<AlignX, string> = {
+    left: "Left",
+    center: "Center",
+    right: "Right",
+  };
+
+  const alignYLabels: Record<AlignY, string> = {
+    top: "Top",
+    center: "Center",
+    bottom: "Bottom",
+  };
+
+  const alignXOptionGroups = useMemo(() => {
+    const options = alignXOptions.map((align) => ({
+      type: "radio" as const,
+      label: alignXLabels[align],
+      value: align,
+      selected: align === (settings?.mpvSubtitleAlignX ?? "center"),
+      onPress: () => updateSettings({ mpvSubtitleAlignX: align }),
+    }));
+    return [{ options }];
+  }, [settings?.mpvSubtitleAlignX, updateSettings]);
+
+  const alignYOptionGroups = useMemo(() => {
+    const options = alignYOptions.map((align) => ({
+      type: "radio" as const,
+      label: alignYLabels[align],
+      value: align,
+      selected: align === (settings?.mpvSubtitleAlignY ?? "bottom"),
+      onPress: () => updateSettings({ mpvSubtitleAlignY: align }),
+    }));
+    return [{ options }];
+  }, [settings?.mpvSubtitleAlignY, updateSettings]);
+
+  if (isTv) return null;
+  if (!settings) return null;
+
+  return (
+    <View {...props}>
+      <ListGroup
+        title='MPV Subtitle Settings'
+        description={
+          <Text className='text-[#8E8D91] text-xs'>
+            Advanced subtitle customization for MPV player
+          </Text>
+        }
+      >
+        <ListItem title='Subtitle Scale'>
+          <Stepper
+            value={settings.mpvSubtitleScale ?? 1.0}
+            step={0.1}
+            min={0.5}
+            max={2.0}
+            onUpdate={(value) =>
+              updateSettings({ mpvSubtitleScale: Math.round(value * 10) / 10 })
+            }
+          />
+        </ListItem>
+
+        <ListItem title='Vertical Margin'>
+          <Stepper
+            value={settings.mpvSubtitleMarginY ?? 0}
+            step={5}
+            min={0}
+            max={100}
+            onUpdate={(value) => updateSettings({ mpvSubtitleMarginY: value })}
+          />
+        </ListItem>
+
+        <ListItem title='Horizontal Alignment'>
+          <PlatformDropdown
+            groups={alignXOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {alignXLabels[settings?.mpvSubtitleAlignX ?? "center"]}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title='Horizontal Alignment'
+          />
+        </ListItem>
+
+        <ListItem title='Vertical Alignment'>
+          <PlatformDropdown
+            groups={alignYOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {alignYLabels[settings?.mpvSubtitleAlignY ?? "bottom"]}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title='Vertical Alignment'
+          />
+        </ListItem>
+      </ListGroup>
+    </View>
+  );
+};

components/settings/OtherSettings.tsx

@@ -141,36 +141,6 @@ export const OtherSettings: React.FC = () => {
           />
         </ListItem>
 
-        {/* {(Platform.OS === "ios" || Platform.isTVOS)&& (
-          <ListItem
-            title={t("home.settings.other.video_player")}
-            disabled={pluginSettings?.defaultPlayer?.locked}
-          >
-            <Dropdown
-              data={Object.values(VideoPlayer).filter(isNumber)}
-              disabled={pluginSettings?.defaultPlayer?.locked}
-              keyExtractor={String}
-              titleExtractor={(item) => t(`home.settings.other.video_players.${VideoPlayer[item]}`)}
-              title={
-                <TouchableOpacity className="flex flex-row items-center justify-between py-1.5 pl-3">
-                  <Text className="mr-1 text-[#8E8D91]">
-                    {t(`home.settings.other.video_players.${VideoPlayer[settings.defaultPlayer]}`)}
-                  </Text>
-                  <Ionicons
-                    name="chevron-expand-sharp"
-                    size={18}
-                    color="#5A5960"
-                  />
-                </TouchableOpacity>
-              }
-              label={t("home.settings.other.orientation")}
-              onSelected={(defaultPlayer) =>
-                updateSettings({ defaultPlayer })
-              }
-            />
-          </ListItem>
-        )} */}
-
         <ListItem
           title={t("home.settings.other.show_custom_menu_links")}
           disabled={pluginSettings?.showCustomMenuLinks?.locked}

components/settings/PlaybackControlsSettings.tsx

@@ -13,7 +13,6 @@ import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
-import { VideoPlayerSettings } from "./VideoPlayerSettings";
 
 export const PlaybackControlsSettings: React.FC = () => {
   const { settings, updateSettings, pluginSettings } = useSettings();
@@ -231,8 +230,6 @@ export const PlaybackControlsSettings: React.FC = () => {
           />
         </ListItem>
       </ListGroup>
-
-      <VideoPlayerSettings />
     </DisabledSetting>
   );
 };

components/settings/QuickConnect.tsx

@@ -7,7 +7,7 @@ import {
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
 import { useAtom } from "jotai";
 import type React from "react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, Platform, View, type ViewProps } from "react-native";
 import { useHaptic } from "@/hooks/useHaptic";
@@ -28,6 +28,11 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const successHapticFeedback = useHaptic("success");
   const errorHapticFeedback = useHaptic("error");
+  const snapPoints = useMemo(
+    () => (Platform.OS === "android" ? ["100%"] : ["40%"]),
+    [],
+  );
+  const isAndroid = Platform.OS === "android";
 
   const { t } = useTranslation();
 
@@ -92,7 +97,7 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
 
       <BottomSheetModal
         ref={bottomSheetModalRef}
-        enableDynamicSizing
+        snapPoints={snapPoints}
         handleIndicatorStyle={{
           backgroundColor: "white",
         }}
@@ -100,9 +105,10 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
           backgroundColor: "#171717",
         }}
         backdropComponent={renderBackdrop}
-        keyboardBehavior='interactive'
+        keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
         keyboardBlurBehavior='restore'
         android_keyboardInputMode='adjustResize'
+        topInset={isAndroid ? 0 : undefined}
       >
         <BottomSheetView>
           <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>

components/settings/StorageSettings.tsx

@@ -1,16 +1,10 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
 import { useHaptic } from "@/hooks/useHaptic";
-import {
-  clearCache,
-  clearPermanentDownloads,
-  getStorageStats,
-} from "@/providers/AudioStorage";
 import { useDownload } from "@/providers/DownloadProvider";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -18,7 +12,6 @@ import { ListItem } from "../list/ListItem";
 export const StorageSettings = () => {
   const { deleteAllFiles, appSizeUsage } = useDownload();
   const { t } = useTranslation();
-  const queryClient = useQueryClient();
   const successHapticFeedback = useHaptic("success");
   const errorHapticFeedback = useHaptic("error");
 
@@ -36,11 +29,6 @@ export const StorageSettings = () => {
     },
   });
 
-  const { data: musicCacheStats } = useQuery({
-    queryKey: ["musicCacheStats"],
-    queryFn: () => getStorageStats(),
-  });
-
   const onDeleteClicked = async () => {
     try {
       await deleteAllFiles();
@@ -51,32 +39,6 @@ export const StorageSettings = () => {
     }
   };
 
-  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 calculatePercentage = (value: number, total: number) => {
     return ((value / total) * 100).toFixed(2);
   };
@@ -140,41 +102,13 @@ export const StorageSettings = () => {
         </View>
       </View>
       {!Platform.isTV && (
-        <>
-          <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>
-          <ListGroup>
-            <ListItem
-              textColor='red'
-              onPress={onDeleteClicked}
-              title={t("home.settings.storage.delete_all_downloaded_files")}
-            />
-          </ListGroup>
-        </>
+        <ListGroup>
+          <ListItem
+            textColor='red'
+            onPress={onDeleteClicked}
+            title={t("home.settings.storage.delete_all_downloaded_files")}
+          />
+        </ListGroup>
       )}
     </View>
   );

components/settings/VideoPlayerSettings.tsx

@@ -1,93 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import type React from "react";
-import { useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { Platform, Switch, View } from "react-native";
-import { setHardwareDecode } from "@/modules/sf-player";
-import { useSettings, VideoPlayerIOS } from "@/utils/atoms/settings";
-import { Text } from "../common/Text";
-import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
-import { PlatformDropdown } from "../PlatformDropdown";
-
-export const VideoPlayerSettings: React.FC = () => {
-  const { settings, updateSettings } = useSettings();
-  const { t } = useTranslation();
-
-  const handleHardwareDecodeChange = useCallback(
-    (value: boolean) => {
-      updateSettings({ ksHardwareDecode: value });
-      setHardwareDecode(value);
-    },
-    [updateSettings],
-  );
-
-  const videoPlayerOptions = useMemo(
-    () => [
-      {
-        options: [
-          {
-            type: "radio" as const,
-            label: t("home.settings.video_player.ksplayer"),
-            value: VideoPlayerIOS.KSPlayer,
-            selected: settings?.videoPlayerIOS === VideoPlayerIOS.KSPlayer,
-            onPress: () =>
-              updateSettings({ videoPlayerIOS: VideoPlayerIOS.KSPlayer }),
-          },
-          {
-            type: "radio" as const,
-            label: t("home.settings.video_player.vlc"),
-            value: VideoPlayerIOS.VLC,
-            selected: settings?.videoPlayerIOS === VideoPlayerIOS.VLC,
-            onPress: () =>
-              updateSettings({ videoPlayerIOS: VideoPlayerIOS.VLC }),
-          },
-        ],
-      },
-    ],
-    [settings?.videoPlayerIOS, t, updateSettings],
-  );
-
-  const getPlayerLabel = useCallback(() => {
-    switch (settings?.videoPlayerIOS) {
-      case VideoPlayerIOS.VLC:
-        return t("home.settings.video_player.vlc");
-      default:
-        return t("home.settings.video_player.ksplayer");
-    }
-  }, [settings?.videoPlayerIOS, t]);
-
-  if (Platform.OS !== "ios" || !settings) return null;
-
-  return (
-    <ListGroup title={t("home.settings.video_player.title")} className='mt-4'>
-      <ListItem
-        title={t("home.settings.video_player.video_player")}
-        subtitle={t("home.settings.video_player.video_player_description")}
-      >
-        <PlatformDropdown
-          groups={videoPlayerOptions}
-          trigger={
-            <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-              <Text className='mr-1 text-[#8E8D91]'>{getPlayerLabel()}</Text>
-              <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
-            </View>
-          }
-          title={t("home.settings.video_player.video_player")}
-        />
-      </ListItem>
-
-      {settings.videoPlayerIOS === VideoPlayerIOS.KSPlayer && (
-        <ListItem
-          title={t("home.settings.subtitles.hardware_decode")}
-          subtitle={t("home.settings.subtitles.hardware_decode_description")}
-        >
-          <Switch
-            value={settings.ksHardwareDecode}
-            onValueChange={handleHardwareDecodeChange}
-          />
-        </ListItem>
-      )}
-    </ListGroup>
-  );
-};

components/stacks/NestedTabPageStack.tsx

@@ -19,7 +19,14 @@ export const commonScreenOptions: ICommonScreenOptions = {
   headerLeft: () => <HeaderBackButton />,
 };
 
-const routes = ["persons/[personId]", "items/page", "series/[id]"];
+const routes = [
+  "persons/[personId]",
+  "items/page",
+  "series/[id]",
+  "music/album/[albumId]",
+  "music/artist/[artistId]",
+  "music/playlist/[playlistId]",
+];
 
 export const nestedTabPageScreenOptions: Record<string, ICommonScreenOptions> =
   Object.fromEntries(routes.map((route) => [route, commonScreenOptions]));

components/video-player/controls/BottomControls.tsx

@@ -96,11 +96,13 @@ export const BottomControls: FC<BottomControlsProps> = ({
       style={[
         {
           position: "absolute",
-          right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
-          left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-          bottom: settings?.safeAreaInControlsEnabled
-            ? Math.max(insets.bottom - 17, 0)
-            : 0,
+          right:
+            (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
+          left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+          bottom:
+            (settings?.safeAreaInControlsEnabled ?? true)
+              ? Math.max(insets.bottom - 17, 0)
+              : 0,
         },
       ]}
       className={"flex flex-col px-2"}

components/video-player/controls/BrightnessSlider.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import { useSharedValue } from "react-native-reanimated";
@@ -16,10 +16,19 @@ const BrightnessSlider = () => {
   const max = useSharedValue(100);
   const isUserInteracting = useRef(false);
   const lastKnownBrightness = useRef<number>(50);
+  const brightnessSupportedRef = useRef(true);
+  const [brightnessSupported, setBrightnessSupported] = useState(true);
 
   // Update brightness from device
   const updateBrightnessFromDevice = async () => {
-    if (isTv || !Brightness || isUserInteracting.current) return;
+    // Check ref (not state) to avoid stale closure in setInterval
+    if (
+      isTv ||
+      !Brightness ||
+      isUserInteracting.current ||
+      !brightnessSupportedRef.current
+    )
+      return;
 
     try {
       const currentBrightness = await Brightness.getBrightnessAsync();
@@ -31,7 +40,10 @@ const BrightnessSlider = () => {
         lastKnownBrightness.current = brightnessPercent;
       }
     } catch (error) {
-      console.error("Error fetching brightness:", error);
+      console.warn("Brightness not supported on this device:", error);
+      // Update both ref (stops interval) and state (triggers re-render to hide)
+      brightnessSupportedRef.current = false;
+      setBrightnessSupported(false);
     }
   };
 
@@ -66,7 +78,7 @@ const BrightnessSlider = () => {
     }, 100);
   };
 
-  if (isTv) return null;
+  if (isTv || !brightnessSupported) return null;
 
   return (
     <View style={styles.sliderContainer}>

components/video-player/controls/CenterControls.tsx

@@ -38,8 +38,8 @@ export const CenterControls: FC<CenterControlsProps> = ({
       style={{
         position: "absolute",
         top: "50%",
-        left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-        right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+        left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+        right: (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",

components/video-player/controls/Controls.tsx

@@ -37,7 +37,6 @@ import { useVideoTime } from "./hooks/useVideoTime";
 import { useControlsTimeout } from "./useControlsTimeout";
 import { PlaybackSpeedScope } from "./utils/playback-speed-settings";
 import { type AspectRatio } from "./VideoScalingModeSelector";
-import { type ScaleFactor } from "./VlcZoomControl";
 
 interface Props {
   item: BaseItemDto;
@@ -56,13 +55,7 @@ interface Props {
   startPictureInPicture?: () => Promise<void>;
   play: () => void;
   pause: () => void;
-  useVlcPlayer?: boolean;
-  // VLC-specific props
-  setVideoAspectRatio?: (aspectRatio: string | null) => Promise<void>;
   aspectRatio?: AspectRatio;
-  scaleFactor?: ScaleFactor;
-  setVideoScaleFactor?: (scaleFactor: number) => Promise<void>;
-  // KSPlayer-specific props
   isZoomedToFill?: boolean;
   onZoomToggle?: () => void;
   api?: Api | null;
@@ -87,11 +80,7 @@ export const Controls: FC<Props> = ({
   showControls,
   setShowControls,
   mediaSource,
-  useVlcPlayer = false,
-  setVideoAspectRatio,
   aspectRatio = "default",
-  scaleFactor = 0,
-  setVideoScaleFactor,
   isZoomedToFill = false,
   onZoomToggle,
   offline = false,
@@ -121,7 +110,7 @@ export const Controls: FC<Props> = ({
   } = useTrickplay(item);
 
   const min = useSharedValue(0);
-  const max = useSharedValue(item.RunTimeTicks || 0);
+  const max = useSharedValue(ticksToMs(item.RunTimeTicks || 0));
 
   // Animation values for controls
   const controlsOpacity = useSharedValue(showControls ? 1 : 0);
@@ -483,11 +472,7 @@ export const Controls: FC<Props> = ({
               goToNextItem={goToNextItem}
               previousItem={previousItem}
               nextItem={nextItem}
-              useVlcPlayer={useVlcPlayer}
               aspectRatio={aspectRatio}
-              setVideoAspectRatio={setVideoAspectRatio}
-              scaleFactor={scaleFactor}
-              setVideoScaleFactor={setVideoScaleFactor}
               isZoomedToFill={isZoomedToFill}
               onZoomToggle={onZoomToggle}
               playbackSpeed={playbackSpeed}

components/video-player/controls/HeaderControls.tsx

@@ -7,19 +7,14 @@ import { useRouter } from "expo-router";
 import { type FC, useCallback, useState } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { PlaybackSpeedSelector } from "@/components/PlaybackSpeedSelector";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useOrientation } from "@/hooks/useOrientation";
 import { OrientationLock } from "@/packages/expo-screen-orientation";
-import { useSettings, VideoPlayerIOS } from "@/utils/atoms/settings";
+import { useSettings } from "@/utils/atoms/settings";
 import { ICON_SIZES } from "./constants";
 import DropdownView from "./dropdown/DropdownView";
 import { PlaybackSpeedScope } from "./utils/playback-speed-settings";
-import {
-  type AspectRatio,
-  AspectRatioSelector,
-} from "./VideoScalingModeSelector";
-import { type ScaleFactor, VlcZoomControl } from "./VlcZoomControl";
+import { type AspectRatio } from "./VideoScalingModeSelector";
 import { ZoomToggle } from "./ZoomToggle";
 
 interface HeaderControlsProps {
@@ -33,13 +28,7 @@ interface HeaderControlsProps {
   goToNextItem: (options: { isAutoPlay?: boolean }) => void;
   previousItem?: BaseItemDto | null;
   nextItem?: BaseItemDto | null;
-  useVlcPlayer?: boolean;
-  // VLC-specific props
   aspectRatio?: AspectRatio;
-  setVideoAspectRatio?: (aspectRatio: string | null) => Promise<void>;
-  scaleFactor?: ScaleFactor;
-  setVideoScaleFactor?: (scaleFactor: number) => Promise<void>;
-  // KSPlayer-specific props
   isZoomedToFill?: boolean;
   onZoomToggle?: () => void;
   // Playback speed props
@@ -58,11 +47,7 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
   goToNextItem,
   previousItem,
   nextItem,
-  useVlcPlayer = false,
-  aspectRatio = "default",
-  setVideoAspectRatio,
-  scaleFactor = 0,
-  setVideoScaleFactor,
+  aspectRatio: _aspectRatio = "default",
   isZoomedToFill = false,
   onZoomToggle,
   playbackSpeed = 1.0,
@@ -109,9 +94,10 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
       style={[
         {
           position: "absolute",
-          top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
-          left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-          right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+          top: (settings?.safeAreaInControlsEnabled ?? true) ? insets.top : 0,
+          left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+          right:
+            (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
         },
       ]}
       pointerEvents={showControls ? "auto" : "none"}
@@ -120,7 +106,10 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
       <View className='mr-auto p-2' pointerEvents='box-none'>
         {!Platform.isTV && (!offline || !mediaSource?.TranscodingUrl) && (
           <View pointerEvents='auto'>
-            <DropdownView />
+            <DropdownView
+              playbackSpeed={playbackSpeed}
+              setPlaybackSpeed={setPlaybackSpeed}
+            />
           </View>
         )}
       </View>
@@ -142,20 +131,18 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
             />
           </TouchableOpacity>
         )}
-        {!Platform.isTV &&
-          startPictureInPicture &&
-          settings?.videoPlayerIOS !== VideoPlayerIOS.VLC && (
-            <TouchableOpacity
-              onPress={startPictureInPicture}
-              className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-            >
-              <MaterialIcons
-                name='picture-in-picture'
-                size={ICON_SIZES.HEADER}
-                color='white'
-              />
-            </TouchableOpacity>
-          )}
+        {!Platform.isTV && startPictureInPicture && (
+          <TouchableOpacity
+            onPress={startPictureInPicture}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <MaterialIcons
+              name='picture-in-picture'
+              size={ICON_SIZES.HEADER}
+              color='white'
+            />
+          </TouchableOpacity>
+        )}
         {item?.Type === "Episode" && (
           <TouchableOpacity
             onPress={switchOnEpisodeMode}
@@ -188,47 +175,12 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
             />
           </TouchableOpacity>
         )}
-        {/* Playback Speed Control */}
-        {!Platform.isTV && setPlaybackSpeed && (
-          <PlaybackSpeedSelector
-            selected={playbackSpeed}
-            onChange={setPlaybackSpeed}
-            item={item}
-          />
-        )}
-        {/* VLC-specific controls: Aspect Ratio and Scale/Zoom */}
-        {useVlcPlayer && (
-          <AspectRatioSelector
-            currentRatio={aspectRatio}
-            onRatioChange={async (newRatio) => {
-              if (setVideoAspectRatio) {
-                const aspectRatioString =
-                  newRatio === "default" ? null : newRatio;
-                await setVideoAspectRatio(aspectRatioString);
-              }
-            }}
-            disabled={!setVideoAspectRatio}
-          />
-        )}
-        {useVlcPlayer && (
-          <VlcZoomControl
-            currentScale={scaleFactor}
-            onScaleChange={async (newScale) => {
-              if (setVideoScaleFactor) {
-                await setVideoScaleFactor(newScale);
-              }
-            }}
-            disabled={!setVideoScaleFactor}
-          />
-        )}
-        {/* KSPlayer-specific control: Zoom to Fill */}
-        {!useVlcPlayer && (
-          <ZoomToggle
-            isZoomedToFill={isZoomedToFill}
-            onToggle={onZoomToggle ?? (() => {})}
-            disabled={!onZoomToggle}
-          />
-        )}
+        {/* MPV Zoom Toggle */}
+        <ZoomToggle
+          isZoomedToFill={isZoomedToFill}
+          onToggle={onZoomToggle ?? (() => {})}
+          disabled={!onZoomToggle}
+        />
         <TouchableOpacity
           onPress={onClose}
           className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'

components/video-player/controls/VlcZoomControl.tsx

@@ -1,121 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import React, { useMemo } from "react";
-import { Platform, View } from "react-native";
-import {
-  type OptionGroup,
-  PlatformDropdown,
-} from "@/components/PlatformDropdown";
-import { useHaptic } from "@/hooks/useHaptic";
-import { ICON_SIZES } from "./constants";
-
-export type ScaleFactor = 0 | 0.25 | 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 2.0;
-
-interface VlcZoomControlProps {
-  currentScale: ScaleFactor;
-  onScaleChange: (scale: ScaleFactor) => void;
-  disabled?: boolean;
-}
-
-interface ScaleOption {
-  id: ScaleFactor;
-  label: string;
-  description: string;
-}
-
-const SCALE_OPTIONS: ScaleOption[] = [
-  {
-    id: 0,
-    label: "Fit",
-    description: "Fit video to screen",
-  },
-  {
-    id: 0.25,
-    label: "25%",
-    description: "Quarter size",
-  },
-  {
-    id: 0.5,
-    label: "50%",
-    description: "Half size",
-  },
-  {
-    id: 0.75,
-    label: "75%",
-    description: "Three quarters",
-  },
-  {
-    id: 1.0,
-    label: "100%",
-    description: "Original video size",
-  },
-  {
-    id: 1.25,
-    label: "125%",
-    description: "Slight zoom",
-  },
-  {
-    id: 1.5,
-    label: "150%",
-    description: "Medium zoom",
-  },
-  {
-    id: 2.0,
-    label: "200%",
-    description: "Maximum zoom",
-  },
-];
-
-export const VlcZoomControl: React.FC<VlcZoomControlProps> = ({
-  currentScale,
-  onScaleChange,
-  disabled = false,
-}) => {
-  const lightHapticFeedback = useHaptic("light");
-
-  const handleScaleSelect = (scale: ScaleFactor) => {
-    onScaleChange(scale);
-    lightHapticFeedback();
-  };
-
-  const optionGroups = useMemo<OptionGroup[]>(() => {
-    return [
-      {
-        options: SCALE_OPTIONS.map((option) => ({
-          type: "radio" as const,
-          label: option.label,
-          value: option.id,
-          selected: option.id === currentScale,
-          onPress: () => handleScaleSelect(option.id),
-          disabled,
-        })),
-      },
-    ];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentScale, disabled]);
-
-  const trigger = useMemo(
-    () => (
-      <View
-        className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-        style={{ opacity: disabled ? 0.5 : 1 }}
-      >
-        <Ionicons name='scan-outline' size={ICON_SIZES.HEADER} color='white' />
-      </View>
-    ),
-    [disabled],
-  );
-
-  // Hide on TV platforms
-  if (Platform.isTV) return null;
-
-  return (
-    <PlatformDropdown
-      title='Zoom'
-      groups={optionGroups}
-      trigger={trigger}
-      bottomSheetConfig={{
-        enablePanDownToClose: true,
-      }}
-    />
-  );
-};

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

@@ -9,28 +9,30 @@ import React, {
   useContext,
   useMemo,
 } from "react";
-import type { SfPlayerViewRef, VlcPlayerViewRef } from "@/modules";
-
-// Union type for both player refs
-type PlayerRef = SfPlayerViewRef | VlcPlayerViewRef;
+import type { MpvPlayerViewRef } from "@/modules";
+import type { DownloadedItem } from "@/providers/Downloads/types";
 
 interface PlayerContextProps {
-  playerRef: MutableRefObject<PlayerRef | null>;
+  playerRef: MutableRefObject<MpvPlayerViewRef | null>;
   item: BaseItemDto;
   mediaSource: MediaSourceInfo | null | undefined;
   isVideoLoaded: boolean;
   tracksReady: boolean;
+  offline: boolean;
+  downloadedItem: DownloadedItem | null;
 }
 
 const PlayerContext = createContext<PlayerContextProps | undefined>(undefined);
 
 interface PlayerProviderProps {
   children: ReactNode;
-  playerRef: MutableRefObject<PlayerRef | null>;
+  playerRef: MutableRefObject<MpvPlayerViewRef | null>;
   item: BaseItemDto;
   mediaSource: MediaSourceInfo | null | undefined;
   isVideoLoaded: boolean;
   tracksReady: boolean;
+  offline?: boolean;
+  downloadedItem?: DownloadedItem | null;
 }
 
 export const PlayerProvider: React.FC<PlayerProviderProps> = ({
@@ -40,10 +42,28 @@ export const PlayerProvider: React.FC<PlayerProviderProps> = ({
   mediaSource,
   isVideoLoaded,
   tracksReady,
+  offline = false,
+  downloadedItem = null,
 }) => {
   const value = useMemo(
-    () => ({ playerRef, item, mediaSource, isVideoLoaded, tracksReady }),
-    [playerRef, item, mediaSource, isVideoLoaded, tracksReady],
+    () => ({
+      playerRef,
+      item,
+      mediaSource,
+      isVideoLoaded,
+      tracksReady,
+      offline,
+      downloadedItem,
+    }),
+    [
+      playerRef,
+      item,
+      mediaSource,
+      isVideoLoaded,
+      tracksReady,
+      offline,
+      downloadedItem,
+    ],
   );
 
   return (
@@ -59,30 +79,26 @@ export const usePlayerContext = () => {
   return context;
 };
 
-// Player controls hook - supports both SfPlayer (iOS) and VlcPlayer (Android)
+// Player controls hook - MPV player only
 export const usePlayerControls = () => {
   const { playerRef } = usePlayerContext();
 
-  // Helper to get SfPlayer-specific ref (for iOS-only features)
-  const getSfRef = () => playerRef.current as SfPlayerViewRef | null;
-
   return {
-    // Subtitle controls (both players support these, but with different interfaces)
+    // Subtitle controls
     getSubtitleTracks: async () => {
       return playerRef.current?.getSubtitleTracks?.() ?? null;
     },
     setSubtitleTrack: (trackId: number) => {
       playerRef.current?.setSubtitleTrack?.(trackId);
     },
-    // iOS only (SfPlayer)
     disableSubtitles: () => {
-      getSfRef()?.disableSubtitles?.();
+      playerRef.current?.disableSubtitles?.();
     },
     addSubtitleFile: (url: string, select = true) => {
-      getSfRef()?.addSubtitleFile?.(url, select);
+      playerRef.current?.addSubtitleFile?.(url, select);
     },
 
-    // Audio controls (both players)
+    // Audio controls
     getAudioTracks: async () => {
       return playerRef.current?.getAudioTracks?.() ?? null;
     },
@@ -90,26 +106,25 @@ export const usePlayerControls = () => {
       playerRef.current?.setAudioTrack?.(trackId);
     },
 
-    // Playback controls (both players)
+    // Playback controls
     play: () => playerRef.current?.play?.(),
     pause: () => playerRef.current?.pause?.(),
     seekTo: (position: number) => playerRef.current?.seekTo?.(position),
-    // iOS only (SfPlayer)
-    seekBy: (offset: number) => getSfRef()?.seekBy?.(offset),
-    setSpeed: (speed: number) => getSfRef()?.setSpeed?.(speed),
+    seekBy: (offset: number) => playerRef.current?.seekBy?.(offset),
+    setSpeed: (speed: number) => playerRef.current?.setSpeed?.(speed),
 
-    // Subtitle positioning - iOS only (SfPlayer)
-    setSubtitleScale: (scale: number) => getSfRef()?.setSubtitleScale?.(scale),
+    // Subtitle positioning
+    setSubtitleScale: (scale: number) =>
+      playerRef.current?.setSubtitleScale?.(scale),
     setSubtitlePosition: (position: number) =>
-      getSfRef()?.setSubtitlePosition?.(position),
+      playerRef.current?.setSubtitlePosition?.(position),
     setSubtitleMarginY: (margin: number) =>
-      getSfRef()?.setSubtitleMarginY?.(margin),
+      playerRef.current?.setSubtitleMarginY?.(margin),
     setSubtitleFontSize: (size: number) =>
-      getSfRef()?.setSubtitleFontSize?.(size),
+      playerRef.current?.setSubtitleFontSize?.(size),
 
-    // PiP (both players)
+    // PiP
     startPictureInPicture: () => playerRef.current?.startPictureInPicture?.(),
-    // iOS only (SfPlayer)
-    stopPictureInPicture: () => getSfRef()?.stopPictureInPicture?.(),
+    stopPictureInPicture: () => playerRef.current?.stopPictureInPicture?.(),
   };
 };

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

@@ -8,7 +8,7 @@
  * ============================================================================
  *
  * - Jellyfin is source of truth for subtitle list (embedded + external)
- * - KSPlayer only knows about:
+ * - MPV only knows about:
  *   - Embedded subs it finds in the video stream
  *   - External subs we explicitly add via addSubtitleFile()
  * - UI shows Jellyfin's complete list
@@ -24,8 +24,8 @@
  *    - Value of -1 means disabled/none
  *
  * 2. MPV INDEX (track.mpvIndex)
- *    - KSPlayer's internal track ID
- *    - KSPlayer orders tracks as: [all embedded, then all external]
+ *    - MPV's internal track ID
+ *    - MPV orders tracks as: [all embedded, then all external]
  *    - IDs: 1..embeddedCount for embedded, embeddedCount+1.. for external
  *    - Value of -1 means track needs replacePlayer() (e.g., burned-in sub)
  *
@@ -34,15 +34,15 @@
  * ============================================================================
  *
  * Embedded (DeliveryMethod.Embed):
- *   - Already in KSPlayer's track list
+ *   - Already in MPV's track list
  *   - Select via setSubtitleTrack(mpvId)
  *
  * External (DeliveryMethod.External):
- *   - Loaded into KSPlayer's srtControl on video start
+ *   - Loaded into MPV on video start
  *   - Select via setSubtitleTrack(embeddedCount + externalPosition + 1)
  *
  * Image-based during transcoding:
- *   - Burned into video by Jellyfin, not in KSPlayer
+ *   - Burned into video by Jellyfin, not in MPV
  *   - Requires replacePlayer() to change
  */
 
@@ -57,7 +57,7 @@ import {
   useMemo,
   useState,
 } from "react";
-import type { SfAudioTrack } from "@/modules";
+import type { MpvAudioTrack } from "@/modules";
 import { isImageBasedSubtitle } from "@/utils/jellyfin/subtitleUtils";
 import type { Track } from "../types";
 import { usePlayerContext, usePlayerControls } from "./PlayerContext";
@@ -75,7 +75,8 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
   const [subtitleTracks, setSubtitleTracks] = useState<Track[] | null>(null);
   const [audioTracks, setAudioTracks] = useState<Track[] | null>(null);
 
-  const { tracksReady, mediaSource } = usePlayerContext();
+  const { tracksReady, mediaSource, offline, downloadedItem } =
+    usePlayerContext();
   const playerControls = usePlayerControls();
 
   const { itemId, audioIndex, bitrateValue, subtitleIndex, playbackPosition } =
@@ -131,11 +132,92 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
     if (!tracksReady) return;
 
     const fetchTracks = async () => {
+      // Check if this is offline transcoded content
+      // For transcoded offline content, only ONE audio track exists in the file
+      const isOfflineTranscoded =
+        offline && downloadedItem?.userData?.isTranscoded === true;
+
+      if (isOfflineTranscoded) {
+        // Build single audio track entry - only the downloaded track exists
+        const downloadedAudioIndex = downloadedItem.userData.audioStreamIndex;
+        const downloadedTrack = allAudio.find(
+          (a) => a.Index === downloadedAudioIndex,
+        );
+
+        if (downloadedTrack) {
+          const audio: Track[] = [
+            {
+              name: downloadedTrack.DisplayTitle || "Audio",
+              index: downloadedTrack.Index ?? 0,
+              mpvIndex: 1, // Only track in file (MPV uses 1-based indexing)
+              setTrack: () => {
+                // Track is already selected (only one available)
+                router.setParams({ audioIndex: String(downloadedTrack.Index) });
+              },
+            },
+          ];
+          setAudioTracks(audio);
+        } else {
+          // Fallback: show no audio tracks if the stored track wasn't found
+          setAudioTracks([]);
+        }
+
+        // For subtitles in transcoded offline content:
+        // - Text-based subs may still be embedded
+        // - Image-based subs were burned in during transcoding
+        const downloadedSubtitleIndex =
+          downloadedItem.userData.subtitleStreamIndex;
+        const subs: Track[] = [];
+
+        // Add "Disable" option
+        subs.push({
+          name: "Disable",
+          index: -1,
+          mpvIndex: -1,
+          setTrack: () => {
+            playerControls.setSubtitleTrack(-1);
+            router.setParams({ subtitleIndex: "-1" });
+          },
+        });
+
+        // For text-based subs, they should still be available in the file
+        let subIdx = 1;
+        for (const sub of allSubs) {
+          if (sub.IsTextSubtitleStream) {
+            subs.push({
+              name: sub.DisplayTitle || "Unknown",
+              index: sub.Index ?? -1,
+              mpvIndex: subIdx,
+              setTrack: () => {
+                playerControls.setSubtitleTrack(subIdx);
+                router.setParams({ subtitleIndex: String(sub.Index) });
+              },
+            });
+            subIdx++;
+          } else if (sub.Index === downloadedSubtitleIndex) {
+            // This image-based sub was burned in - show it but indicate it's active
+            subs.push({
+              name: `${sub.DisplayTitle || "Unknown"} (burned in)`,
+              index: sub.Index ?? -1,
+              mpvIndex: -1, // Can't be changed
+              setTrack: () => {
+                // Already burned in, just update params
+                router.setParams({ subtitleIndex: String(sub.Index) });
+              },
+            });
+          }
+        }
+
+        setSubtitleTracks(subs.sort((a, b) => a.index - b.index));
+        return;
+      }
+
+      // MPV track handling
       const audioData = await playerControls.getAudioTracks().catch(() => null);
-      const playerAudio = (audioData as SfAudioTrack[]) ?? [];
+      const playerAudio = (audioData as MpvAudioTrack[]) ?? [];
 
       // Separate embedded vs external subtitles from Jellyfin's list
-      // KSPlayer orders tracks as: [all embedded, then all external]
+      // MPV orders tracks as: [all embedded, then all external]
       const embeddedSubs = allSubs.filter(
         (s) => s.DeliveryMethod === SubtitleDeliveryMethod.Embed,
       );
@@ -143,7 +225,7 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
         (s) => s.DeliveryMethod === SubtitleDeliveryMethod.External,
       );
 
-      // Count embedded subs that will be in KSPlayer
+      // Count embedded subs that will be in MPV
       // (excludes image-based subs during transcoding as they're burned in)
       const embeddedInPlayer = embeddedSubs.filter(
         (s) => !isTranscoding || !isImageBasedSubtitle(s),
@@ -170,8 +252,8 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
           continue;
         }
 
-        // Calculate KSPlayer track ID based on type
-        // KSPlayer IDs: [1..embeddedCount] for embedded, [embeddedCount+1..] for external
+        // Calculate MPV track ID based on type
+        // MPV IDs: [1..embeddedCount] for embedded, [embeddedCount+1..] for external
         let mpvId = -1;
 
         if (isEmbedded) {
@@ -259,7 +341,7 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
     };
 
     fetchTracks();
-  }, [tracksReady, mediaSource]);
+  }, [tracksReady, mediaSource, offline, downloadedItem]);
 
   return (
     <VideoContext.Provider value={{ subtitleTracks, audioTracks }}>

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

@@ -7,9 +7,11 @@ import {
   type OptionGroup,
   PlatformDropdown,
 } from "@/components/PlatformDropdown";
+import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
 import { useSettings } from "@/utils/atoms/settings";
 import { usePlayerContext } from "../contexts/PlayerContext";
 import { useVideoContext } from "../contexts/VideoContext";
+import { PlaybackSpeedScope } from "../utils/playback-speed-settings";
 
 // Subtitle size presets (stored as scale * 100, so 1.0 = 100)
 const SUBTITLE_SIZE_PRESETS = [
@@ -23,7 +25,15 @@ const SUBTITLE_SIZE_PRESETS = [
   { label: "1.2", value: 120 },
 ] as const;
 
-const DropdownView = () => {
+interface DropdownViewProps {
+  playbackSpeed?: number;
+  setPlaybackSpeed?: (speed: number, scope: PlaybackSpeedScope) => void;
+}
+
+const DropdownView = ({
+  playbackSpeed = 1.0,
+  setPlaybackSpeed,
+}: DropdownViewProps) => {
   const { subtitleTracks, audioTracks } = useVideoContext();
   const { item, mediaSource } = usePlayerContext();
   const { settings, updateSettings } = useSettings();
@@ -137,6 +147,20 @@ const DropdownView = () => {
       });
     }
 
+    // Speed Section
+    if (setPlaybackSpeed) {
+      groups.push({
+        title: "Speed",
+        options: PLAYBACK_SPEEDS.map((speed) => ({
+          type: "radio" as const,
+          label: speed.label,
+          value: speed.value.toString(),
+          selected: playbackSpeed === speed.value,
+          onPress: () => setPlaybackSpeed(speed.value, PlaybackSpeedScope.All),
+        })),
+      });
+    }
+
     return groups;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -149,6 +173,8 @@ const DropdownView = () => {
     audioIndex,
     settings.subtitleSize,
     updateSettings,
+    playbackSpeed,
+    setPlaybackSpeed,
     // Note: subtitleTracks and audioTracks are intentionally excluded
     // because we use subtitleTracksKey and audioTracksKey for stability
   ]);

components/video-player/controls/hooks/useVolumeAndBrightness.ts

@@ -34,6 +34,7 @@ export const useVolumeAndBrightness = ({
   const initialVolume = useRef<number | null>(null);
   const initialBrightness = useRef<number | null>(null);
   const dragStartY = useRef<number | null>(null);
+  const brightnessSupported = useRef(true);
 
   const startVolumeDrag = useCallback(async (startY: number) => {
     if (Platform.isTV || !VolumeManager) return;
@@ -88,20 +89,26 @@ export const useVolumeAndBrightness = ({
   }, []);
 
   const startBrightnessDrag = useCallback(async (startY: number) => {
-    if (Platform.isTV || !Brightness) return;
+    if (Platform.isTV || !Brightness || !brightnessSupported.current) return;
 
     try {
       const brightness = await Brightness.getBrightnessAsync();
       initialBrightness.current = brightness;
       dragStartY.current = startY;
     } catch (error) {
-      console.error("Error starting brightness drag:", error);
+      console.warn("Brightness not supported on this device:", error);
+      brightnessSupported.current = false;
     }
   }, []);
 
   const updateBrightnessDrag = useCallback(
     async (deltaY: number) => {
-      if (Platform.isTV || !Brightness || initialBrightness.current === null)
+      if (
+        Platform.isTV ||
+        !Brightness ||
+        initialBrightness.current === null ||
+        !brightnessSupported.current
+      )
         return;
 
       try {
@@ -118,7 +125,8 @@ export const useVolumeAndBrightness = ({
         const brightnessPercent = Math.round(newBrightness * 100);
         onBrightnessChange?.(brightnessPercent);
       } catch (error) {
-        console.error("Error updating brightness:", error);
+        console.warn("Brightness not supported on this device:", error);
+        brightnessSupported.current = false;
       }
     },
     [onBrightnessChange],

crowdin.yml

@@ -1,12 +1,10 @@
-"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"
-  }
-]
+project_id_env: CROWDIN_PROJECT_ID
+api_token_env: CROWDIN_PERSONAL_TOKEN
+base_path: .
+preserve_hierarchy: 1
+files:
+  - source: translations/en.json
+    translation: translations/%two_letters_code%.json
+    skip_untranslated_strings: false
+    skip_untranslated_files: false
+    export_only_approved: false

eas.json

@@ -45,14 +45,14 @@
     },
     "production": {
       "environment": "production",
-      "channel": "0.51.0",
+      "channel": "0.52.0",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
       "environment": "production",
-      "channel": "0.51.0",
+      "channel": "0.52.0",
       "android": {
         "buildType": "apk",
         "image": "latest"
@@ -60,7 +60,7 @@
     },
     "production-apk-tv": {
       "environment": "production",
-      "channel": "0.51.0",
+      "channel": "0.52.0",
       "android": {
         "buildType": "apk",
         "image": "latest"

hooks/useFavorite.ts

@@ -1,21 +1,63 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { atom, useAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 
+// Shared atom to store favorite status across all components
+// Maps itemId -> isFavorite
+const favoritesAtom = atom<Record<string, boolean>>({});
+
 export const useFavorite = (item: BaseItemDto) => {
   const queryClient = useQueryClient();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const [isFavorite, setIsFavorite] = useState<boolean | undefined>(
-    item.UserData?.IsFavorite,
+  const [favorites, setFavorites] = useAtom(favoritesAtom);
+
+  const itemId = item.Id ?? "";
+
+  // Get current favorite status from shared state, falling back to item data
+  const isFavorite = itemId
+    ? (favorites[itemId] ?? item.UserData?.IsFavorite)
+    : item.UserData?.IsFavorite;
+
+  // Update shared state when item data changes
+  useEffect(() => {
+    if (itemId && item.UserData?.IsFavorite !== undefined) {
+      setFavorites((prev) => ({
+        ...prev,
+        [itemId]: item.UserData!.IsFavorite!,
+      }));
+    }
+  }, [itemId, item.UserData?.IsFavorite, setFavorites]);
+
+  // Helper to update favorite status in shared state
+  const setIsFavorite = useCallback(
+    (value: boolean | undefined) => {
+      if (itemId && value !== undefined) {
+        setFavorites((prev) => ({ ...prev, [itemId]: value }));
+      }
+    },
+    [itemId, setFavorites],
   );
 
+  // Use refs to avoid stale closure issues in mutationFn
+  const itemRef = useRef(item);
+  const apiRef = useRef(api);
+  const userRef = useRef(user);
+
+  // Keep refs updated
   useEffect(() => {
-    setIsFavorite(item.UserData?.IsFavorite);
-  }, [item.UserData?.IsFavorite]);
+    itemRef.current = item;
+  }, [item]);
+
+  useEffect(() => {
+    apiRef.current = api;
+  }, [api]);
+
+  useEffect(() => {
+    userRef.current = user;
+  }, [user]);
 
   const itemQueryKeyPrefix = useMemo(
     () => ["item", item.Id] as const,
@@ -41,18 +83,23 @@ export const useFavorite = (item: BaseItemDto) => {
 
   const favoriteMutation = useMutation({
     mutationFn: async (nextIsFavorite: boolean) => {
-      if (!api || !user || !item.Id) return;
-      if (nextIsFavorite) {
-        await getUserLibraryApi(api).markFavoriteItem({
-          userId: user.Id,
-          itemId: item.Id,
-        });
+      const currentApi = apiRef.current;
+      const currentUser = userRef.current;
+      const currentItem = itemRef.current;
+
+      if (!currentApi || !currentUser?.Id || !currentItem?.Id) {
         return;
       }
-      await getUserLibraryApi(api).unmarkFavoriteItem({
-        userId: user.Id,
-        itemId: item.Id,
-      });
+
+      // Use the same endpoint format as the web client:
+      // POST /Users/{userId}/FavoriteItems/{itemId} - add favorite
+      // DELETE /Users/{userId}/FavoriteItems/{itemId} - remove favorite
+      const path = `/Users/${currentUser.Id}/FavoriteItems/${currentItem.Id}`;
+
+      const response = nextIsFavorite
+        ? await currentApi.post(path, {}, {})
+        : await currentApi.delete(path, {});
+      return response.data;
     },
     onMutate: async (nextIsFavorite: boolean) => {
       await queryClient.cancelQueries({ queryKey: itemQueryKeyPrefix });

hooks/useJellyseerr.ts

@@ -10,10 +10,10 @@ import type {
 } from "@/utils/jellyseerr/server/models/Search";
 import { storage } from "@/utils/mmkv";
 import "@/augmentations";
-import { useQueryClient } from "@tanstack/react-query";
 import { t } from "i18next";
 import { useCallback, useMemo } from "react";
 import { toast } from "sonner-native";
+import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useSettings } from "@/utils/atoms/settings";
 import type { RTRating } from "@/utils/jellyseerr/server/api/rating/rottentomatoes";
 import {
@@ -436,7 +436,7 @@ const jellyseerrUserAtom = atom(storage.get<JellyseerrUser>(JELLYSEERR_USER));
 export const useJellyseerr = () => {
   const { settings, updateSettings } = useSettings();
   const [jellyseerrUser, setJellyseerrUser] = useAtom(jellyseerrUserAtom);
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
 
   const jellyseerrApi = useMemo(() => {
     const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);

hooks/useMusicCast.ts

@@ -0,0 +1,161 @@
+import type { Api } from "@jellyfin/sdk";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useCallback } from "react";
+import CastContext, {
+  CastState,
+  MediaStreamType,
+  PlayServicesState,
+  useCastState,
+  useRemoteMediaClient,
+} from "react-native-google-cast";
+import { getAudioContentType } from "@/utils/jellyfin/audio/getAudioContentType";
+import { getAudioStreamUrl } from "@/utils/jellyfin/audio/getAudioStreamUrl";
+
+interface UseMusicCastOptions {
+  api: Api | null;
+  userId: string | undefined;
+}
+
+interface CastQueueOptions {
+  queue: BaseItemDto[];
+  startIndex: number;
+}
+
+/**
+ * Hook for casting music to Chromecast with full queue support
+ */
+export const useMusicCast = ({ api, userId }: UseMusicCastOptions) => {
+  const client = useRemoteMediaClient();
+  const castState = useCastState();
+
+  const isConnected = castState === CastState.CONNECTED;
+
+  /**
+   * Get album art URL for a track
+   */
+  const getAlbumArtUrl = useCallback(
+    (track: BaseItemDto): string | undefined => {
+      if (!api) return undefined;
+      const albumId = track.AlbumId || track.ParentId;
+      if (albumId) {
+        return `${api.basePath}/Items/${albumId}/Images/Primary?maxHeight=600&maxWidth=600`;
+      }
+      return `${api.basePath}/Items/${track.Id}/Images/Primary?maxHeight=600&maxWidth=600`;
+    },
+    [api],
+  );
+
+  /**
+   * Cast a queue of tracks to Chromecast
+   * Uses native queue support for seamless track transitions
+   */
+  const castQueue = useCallback(
+    async ({ queue, startIndex }: CastQueueOptions): Promise<boolean> => {
+      if (!client || !api || !userId) {
+        console.warn("Cannot cast: missing client, api, or userId");
+        return false;
+      }
+
+      try {
+        // Check Play Services state (Android)
+        const state = await CastContext.getPlayServicesState();
+        if (state && state !== PlayServicesState.SUCCESS) {
+          CastContext.showPlayServicesErrorDialog(state);
+          return false;
+        }
+
+        // Build queue items - limit to 100 tracks due to Cast SDK message size limit
+        const queueToSend = queue.slice(0, 100);
+        const queueItems = await Promise.all(
+          queueToSend.map(async (track) => {
+            const streamResult = await getAudioStreamUrl(
+              api,
+              userId,
+              track.Id!,
+            );
+            if (!streamResult) {
+              throw new Error(
+                `Failed to get stream URL for track: ${track.Name}`,
+              );
+            }
+
+            const contentType = getAudioContentType(
+              streamResult.mediaSource?.Container,
+            );
+
+            // Calculate stream duration in seconds from runtime ticks
+            const streamDurationSeconds = track.RunTimeTicks
+              ? track.RunTimeTicks / 10000000
+              : undefined;
+
+            return {
+              mediaInfo: {
+                contentId: track.Id,
+                contentUrl: streamResult.url,
+                contentType,
+                streamType: MediaStreamType.BUFFERED,
+                streamDuration: streamDurationSeconds,
+                metadata: {
+                  type: "musicTrack" as const,
+                  title: track.Name || "Unknown Track",
+                  artist: track.AlbumArtist || track.Artists?.join(", ") || "",
+                  albumName: track.Album || "",
+                  images: getAlbumArtUrl(track)
+                    ? [{ url: getAlbumArtUrl(track)! }]
+                    : [],
+                },
+              },
+              autoplay: true,
+              preloadTime: 10, // Preload 10 seconds before track ends
+            };
+          }),
+        );
+
+        // Load media with queue
+        await client.loadMedia({
+          queueData: {
+            items: queueItems,
+            startIndex: Math.min(startIndex, queueItems.length - 1),
+          },
+        });
+
+        // Show expanded controls
+        CastContext.showExpandedControls();
+
+        return true;
+      } catch (error) {
+        console.error("Failed to cast music queue:", error);
+        return false;
+      }
+    },
+    [client, api, userId, getAlbumArtUrl],
+  );
+
+  /**
+   * Cast a single track to Chromecast
+   */
+  const castTrack = useCallback(
+    async (track: BaseItemDto): Promise<boolean> => {
+      return castQueue({ queue: [track], startIndex: 0 });
+    },
+    [castQueue],
+  );
+
+  /**
+   * Stop casting and disconnect
+   */
+  const stopCasting = useCallback(async () => {
+    if (client) {
+      await client.stop();
+    }
+  }, [client]);
+
+  return {
+    client,
+    isConnected,
+    castState,
+    castQueue,
+    castTrack,
+    stopCasting,
+  };
+};

hooks/useNetworkAwareQueryClient.ts

@@ -0,0 +1,47 @@
+import type {
+  InvalidateOptions,
+  InvalidateQueryFilters,
+  QueryClient,
+  QueryKey,
+} from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { invalidateQueriesWhenOnline } from "@/utils/query/networkAwareInvalidate";
+
+type NetworkAwareQueryClient = QueryClient & {
+  forceInvalidateQueries: QueryClient["invalidateQueries"];
+};
+
+/**
+ * Returns a queryClient wrapper with network-aware invalidation.
+ * Use this instead of useQueryClient when you need to invalidate queries.
+ *
+ * - invalidateQueries: Only invalidates when online (preserves offline cache)
+ * - forceInvalidateQueries: Always invalidates (use sparingly)
+ */
+export function useNetworkAwareQueryClient(): NetworkAwareQueryClient {
+  const queryClient = useQueryClient();
+
+  const networkAwareInvalidate = useCallback(
+    <TTaggedQueryKey extends QueryKey = QueryKey>(
+      filters?: InvalidateQueryFilters<TTaggedQueryKey>,
+      options?: InvalidateOptions,
+    ): Promise<void> => {
+      if (!filters) {
+        return Promise.resolve();
+      }
+      return invalidateQueriesWhenOnline(queryClient, filters, options);
+    },
+    [queryClient],
+  );
+
+  return useMemo(() => {
+    // Create a proxy-like object that inherits from queryClient
+    // but overrides invalidateQueries
+    const wrapped = Object.create(queryClient) as NetworkAwareQueryClient;
+    wrapped.invalidateQueries = networkAwareInvalidate;
+    wrapped.forceInvalidateQueries =
+      queryClient.invalidateQueries.bind(queryClient);
+    return wrapped;
+  }, [queryClient, networkAwareInvalidate]);
+}

hooks/usePlaylistMutations.ts

@@ -1,8 +1,9 @@
 import { getLibraryApi, getPlaylistsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner-native";
+import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 
 /**
@@ -11,7 +12,7 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 export const useCreatePlaylist = () => {
   const api = useAtomValue(apiAtom);
   const user = useAtomValue(userAtom);
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
   const { t } = useTranslation();
 
   const mutation = useMutation({
@@ -58,7 +59,7 @@ export const useCreatePlaylist = () => {
 export const useAddToPlaylist = () => {
   const api = useAtomValue(apiAtom);
   const user = useAtomValue(userAtom);
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
   const { t } = useTranslation();
 
   const mutation = useMutation({
@@ -108,7 +109,7 @@ export const useAddToPlaylist = () => {
  */
 export const useRemoveFromPlaylist = () => {
   const api = useAtomValue(apiAtom);
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
   const { t } = useTranslation();
 
   const mutation = useMutation({
@@ -160,7 +161,7 @@ export const useRemoveFromPlaylist = () => {
  */
 export const useDeletePlaylist = () => {
   const api = useAtomValue(apiAtom);
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
   const { t } = useTranslation();
 
   const mutation = useMutation({

hooks/useRevalidatePlaybackProgressCache.ts

@@ -1,4 +1,4 @@
-import { useQueryClient } from "@tanstack/react-query";
+import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useDownload } from "@/providers/DownloadProvider";
 import { useTwoWaySync } from "./useTwoWaySync";
 
@@ -6,7 +6,7 @@ import { useTwoWaySync } from "./useTwoWaySync";
  * useRevalidatePlaybackProgressCache invalidates queries related to playback progress.
  */
 export function useInvalidatePlaybackProgressCache() {
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
   const { getDownloadedItems } = useDownload();
   const { syncPlaybackState } = useTwoWaySync();
 

hooks/useWatchlistMutations.ts

@@ -1,7 +1,8 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useCallback } from "react";
 import { toast } from "sonner-native";
+import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { createStreamystatsApi } from "@/utils/streamystats/api";
@@ -17,7 +18,7 @@ import type {
 export const useCreateWatchlist = () => {
   const api = useAtomValue(apiAtom);
   const { settings } = useSettings();
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
 
   const mutation = useMutation({
     mutationFn: async (
@@ -58,7 +59,7 @@ export const useCreateWatchlist = () => {
 export const useUpdateWatchlist = () => {
   const api = useAtomValue(apiAtom);
   const { settings } = useSettings();
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
 
   const mutation = useMutation({
     mutationFn: async ({
@@ -106,7 +107,7 @@ export const useUpdateWatchlist = () => {
 export const useDeleteWatchlist = () => {
   const api = useAtomValue(apiAtom);
   const { settings } = useSettings();
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
 
   const mutation = useMutation({
     mutationFn: async (watchlistId: number): Promise<void> => {
@@ -147,7 +148,7 @@ export const useDeleteWatchlist = () => {
 export const useAddToWatchlist = () => {
   const api = useAtomValue(apiAtom);
   const { settings } = useSettings();
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
 
   const mutation = useMutation({
     mutationFn: async ({
@@ -205,7 +206,7 @@ export const useAddToWatchlist = () => {
 export const useRemoveFromWatchlist = () => {
   const api = useAtomValue(apiAtom);
   const { settings } = useSettings();
-  const queryClient = useQueryClient();
+  const queryClient = useNetworkAwareQueryClient();
 
   const mutation = useMutation({
     mutationFn: async ({

modules/VlcPlayer.types.ts

@@ -1,108 +0,0 @@
-import { ViewStyle } from "react-native";
-
-export type PlaybackStatePayload = {
-  nativeEvent: {
-    target: number;
-    state: "Opening" | "Buffering" | "Playing" | "Paused" | "Error";
-    currentTime: number;
-    duration: number;
-    isBuffering: boolean;
-    isPlaying: boolean;
-  };
-};
-
-export type ProgressUpdatePayload = {
-  nativeEvent: {
-    currentTime: number;
-    duration: number;
-    isPlaying: boolean;
-    isBuffering: boolean;
-  };
-};
-
-export type VideoLoadStartPayload = {
-  nativeEvent: {
-    target: number;
-  };
-};
-
-export type PipStartedPayload = {
-  nativeEvent: {
-    pipStarted: boolean;
-  };
-};
-
-export type VideoStateChangePayload = PlaybackStatePayload;
-
-export type VideoProgressPayload = ProgressUpdatePayload;
-
-export type VlcPlayerSource = {
-  uri: string;
-  type?: string;
-  isNetwork?: boolean;
-  autoplay?: boolean;
-  startPosition?: number;
-  externalSubtitles?: { name: string; DeliveryUrl: string }[];
-  initOptions?: any[];
-  mediaOptions?: { [key: string]: any };
-};
-
-export type TrackInfo = {
-  name: string;
-  index: number;
-  language?: string;
-};
-
-export type ChapterInfo = {
-  name: string;
-  timeOffset: number;
-  duration: number;
-};
-
-export type NowPlayingMetadata = {
-  title?: string;
-  artist?: string;
-  albumTitle?: string;
-  artworkUri?: string;
-};
-
-export type VlcPlayerViewProps = {
-  source: VlcPlayerSource;
-  style?: ViewStyle | ViewStyle[];
-  progressUpdateInterval?: number;
-  paused?: boolean;
-  muted?: boolean;
-  volume?: number;
-  videoAspectRatio?: string;
-  nowPlayingMetadata?: NowPlayingMetadata;
-  onVideoProgress?: (event: ProgressUpdatePayload) => void;
-  onVideoStateChange?: (event: PlaybackStatePayload) => void;
-  onVideoLoadStart?: (event: VideoLoadStartPayload) => void;
-  onVideoLoadEnd?: (event: VideoLoadStartPayload) => void;
-  onVideoError?: (event: PlaybackStatePayload) => void;
-  onPipStarted?: (event: PipStartedPayload) => void;
-};
-
-export interface VlcPlayerViewRef {
-  startPictureInPicture: () => Promise<void>;
-  play: () => Promise<void>;
-  pause: () => Promise<void>;
-  stop: () => Promise<void>;
-  seekTo: (time: number) => Promise<void>;
-  setAudioTrack: (trackIndex: number) => Promise<void>;
-  getAudioTracks: () => Promise<TrackInfo[] | null>;
-  setSubtitleTrack: (trackIndex: number) => Promise<void>;
-  getSubtitleTracks: () => Promise<TrackInfo[] | null>;
-  setSubtitleDelay: (delay: number) => Promise<void>;
-  setAudioDelay: (delay: number) => Promise<void>;
-  takeSnapshot: (path: string, width: number, height: number) => Promise<void>;
-  setRate: (rate: number) => Promise<void>;
-  nextChapter: () => Promise<void>;
-  previousChapter: () => Promise<void>;
-  getChapters: () => Promise<ChapterInfo[] | null>;
-  setVideoCropGeometry: (cropGeometry: string | null) => Promise<void>;
-  getVideoCropGeometry: () => Promise<string | null>;
-  setSubtitleURL: (url: string) => Promise<void>;
-  setVideoAspectRatio: (aspectRatio: string | null) => Promise<void>;
-  setVideoScaleFactor: (scaleFactor: number) => Promise<void>;
-}

modules/VlcPlayerView.tsx

@@ -1,152 +0,0 @@
-import { requireNativeViewManager } from "expo-modules-core";
-import * as React from "react";
-import { ViewStyle } from "react-native";
-import type {
-  VlcPlayerSource,
-  VlcPlayerViewProps,
-  VlcPlayerViewRef,
-} from "./VlcPlayer.types";
-
-interface NativeViewRef extends VlcPlayerViewRef {
-  setNativeProps?: (props: Partial<VlcPlayerViewProps>) => void;
-}
-
-const VLCViewManager = requireNativeViewManager("VlcPlayer");
-
-// Create a forwarded ref version of the native view
-const NativeView = React.forwardRef<NativeViewRef, VlcPlayerViewProps>(
-  (props, ref) => {
-    return <VLCViewManager {...props} ref={ref} />;
-  },
-);
-
-const VlcPlayerView = React.forwardRef<VlcPlayerViewRef, VlcPlayerViewProps>(
-  (props, ref) => {
-    const nativeRef = React.useRef<NativeViewRef>(null);
-
-    React.useImperativeHandle(ref, () => ({
-      startPictureInPicture: async () => {
-        await nativeRef.current?.startPictureInPicture();
-      },
-      play: async () => {
-        await nativeRef.current?.play();
-      },
-      pause: async () => {
-        await nativeRef.current?.pause();
-      },
-      stop: async () => {
-        await nativeRef.current?.stop();
-      },
-      seekTo: async (time: number) => {
-        await nativeRef.current?.seekTo(time);
-      },
-      setAudioTrack: async (trackIndex: number) => {
-        await nativeRef.current?.setAudioTrack(trackIndex);
-      },
-      getAudioTracks: async () => {
-        const tracks = await nativeRef.current?.getAudioTracks();
-        return tracks ?? null;
-      },
-      setSubtitleTrack: async (trackIndex: number) => {
-        await nativeRef.current?.setSubtitleTrack(trackIndex);
-      },
-      getSubtitleTracks: async () => {
-        const tracks = await nativeRef.current?.getSubtitleTracks();
-        return tracks ?? null;
-      },
-      setSubtitleDelay: async (delay: number) => {
-        await nativeRef.current?.setSubtitleDelay(delay);
-      },
-      setAudioDelay: async (delay: number) => {
-        await nativeRef.current?.setAudioDelay(delay);
-      },
-      takeSnapshot: async (path: string, width: number, height: number) => {
-        await nativeRef.current?.takeSnapshot(path, width, height);
-      },
-      setRate: async (rate: number) => {
-        await nativeRef.current?.setRate(rate);
-      },
-      nextChapter: async () => {
-        await nativeRef.current?.nextChapter();
-      },
-      previousChapter: async () => {
-        await nativeRef.current?.previousChapter();
-      },
-      getChapters: async () => {
-        const chapters = await nativeRef.current?.getChapters();
-        return chapters ?? null;
-      },
-      setVideoCropGeometry: async (geometry: string | null) => {
-        await nativeRef.current?.setVideoCropGeometry(geometry);
-      },
-      getVideoCropGeometry: async () => {
-        const geometry = await nativeRef.current?.getVideoCropGeometry();
-        return geometry ?? null;
-      },
-      setSubtitleURL: async (url: string) => {
-        await nativeRef.current?.setSubtitleURL(url);
-      },
-      setVideoAspectRatio: async (aspectRatio: string | null) => {
-        await nativeRef.current?.setVideoAspectRatio(aspectRatio);
-      },
-      setVideoScaleFactor: async (scaleFactor: number) => {
-        await nativeRef.current?.setVideoScaleFactor(scaleFactor);
-      },
-    }));
-
-    const {
-      source,
-      style,
-      progressUpdateInterval = 500,
-      paused,
-      muted,
-      volume,
-      videoAspectRatio,
-      nowPlayingMetadata,
-      onVideoLoadStart,
-      onVideoStateChange,
-      onVideoProgress,
-      onVideoLoadEnd,
-      onVideoError,
-      onPipStarted,
-      ...otherProps
-    } = props;
-
-    const baseSource: VlcPlayerSource =
-      typeof source === "string"
-        ? ({ uri: source } as unknown as VlcPlayerSource)
-        : source;
-
-    // Create a new object to avoid mutating frozen source
-    const processedSource: VlcPlayerSource = {
-      ...baseSource,
-      startPosition:
-        baseSource.startPosition !== undefined
-          ? Math.floor(baseSource.startPosition)
-          : undefined,
-    };
-
-    return (
-      <NativeView
-        {...otherProps}
-        ref={nativeRef}
-        source={processedSource}
-        style={[{ width: "100%", height: "100%" }, style as ViewStyle]}
-        progressUpdateInterval={progressUpdateInterval}
-        paused={paused}
-        muted={muted}
-        volume={volume}
-        videoAspectRatio={videoAspectRatio}
-        nowPlayingMetadata={nowPlayingMetadata}
-        onVideoLoadStart={onVideoLoadStart}
-        onVideoLoadEnd={onVideoLoadEnd}
-        onVideoStateChange={onVideoStateChange}
-        onVideoProgress={onVideoProgress}
-        onVideoError={onVideoError}
-        onPipStarted={onPipStarted}
-      />
-    );
-  },
-);
-
-export default VlcPlayerView;

modules/index.ts

@@ -8,39 +8,17 @@ export type {
 } from "./background-downloader";
 export { default as BackgroundDownloader } from "./background-downloader";
 
-// Streamyfin Player (KSPlayer-based) - GPU acceleration + native PiP (iOS)
+// MPV Player (iOS + Android)
 export type {
-  AudioTrack as SfAudioTrack,
-  OnErrorEventPayload as SfOnErrorEventPayload,
-  OnLoadEventPayload as SfOnLoadEventPayload,
-  OnPictureInPictureChangePayload as SfOnPictureInPictureChangePayload,
-  OnPlaybackStateChangePayload as SfOnPlaybackStateChangePayload,
-  OnProgressEventPayload as SfOnProgressEventPayload,
-  OnTracksReadyEventPayload as SfOnTracksReadyEventPayload,
-  SfPlayerViewProps,
-  SfPlayerViewRef,
-  SubtitleTrack as SfSubtitleTrack,
-  VideoSource as SfVideoSource,
-} from "./sf-player";
-export {
-  getHardwareDecode,
-  SfPlayerView,
-  setHardwareDecode,
-} from "./sf-player";
-
-// VLC Player (Android)
-export type {
-  ChapterInfo,
-  NowPlayingMetadata,
-  PipStartedPayload,
-  PlaybackStatePayload,
-  ProgressUpdatePayload,
-  TrackInfo,
-  VideoLoadStartPayload,
-  VideoProgressPayload,
-  VideoStateChangePayload,
-  VlcPlayerSource,
-  VlcPlayerViewProps,
-  VlcPlayerViewRef,
-} from "./VlcPlayer.types";
-export { default as VlcPlayerView } from "./VlcPlayerView";
+  AudioTrack as MpvAudioTrack,
+  MpvPlayerViewProps,
+  MpvPlayerViewRef,
+  OnErrorEventPayload as MpvOnErrorEventPayload,
+  OnLoadEventPayload as MpvOnLoadEventPayload,
+  OnPlaybackStateChangePayload as MpvOnPlaybackStateChangePayload,
+  OnProgressEventPayload as MpvOnProgressEventPayload,
+  OnTracksReadyEventPayload as MpvOnTracksReadyEventPayload,
+  SubtitleTrack as MpvSubtitleTrack,
+  VideoSource as MpvVideoSource,
+} from "./mpv-player";
+export { MpvPlayerView } from "./mpv-player";

modules/mpv-player/android/build.gradle

@@ -25,7 +25,7 @@ if (useManagedAndroidSdkVersions) {
   project.android {
     compileSdkVersion safeExtGet("compileSdkVersion", 36)
     defaultConfig {
-      minSdkVersion safeExtGet("minSdkVersion", 24)
+      minSdkVersion safeExtGet("minSdkVersion", 26)
       targetSdkVersion safeExtGet("targetSdkVersion", 36)
     }
   }
@@ -36,8 +36,22 @@ android {
   defaultConfig {
     versionCode 1
     versionName "0.7.6"
+    ndk {
+      // Architectures supported by mpv-android
+      abiFilters 'arm64-v8a', 'armeabi-v7a', 'x86', 'x86_64'
+    }
   }
   lintOptions {
     abortOnError false
   }
+  sourceSets {
+    main {
+      jniLibs.srcDirs = ['libs']
+    }
+  }
+}
+
+dependencies {
+  // libmpv from Maven Central
+  implementation 'dev.jdtech.mpv:libmpv:0.5.1'
 }

modules/mpv-player/android/src/main/AndroidManifest.xml

@@ -1,2 +1,9 @@
-<manifest>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <!-- Required for network streaming -->
+    <uses-permission android:name="android.permission.INTERNET" />
+    
+    <!-- Picture-in-Picture feature -->
+    <uses-feature
+        android:name="android.software.picture_in_picture"
+        android:required="false" />
 </manifest>

modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MPVLayerRenderer.kt

@@ -0,0 +1,552 @@
+package expo.modules.mpvplayer
+
+import android.content.Context
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
+import android.view.Surface
+
+/**
+ * MPV renderer that wraps libmpv for video playback.
+ * This mirrors the iOS MPVLayerRenderer implementation.
+ */
+class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
+    
+    companion object {
+        private const val TAG = "MPVLayerRenderer"
+        
+        // Property observation format types
+        const val MPV_FORMAT_NONE = 0
+        const val MPV_FORMAT_STRING = 1
+        const val MPV_FORMAT_OSD_STRING = 2
+        const val MPV_FORMAT_FLAG = 3
+        const val MPV_FORMAT_INT64 = 4
+        const val MPV_FORMAT_DOUBLE = 5
+        const val MPV_FORMAT_NODE = 6
+    }
+    
+    interface Delegate {
+        fun onPositionChanged(position: Double, duration: Double)
+        fun onPauseChanged(isPaused: Boolean)
+        fun onLoadingChanged(isLoading: Boolean)
+        fun onReadyToSeek()
+        fun onTracksReady()
+        fun onError(message: String)
+        fun onVideoDimensionsChanged(width: Int, height: Int)
+    }
+    
+    var delegate: Delegate? = null
+    
+    private val mainHandler = Handler(Looper.getMainLooper())
+    
+    private var surface: Surface? = null
+    private var isRunning = false
+    private var isStopping = false
+    
+    // Cached state
+    private var cachedPosition: Double = 0.0
+    private var cachedDuration: Double = 0.0
+    private var _isPaused: Boolean = true
+    private var _isLoading: Boolean = false
+    private var _playbackSpeed: Double = 1.0
+    private var isReadyToSeek: Boolean = false
+    
+    // Video dimensions
+    private var _videoWidth: Int = 0
+    private var _videoHeight: Int = 0
+    
+    val videoWidth: Int
+        get() = _videoWidth
+    
+    val videoHeight: Int
+        get() = _videoHeight
+    
+    // Current video config
+    private var currentUrl: String? = null
+    private var currentHeaders: Map<String, String>? = null
+    private var pendingExternalSubtitles: List<String> = emptyList()
+    private var initialSubtitleId: Int? = null
+    private var initialAudioId: Int? = null
+    
+    val isPausedState: Boolean
+        get() = _isPaused
+    
+    val currentPosition: Double
+        get() = cachedPosition
+    
+    val duration: Double
+        get() = cachedDuration
+    
+    fun start() {
+        if (isRunning) return
+        
+        try {
+            MPVLib.create(context)
+            MPVLib.addObserver(this)
+            
+            // Configure mpv options before initialization (based on Findroid)
+            MPVLib.setOptionString("vo", "gpu")
+            MPVLib.setOptionString("gpu-context", "android")
+            MPVLib.setOptionString("opengl-es", "yes")
+            
+            // Hardware video decoding
+            MPVLib.setOptionString("hwdec", "mediacodec-copy")
+            MPVLib.setOptionString("hwdec-codecs", "h264,hevc,mpeg4,mpeg2video,vp8,vp9,av1")
+            
+            // Cache settings for better network streaming
+            MPVLib.setOptionString("cache", "yes")
+            MPVLib.setOptionString("cache-pause-initial", "yes")
+            MPVLib.setOptionString("demuxer-max-bytes", "150MiB")
+            MPVLib.setOptionString("demuxer-max-back-bytes", "75MiB")
+            MPVLib.setOptionString("demuxer-readahead-secs", "20")
+            
+            // Seeking optimization - faster seeking at the cost of less precision
+            // Use keyframe seeking by default (much faster for network streams)
+            MPVLib.setOptionString("hr-seek", "no")
+            // Drop frames during seeking for faster response
+            MPVLib.setOptionString("hr-seek-framedrop", "yes")
+            
+            // Subtitle settings
+            MPVLib.setOptionString("sub-scale-with-window", "yes")
+            MPVLib.setOptionString("sub-use-margins", "no")
+            MPVLib.setOptionString("subs-match-os-language", "yes")
+            MPVLib.setOptionString("subs-fallback", "yes")
+            
+            // Important: Start with force-window=no, will be set to yes when surface is attached
+            MPVLib.setOptionString("force-window", "no")
+            MPVLib.setOptionString("keep-open", "always")
+            
+            MPVLib.initialize()
+            
+            // Observe properties
+            observeProperties()
+            
+            isRunning = true
+            Log.i(TAG, "MPV renderer started")
+        } catch (e: Exception) {
+            Log.e(TAG, "Failed to start MPV renderer: ${e.message}")
+            delegate?.onError("Failed to start renderer: ${e.message}")
+        }
+    }
+    
+    fun stop() {
+        if (isStopping) return
+        if (!isRunning) return
+        
+        isStopping = true
+        isRunning = false
+        
+        try {
+            MPVLib.removeObserver(this)
+            MPVLib.detachSurface()
+            MPVLib.destroy()
+        } catch (e: Exception) {
+            Log.e(TAG, "Error stopping MPV: ${e.message}")
+        }
+        
+        isStopping = false
+    }
+    
+    /**
+     * Attach surface and re-enable video output.
+     * Based on Findroid's implementation.
+     */
+    fun attachSurface(surface: Surface) {
+        this.surface = surface
+        if (isRunning) {
+            MPVLib.attachSurface(surface)
+            // Re-enable video output after attaching surface (Findroid approach)
+            MPVLib.setOptionString("force-window", "yes")
+            MPVLib.setOptionString("vo", "gpu")
+            Log.i(TAG, "Surface attached, video output re-enabled")
+        }
+    }
+    
+    /**
+     * Detach surface and disable video output.
+     * Based on Findroid's implementation.
+     */
+    fun detachSurface() {
+        this.surface = null
+        if (isRunning) {
+            try {
+                // Disable video output before detaching surface (Findroid approach)
+                MPVLib.setOptionString("vo", "null")
+                MPVLib.setOptionString("force-window", "no")
+                Log.i(TAG, "Video output disabled before surface detach")
+            } catch (e: Exception) {
+                Log.e(TAG, "Failed to disable video output: ${e.message}")
+            }
+            
+            MPVLib.detachSurface()
+        }
+    }
+    
+    /**
+     * Updates the surface size. Called from surfaceChanged.
+     * Based on Findroid's implementation.
+     */
+    fun updateSurfaceSize(width: Int, height: Int) {
+        if (isRunning) {
+            MPVLib.setPropertyString("android-surface-size", "${width}x$height")
+            Log.i(TAG, "Surface size updated: ${width}x$height")
+        }
+    }
+    
+    fun load(
+        url: String,
+        headers: Map<String, String>? = null,
+        startPosition: Double? = null,
+        externalSubtitles: List<String>? = null,
+        initialSubtitleId: Int? = null,
+        initialAudioId: Int? = null
+    ) {
+        currentUrl = url
+        currentHeaders = headers
+        pendingExternalSubtitles = externalSubtitles ?: emptyList()
+        this.initialSubtitleId = initialSubtitleId
+        this.initialAudioId = initialAudioId
+        
+        _isLoading = true
+        isReadyToSeek = false
+        mainHandler.post { delegate?.onLoadingChanged(true) }
+        
+        // Stop previous playback
+        MPVLib.command(arrayOf("stop"))
+        
+        // Set HTTP headers if provided
+        updateHttpHeaders(headers)
+        
+        // Set start position
+        if (startPosition != null && startPosition > 0) {
+            MPVLib.setPropertyString("start", String.format("%.2f", startPosition))
+        } else {
+            MPVLib.setPropertyString("start", "0")
+        }
+        
+        // Set initial audio track if specified
+        if (initialAudioId != null && initialAudioId > 0) {
+            setAudioTrack(initialAudioId)
+        }
+        
+        // Set initial subtitle track if no external subs
+        if (pendingExternalSubtitles.isEmpty()) {
+            if (initialSubtitleId != null) {
+                setSubtitleTrack(initialSubtitleId)
+            } else {
+                disableSubtitles()
+            }
+        } else {
+            disableSubtitles()
+        }
+        
+        // Load the file
+        MPVLib.command(arrayOf("loadfile", url, "replace"))
+    }
+    
+    fun reloadCurrentItem() {
+        currentUrl?.let { url ->
+            load(url, currentHeaders)
+        }
+    }
+    
+    private fun updateHttpHeaders(headers: Map<String, String>?) {
+        if (headers.isNullOrEmpty()) {
+            // Clear headers
+            return
+        }
+        
+        val headerString = headers.entries.joinToString("\r\n") { "${it.key}: ${it.value}" }
+        MPVLib.setPropertyString("http-header-fields", headerString)
+    }
+    
+    private fun observeProperties() {
+        MPVLib.observeProperty("duration", MPV_FORMAT_DOUBLE)
+        MPVLib.observeProperty("time-pos", MPV_FORMAT_DOUBLE)
+        MPVLib.observeProperty("pause", MPV_FORMAT_FLAG)
+        MPVLib.observeProperty("track-list/count", MPV_FORMAT_INT64)
+        MPVLib.observeProperty("paused-for-cache", MPV_FORMAT_FLAG)
+        // Video dimensions for PiP aspect ratio
+        MPVLib.observeProperty("video-params/w", MPV_FORMAT_INT64)
+        MPVLib.observeProperty("video-params/h", MPV_FORMAT_INT64)
+    }
+    
+    // MARK: - Playback Controls
+    
+    fun play() {
+        MPVLib.setPropertyBoolean("pause", false)
+    }
+    
+    fun pause() {
+        MPVLib.setPropertyBoolean("pause", true)
+    }
+    
+    fun togglePause() {
+        if (_isPaused) play() else pause()
+    }
+    
+    fun seekTo(seconds: Double) {
+        val clamped = maxOf(0.0, seconds)
+        cachedPosition = clamped
+        MPVLib.command(arrayOf("seek", clamped.toString(), "absolute"))
+    }
+    
+    fun seekBy(seconds: Double) {
+        val newPosition = maxOf(0.0, cachedPosition + seconds)
+        cachedPosition = newPosition
+        MPVLib.command(arrayOf("seek", seconds.toString(), "relative"))
+    }
+    
+    fun setSpeed(speed: Double) {
+        _playbackSpeed = speed
+        MPVLib.setPropertyDouble("speed", speed)
+    }
+    
+    fun getSpeed(): Double {
+        return MPVLib.getPropertyDouble("speed") ?: _playbackSpeed
+    }
+    
+    // MARK: - Subtitle Controls
+    
+    fun getSubtitleTracks(): List<Map<String, Any>> {
+        val tracks = mutableListOf<Map<String, Any>>()
+        
+        val trackCount = MPVLib.getPropertyInt("track-list/count") ?: 0
+        
+        for (i in 0 until trackCount) {
+            val trackType = MPVLib.getPropertyString("track-list/$i/type") ?: continue
+            if (trackType != "sub") continue
+            
+            val trackId = MPVLib.getPropertyInt("track-list/$i/id") ?: continue
+            val track = mutableMapOf<String, Any>("id" to trackId)
+            
+            MPVLib.getPropertyString("track-list/$i/title")?.let { track["title"] = it }
+            MPVLib.getPropertyString("track-list/$i/lang")?.let { track["lang"] = it }
+            
+            val selected = MPVLib.getPropertyBoolean("track-list/$i/selected") ?: false
+            track["selected"] = selected
+            
+            tracks.add(track)
+        }
+        
+        return tracks
+    }
+    
+    fun setSubtitleTrack(trackId: Int) {
+        Log.i(TAG, "setSubtitleTrack: setting sid to $trackId")
+        if (trackId < 0) {
+            MPVLib.setPropertyString("sid", "no")
+        } else {
+            MPVLib.setPropertyInt("sid", trackId)
+        }
+    }
+    
+    fun disableSubtitles() {
+        MPVLib.setPropertyString("sid", "no")
+    }
+    
+    fun getCurrentSubtitleTrack(): Int {
+        return MPVLib.getPropertyInt("sid") ?: 0
+    }
+    
+    fun addSubtitleFile(url: String, select: Boolean = true) {
+        val flag = if (select) "select" else "cached"
+        MPVLib.command(arrayOf("sub-add", url, flag))
+    }
+    
+    // MARK: - Subtitle Positioning
+    
+    fun setSubtitlePosition(position: Int) {
+        MPVLib.setPropertyInt("sub-pos", position)
+    }
+    
+    fun setSubtitleScale(scale: Double) {
+        MPVLib.setPropertyDouble("sub-scale", scale)
+    }
+    
+    fun setSubtitleMarginY(margin: Int) {
+        MPVLib.setPropertyInt("sub-margin-y", margin)
+    }
+    
+    fun setSubtitleAlignX(alignment: String) {
+        MPVLib.setPropertyString("sub-align-x", alignment)
+    }
+    
+    fun setSubtitleAlignY(alignment: String) {
+        MPVLib.setPropertyString("sub-align-y", alignment)
+    }
+    
+    fun setSubtitleFontSize(size: Int) {
+        MPVLib.setPropertyInt("sub-font-size", size)
+    }
+    
+    // MARK: - Audio Track Controls
+    
+    fun getAudioTracks(): List<Map<String, Any>> {
+        val tracks = mutableListOf<Map<String, Any>>()
+        
+        val trackCount = MPVLib.getPropertyInt("track-list/count") ?: 0
+        
+        for (i in 0 until trackCount) {
+            val trackType = MPVLib.getPropertyString("track-list/$i/type") ?: continue
+            if (trackType != "audio") continue
+            
+            val trackId = MPVLib.getPropertyInt("track-list/$i/id") ?: continue
+            val track = mutableMapOf<String, Any>("id" to trackId)
+            
+            MPVLib.getPropertyString("track-list/$i/title")?.let { track["title"] = it }
+            MPVLib.getPropertyString("track-list/$i/lang")?.let { track["lang"] = it }
+            MPVLib.getPropertyString("track-list/$i/codec")?.let { track["codec"] = it }
+            
+            val channels = MPVLib.getPropertyInt("track-list/$i/audio-channels")
+            if (channels != null && channels > 0) {
+                track["channels"] = channels
+            }
+            
+            val selected = MPVLib.getPropertyBoolean("track-list/$i/selected") ?: false
+            track["selected"] = selected
+            
+            tracks.add(track)
+        }
+        
+        return tracks
+    }
+    
+    fun setAudioTrack(trackId: Int) {
+        Log.i(TAG, "setAudioTrack: setting aid to $trackId")
+        MPVLib.setPropertyInt("aid", trackId)
+    }
+    
+    fun getCurrentAudioTrack(): Int {
+        return MPVLib.getPropertyInt("aid") ?: 0
+    }
+
+    // MARK: - Video Scaling
+
+    fun setZoomedToFill(zoomed: Boolean) {
+        // panscan: 0.0 = fit (letterbox), 1.0 = fill (crop)
+        val panscanValue = if (zoomed) 1.0 else 0.0
+        Log.i(TAG, "setZoomedToFill: setting panscan to $panscanValue")
+        MPVLib.setPropertyDouble("panscan", panscanValue)
+    }
+
+    // MARK: - MPVLib.EventObserver
+    
+    override fun eventProperty(property: String) {
+        // Property changed but no value provided
+    }
+    
+    override fun eventProperty(property: String, value: Long) {
+        when (property) {
+            "track-list/count" -> {
+                if (value > 0) {
+                    Log.i(TAG, "Track list updated: $value tracks available")
+                    mainHandler.post { delegate?.onTracksReady() }
+                }
+            }
+            "video-params/w" -> {
+                val width = value.toInt()
+                if (width > 0 && width != _videoWidth) {
+                    _videoWidth = width
+                    notifyVideoDimensionsIfReady()
+                }
+            }
+            "video-params/h" -> {
+                val height = value.toInt()
+                if (height > 0 && height != _videoHeight) {
+                    _videoHeight = height
+                    notifyVideoDimensionsIfReady()
+                }
+            }
+        }
+    }
+    
+    private fun notifyVideoDimensionsIfReady() {
+        if (_videoWidth > 0 && _videoHeight > 0) {
+            Log.i(TAG, "Video dimensions: ${_videoWidth}x${_videoHeight}")
+            mainHandler.post { delegate?.onVideoDimensionsChanged(_videoWidth, _videoHeight) }
+        }
+    }
+    
+    override fun eventProperty(property: String, value: Boolean) {
+        when (property) {
+            "pause" -> {
+                if (value != _isPaused) {
+                    _isPaused = value
+                    mainHandler.post { delegate?.onPauseChanged(value) }
+                }
+            }
+            "paused-for-cache" -> {
+                if (value != _isLoading) {
+                    _isLoading = value
+                    mainHandler.post { delegate?.onLoadingChanged(value) }
+                }
+            }
+        }
+    }
+    
+    override fun eventProperty(property: String, value: String) {
+        // Handle string properties if needed
+    }
+    
+    override fun eventProperty(property: String, value: Double) {
+        when (property) {
+            "duration" -> {
+                cachedDuration = value
+                mainHandler.post { delegate?.onPositionChanged(cachedPosition, cachedDuration) }
+            }
+            "time-pos" -> {
+                cachedPosition = value
+                mainHandler.post { delegate?.onPositionChanged(cachedPosition, cachedDuration) }
+            }
+        }
+    }
+    
+    override fun event(eventId: Int) {
+        when (eventId) {
+            MPVLib.MPV_EVENT_FILE_LOADED -> {
+                // Add external subtitles now that file is loaded
+                if (pendingExternalSubtitles.isNotEmpty()) {
+                    for (subUrl in pendingExternalSubtitles) {
+                        MPVLib.command(arrayOf("sub-add", subUrl))
+                    }
+                    pendingExternalSubtitles = emptyList()
+                    
+                    // Set subtitle after external subs are added
+                    initialSubtitleId?.let { setSubtitleTrack(it) } ?: disableSubtitles()
+                }
+                
+                if (!isReadyToSeek) {
+                    isReadyToSeek = true
+                    mainHandler.post { delegate?.onReadyToSeek() }
+                }
+                
+                if (_isLoading) {
+                    _isLoading = false
+                    mainHandler.post { delegate?.onLoadingChanged(false) }
+                }
+            }
+            MPVLib.MPV_EVENT_SEEK -> {
+                // Seek started - show loading indicator
+                if (!_isLoading) {
+                    _isLoading = true
+                    mainHandler.post { delegate?.onLoadingChanged(true) }
+                }
+            }
+            MPVLib.MPV_EVENT_PLAYBACK_RESTART -> {
+                // Video playback has started/restarted (including after seek)
+                if (_isLoading) {
+                    _isLoading = false
+                    mainHandler.post { delegate?.onLoadingChanged(false) }
+                }
+            }
+            MPVLib.MPV_EVENT_END_FILE -> {
+                Log.i(TAG, "Playback ended")
+            }
+            MPVLib.MPV_EVENT_SHUTDOWN -> {
+                Log.w(TAG, "MPV shutdown")
+            }
+        }
+    }
+}
+