wip

.claude/commands/reflect.md

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

.claude/learned-facts.md

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

.github/crowdin.yml

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

.github/workflows/build-apps.yml

@@ -21,7 +21,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -29,12 +29,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -48,7 +48,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: |
             ~/.gradle/caches
@@ -61,7 +61,7 @@ jobs:
         run: bun run prebuild
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -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@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         with:
           name: streamyfin-android-phone-apk-${{ env.DATE_TAG }}
           path: |
@@ -92,7 +92,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -100,12 +100,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -119,7 +119,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: |
             ~/.gradle/caches
@@ -132,7 +132,7 @@ jobs:
         run: bun run prebuild:tv
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -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@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         with:
           name: streamyfin-android-tv-apk-${{ env.DATE_TAG }}
           path: |
@@ -163,7 +163,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -171,12 +171,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
@@ -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@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           show-progress: false
@@ -27,12 +27,12 @@ jobs:
           fetch-depth: 0
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: |
             ~/.bun/install/cache

.github/workflows/ci-codeql.yml

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

.github/workflows/crowdin.yml

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

.github/workflows/linting.yml

@@ -51,7 +51,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -69,14 +69,14 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: 🛒 Checkout repository
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           submodules: recursive
           fetch-depth: 0
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
           bun-version: latest
 
@@ -100,19 +100,19 @@ jobs:
 
     steps:
       - name: "📥 Checkout PR code"
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           submodules: recursive
           fetch-depth: 0
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: '24.x'
 
       - name: "🍞 Setup Bun"
-        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
+        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
           bun-version: latest
 

.github/workflows/stale.yml

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

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

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

.gitignore

@@ -19,7 +19,7 @@ web-build/
 /androidtv
 
 # Module-specific Builds
-modules/mpv-player/android/build
+modules/vlc-player/android/build
 modules/player/android
 modules/hls-downloader/android/build
 
@@ -51,7 +51,6 @@ npm-debug.*
 .ruby-lsp
 .cursor/
 .claude/
-CLAUDE.md
 
 # Environment and Configuration
 expo-env.d.ts
@@ -67,6 +66,3 @@ streamyfin-4fec1-firebase-adminsdk.json
 # Version and Backup Files
 /version-backup-*
 modules/background-downloader/android/build/*
-/modules/sf-player/android/build
-/modules/music-controls/android/build
-/modules/mpv-player/android/build

CLAUDE.md

@@ -1,121 +0,0 @@
-# CLAUDE.md
-
-@.claude/learned-facts.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-Streamyfin is a cross-platform Jellyfin video streaming client built with Expo (React Native). It supports mobile (iOS/Android) and TV platforms, with features including offline downloads, Chromecast support, and Jellyseerr integration.
-
-## Development Commands
-
-**CRITICAL: Always use `bun` for package management. Never use `npm`, `yarn`, or `npx`.**
-
-```bash
-# Setup
-bun i && bun run submodule-reload
-
-# Development builds
-bun run prebuild              # Mobile prebuild
-bun run ios                   # Run iOS
-bun run android               # Run Android
-
-# TV builds (suffix with :tv)
-bun run prebuild:tv
-bun run ios:tv
-bun run android:tv
-
-# Code quality
-bun run typecheck             # TypeScript check
-bun run check                 # BiomeJS check
-bun run lint                  # BiomeJS lint + fix
-bun run format                # BiomeJS format
-bun run test                  # Run all checks (typecheck, lint, format, doctor)
-
-# iOS-specific
-bun run ios:install-metal-toolchain  # Fix "missing Metal Toolchain" build errors
-```
-
-## Tech Stack
-
-- **Runtime**: Bun
-- **Framework**: React Native (Expo SDK 54)
-- **Language**: TypeScript (strict mode)
-- **State Management**: Jotai (global state atoms) + React Query (server state)
-- **API**: Jellyfin SDK (`@jellyfin/sdk`)
-- **Navigation**: Expo Router (file-based)
-- **Linting/Formatting**: BiomeJS
-- **Storage**: react-native-mmkv
-
-## Architecture
-
-### File Structure
-
-- `app/` - Expo Router screens with file-based routing
-- `components/` - Reusable UI components
-- `providers/` - React Context providers
-- `hooks/` - Custom React hooks
-- `utils/` - Utilities including Jotai atoms
-- `modules/` - Native modules (vlc-player, mpv-player, background-downloader)
-- `translations/` - i18n translation files
-
-### Key Patterns
-
-**State Management**:
-- Global state uses Jotai atoms in `utils/atoms/`
-- `settingsAtom` in `utils/atoms/settings.ts` for app settings
-- `apiAtom` and `userAtom` in `providers/JellyfinProvider.tsx` for auth state
-- Server state uses React Query with `@tanstack/react-query`
-
-**Jellyfin API Access**:
-- Use `apiAtom` from `JellyfinProvider` for authenticated API calls
-- Access user via `userAtom`
-- Use Jellyfin SDK utilities from `@jellyfin/sdk/lib/utils/api`
-
-**Navigation**:
-- File-based routing in `app/` directory
-- Tab navigation: `(home)`, `(search)`, `(favorites)`, `(libraries)`, `(watchlists)`
-- Shared routes use parenthesized groups like `(home,libraries,search,favorites,watchlists)`
-
-**Providers** (wrapping order in `app/_layout.tsx`):
-1. JotaiProvider
-2. QueryClientProvider
-3. JellyfinProvider (auth, API)
-4. NetworkStatusProvider
-5. PlaySettingsProvider
-6. WebSocketProvider
-7. DownloadProvider
-8. MusicPlayerProvider
-
-### Native Modules
-
-Located in `modules/`:
-- `vlc-player` - VLC video player integration
-- `mpv-player` - MPV video player integration (iOS)
-- `background-downloader` - Background download functionality
-- `sf-player` - Swift player module
-
-### Path Aliases
-
-Use `@/` prefix for imports (configured in `tsconfig.json`):
-```typescript
-import { useSettings } from "@/utils/atoms/settings";
-import { apiAtom } from "@/providers/JellyfinProvider";
-```
-
-## Coding Standards
-
-- Use TypeScript for all files (no .js)
-- Use functional React components with hooks
-- Use Jotai atoms for global state, React Query for server state
-- Follow BiomeJS formatting rules (2-space indent, semicolons, LF line endings)
-- Handle both mobile and TV navigation patterns
-- Use existing atoms, hooks, and utilities before creating new ones
-- Use Conventional Commits: `feat(scope):`, `fix(scope):`, `chore(scope):`
-
-## Platform Considerations
-
-- TV version uses `:tv` suffix for scripts
-- Platform checks: `Platform.isTV`, `Platform.OS === "android"` or `"ios"`
-- Some features disabled on TV (e.g., notifications, Chromecast)

README.md

@@ -54,11 +54,6 @@ The Jellyfin Plugin for Streamyfin is a plugin you install into Jellyfin that ho
 
 Chromecast support is currently under development. Video casting is already available, and we're actively working on adding subtitle support and additional features.
 
-### 🎬 MPV Player
-
-Streamyfin uses [MPV](https://mpv.io/) as its primary video player on all platforms, powered by [MPVKit](https://github.com/mpvkit/MPVKit). MPV is a powerful, open-source media player known for its wide format support and high-quality playback.
-Thanks to [@Alexk2309](https://github.com/Alexk2309) for the hard work building the native MPV module in Streamyfin.
-
 ### 🔍 Jellysearch
 
 [Jellysearch](https://gitlab.com/DomiStyle/jellysearch) works with Streamyfin
@@ -75,7 +70,6 @@ Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) To
   <a href="https://apps.apple.com/app/streamyfin/id6593660679?l=en-GB"><img height=50 alt="Get Streamyfin on App Store" src="./assets/Download_on_the_App_Store_Badge.png"/></a>
   <a href="https://play.google.com/store/apps/details?id=com.fredrikburmester.streamyfin"><img height=50 alt="Get Streamyfin on Google Play Store" src="./assets/Google_Play_Store_badge_EN.svg"/></a>
   <a href="https://github.com/streamyfin/streamyfin/releases/latest"><img height=50 alt="Get Streamyfin on Github" src="./assets/Download_on_Github_.png"/></a>
-  <a href="https://apps.obtainium.imranr.dev/redirect.html?r=obtainium://add/https://github.com/streamyfin/streamyfin"><img height=50 alt="Add Streamyfin to Obtainium" src="./assets/Download_with_Obtainium.png"/></a>
 </div>
 
 ### 🧪 Beta Testing
@@ -110,7 +104,6 @@ You can contribute translations directly on our [Crowdin project page](https://c
 1. Use node `>20`
 2. Install dependencies `bun i && bun run submodule-reload`
 3. Make sure you have xcode and/or android studio installed. (follow the guides for expo: https://docs.expo.dev/workflow/android-studio-emulator/)
-   - If iOS builds fail with `missing Metal Toolchain` (KSPlayer shaders), run `npm run ios:install-metal-toolchain` once
 4. Install BiomeJS extension in VSCode/Your IDE (https://biomejs.dev/)
 4. run `npm run prebuild`
 5. Create an expo dev build by running `npm run ios` or `npm run android`. This will open a simulator on your computer and run the app
@@ -235,7 +228,6 @@ We also thank all other developers who have contributed to Streamyfin, your effo
 
 A special mention to the following people and projects for their contributions:
 
-- [@Alexk2309](https://github.com/Alexk2309) for building the native MPV module that integrates [MPVKit](https://github.com/mpvkit/MPVKit) with React Native
 - [Reiverr](https://github.com/aleksilassila/reiverr) for invaluable help with understanding the Jellyfin API
 - [Jellyfin TS SDK](https://github.com/jellyfin/jellyfin-sdk-typescript) for providing the TypeScript SDK
 - [Seerr](https://github.com/seerr-team/seerr) for enabling API integration with their project

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.52.0",
+    "version": "0.48.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -34,7 +34,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 92,
+      "versionCode": 85,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon-android-plain.png",
         "monochromeImage": "./assets/images/icon-android-themed.png",
@@ -53,7 +53,19 @@
       "@react-native-tvos/config-tv",
       "expo-router",
       "expo-font",
-      "./plugins/withExcludeMedia3Dash.js",
+      [
+        "react-native-video",
+        {
+          "enableNotificationControls": true,
+          "enableBackgroundAudio": true,
+          "androidExtensions": {
+            "useExoplayerRtsp": false,
+            "useExoplayerSmoothStreaming": false,
+            "useExoplayerHls": true,
+            "useExoplayerDash": false
+          }
+        }
+      ],
       [
         "expo-build-properties",
         {
@@ -63,11 +75,11 @@
           },
           "android": {
             "buildArchs": ["arm64-v8a", "x86_64"],
-            "compileSdkVersion": 36,
+            "compileSdkVersion": 35,
             "targetSdkVersion": 35,
             "buildToolsVersion": "35.0.0",
             "kotlinVersion": "2.0.21",
-            "minSdkVersion": 26,
+            "minSdkVersion": 24,
             "usesCleartextTraffic": true,
             "packagingOptions": {
               "jniLibs": {
@@ -85,6 +97,12 @@
           "initialOrientation": "DEFAULT"
         }
       ],
+      [
+        "expo-sensors",
+        {
+          "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
+        }
+      ],
       "expo-localization",
       "expo-asset",
       [
@@ -115,14 +133,7 @@
       ["./plugins/withChangeNativeAndroidTextToWhite.js"],
       ["./plugins/withAndroidManifest.js"],
       ["./plugins/withTrustLocalCerts.js"],
-      ["./plugins/withGradleProperties.js"],
-      [
-        "./plugins/withGitPod.js",
-        {
-          "podName": "MPVKit-GPL",
-          "podspecUrl": "https://raw.githubusercontent.com/streamyfin/MPVKit/0.40.0-av/MPVKit-GPL.podspec"
-        }
-      ]
+      ["./plugins/withGradleProperties.js"]
     ],
     "experiments": {
       "typedRoutes": true

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

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

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

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

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

@@ -1,8 +1,7 @@
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
-import { Pressable } from "react-native-gesture-handler";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 
 const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");
@@ -47,13 +46,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           title: t("home.downloads.downloads_title"),
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -66,13 +65,13 @@ export default function IndexLayout() {
           headerShadowVisible: false,
           title: t("home.downloads.tvseries"),
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -85,13 +84,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -103,13 +102,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -121,13 +120,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -139,13 +138,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -157,31 +156,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
-        }}
-      />
-      <Stack.Screen
-        name='settings/music/page'
-        options={{
-          title: t("home.settings.music.title"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -193,13 +174,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -211,13 +192,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -229,13 +210,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -247,49 +228,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
-        }}
-      />
-      <Stack.Screen
-        name='settings/plugins/streamystats/page'
-        options={{
-          title: "Streamystats",
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
-          ),
-        }}
-      />
-      <Stack.Screen
-        name='settings/plugins/kefinTweaks/page'
-        options={{
-          title: "KefinTweaks",
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <Pressable
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -301,13 +246,13 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
@@ -319,16 +264,29 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerLeft: () => (
-            <Pressable
+            <TouchableOpacity
               onPress={() => _router.back()}
               className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
         }}
       />
+      <Stack.Screen
+        name='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} />
       ))}
@@ -337,9 +295,9 @@ export default function IndexLayout() {
         options={{
           title: "",
           headerLeft: () => (
-            <Pressable onPress={() => _router.back()} className='pl-0.5'>
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
               <Feather name='chevron-left' size={28} color='white' />
-            </Pressable>
+            </TouchableOpacity>
           ),
           headerShown: true,
           headerBlurEffect: "prominent",
@@ -355,13 +313,13 @@ const SettingsButton = () => {
   const router = useRouter();
 
   return (
-    <Pressable
+    <TouchableOpacity
       onPress={() => {
         router.push("/(auth)/settings");
       }}
     >
       <Feather name='settings' color={"white"} size={22} />
-    </Pressable>
+    </TouchableOpacity>
   );
 };
 
@@ -370,7 +328,7 @@ const SessionsButton = () => {
   const { sessions = [] } = useSessions({} as useSessionsProps);
 
   return (
-    <Pressable
+    <TouchableOpacity
       onPress={() => {
         router.push("/(auth)/sessions");
       }}
@@ -381,6 +339,6 @@ const SessionsButton = () => {
         color={sessions.length === 0 ? "white" : "#9333ea"}
         size={28}
       />
-    </Pressable>
+    </TouchableOpacity>
   );
 };

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

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

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

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

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

@@ -70,11 +70,6 @@ export default function settings() {
               showArrow
               title={t("home.settings.audio_subtitles.title")}
             />
-            <ListItem
-              onPress={() => router.push("/settings/music/page")}
-              showArrow
-              title={t("home.settings.music.title")}
-            />
             <ListItem
               onPress={() => router.push("/settings/appearance/page")}
               showArrow

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

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

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

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

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

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

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

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

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

@@ -1,3 +1,4 @@
+import { useQueryClient } from "@tanstack/react-query";
 import { useNavigation } from "expo-router";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -15,7 +16,6 @@ import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
 import DisabledSetting from "@/components/settings/DisabledSetting";
-import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
 import { useSettings } from "@/utils/atoms/settings";
 
 export default function page() {
@@ -26,7 +26,7 @@ export default function page() {
   const insets = useSafeAreaInsets();
 
   const { settings, updateSettings, pluginSettings } = useSettings();
-  const queryClient = useNetworkAwareQueryClient();
+  const queryClient = useQueryClient();
 
   const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
 
@@ -60,7 +60,7 @@ export default function page() {
         ),
       });
     }
-  }, [navigation, value, pluginSettings?.marlinServerUrl?.locked, t]);
+  }, [navigation, value]);
 
   if (!settings) return null;
 
@@ -75,10 +75,7 @@ export default function page() {
       <DisabledSetting disabled={disabled} className='px-4'>
         <ListGroup>
           <DisabledSetting
-            disabled={
-              pluginSettings?.searchEngine?.locked === true ||
-              !!pluginSettings?.streamyStatsServerUrl?.value
-            }
+            disabled={pluginSettings?.searchEngine?.locked === true}
             showText={!pluginSettings?.marlinServerUrl?.locked}
           >
             <ListItem
@@ -92,7 +89,6 @@ export default function page() {
             >
               <Switch
                 value={settings.searchEngine === "Marlin"}
-                disabled={!!pluginSettings?.streamyStatsServerUrl?.value}
                 onValueChange={(value) => {
                   updateSettings({
                     searchEngine: value ? "Marlin" : "Jellyfin",

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

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

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

@@ -1,4 +1,3 @@
-import { ItemFields } from "@jellyfin/sdk/lib/generated-client/models";
 import { useLocalSearchParams } from "expo-router";
 import type React from "react";
 import { useEffect } from "react";
@@ -21,16 +20,8 @@ const Page: React.FC = () => {
   const { offline } = useLocalSearchParams() as { offline?: string };
   const isOffline = offline === "true";
 
-  // Exclude MediaSources/MediaStreams from initial fetch for faster loading
-  // (especially important for plugins like Gelato)
-  const { data: item, isError } = useItemQuery(id, isOffline, undefined, [
-    ItemFields.MediaSources,
-    ItemFields.MediaSourceCount,
-    ItemFields.MediaStreams,
-  ]);
-
-  // Lazily preload item with full media sources in background
-  const { data: itemWithSources } = useItemQuery(id, isOffline, undefined, []);
+  // Fetch item with all fields including MediaSources
+  const { data: item, isError } = useItemQuery(id, isOffline, undefined, []);
 
   const opacity = useSharedValue(1);
   const animatedStyle = useAnimatedStyle(() => {
@@ -100,13 +91,7 @@ const Page: React.FC = () => {
         <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
         <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
       </Animated.View>
-      {item && (
-        <ItemContent
-          item={item}
-          isOffline={isOffline}
-          itemWithSources={itemWithSources}
-        />
-      )}
+      {item && <ItemContent item={item} isOffline={isOffline} />}
     </View>
   );
 };

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

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

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

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

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

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

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

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

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

@@ -2,7 +2,6 @@ import type {
   BaseItemDto,
   BaseItemDtoQueryResult,
   BaseItemKind,
-  ItemFilter,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   getFilterApi,
@@ -28,11 +27,7 @@ import { useOrientation } from "@/hooks/useOrientation";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
-  FilterByOption,
-  FilterByPreferenceAtom,
-  filterByAtom,
   genreFilterAtom,
-  getFilterByPreference,
   getSortByPreference,
   getSortOrderPreference,
   SortByOption,
@@ -44,19 +39,12 @@ import {
   sortOrderOptions,
   sortOrderPreferenceAtom,
   tagsFilterAtom,
-  useFilterOptions,
   yearFilterAtom,
 } from "@/utils/atoms/filters";
-import { useSettings } from "@/utils/atoms/settings";
 
 const Page = () => {
-  const searchParams = useLocalSearchParams() as {
-    libraryId: string;
-    sortBy?: string;
-    sortOrder?: string;
-    filterBy?: string;
-  };
-  const { libraryId } = searchParams;
+  const searchParams = useLocalSearchParams();
+  const { libraryId } = searchParams as { libraryId: string };
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -66,13 +54,9 @@ const Page = () => {
   const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
   const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
   const [sortBy, _setSortBy] = useAtom(sortByAtom);
-  const [filterBy, _setFilterBy] = useAtom(filterByAtom);
   const [sortOrder, _setSortOrder] = useAtom(sortOrderAtom);
   const [sortByPreference, setSortByPreference] = useAtom(sortByPreferenceAtom);
-  const [filterByPreference, setFilterByPreference] = useAtom(
-    FilterByPreferenceAtom,
-  );
-  const [sortOrderPreference, setOrderByPreference] = useAtom(
+  const [sortOrderPreference, setOderByPreference] = useAtom(
     sortOrderPreferenceAtom,
   );
 
@@ -81,33 +65,17 @@ const Page = () => {
   const { t } = useTranslation();
 
   useEffect(() => {
-    // Check for URL params first (from "See All" navigation)
-    const urlSortBy = searchParams.sortBy as SortByOption | undefined;
-    const urlSortOrder = searchParams.sortOrder as SortOrderOption | undefined;
-    const urlFilterBy = searchParams.filterBy as FilterByOption | undefined;
-
-    // Apply sortOrder: URL param > saved preference > default
-    if (urlSortOrder && Object.values(SortOrderOption).includes(urlSortOrder)) {
-      _setSortOrder([urlSortOrder]);
+    const sop = getSortOrderPreference(libraryId, sortOrderPreference);
+    if (sop) {
+      _setSortOrder([sop]);
     } else {
-      const sop = getSortOrderPreference(libraryId, sortOrderPreference);
-      _setSortOrder([sop || SortOrderOption.Ascending]);
+      _setSortOrder([SortOrderOption.Ascending]);
     }
-
-    // Apply sortBy: URL param > saved preference > default
-    if (urlSortBy && Object.values(SortByOption).includes(urlSortBy)) {
-      _setSortBy([urlSortBy]);
+    const obp = getSortByPreference(libraryId, sortByPreference);
+    if (obp) {
+      _setSortBy([obp]);
     } else {
-      const obp = getSortByPreference(libraryId, sortByPreference);
-      _setSortBy([obp || SortByOption.SortName]);
-    }
-
-    // Apply filterBy: URL param > saved preference > default
-    if (urlFilterBy && Object.values(FilterByOption).includes(urlFilterBy)) {
-      _setFilterBy([urlFilterBy]);
-    } else {
-      const fp = getFilterByPreference(libraryId, filterByPreference);
-      _setFilterBy(fp ? [fp] : []);
+      _setSortBy([SortByOption.SortName]);
     }
   }, [
     libraryId,
@@ -115,11 +83,6 @@ const Page = () => {
     sortByPreference,
     _setSortOrder,
     _setSortBy,
-    filterByPreference,
-    _setFilterBy,
-    searchParams.sortBy,
-    searchParams.sortOrder,
-    searchParams.filterBy,
   ]);
 
   const setSortBy = useCallback(
@@ -137,28 +100,14 @@ const Page = () => {
     (sortOrder: SortOrderOption[]) => {
       const sop = getSortOrderPreference(libraryId, sortOrderPreference);
       if (sortOrder[0] !== sop) {
-        setOrderByPreference({
+        setOderByPreference({
           ...sortOrderPreference,
           [libraryId]: sortOrder[0],
         });
       }
       _setSortOrder(sortOrder);
     },
-    [libraryId, sortOrderPreference, setOrderByPreference, _setSortOrder],
-  );
-
-  const setFilter = useCallback(
-    (filterBy: FilterByOption[]) => {
-      const fp = getFilterByPreference(libraryId, filterByPreference);
-      if (filterBy[0] !== fp) {
-        setFilterByPreference({
-          ...filterByPreference,
-          [libraryId]: filterBy[0],
-        });
-      }
-      _setFilterBy(filterBy);
-    },
-    [libraryId, filterByPreference, setFilterByPreference, _setFilterBy],
+    [libraryId, sortOrderPreference, setOderByPreference, _setSortOrder],
   );
 
   const nrOfCols = useMemo(() => {
@@ -219,7 +168,6 @@ const Page = () => {
         sortBy: [sortBy[0], "SortName", "ProductionYear"],
         sortOrder: [sortOrder[0]],
         enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
-        filters: filterBy as ItemFilter[],
         // true is needed for merged versions
         recursive: true,
         imageTypeLimit: 1,
@@ -242,7 +190,6 @@ const Page = () => {
       selectedTags,
       sortBy,
       sortOrder,
-      filterBy,
     ],
   );
 
@@ -256,7 +203,6 @@ const Page = () => {
         selectedTags,
         sortBy,
         sortOrder,
-        filterBy,
       ],
       queryFn: fetchItems,
       getNextPageParam: (lastPage, pages) => {
@@ -322,8 +268,7 @@ const Page = () => {
   );
 
   const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
-  const generalFilters = useFilterOptions();
-  const settings = useSettings();
+
   const ListHeaderComponent = useCallback(
     () => (
       <FlatList
@@ -459,26 +404,6 @@ const Page = () => {
               />
             ),
           },
-          {
-            key: "filterOptions",
-            component: (
-              <FilterButton
-                className='mr-1'
-                id={libraryId}
-                queryKey='filters'
-                queryFn={async () => generalFilters.map((s) => s.key)}
-                set={setFilter}
-                values={filterBy}
-                title={t("library.filters.filter_by")}
-                renderItemLabel={(item) =>
-                  generalFilters.find((i) => i.key === item)?.value || ""
-                }
-                searchFilter={(item, search) =>
-                  item.toLowerCase().includes(search.toLowerCase())
-                }
-              />
-            ),
-          },
         ]}
         renderItem={({ item }) => item.component}
         keyExtractor={(item) => item.key}
@@ -499,9 +424,6 @@ const Page = () => {
       sortOrder,
       setSortOrder,
       isFetching,
-      filterBy,
-      setFilter,
-      settings,
     ],
   );
 

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

@@ -39,6 +39,7 @@ export default function index() {
     () =>
       data
         ?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!))
+        .filter((l) => l.CollectionType !== "music")
         .filter((l) => l.CollectionType !== "books") || [],
     [data, settings?.hiddenLibraries],
   );

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

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

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

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

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

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

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

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

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

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

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

@@ -3,10 +3,8 @@ 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 {
@@ -21,6 +19,7 @@ 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";
@@ -40,8 +39,6 @@ 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";
 
@@ -70,23 +67,7 @@ export default function search() {
   const [searchType, setSearchType] = useState<SearchType>("Library");
   const [search, setSearch] = useState<string>("");
 
-  const [debouncedSearch, setDebouncedSearch] = useState("");
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  const searchDebouncer = useAsyncDebouncer(
-    async (query: string) => {
-      // Cancel previous in-flight requests
-      abortControllerRef.current?.abort();
-      abortControllerRef.current = new AbortController();
-      setDebouncedSearch(query);
-      return query;
-    },
-    { wait: 200 },
-  );
-
-  useEffect(() => {
-    searchDebouncer.maybeExecute(search);
-  }, [search]);
+  const [debouncedSearch] = useDebounce(search, 500);
 
   const [api] = useAtom(apiAtom);
 
@@ -116,11 +97,9 @@ export default function search() {
     async ({
       types,
       query,
-      signal,
     }: {
       types: BaseItemKind[];
       query: string;
-      signal?: AbortSignal;
     }): Promise<BaseItemDto[]> => {
       if (!api || !query) {
         return [];
@@ -128,71 +107,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,
-            },
-            { signal },
-          );
+          const searchApi = await getItemsApi(api).getItems({
+            searchTerm: query,
+            limit: 10,
+            includeItemTypes: types,
+            recursive: true,
+            userId: user?.Id,
+          });
 
           return (searchApi.data.Items as BaseItemDto[]) || [];
         }
-
-        if (searchEngine === "Streamystats") {
-          if (!settings?.streamyStatsServerUrl || !api.accessToken) {
-            return [];
-          }
-
-          const streamyStatsApi = createStreamystatsApi({
-            serverUrl: settings.streamyStatsServerUrl,
-            jellyfinToken: api.accessToken,
-          });
-
-          const typeMap: Record<BaseItemKind, string> = {
-            Movie: "movies",
-            Series: "series",
-            Episode: "episodes",
-            Person: "actors",
-            BoxSet: "movies",
-            Audio: "audio",
-          } as Record<BaseItemKind, string>;
-
-          const searchType = types.length === 1 ? typeMap[types[0]] : "media";
-          const response = await streamyStatsApi.searchIds(
-            query,
-            searchType as "movies" | "series" | "episodes" | "actors" | "media",
-            10,
-            signal,
-          );
-
-          const allIds: string[] = [
-            ...(response.data.movies || []),
-            ...(response.data.series || []),
-            ...(response.data.episodes || []),
-            ...(response.data.actors || []),
-            ...(response.data.audio || []),
-          ];
-
-          if (!allIds.length) {
-            return [];
-          }
-
-          const itemsResponse = await getItemsApi(api).getItems(
-            {
-              ids: allIds,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-            },
-            { signal },
-          );
-
-          return (itemsResponse.data.Items as BaseItemDto[]) || [];
-        }
-
-        // Marlin search
         if (!settings?.marlinServerUrl) {
           return [];
         }
@@ -203,7 +127,7 @@ export default function search() {
           .map((type) => encodeURIComponent(type))
           .join("&includeItemTypes=")}`;
 
-        const response1 = await axios.get(url, { signal });
+        const response1 = await axios.get(url);
 
         const ids = response1.data.ids;
 
@@ -211,63 +135,18 @@ export default function search() {
           return [];
         }
 
-        const response2 = await getItemsApi(api).getItems(
-          {
-            ids,
-            enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-          },
-          { signal },
-        );
+        const response2 = await getItemsApi(api).getItems({
+          ids,
+          enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+        });
 
         return (response2.data.Items as BaseItemDto[]) || [];
       } catch (error) {
-        // Silently handle aborted requests
-        if (error instanceof Error && error.name === "AbortError") {
-          return [];
-        }
-        return [];
+        console.error("Error during search:", error);
+        return []; // Ensure an empty array is returned in case of an error
       }
     },
-    [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],
+    [api, searchEngine, settings],
   );
 
   type HeaderSearchBarRef = {
@@ -316,7 +195,6 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Movie"],
-        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -327,7 +205,6 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Series"],
-        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -338,7 +215,6 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Episode"],
-        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -349,7 +225,6 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["BoxSet"],
-        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -360,52 +235,6 @@ export default function search() {
       searchFn({
         query: debouncedSearch,
         types: ["Person"],
-        signal: abortControllerRef.current?.signal,
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  // Music search queries - always use Jellyfin since Streamystats doesn't support music
-  const { data: artists, isFetching: l9 } = useQuery({
-    queryKey: ["search", "artists", debouncedSearch],
-    queryFn: () =>
-      jellyfinSearchFn({
-        query: debouncedSearch,
-        types: ["MusicArtist"],
-        signal: abortControllerRef.current?.signal,
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  const { data: albums, isFetching: l10 } = useQuery({
-    queryKey: ["search", "albums", debouncedSearch],
-    queryFn: () =>
-      jellyfinSearchFn({
-        query: debouncedSearch,
-        types: ["MusicAlbum"],
-        signal: abortControllerRef.current?.signal,
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  const { data: songs, isFetching: l11 } = useQuery({
-    queryKey: ["search", "songs", debouncedSearch],
-    queryFn: () =>
-      jellyfinSearchFn({
-        query: debouncedSearch,
-        types: ["Audio"],
-        signal: abortControllerRef.current?.signal,
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  const { data: playlists, isFetching: l12 } = useQuery({
-    queryKey: ["search", "playlists", debouncedSearch],
-    queryFn: () =>
-      jellyfinSearchFn({
-        query: debouncedSearch,
-        types: ["Playlist"],
-        signal: abortControllerRef.current?.signal,
       }),
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
@@ -416,27 +245,13 @@ export default function search() {
       episodes?.length ||
       series?.length ||
       collections?.length ||
-      actors?.length ||
-      artists?.length ||
-      albums?.length ||
-      songs?.length ||
-      playlists?.length
+      actors?.length
     );
-  }, [
-    episodes,
-    movies,
-    series,
-    collections,
-    actors,
-    artists,
-    albums,
-    songs,
-    playlists,
-  ]);
+  }, [episodes, movies, series, collections, actors]);
 
   const loading = useMemo(() => {
-    return l1 || l2 || l3 || l7 || l8 || l9 || l10 || l11 || l12;
-  }, [l1, l2, l3, l7, l8, l9, l10, l11, l12]);
+    return l1 || l2 || l3 || l7 || l8;
+  }, [l1, l2, l3, l7, l8]);
 
   return (
     <ScrollView
@@ -445,7 +260,6 @@ export default function search() {
       contentContainerStyle={{
         paddingLeft: insets.left,
         paddingRight: insets.right,
-        paddingBottom: 60,
       }}
     >
       {/* <View
@@ -584,172 +398,6 @@ export default function search() {
                 </TouchableItemRouter>
               )}
             />
-            {/* Music search results */}
-            <SearchItemWrapper
-              items={artists}
-              header={t("search.artists")}
-              renderItem={(item: BaseItemDto) => {
-                const imageUrl = getPrimaryImageUrl({ api, item });
-                return (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className='flex flex-col w-24 mr-2 items-center'
-                  >
-                    <View
-                      style={{
-                        width: 80,
-                        height: 80,
-                        borderRadius: 40,
-                        overflow: "hidden",
-                        backgroundColor: "#1a1a1a",
-                      }}
-                    >
-                      {imageUrl ? (
-                        <Image
-                          source={{ uri: imageUrl }}
-                          style={{ width: "100%", height: "100%" }}
-                          contentFit='cover'
-                        />
-                      ) : (
-                        <View className='flex-1 items-center justify-center bg-neutral-800'>
-                          <Text className='text-xl'>👤</Text>
-                        </View>
-                      )}
-                    </View>
-                    <Text numberOfLines={2} className='mt-2 text-center'>
-                      {item.Name}
-                    </Text>
-                  </TouchableItemRouter>
-                );
-              }}
-            />
-            <SearchItemWrapper
-              items={albums}
-              header={t("search.albums")}
-              renderItem={(item: BaseItemDto) => {
-                const imageUrl = getPrimaryImageUrl({ api, item });
-                return (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className='flex flex-col w-28 mr-2'
-                  >
-                    <View
-                      style={{
-                        width: 112,
-                        height: 112,
-                        borderRadius: 8,
-                        overflow: "hidden",
-                        backgroundColor: "#1a1a1a",
-                      }}
-                    >
-                      {imageUrl ? (
-                        <Image
-                          source={{ uri: imageUrl }}
-                          style={{ width: "100%", height: "100%" }}
-                          contentFit='cover'
-                        />
-                      ) : (
-                        <View className='flex-1 items-center justify-center bg-neutral-800'>
-                          <Text className='text-4xl'>🎵</Text>
-                        </View>
-                      )}
-                    </View>
-                    <Text numberOfLines={2} className='mt-2'>
-                      {item.Name}
-                    </Text>
-                    <Text className='opacity-50 text-xs' numberOfLines={1}>
-                      {item.AlbumArtist || item.Artists?.join(", ")}
-                    </Text>
-                  </TouchableItemRouter>
-                );
-              }}
-            />
-            <SearchItemWrapper
-              items={songs}
-              header={t("search.songs")}
-              renderItem={(item: BaseItemDto) => {
-                const imageUrl = getPrimaryImageUrl({ api, item });
-                return (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className='flex flex-col w-28 mr-2'
-                  >
-                    <View
-                      style={{
-                        width: 112,
-                        height: 112,
-                        borderRadius: 8,
-                        overflow: "hidden",
-                        backgroundColor: "#1a1a1a",
-                      }}
-                    >
-                      {imageUrl ? (
-                        <Image
-                          source={{ uri: imageUrl }}
-                          style={{ width: "100%", height: "100%" }}
-                          contentFit='cover'
-                        />
-                      ) : (
-                        <View className='flex-1 items-center justify-center bg-neutral-800'>
-                          <Text className='text-4xl'>🎵</Text>
-                        </View>
-                      )}
-                    </View>
-                    <Text numberOfLines={2} className='mt-2'>
-                      {item.Name}
-                    </Text>
-                    <Text className='opacity-50 text-xs' numberOfLines={1}>
-                      {item.Artists?.join(", ") || item.AlbumArtist}
-                    </Text>
-                  </TouchableItemRouter>
-                );
-              }}
-            />
-            <SearchItemWrapper
-              items={playlists}
-              header={t("search.playlists")}
-              renderItem={(item: BaseItemDto) => {
-                const imageUrl = getPrimaryImageUrl({ api, item });
-                return (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className='flex flex-col w-28 mr-2'
-                  >
-                    <View
-                      style={{
-                        width: 112,
-                        height: 112,
-                        borderRadius: 8,
-                        overflow: "hidden",
-                        backgroundColor: "#1a1a1a",
-                      }}
-                    >
-                      {imageUrl ? (
-                        <Image
-                          source={{ uri: imageUrl }}
-                          style={{ width: "100%", height: "100%" }}
-                          contentFit='cover'
-                        />
-                      ) : (
-                        <View className='flex-1 items-center justify-center bg-neutral-800'>
-                          <Text className='text-4xl'>🎶</Text>
-                        </View>
-                      )}
-                    </View>
-                    <Text numberOfLines={2} className='mt-2'>
-                      {item.Name}
-                    </Text>
-                    <Text className='opacity-50 text-xs'>
-                      {item.ChildCount} tracks
-                    </Text>
-                  </TouchableItemRouter>
-                );
-              }}
-            />
           </View>
         ) : (
           <JellyserrIndexPage

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

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

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

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

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

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

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

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

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

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

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

@@ -7,15 +7,15 @@ import type {
   ParamListBase,
   TabNavigationState,
 } from "@react-navigation/native";
-import { withLayoutContext } from "expo-router";
+import { useFocusEffect, useRouter, withLayoutContext } from "expo-router";
+import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
+import { Platform } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
-import { MiniPlayerBar } from "@/components/music/MiniPlayerBar";
-import { MusicPlaybackEngine } from "@/components/music/MusicPlaybackEngine";
 import { Colors } from "@/constants/Colors";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
+import { storage } from "@/utils/mmkv";
 
 const { Navigator } = createNativeBottomTabNavigator();
 
@@ -29,9 +29,25 @@ export const NativeTabs = withLayoutContext<
 export default function TabLayout() {
   const { settings } = useSettings();
   const { t } = useTranslation();
+  const router = useRouter();
+
+  useFocusEffect(
+    useCallback(() => {
+      const hasShownIntro = storage.getBoolean("hasShownIntro");
+      if (!hasShownIntro) {
+        const timer = setTimeout(() => {
+          router.push("/intro/page");
+        }, 1000);
+
+        return () => {
+          clearTimeout(timer);
+        };
+      }
+    }, []),
+  );
 
   return (
-    <View style={{ flex: 1 }}>
+    <>
       <SystemBars hidden={false} style='light' />
       <NativeTabs
         sidebarAdaptable={false}
@@ -84,18 +100,6 @@ export default function TabLayout() {
                 : (_e) => ({ sfSymbol: "heart.fill" }),
           }}
         />
-        <NativeTabs.Screen
-          name='(watchlists)'
-          options={{
-            title: t("watchlists.title"),
-            tabBarItemHidden:
-              !settings?.streamyStatsServerUrl || settings?.hideWatchlistsTab,
-            tabBarIcon:
-              Platform.OS === "android"
-                ? (_e) => require("@/assets/icons/list.png")
-                : (_e) => ({ sfSymbol: "list.bullet.rectangle" }),
-          }}
-        />
         <NativeTabs.Screen
           name='(libraries)'
           options={{
@@ -118,8 +122,6 @@ export default function TabLayout() {
           }}
         />
       </NativeTabs>
-      <MiniPlayerBar />
-      <MusicPlaybackEngine />
-    </View>
+    </>
   );
 }

app/(auth)/now-playing.tsx

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

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

@@ -3,6 +3,7 @@ import {
   type MediaSourceInfo,
   PlaybackOrder,
   PlaybackProgressInfo,
+  PlaybackStartInfo,
   RepeatMode,
 } from "@jellyfin/sdk/lib/generated-client";
 import {
@@ -14,7 +15,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, useWindowDimensions, View } from "react-native";
+import { Alert, Platform, View } from "react-native";
 import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
 
 import { BITRATES } from "@/components/BitrateSelector";
@@ -23,23 +24,16 @@ import { Loader } from "@/components/Loader";
 import { Controls } from "@/components/video-player/controls/Controls";
 import { PlayerProvider } from "@/components/video-player/controls/contexts/PlayerContext";
 import { VideoProvider } from "@/components/video-player/controls/contexts/VideoContext";
-import {
-  PlaybackSpeedScope,
-  updatePlaybackSpeedSettings,
-} from "@/components/video-player/controls/utils/playback-speed-settings";
 import { useHaptic } from "@/hooks/useHaptic";
-import { useOrientation } from "@/hooks/useOrientation";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
-import usePlaybackSpeed from "@/hooks/usePlaybackSpeed";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import {
-  type MpvOnErrorEventPayload,
-  type MpvOnPlaybackStateChangePayload,
-  type MpvOnProgressEventPayload,
   MpvPlayerView,
   type MpvPlayerViewRef,
-  type MpvVideoSource,
+  type OnPlaybackStateChangePayload,
+  type OnProgressEventPayload,
+  type VideoSource,
 } from "@/modules";
 import { useDownload } from "@/providers/DownloadProvider";
 import { DownloadedItem } from "@/providers/Downloads/types";
@@ -60,24 +54,21 @@ export default function page() {
   const api = useAtomValue(apiAtom);
   const { t } = useTranslation();
   const navigation = useNavigation();
-  const { settings, updateSettings } = useSettings();
-
-  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, _setShowControls] = useState(true);
-  const [isPipMode, setIsPipMode] = useState(false);
-  const [aspectRatio] = useState<"default" | "16:9" | "4:3" | "1:1" | "21:9">(
-    "default",
-  );
-  const [isZoomedToFill, setIsZoomedToFill] = useState(false);
+  const [isPipMode, _setIsPipMode] = useState(false);
+  const [aspectRatio, setAspectRatio] = useState<
+    "default" | "16:9" | "4:3" | "1:1" | "21:9"
+  >("default");
+  const [scaleFactor, setScaleFactor] = useState<
+    1.0 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 1.6 | 1.7 | 1.8 | 1.9 | 2.0
+  >(1.0);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isMuted, setIsMuted] = useState(false);
   const [isBuffering, setIsBuffering] = useState(true);
   const [isVideoLoaded, setIsVideoLoaded] = useState(false);
   const [tracksReady, setTracksReady] = useState(false);
-  const [hasPlaybackStarted, setHasPlaybackStarted] = useState(false);
-  const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState(1.0);
 
   const progress = useSharedValue(0);
   const isSeeking = useSharedValue(false);
@@ -119,14 +110,12 @@ export default function page() {
     /** Playback position in ticks. */
     playbackPosition?: string;
   }>();
-  const { lockOrientation, unlockOrientation } = useOrientation();
+  const { settings } = useSettings();
 
   const offline = offlineStr === "true";
-  const playbackManager = usePlaybackManager({ isOffline: offline });
+  const playbackManager = usePlaybackManager();
 
-  // 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
+  const audioIndex = audioIndexStr
     ? Number.parseInt(audioIndexStr, 10)
     : undefined;
   const subtitleIndex = subtitleIndexStr
@@ -145,49 +134,13 @@ 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,
-    settings,
-  );
-
-  // Handler for changing playback speed
-  const handleSetPlaybackSpeed = useCallback(
-    async (speed: number, scope: PlaybackSpeedScope) => {
-      // Update settings based on scope
-      updatePlaybackSpeedSettings(
-        speed,
-        scope,
-        item ?? undefined,
-        settings,
-        updateSettings,
-      );
-
-      // Apply speed to the current player (MPV)
-      setCurrentPlaybackSpeed(speed);
-      await videoRef.current?.setSpeed?.(speed);
-    },
-    [item, settings, updateSettings],
-  );
-
   /** Gets the initial playback position from the URL. */
   const getInitialPlaybackTicks = useCallback((): number => {
     if (playbackPositionFromUrl) {
       return Number.parseInt(playbackPositionFromUrl, 10);
     }
     return item?.UserData?.PlaybackPositionTicks ?? 0;
-  }, [playbackPositionFromUrl, item?.UserData?.PlaybackPositionTicks]);
+  }, [playbackPositionFromUrl]);
 
   useEffect(() => {
     const fetchItemData = async () => {
@@ -220,17 +173,6 @@ export default function page() {
     }
   }, [itemId, offline, api, user?.Id]);
 
-  // Lock orientation based on user settings
-  useEffect(() => {
-    if (settings?.defaultVideoOrientation) {
-      lockOrientation(settings.defaultVideoOrientation);
-    }
-
-    return () => {
-      unlockOrientation();
-    };
-  }, [settings?.defaultVideoOrientation, lockOrientation, unlockOrientation]);
-
   interface Stream {
     mediaSource: MediaSourceInfo;
     sessionId: string;
@@ -277,15 +219,10 @@ export default function page() {
             return;
           }
 
-          // Calculate start ticks directly from item to avoid stale closure
-          const startTicks = playbackPositionFromUrl
-            ? Number.parseInt(playbackPositionFromUrl, 10)
-            : (item?.UserData?.PlaybackPositionTicks ?? 0);
-
           const res = await getStreamUrl({
             api,
             item,
-            startTimeTicks: startTicks,
+            startTimeTicks: getInitialPlaybackTicks(),
             userId: user.Id,
             audioStreamIndex: audioIndex,
             maxStreamingBitrate: bitrateValue,
@@ -295,7 +232,6 @@ export default function page() {
           });
           if (!res) return;
           const { mediaSource, sessionId, url } = res;
-
           if (!sessionId || !mediaSource || !url) {
             Alert.alert(
               t("player.error"),
@@ -324,43 +260,36 @@ export default function page() {
   ]);
 
   useEffect(() => {
-    if (!stream || !api || offline) return;
+    if (!stream || !api) return;
     const reportPlaybackStart = async () => {
-      const progressInfo = currentPlayStateInfo();
-      if (progressInfo) {
-        await getPlaystateApi(api).reportPlaybackStart({
-          playbackStartInfo: progressInfo,
-        });
-      }
+      await getPlaystateApi(api).reportPlaybackStart({
+        playbackStartInfo: currentPlayStateInfo() as PlaybackStartInfo,
+      });
     };
     reportPlaybackStart();
-  }, [stream, api, offline]);
+  }, [stream, api]);
 
   const togglePlay = async () => {
     lightHapticFeedback();
     setIsPlaying(!isPlaying);
     if (isPlaying) {
       await videoRef.current?.pause();
-      const progressInfo = currentPlayStateInfo();
-      if (progressInfo) {
-        playbackManager.reportPlaybackProgress(progressInfo);
-      }
+      playbackManager.reportPlaybackProgress(
+        currentPlayStateInfo() as PlaybackProgressInfo,
+      );
     } else {
       videoRef.current?.play();
-      const progressInfo = currentPlayStateInfo();
-      if (!offline && api) {
-        await getPlaystateApi(api).reportPlaybackStart({
-          playbackStartInfo: progressInfo,
-        });
-      }
+      await getPlaystateApi(api!).reportPlaybackStart({
+        playbackStartInfo: currentPlayStateInfo() as PlaybackStartInfo,
+      });
     }
   };
 
   const reportPlaybackStopped = useCallback(async () => {
-    if (!item?.Id || !stream?.sessionId || offline || !api) return;
+    if (!item?.Id || !stream?.sessionId) return;
 
     const currentTimeInTicks = msToTicks(progress.get());
-    await getPlaystateApi(api).onPlaybackStopped({
+    await getPlaystateApi(api!).onPlaybackStopped({
       itemId: item.Id,
       mediaSourceId: mediaSourceId,
       positionTicks: currentTimeInTicks,
@@ -383,6 +312,7 @@ export default function page() {
     });
     reportPlaybackStopped();
     setIsPlaybackStopped(true);
+    // MPV doesn't have a stop method, use pause instead
     videoRef.current?.pause();
     revalidateProgressCache();
   }, [videoRef, reportPlaybackStopped, progress]);
@@ -394,24 +324,22 @@ export default function page() {
     };
   }, [navigation, stop]);
 
-  const currentPlayStateInfo = useCallback(():
-    | PlaybackProgressInfo
-    | undefined => {
+  const currentPlayStateInfo = useCallback(() => {
     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,
@@ -440,9 +368,8 @@ export default function page() {
     [],
   );
 
-  /** Progress handler for MPV - position in seconds */
   const onProgress = useCallback(
-    async (data: { nativeEvent: MpvOnProgressEventPayload }) => {
+    async (data: { nativeEvent: OnProgressEventPayload }) => {
       if (isSeeking.get() || isPlaybackStopped) return;
 
       const { position } = data.nativeEvent;
@@ -490,38 +417,26 @@ export default function page() {
   );
 
   /** Gets the initial playback position in seconds. */
-  const _startPosition = useMemo(() => {
+  const startPosition = useMemo(() => {
     return ticksToSeconds(getInitialPlaybackTicks());
   }, [getInitialPlaybackTicks]);
 
-  /** Build video source config for MPV */
-  const videoSource = useMemo<MpvVideoSource | undefined>(() => {
+  /** Build video source config for the native player */
+  const videoSource = useMemo<VideoSource | undefined>(() => {
     if (!stream?.url) return undefined;
 
     const mediaSource = stream.mediaSource;
     const isTranscoding = Boolean(mediaSource?.TranscodingUrl);
 
     // 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(
-        (s) =>
-          s.Type === "Subtitle" &&
-          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!);
-    }
+    const externalSubs = mediaSource?.MediaStreams?.filter(
+      (s) =>
+        s.Type === "Subtitle" &&
+        s.DeliveryMethod === "External" &&
+        s.DeliveryUrl,
+    ).map((s) => `${api?.basePath}${s.DeliveryUrl}`);
 
-    // Calculate track IDs for initial selection
+    // Calculate MPV track IDs for initial selection
     const initialSubtitleId = getMpvSubtitleId(
       mediaSource,
       subtitleIndex,
@@ -529,44 +444,21 @@ export default function page() {
     );
     const initialAudioId = getMpvAudioId(mediaSource, audioIndex);
 
-    // Calculate start position directly here to avoid timing issues
-    const startTicks = playbackPositionFromUrl
-      ? Number.parseInt(playbackPositionFromUrl, 10)
-      : (item?.UserData?.PlaybackPositionTicks ?? 0);
-    const startPos = ticksToSeconds(startTicks);
-
-    // Build source config - headers only needed for online streaming
-    const source: MpvVideoSource = {
+    return {
       url: stream.url,
-      startPosition: startPos,
+      startPosition,
       autoplay: true,
+      externalSubtitles: externalSubs,
       initialSubtitleId,
       initialAudioId,
     };
-
-    // Add external subtitles only for online playback
-    if (externalSubs && externalSubs.length > 0) {
-      source.externalSubtitles = externalSubs;
-    }
-
-    // Add auth headers only for online streaming (not for local file:// URLs)
-    if (!offline && api?.accessToken) {
-      source.headers = {
-        Authorization: `MediaBrowser Token="${api.accessToken}"`,
-      };
-    }
-
-    return source;
   }, [
     stream?.url,
     stream?.mediaSource,
-    item?.UserData?.PlaybackPositionTicks,
-    playbackPositionFromUrl,
+    startPosition,
     api?.basePath,
-    api?.accessToken,
     subtitleIndex,
     audioIndex,
-    offline,
   ]);
 
   const volumeUpCb = useCallback(async () => {
@@ -648,15 +540,13 @@ export default function page() {
     setVolume: setVolumeCb,
   });
 
-  /** Playback state handler for MPV */
   const onPlaybackStateChanged = useCallback(
-    async (e: { nativeEvent: MpvOnPlaybackStateChangePayload }) => {
+    async (e: { nativeEvent: OnPlaybackStateChangePayload }) => {
       const { isPaused, isPlaying: playing, isLoading } = e.nativeEvent;
 
       if (playing) {
         setIsPlaying(true);
         setIsBuffering(false);
-        setHasPlaybackStarted(true);
         if (item?.Id) {
           playbackManager.reportPlaybackProgress(
             currentPlayStateInfo() as PlaybackProgressInfo,
@@ -684,19 +574,6 @@ export default function page() {
     [playbackManager, item?.Id, progress],
   );
 
-  /** PiP handler for MPV */
-  const _onPictureInPictureChange = useCallback(
-    (e: { nativeEvent: { isActive: boolean } }) => {
-      const { isActive } = e.nativeEvent;
-      setIsPipMode(isActive);
-      // Hide controls when entering PiP
-      if (isActive) {
-        _setShowControls(false);
-      }
-    },
-    [],
-  );
-
   const [isMounted, setIsMounted] = useState(false);
 
   // Add useEffect to handle mounting
@@ -723,89 +600,37 @@ export default function page() {
     videoRef.current?.seekTo?.(position / 1000);
   }, []);
 
-  const handleZoomToggle = useCallback(async () => {
-    const newZoomState = !isZoomedToFill;
-    await videoRef.current?.setZoomedToFill?.(newZoomState);
-    setIsZoomedToFill(newZoomState);
-
-    // 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",
-      );
-      const videoWidth = videoStream?.Width ?? 1920;
-      const videoHeight = videoStream?.Height ?? 1080;
-
-      const videoAR = videoWidth / videoHeight;
-      const screenAR = screenWidth / screenHeight;
-
-      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);
-    }
-  }, [isZoomedToFill, stream?.mediaSource, screenWidth, screenHeight]);
-
-  // Apply subtitle settings when video loads
+  // Apply MPV subtitle settings when video loads
   useEffect(() => {
     if (!isVideoLoaded || !videoRef.current) return;
 
     const applySubtitleSettings = async () => {
       if (settings.mpvSubtitleScale !== undefined) {
-        await videoRef.current?.setSubtitleScale?.(settings.mpvSubtitleScale);
+        await videoRef.current?.setSubtitleScale(settings.mpvSubtitleScale);
       }
       if (settings.mpvSubtitleMarginY !== undefined) {
-        await videoRef.current?.setSubtitleMarginY?.(
-          settings.mpvSubtitleMarginY,
-        );
+        await videoRef.current?.setSubtitleMarginY(settings.mpvSubtitleMarginY);
       }
       if (settings.mpvSubtitleAlignX !== undefined) {
-        await videoRef.current?.setSubtitleAlignX?.(settings.mpvSubtitleAlignX);
+        await videoRef.current?.setSubtitleAlignX(settings.mpvSubtitleAlignX);
       }
       if (settings.mpvSubtitleAlignY !== undefined) {
-        await videoRef.current?.setSubtitleAlignY?.(settings.mpvSubtitleAlignY);
+        await videoRef.current?.setSubtitleAlignY(settings.mpvSubtitleAlignY);
       }
       if (settings.mpvSubtitleFontSize !== undefined) {
-        await videoRef.current?.setSubtitleFontSize?.(
+        await videoRef.current?.setSubtitleFontSize(
           settings.mpvSubtitleFontSize,
         );
       }
       // Apply subtitle size from general settings
       if (settings.subtitleSize) {
-        await videoRef.current?.setSubtitleFontSize?.(settings.subtitleSize);
+        await videoRef.current?.setSubtitleFontSize(settings.subtitleSize);
       }
     };
 
     applySubtitleSettings();
   }, [isVideoLoaded, settings]);
 
-  // Apply initial playback speed when video loads
-  useEffect(() => {
-    if (!isVideoLoaded || !videoRef.current) return;
-
-    const applyInitialPlaybackSpeed = async () => {
-      if (initialPlaybackSpeed !== 1.0) {
-        setCurrentPlaybackSpeed(initialPlaybackSpeed);
-        await videoRef.current?.setSpeed?.(initialPlaybackSpeed);
-      }
-    };
-
-    applyInitialPlaybackSpeed();
-  }, [isVideoLoaded, initialPlaybackSpeed]);
-
   // Show error UI first, before checking loading/missing‐data
   if (itemStatus.isError || streamStatus.isError) {
     return (
@@ -839,8 +664,6 @@ export default function page() {
       mediaSource={stream?.mediaSource}
       isVideoLoaded={isVideoLoaded}
       tracksReady={tracksReady}
-      offline={offline}
-      downloadedItem={downloadedItem}
     >
       <VideoProvider>
         <View
@@ -868,7 +691,7 @@ export default function page() {
               onProgress={onProgress}
               onPlaybackStateChange={onPlaybackStateChanged}
               onLoad={() => setIsVideoLoaded(true)}
-              onError={(e: { nativeEvent: MpvOnErrorEventPayload }) => {
+              onError={(e) => {
                 console.error("Video Error:", e.nativeEvent);
                 Alert.alert(
                   t("player.error"),
@@ -880,22 +703,6 @@ export default function page() {
                 setTracksReady(true);
               }}
             />
-            {!hasPlaybackStarted && (
-              <View
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  backgroundColor: "black",
-                  justifyContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                <Loader />
-              </View>
-            )}
           </View>
           {isMounted === true && item && !isPipMode && (
             <Controls
@@ -916,12 +723,11 @@ export default function page() {
               enableTrickplay={true}
               offline={offline}
               aspectRatio={aspectRatio}
-              isZoomedToFill={isZoomedToFill}
-              onZoomToggle={handleZoomToggle}
+              scaleFactor={scaleFactor}
+              setAspectRatio={setAspectRatio}
+              setScaleFactor={setScaleFactor}
               api={api}
               downloadedFiles={downloadedFiles}
-              playbackSpeed={currentPlaybackSpeed}
-              setPlaybackSpeed={handleSetPlaybackSpeed}
             />
           )}
         </View>

app/_layout.tsx

@@ -1,11 +1,8 @@
 import "@/augmentations";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import NetInfo from "@react-native-community/netinfo";
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
-import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
-import { onlineManager, QueryClient } from "@tanstack/react-query";
-import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import * as BackgroundTask from "expo-background-task";
 import * as Device from "expo-device";
 import { Platform } from "react-native";
@@ -13,13 +10,11 @@ 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,
   JellyfinProvider,
 } from "@/providers/JellyfinProvider";
-import { MusicPlayerProvider } from "@/providers/MusicPlayerProvider";
 import { NetworkStatusProvider } from "@/providers/NetworkStatusProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
@@ -189,39 +184,11 @@ export default function RootLayout() {
   );
 }
 
-// Set up online manager for network-aware query behavior
-onlineManager.setEventListener((setOnline) => {
-  return NetInfo.addEventListener((state) => {
-    setOnline(!!state.isConnected);
-  });
-});
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 0, // Always stale - triggers background refetch on mount
-      gcTime: 1000 * 60 * 60 * 24, // 24 hours - keep in cache for offline
-      networkMode: "offlineFirst", // Return cache first, refetch if online
-      refetchOnMount: true, // Refetch when component mounts
-      refetchOnReconnect: true, // Refetch when network reconnects
-      refetchOnWindowFocus: false, // Not needed for mobile
-      retry: (failureCount) => {
-        if (!onlineManager.isOnline()) return false;
-        return failureCount < 3;
-      },
+      staleTime: 30000,
     },
-    mutations: {
-      networkMode: "online", // Only run mutations when online
-    },
-  },
-});
-
-// Create MMKV-based persister for offline support
-const mmkvPersister = createSyncStoragePersister({
-  storage: {
-    getItem: (key) => storage.getString(key) ?? null,
-    setItem: (key, value) => storage.set(key, value),
-    removeItem: (key) => storage.remove(key),
   },
 });
 
@@ -370,92 +337,68 @@ function Layout() {
   }, [user]);
 
   return (
-    <PersistQueryClientProvider
-      client={queryClient}
-      persistOptions={{
-        persister: mmkvPersister,
-        maxAge: 1000 * 60 * 60 * 24, // 24 hours max cache age
-        dehydrateOptions: {
-          shouldDehydrateQuery: (query) => {
-            // Only persist successful queries
-            return query.state.status === "success";
-          },
-        },
-      }}
-    >
+    <QueryClientProvider client={queryClient}>
       <JellyfinProvider>
         <NetworkStatusProvider>
           <PlaySettingsProvider>
             <LogProvider>
               <WebSocketProvider>
                 <DownloadProvider>
-                  <MusicPlayerProvider>
-                    <GlobalModalProvider>
-                      <BottomSheetModalProvider>
-                        <IntroSheetProvider>
-                          <ThemeProvider value={DarkTheme}>
-                            <SystemBars style='light' hidden={false} />
-                            <Stack initialRouteName='(auth)/(tabs)'>
-                              <Stack.Screen
-                                name='(auth)/(tabs)'
-                                options={{
-                                  headerShown: false,
-                                  title: "",
-                                  header: () => null,
-                                }}
-                              />
-                              <Stack.Screen
-                                name='(auth)/player'
-                                options={{
-                                  headerShown: false,
-                                  title: "",
-                                  header: () => null,
-                                }}
-                              />
-                              <Stack.Screen
-                                name='(auth)/now-playing'
-                                options={{
-                                  headerShown: false,
-                                  presentation: "modal",
-                                  gestureEnabled: true,
-                                }}
-                              />
-                              <Stack.Screen
-                                name='login'
-                                options={{
-                                  headerShown: true,
-                                  title: "",
-                                  headerTransparent: Platform.OS === "ios",
-                                }}
-                              />
-                              <Stack.Screen name='+not-found' />
-                            </Stack>
-                            <Toaster
-                              duration={4000}
-                              toastOptions={{
-                                style: {
-                                  backgroundColor: "#262626",
-                                  borderColor: "#363639",
-                                  borderWidth: 1,
-                                },
-                                titleStyle: {
-                                  color: "white",
-                                },
-                              }}
-                              closeButton
-                            />
-                            <GlobalModal />
-                          </ThemeProvider>
-                        </IntroSheetProvider>
-                      </BottomSheetModalProvider>
-                    </GlobalModalProvider>
-                  </MusicPlayerProvider>
+                  <GlobalModalProvider>
+                    <BottomSheetModalProvider>
+                      <ThemeProvider value={DarkTheme}>
+                        <SystemBars style='light' hidden={false} />
+                        <Stack initialRouteName='(auth)/(tabs)'>
+                          <Stack.Screen
+                            name='(auth)/(tabs)'
+                            options={{
+                              headerShown: false,
+                              title: "",
+                              header: () => null,
+                            }}
+                          />
+                          <Stack.Screen
+                            name='(auth)/player'
+                            options={{
+                              headerShown: false,
+                              title: "",
+                              header: () => null,
+                            }}
+                          />
+                          <Stack.Screen
+                            name='login'
+                            options={{
+                              headerShown: true,
+                              title: "",
+                              headerTransparent: Platform.OS === "ios",
+                            }}
+                          />
+                          <Stack.Screen name='+not-found' />
+                        </Stack>
+                        <Toaster
+                          duration={4000}
+                          toastOptions={{
+                            style: {
+                              backgroundColor: "#262626",
+                              borderColor: "#363639",
+                              borderWidth: 1,
+                            },
+                            titleStyle: {
+                              color: "white",
+                            },
+                          }}
+                          closeButton
+                        />
+                        <GlobalModal />
+                      </ThemeProvider>
+                    </BottomSheetModalProvider>
+                  </GlobalModalProvider>
                 </DownloadProvider>
               </WebSocketProvider>
             </LogProvider>
           </PlaySettingsProvider>
         </NetworkStatusProvider>
       </JellyfinProvider>
-    </PersistQueryClientProvider>
+    </QueryClientProvider>
   );
 }

app/login.tsx

@@ -10,7 +10,6 @@ import {
   Keyboard,
   KeyboardAvoidingView,
   Platform,
-  Switch,
   TouchableOpacity,
   View,
 } from "react-native";
@@ -21,13 +20,8 @@ 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")),
@@ -37,14 +31,8 @@ const Login: React.FC = () => {
   const api = useAtomValue(apiAtom);
   const navigation = useNavigation();
   const params = useLocalSearchParams();
-  const {
-    setServer,
-    login,
-    removeServer,
-    initiateQuickConnect,
-    loginWithSavedCredential,
-    loginWithPassword,
-  } = useJellyfin();
+  const { setServer, login, removeServer, initiateQuickConnect } =
+    useJellyfin();
 
   const {
     apiUrl: _apiUrl,
@@ -64,14 +52,6 @@ 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
    */
@@ -116,34 +96,12 @@ 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 {
-      await login(username, password, serverName, options);
+      const result = CredentialsSchema.safeParse(credentials);
+      if (result.success) {
+        await login(credentials.username, credentials.password);
+      }
     } catch (error) {
       if (error instanceof Error) {
         Alert.alert(t("login.connection_failed"), error.message);
@@ -155,44 +113,6 @@ 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);
     }
   };
 
@@ -342,20 +262,19 @@ const Login: React.FC = () => {
               <Input
                 placeholder={t("login.username_placeholder")}
                 onChangeText={(text: string) =>
-                  setCredentials((prev) => ({ ...prev, username: text }))
+                  setCredentials({ ...credentials, username: text })
                 }
                 onEndEditing={(e) => {
                   const newValue = e.nativeEvent.text;
                   if (newValue && newValue !== credentials.username) {
-                    setCredentials((prev) => ({ ...prev, username: newValue }));
+                    setCredentials({ ...credentials, username: newValue });
                   }
                 }}
                 value={credentials.username}
                 keyboardType='default'
                 returnKeyType='done'
                 autoCapitalize='none'
-                autoCorrect={false}
-                textContentType='username'
+                textContentType='oneTimeCode'
                 clearButtonMode='while-editing'
                 maxLength={500}
                 extraClassName='mb-4'
@@ -367,12 +286,12 @@ const Login: React.FC = () => {
               <Input
                 placeholder={t("login.password_placeholder")}
                 onChangeText={(text: string) =>
-                  setCredentials((prev) => ({ ...prev, password: text }))
+                  setCredentials({ ...credentials, password: text })
                 }
                 onEndEditing={(e) => {
                   const newValue = e.nativeEvent.text;
                   if (newValue && newValue !== credentials.password) {
-                    setCredentials((prev) => ({ ...prev, password: newValue }));
+                    setCredentials({ ...credentials, password: newValue });
                   }
                 }}
                 value={credentials.password}
@@ -461,12 +380,9 @@ const Login: React.FC = () => {
                   }}
                 />
                 <PreviousServersList
-                  onServerSelect={async (s) => {
+                  onServerSelect={async (s: any) => {
                     await handleConnect(s.address);
                   }}
-                  onQuickLogin={handleQuickLoginWithSavedCredential}
-                  onPasswordLogin={handlePasswordLogin}
-                  onAddAccount={handleAddAccount}
                 />
               </View>
             </View>
@@ -482,8 +398,8 @@ const Login: React.FC = () => {
         style={{ flex: 1 }}
       >
         {api?.basePath ? (
-          <View className='flex flex-col flex-1 justify-center'>
-            <View className='px-4 w-full'>
+          <View className='flex flex-col flex-1 items-center justify-center'>
+            <View className='px-4 -mt-20 w-full'>
               <View className='flex flex-col space-y-2'>
                 <Text className='text-2xl font-bold -mb-2'>
                   {serverName ? (
@@ -499,23 +415,21 @@ const Login: React.FC = () => {
                 <Input
                   placeholder={t("login.username_placeholder")}
                   onChangeText={(text) =>
-                    setCredentials((prev) => ({ ...prev, username: text }))
+                    setCredentials({ ...credentials, username: text })
                   }
                   onEndEditing={(e) => {
                     const newValue = e.nativeEvent.text;
                     if (newValue && newValue !== credentials.username) {
-                      setCredentials((prev) => ({
-                        ...prev,
-                        username: newValue,
-                      }));
+                      setCredentials({ ...credentials, username: newValue });
                     }
                   }}
                   value={credentials.username}
                   keyboardType='default'
                   returnKeyType='done'
                   autoCapitalize='none'
-                  autoCorrect={false}
-                  textContentType='username'
+                  // Changed from username to oneTimeCode because it is a known issue in RN
+                  // https://github.com/facebook/react-native/issues/47106#issuecomment-2521270037
+                  textContentType='oneTimeCode'
                   clearButtonMode='while-editing'
                   maxLength={500}
                 />
@@ -523,15 +437,12 @@ const Login: React.FC = () => {
                 <Input
                   placeholder={t("login.password_placeholder")}
                   onChangeText={(text) =>
-                    setCredentials((prev) => ({ ...prev, password: text }))
+                    setCredentials({ ...credentials, password: text })
                   }
                   onEndEditing={(e) => {
                     const newValue = e.nativeEvent.text;
                     if (newValue && newValue !== credentials.password) {
-                      setCredentials((prev) => ({
-                        ...prev,
-                        password: newValue,
-                      }));
+                      setCredentials({ ...credentials, password: newValue });
                     }
                   }}
                   value={credentials.password}
@@ -543,21 +454,6 @@ 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}
@@ -633,25 +529,11 @@ 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.11/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.5/schema.json",
   "files": {
     "includes": [
       "**/*",
@@ -8,8 +8,7 @@
       "!android",
       "!Streamyfin.app",
       "!utils/jellyseerr",
-      "!.expo",
-      "!docs/jellyfin-openapi-stable.json"
+      "!.expo"
     ]
   },
   "linter": {

components/AccountsSheet.tsx

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

components/AddToFavorites.tsx

@@ -16,7 +16,6 @@ export const AddToFavorites: FC<Props> = ({ item, ...props }) => {
       <RoundButton
         size='large'
         icon={isFavorite ? "heart" : "heart-outline"}
-        color={isFavorite ? "purple" : "white"}
         onPress={toggleFavorite}
       />
     </View>

components/AddToWatchlist.tsx

@@ -1,43 +0,0 @@
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import type { FC } from "react";
-import { useCallback, useRef } from "react";
-import { View, type ViewProps } from "react-native";
-import { RoundButton } from "@/components/RoundButton";
-import {
-  WatchlistSheet,
-  type WatchlistSheetRef,
-} from "@/components/watchlists/WatchlistSheet";
-import {
-  useItemInWatchlists,
-  useStreamystatsEnabled,
-} from "@/hooks/useWatchlists";
-
-interface Props extends ViewProps {
-  item: BaseItemDto;
-}
-
-export const AddToWatchlist: FC<Props> = ({ item, ...props }) => {
-  const streamystatsEnabled = useStreamystatsEnabled();
-  const sheetRef = useRef<WatchlistSheetRef>(null);
-
-  const { data: watchlistsContainingItem } = useItemInWatchlists(item.Id);
-  const isInAnyWatchlist = (watchlistsContainingItem?.length ?? 0) > 0;
-
-  const handlePress = useCallback(() => {
-    sheetRef.current?.open(item);
-  }, [item]);
-
-  // Don't render if Streamystats is not enabled
-  if (!streamystatsEnabled) return null;
-
-  return (
-    <View {...props}>
-      <RoundButton
-        size='large'
-        icon={isInAnyWatchlist ? "list" : "list-outline"}
-        onPress={handlePress}
-      />
-      <WatchlistSheet ref={sheetRef} />
-    </View>
-  );
-};

components/Chromecast.tsx

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

components/DownloadItem.tsx

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

components/GlobalModal.tsx

@@ -3,7 +3,7 @@ import {
   type BottomSheetBackdropProps,
   BottomSheetModal,
 } from "@gorhom/bottom-sheet";
-import { useCallback, useEffect } from "react";
+import { useCallback } from "react";
 import { useGlobalModal } from "@/providers/GlobalModalProvider";
 
 /**
@@ -16,13 +16,7 @@ import { useGlobalModal } from "@/providers/GlobalModalProvider";
  * after BottomSheetModalProvider.
  */
 export const GlobalModal = () => {
-  const { hideModal, modalState, modalRef, isVisible } = useGlobalModal();
-
-  useEffect(() => {
-    if (isVisible && modalState.content) {
-      modalRef.current?.present();
-    }
-  }, [isVisible, modalState.content, modalRef]);
+  const { hideModal, modalState, modalRef } = useGlobalModal();
 
   const handleSheetChanges = useCallback(
     (index: number) => {

components/IntroSheet.tsx

@@ -1,202 +0,0 @@
-import { Feather, Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
-import { Image } from "expo-image";
-import { 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/ItemContent.tsx

@@ -11,7 +11,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { type Bitrate } from "@/components/BitrateSelector";
 import { ItemImage } from "@/components/common/ItemImage";
 import { DownloadSingleItem } from "@/components/DownloadItem";
-import { ItemPeopleSections } from "@/components/item/ItemPeopleSections";
 import { MediaSourceButton } from "@/components/MediaSourceButton";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
@@ -19,6 +18,7 @@ import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { PlayButton } from "@/components/PlayButton";
 import { PlayedStatus } from "@/components/PlayedStatus";
 import { SimilarItems } from "@/components/SimilarItems";
+import { CastAndCrew } from "@/components/series/CastAndCrew";
 import { CurrentSeries } from "@/components/series/CurrentSeries";
 import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
 import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
@@ -29,9 +29,9 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { AddToFavorites } from "./AddToFavorites";
-import { AddToWatchlist } from "./AddToWatchlist";
 import { ItemHeader } from "./ItemHeader";
 import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
+import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
 import { PlayInRemoteSessionButton } from "./PlayInRemoteSession";
 
 const Chromecast = !Platform.isTV ? require("./Chromecast") : null;
@@ -46,11 +46,10 @@ export type SelectedOptions = {
 interface ItemContentProps {
   item: BaseItemDto;
   isOffline: boolean;
-  itemWithSources?: BaseItemDto | null;
 }
 
 export const ItemContent: React.FC<ItemContentProps> = React.memo(
-  ({ item, isOffline, itemWithSources }) => {
+  ({ item, isOffline }) => {
     const [api] = useAtom(apiAtom);
     const { settings } = useSettings();
     const { orientation } = useOrientation();
@@ -67,23 +66,18 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
       SelectedOptions | undefined
     >(undefined);
 
-    // Use itemWithSources for play settings since it has MediaSources data
     const {
       defaultAudioIndex,
       defaultBitrate,
       defaultMediaSource,
       defaultSubtitleIndex,
-    } = useDefaultPlaySettings(itemWithSources ?? item, settings);
+    } = useDefaultPlaySettings(item, settings);
 
     const logoUrl = useMemo(
       () => (item ? getLogoImageUrlById({ api, item }) : null),
       [api, item],
     );
 
-    const onLogoLoad = React.useCallback(() => {
-      setLoadingLogo(false);
-    }, []);
-
     const loading = useMemo(() => {
       return Boolean(logoUrl && loadingLogo);
     }, [loadingLogo, logoUrl]);
@@ -104,7 +98,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
     ]);
 
     useEffect(() => {
-      if (!Platform.isTV && itemWithSources) {
+      if (!Platform.isTV && item) {
         navigation.setOptions({
           headerRight: () =>
             item &&
@@ -114,19 +108,14 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                 {item.Type !== "Program" && (
                   <View className='flex flex-row items-center'>
                     {!Platform.isTV && (
-                      <DownloadSingleItem item={itemWithSources} size='large' />
+                      <DownloadSingleItem item={item} size='large' />
+                    )}
+                    {user?.Policy?.IsAdministrator && (
+                      <PlayInRemoteSessionButton item={item} size='large' />
                     )}
-                    {user?.Policy?.IsAdministrator &&
-                      !settings.hideRemoteSessionButton && (
-                        <PlayInRemoteSessionButton item={item} size='large' />
-                      )}
 
                     <PlayedStatus items={[item]} size='large' />
                     <AddToFavorites item={item} />
-                    {settings.streamyStatsServerUrl &&
-                      !settings.hideWatchlistsTab && (
-                        <AddToWatchlist item={item} />
-                      )}
                   </View>
                 )}
               </View>
@@ -136,34 +125,21 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                 {item.Type !== "Program" && (
                   <View className='flex flex-row items-center space-x-2'>
                     {!Platform.isTV && (
-                      <DownloadSingleItem item={itemWithSources} size='large' />
+                      <DownloadSingleItem item={item} size='large' />
+                    )}
+                    {user?.Policy?.IsAdministrator && (
+                      <PlayInRemoteSessionButton item={item} size='large' />
                     )}
-                    {user?.Policy?.IsAdministrator &&
-                      !settings.hideRemoteSessionButton && (
-                        <PlayInRemoteSessionButton item={item} size='large' />
-                      )}
 
                     <PlayedStatus items={[item]} size='large' />
                     <AddToFavorites item={item} />
-                    {settings.streamyStatsServerUrl &&
-                      !settings.hideWatchlistsTab && (
-                        <AddToWatchlist item={item} />
-                      )}
                   </View>
                 )}
               </View>
             )),
         });
       }
-    }, [
-      item,
-      navigation,
-      user,
-      itemWithSources,
-      settings.hideRemoteSessionButton,
-      settings.streamyStatsServerUrl,
-      settings.hideWatchlistsTab,
-    ]);
+    }, [item, navigation, user, item]);
 
     useEffect(() => {
       if (item) {
@@ -185,7 +161,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
         }}
       >
         <ParallaxScrollView
-          className='flex-1'
+          className={`flex-1 ${loading ? "opacity-0" : "opacity-100"}`}
           headerHeight={headerHeight}
           headerImage={
             <View style={[{ flex: 1 }]}>
@@ -212,8 +188,8 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                   width: "100%",
                 }}
                 contentFit='contain'
-                onLoad={onLogoLoad}
-                onError={onLogoLoad}
+                onLoad={() => setLoadingLogo(false)}
+                onError={() => setLoadingLogo(false)}
               />
             ) : (
               <View />
@@ -236,7 +212,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                   <MediaSourceButton
                     selectedOptions={selectedOptions}
                     setSelectedOptions={setSelectedOptions}
-                    item={itemWithSources}
+                    item={item}
                     colors={itemColors}
                   />
                 )}
@@ -261,10 +237,25 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
             {item.Type !== "Program" && (
               <>
                 {item.Type === "Episode" && !isOffline && (
-                  <CurrentSeries item={item} className='mb-2' />
+                  <CurrentSeries item={item} className='mb-4' />
                 )}
 
-                <ItemPeopleSections item={item} isOffline={isOffline} />
+                {!isOffline && (
+                  <CastAndCrew item={item} className='mb-4' loading={loading} />
+                )}
+
+                {item.People && item.People.length > 0 && !isOffline && (
+                  <View className='mb-4'>
+                    {item.People.slice(0, 3).map((person, idx) => (
+                      <MoreMoviesWithActor
+                        currentItem={item}
+                        key={idx}
+                        actorId={person.Id!}
+                        className='mb-4'
+                      />
+                    ))}
+                  </View>
+                )}
 
                 {!isOffline && <SimilarItems itemId={item.Id} />}
               </>

components/ItemTechnicalDetails.tsx

@@ -183,12 +183,6 @@ const VideoStreamInfo = ({ source }: { source?: MediaSourceInfo }) => {
 
   if (!source || !videoStream) return null;
 
-  // Dolby Vision video check
-  const isDolbyVision =
-    videoStream.VideoRangeType === "DOVI" ||
-    videoStream.DvVersionMajor != null ||
-    videoStream.DvVersionMinor != null;
-
   return (
     <View className='flex-row flex-wrap gap-2'>
       <Badge
@@ -201,15 +195,6 @@ const VideoStreamInfo = ({ source }: { source?: MediaSourceInfo }) => {
         iconLeft={<Ionicons name='film-outline' size={16} color='white' />}
         text={`${videoStream.Width}x${videoStream.Height}`}
       />
-      {isDolbyVision && (
-        <Badge
-          variant='gray'
-          iconLeft={
-            <Ionicons name='sparkles-outline' size={16} color='white' />
-          }
-          text={"DV"}
-        />
-      )}
       <Badge
         variant='gray'
         iconLeft={

components/MoreMoviesWithActor.tsx

@@ -3,7 +3,6 @@ import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
 import type React from "react";
-import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { View, type ViewProps } from "react-native";
 import { HorizontalScroll } from "@/components/common/HorizontalScroll";
@@ -11,18 +10,16 @@ import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import MoviePoster from "@/components/posters/MoviePoster";
-import { POSTER_CAROUSEL_HEIGHT } from "@/constants/Values";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 
 interface Props extends ViewProps {
   actorId: string;
-  actorName?: string | null;
   currentItem: BaseItemDto;
 }
 
 export const MoreMoviesWithActor: React.FC<Props> = ({
   actorId,
-  actorName,
   currentItem,
   ...props
 }) => {
@@ -30,6 +27,19 @@ export const MoreMoviesWithActor: React.FC<Props> = ({
   const [user] = useAtom(userAtom);
   const { t } = useTranslation();
 
+  const { data: actor } = useQuery({
+    queryKey: ["actor", actorId],
+    queryFn: async () => {
+      if (!api || !user?.Id) return null;
+      return await getUserItemData({
+        api,
+        userId: user.Id,
+        itemId: actorId,
+      });
+    },
+    enabled: !!api && !!user?.Id && !!actorId,
+  });
+
   const { data: items, isLoading } = useQuery({
     queryKey: ["actor", "movies", actorId, currentItem.Id],
     queryFn: async () => {
@@ -62,34 +72,29 @@ export const MoreMoviesWithActor: React.FC<Props> = ({
     enabled: !!api && !!user?.Id && !!actorId,
   });
 
-  const renderItem = useCallback(
-    (item: BaseItemDto, idx: number) => (
-      <TouchableItemRouter
-        key={item.Id ?? idx}
-        item={item}
-        className='flex flex-col w-28'
-      >
-        <View>
-          <MoviePoster item={item} />
-          <ItemCardText item={item} />
-        </View>
-      </TouchableItemRouter>
-    ),
-    [],
-  );
-
   if (items?.length === 0) return null;
 
   return (
     <View {...props}>
       <Text className='text-lg font-bold mb-2 px-4'>
-        {t("item_card.more_with", { name: actorName ?? "" })}
+        {t("item_card.more_with", { name: actor?.Name })}
       </Text>
       <HorizontalScroll
         data={items}
         loading={isLoading}
-        height={POSTER_CAROUSEL_HEIGHT}
-        renderItem={renderItem}
+        height={247}
+        renderItem={(item: BaseItemDto, idx: number) => (
+          <TouchableItemRouter
+            key={idx}
+            item={item}
+            className='flex flex-col w-28'
+          >
+            <View>
+              <MoviePoster item={item} />
+              <ItemCardText item={item} />
+            </View>
+          </TouchableItemRouter>
+        )}
       />
     </View>
   );

components/PINEntryModal.tsx

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

components/PasswordEntryModal.tsx

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

components/PlatformDropdown.tsx

@@ -54,7 +54,9 @@ const ToggleSwitch: React.FC<{ value: boolean }> = ({ value }) => (
     className={`w-12 h-7 rounded-full ${value ? "bg-purple-600" : "bg-neutral-600"} flex-row items-center`}
   >
     <View
-      className={`w-5 h-5 rounded-full bg-white shadow-md transform transition-transform ${value ? "translate-x-6" : "translate-x-1"}`}
+      className={`w-5 h-5 rounded-full bg-white shadow-md transform transition-transform ${
+        value ? "translate-x-6" : "translate-x-1"
+      }`}
     />
   </View>
 );
@@ -71,7 +73,9 @@ const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
       <TouchableOpacity
         onPress={handlePress}
         disabled={option.disabled}
-        className={`px-4 py-3 flex flex-row items-center justify-between ${option.disabled ? "opacity-50" : ""}`}
+        className={`px-4 py-3 flex flex-row items-center justify-between ${
+          option.disabled ? "opacity-50" : ""
+        }`}
       >
         <Text className='flex-1 text-white'>{option.label}</Text>
         {isToggle ? (
@@ -215,7 +219,11 @@ const PlatformDropdownComponent = ({
     return (
       <Host style={expoUIConfig?.hostStyle}>
         <ContextMenu>
-          <ContextMenu.Trigger>{trigger}</ContextMenu.Trigger>
+          <ContextMenu.Trigger>
+            <View className=''>
+              {trigger || <Button variant='bordered'>Show Menu</Button>}
+            </View>
+          </ContextMenu.Trigger>
           <ContextMenu.Items>
             {groups.flatMap((group, groupIndex) => {
               // Check if this group has radio options

components/PlayButton.tsx

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

components/PlaybackSpeedSelector.tsx

@@ -1,180 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
-import { useSettings } from "@/utils/atoms/settings";
-import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
-import { PlaybackSpeedScope } from "./video-player/controls/utils/playback-speed-settings";
-
-export const PLAYBACK_SPEEDS = [
-  { label: "0.25x", value: 0.25 },
-  { label: "0.5x", value: 0.5 },
-  { label: "0.75x", value: 0.75 },
-  { label: "1x", value: 1.0 },
-  { label: "1.25x", value: 1.25 },
-  { label: "1.5x", value: 1.5 },
-  { label: "1.75x", value: 1.75 },
-  { label: "2x", value: 2.0 },
-  { label: "2.25x", value: 2.25 },
-  { label: "2.5x", value: 2.5 },
-  { label: "2.75x", value: 2.75 },
-  { label: "3x", value: 3.0 },
-];
-
-interface Props extends React.ComponentProps<typeof View> {
-  onChange: (value: number, scope: PlaybackSpeedScope) => void;
-  selected: number;
-  item?: BaseItemDto;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}
-
-export const PlaybackSpeedSelector: React.FC<Props> = ({
-  onChange,
-  selected,
-  item,
-  open: controlledOpen,
-  onOpenChange,
-  ...props
-}) => {
-  const isTv = Platform.isTV;
-  const { t } = useTranslation();
-  const { settings } = useSettings();
-  const [internalOpen, setInternalOpen] = useState(false);
-
-  // Determine initial scope based on existing settings
-  const initialScope = useMemo<PlaybackSpeedScope>(() => {
-    if (!item || !settings) return PlaybackSpeedScope.All;
-
-    const itemId = item?.Id;
-    if (!itemId) return PlaybackSpeedScope.All;
-
-    // Check for media-specific speed preference
-    if (settings?.playbackSpeedPerMedia?.[itemId] !== undefined) {
-      return PlaybackSpeedScope.Media;
-    }
-
-    // Check for show-specific speed preference (only for episodes)
-    const seriesId = item?.SeriesId;
-    const perShowSettings = settings?.playbackSpeedPerShow;
-    if (
-      seriesId &&
-      perShowSettings &&
-      perShowSettings[seriesId] !== undefined
-    ) {
-      return PlaybackSpeedScope.Show;
-    }
-
-    // If no custom setting exists, check default playback speed
-    // Show "All" if speed is not 1x, otherwise show "Media"
-    return (settings?.defaultPlaybackSpeed ?? 1.0) !== 1.0
-      ? PlaybackSpeedScope.All
-      : PlaybackSpeedScope.Media;
-  }, [item?.Id, item?.SeriesId, settings]);
-
-  const [selectedScope, setSelectedScope] =
-    useState<PlaybackSpeedScope>(initialScope);
-
-  // Update selectedScope when initialScope changes
-  useEffect(() => {
-    setSelectedScope(initialScope);
-  }, [initialScope]);
-
-  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
-  const setOpen = onOpenChange || setInternalOpen;
-
-  const scopeLabels = useMemo<Record<PlaybackSpeedScope, string>>(() => {
-    const labels: Record<string, string> = {
-      [PlaybackSpeedScope.Media]: t("playback_speed.scope.media"),
-    };
-
-    if (item?.SeriesId) {
-      labels[PlaybackSpeedScope.Show] = t("playback_speed.scope.show");
-    }
-
-    labels[PlaybackSpeedScope.All] = t("playback_speed.scope.all");
-
-    return labels as Record<PlaybackSpeedScope, string>;
-  }, [item?.SeriesId, t]);
-
-  const availableScopes = useMemo<PlaybackSpeedScope[]>(() => {
-    const scopes = [PlaybackSpeedScope.Media];
-    if (item?.SeriesId) {
-      scopes.push(PlaybackSpeedScope.Show);
-    }
-    scopes.push(PlaybackSpeedScope.All);
-    return scopes;
-  }, [item?.SeriesId]);
-
-  const handleSpeedSelect = useCallback(
-    (speed: number) => {
-      onChange(speed, selectedScope);
-      setOpen(false);
-    },
-    [onChange, selectedScope, setOpen],
-  );
-
-  const optionGroups = useMemo<OptionGroup[]>(() => {
-    const groups: OptionGroup[] = [];
-
-    // Scope selection group
-    groups.push({
-      title: t("playback_speed.apply_to"),
-      options: availableScopes.map((scope) => ({
-        type: "radio" as const,
-        label: scopeLabels[scope],
-        value: scope,
-        selected: selectedScope === scope,
-        onPress: () => setSelectedScope(scope),
-      })),
-    });
-
-    // Speed selection group
-    groups.push({
-      title: t("playback_speed.speed"),
-      options: PLAYBACK_SPEEDS.map((speed) => ({
-        type: "radio" as const,
-        label: speed.label,
-        value: speed.value,
-        selected: selected === speed.value,
-        onPress: () => handleSpeedSelect(speed.value),
-      })),
-    });
-
-    return groups;
-  }, [
-    t,
-    availableScopes,
-    scopeLabels,
-    selectedScope,
-    selected,
-    handleSpeedSelect,
-  ]);
-
-  const trigger = useMemo(
-    () => (
-      <View className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'>
-        <Ionicons name='speedometer' size={24} color='white' />
-      </View>
-    ),
-    [],
-  );
-
-  if (isTv) return null;
-
-  return (
-    <View className='flex shrink' style={{ minWidth: 60 }} {...props}>
-      <PlatformDropdown
-        title={t("playback_speed.title")}
-        groups={optionGroups}
-        trigger={trigger}
-        open={open}
-        onOpenChange={setOpen}
-        bottomSheetConfig={{
-          enablePanDownToClose: true,
-        }}
-      />
-    </View>
-  );
-};

components/PlayedStatus.tsx

@@ -1,6 +1,5 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import type React from "react";
-import { useCallback } from "react";
 import { View, type ViewProps } from "react-native";
 import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import { RoundButton } from "./RoundButton";
@@ -15,16 +14,14 @@ export const PlayedStatus: React.FC<Props> = ({ items, ...props }) => {
   const allPlayed = items.every((item) => item.UserData?.Played);
   const toggle = useMarkAsPlayed(items);
 
-  const handlePress = useCallback(() => {
-    void toggle(!allPlayed);
-  }, [allPlayed, toggle]);
-
   return (
     <View {...props}>
       <RoundButton
         color={allPlayed ? "purple" : "white"}
         icon={allPlayed ? "checkmark" : "checkmark"}
-        onPress={handlePress}
+        onPress={async () => {
+          await toggle(!allPlayed);
+        }}
         size={props.size}
       />
     </View>

components/PreviousServersList.tsx

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

components/RoundButton.tsx

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

components/SaveAccountModal.tsx

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

components/SimilarItems.tsx

@@ -6,7 +6,6 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { View, type ViewProps } from "react-native";
 import MoviePoster from "@/components/posters/MoviePoster";
-import { POSTER_CAROUSEL_HEIGHT } from "@/constants/Values";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { HorizontalScroll } from "./common/HorizontalScroll";
 import { Text } from "./common/Text";
@@ -54,7 +53,7 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({
       <HorizontalScroll
         data={movies}
         loading={isLoading}
-        height={POSTER_CAROUSEL_HEIGHT}
+        height={247}
         noItemsText={t("item_card.no_similar_items_found")}
         renderItem={(item: BaseItemDto, idx: number) => (
           <TouchableItemRouter

components/apple-tv-carousel/AppleTVCarousel.tsx

@@ -282,7 +282,7 @@ export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
     if (currentItem) {
       setSelectedOptions({
         bitrate: defaultBitrate,
-        mediaSource: defaultMediaSource ?? undefined,
+        mediaSource: defaultMediaSource,
         subtitleIndex: defaultSubtitleIndex ?? -1,
         audioIndex: defaultAudioIndex,
       });

components/common/HeaderBackButton.tsx

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

components/common/HorizontalScroll.tsx

@@ -58,7 +58,7 @@ export const HorizontalScroll = <T,>(
 
   if (!data || loading) {
     return (
-      <View className='px-4'>
+      <View className='px-4 mb-2'>
         <View className='bg-neutral-950 h-24 w-full rounded-md mb-2' />
         <View className='bg-neutral-950 h-10 w-full rounded-md mb-1' />
       </View>

components/common/SectionHeader.tsx

@@ -1,42 +0,0 @@
-import { TouchableOpacity, View } from "react-native";
-import { Colors } from "@/constants/Colors";
-import { Text } from "./Text";
-
-type Props = {
-  title: string;
-  actionLabel?: string;
-  actionDisabled?: boolean;
-  onPressAction?: () => void;
-};
-
-export const SectionHeader: React.FC<Props> = ({
-  title,
-  actionLabel,
-  actionDisabled = false,
-  onPressAction,
-}) => {
-  const shouldShowAction = Boolean(actionLabel) && Boolean(onPressAction);
-
-  return (
-    <View className='px-4 flex flex-row items-center justify-between mb-2'>
-      <Text className='text-lg font-bold text-neutral-100'>{title}</Text>
-      {shouldShowAction && (
-        <TouchableOpacity
-          onPress={onPressAction}
-          disabled={actionDisabled}
-          accessibilityRole='button'
-          accessibilityLabel={actionLabel}
-          className='py-1 pl-3'
-        >
-          <Text
-            style={{
-              color: actionDisabled ? "rgba(255,255,255,0.4)" : Colors.primary,
-            }}
-          >
-            {actionLabel}
-          </Text>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};

components/common/TouchableItemRouter.tsx

@@ -16,10 +16,6 @@ export const itemRouter = (item: BaseItemDto, from: string) => {
     return `/(auth)/(tabs)/${from}/livetv`;
   }
 
-  if ("CollectionType" in item && item.CollectionType === "music") {
-    return `/(auth)/(tabs)/(libraries)/music/${item.Id}`;
-  }
-
   if (item.Type === "Series") {
     return `/(auth)/(tabs)/${from}/series/${item.Id}`;
   }
@@ -54,13 +50,6 @@ export const getItemNavigation = (item: BaseItemDto, _from: string) => {
     };
   }
 
-  if ("CollectionType" in item && item.CollectionType === "music") {
-    return {
-      pathname: "/music/[libraryId]" as const,
-      params: { libraryId: item.Id! },
-    };
-  }
-
   if (item.Type === "Series") {
     return {
       pathname: "/series/[id]" as const,
@@ -82,49 +71,13 @@ export const getItemNavigation = (item: BaseItemDto, _from: string) => {
     };
   }
 
-  if (item.Type === "CollectionFolder") {
+  if (item.Type === "CollectionFolder" || item.Type === "Playlist") {
     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,
@@ -146,25 +99,6 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
 
   const from = (segments as string[])[2] || "(home)";
 
-  const handlePress = useCallback(() => {
-    // For offline mode, we still need to use query params
-    if (isOffline) {
-      const url = `${itemRouter(item, from)}&offline=true`;
-      router.push(url as any);
-      return;
-    }
-
-    // Force music libraries to navigate via the explicit string route.
-    // This avoids losing the dynamic [libraryId] param when going through a nested navigator.
-    if ("CollectionType" in item && item.CollectionType === "music") {
-      router.push(itemRouter(item, from) as any);
-      return;
-    }
-
-    const navigation = getItemNavigation(item, from);
-    router.push(navigation as any);
-  }, [from, isOffline, item, router]);
-
   const showActionSheet = useCallback(() => {
     if (
       !(
@@ -174,14 +108,13 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
       )
     )
       return;
-
-    const options: string[] = [
+    const options = [
       "Mark as Played",
       "Mark as Not Played",
       isFavorite ? "Unmark as Favorite" : "Mark as Favorite",
       "Cancel",
     ];
-    const cancelButtonIndex = options.length - 1;
+    const cancelButtonIndex = 3;
 
     showActionSheetWithOptions(
       {
@@ -198,24 +131,28 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
         }
       },
     );
-  }, [
-    showActionSheetWithOptions,
-    isFavorite,
-    markAsPlayedStatus,
-    toggleFavorite,
-  ]);
+  }, [showActionSheetWithOptions, isFavorite, markAsPlayedStatus]);
 
   if (
     from === "(home)" ||
     from === "(search)" ||
     from === "(libraries)" ||
-    from === "(favorites)" ||
-    from === "(watchlists)"
+    from === "(favorites)"
   )
     return (
       <TouchableOpacity
         onLongPress={showActionSheet}
-        onPress={handlePress}
+        onPress={() => {
+          if (isOffline) {
+            // For offline mode, we still need to use query params
+            const url = `${itemRouter(item, from)}&offline=true`;
+            router.push(url as any);
+            return;
+          }
+
+          const navigation = getItemNavigation(item, from);
+          router.push(navigation as any);
+        }}
         {...props}
       >
         {children}

components/downloads/DownloadCard.tsx

@@ -1,4 +1,5 @@
 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";
@@ -11,7 +12,6 @@ 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 = useNetworkAwareQueryClient();
+  const queryClient = useQueryClient();
 
   const handleDelete = async (id: string) => {
     try {

components/filters/ResetFiltersButton.tsx

@@ -2,7 +2,6 @@ import { Ionicons } from "@expo/vector-icons";
 import { useAtom } from "jotai";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
 import {
-  filterByAtom,
   genreFilterAtom,
   tagsFilterAtom,
   yearFilterAtom,
@@ -14,13 +13,11 @@ export const ResetFiltersButton: React.FC<Props> = ({ ...props }) => {
   const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
   const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
   const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
-  const [selectedFilters, setSelectedFilters] = useAtom(filterByAtom);
 
   if (
     selectedGenres.length === 0 &&
     selectedTags.length === 0 &&
-    selectedYears.length === 0 &&
-    selectedFilters.length === 0
+    selectedYears.length === 0
   ) {
     return null;
   }
@@ -31,7 +28,6 @@ export const ResetFiltersButton: React.FC<Props> = ({ ...props }) => {
         setSelectedGenres([]);
         setSelectedTags([]);
         setSelectedYears([]);
-        setSelectedFilters([]);
       }}
       className='bg-purple-600 rounded-full w-[30px] h-[30px] flex items-center justify-center mr-1'
       {...props}

components/home/Favorites.tsx

@@ -2,7 +2,6 @@ import type { Api } from "@jellyfin/sdk";
 import type { BaseItemKind } from "@jellyfin/sdk/lib/generated-client";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useState } from "react";
@@ -23,10 +22,8 @@ type FavoriteTypes =
 type EmptyState = Record<FavoriteTypes, boolean>;
 
 export const Favorites = () => {
-  const router = useRouter();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const pageSize = 20;
   const [emptyState, setEmptyState] = useState<EmptyState>({
     Series: false,
     Movie: false,
@@ -94,77 +91,35 @@ export const Favorites = () => {
 
   const fetchFavoriteSeries = useCallback(
     ({ pageParam }: { pageParam: number }) =>
-      fetchFavoritesByType("Series", pageParam, pageSize),
-    [fetchFavoritesByType, pageSize],
+      fetchFavoritesByType("Series", pageParam),
+    [fetchFavoritesByType],
   );
   const fetchFavoriteMovies = useCallback(
     ({ pageParam }: { pageParam: number }) =>
-      fetchFavoritesByType("Movie", pageParam, pageSize),
-    [fetchFavoritesByType, pageSize],
+      fetchFavoritesByType("Movie", pageParam),
+    [fetchFavoritesByType],
   );
   const fetchFavoriteEpisodes = useCallback(
     ({ pageParam }: { pageParam: number }) =>
-      fetchFavoritesByType("Episode", pageParam, pageSize),
-    [fetchFavoritesByType, pageSize],
+      fetchFavoritesByType("Episode", pageParam),
+    [fetchFavoritesByType],
   );
   const fetchFavoriteVideos = useCallback(
     ({ pageParam }: { pageParam: number }) =>
-      fetchFavoritesByType("Video", pageParam, pageSize),
-    [fetchFavoritesByType, pageSize],
+      fetchFavoritesByType("Video", pageParam),
+    [fetchFavoritesByType],
   );
   const fetchFavoriteBoxsets = useCallback(
     ({ pageParam }: { pageParam: number }) =>
-      fetchFavoritesByType("BoxSet", pageParam, pageSize),
-    [fetchFavoritesByType, pageSize],
+      fetchFavoritesByType("BoxSet", pageParam),
+    [fetchFavoritesByType],
   );
   const fetchFavoritePlaylists = useCallback(
     ({ pageParam }: { pageParam: number }) =>
-      fetchFavoritesByType("Playlist", pageParam, pageSize),
-    [fetchFavoritesByType, pageSize],
+      fetchFavoritesByType("Playlist", pageParam),
+    [fetchFavoritesByType],
   );
 
-  const handleSeeAllSeries = useCallback(() => {
-    router.push({
-      pathname: "/(auth)/(tabs)/(favorites)/see-all",
-      params: { type: "Series", title: t("favorites.series") },
-    } as any);
-  }, [router]);
-
-  const handleSeeAllMovies = useCallback(() => {
-    router.push({
-      pathname: "/(auth)/(tabs)/(favorites)/see-all",
-      params: { type: "Movie", title: t("favorites.movies") },
-    } as any);
-  }, [router]);
-
-  const handleSeeAllEpisodes = useCallback(() => {
-    router.push({
-      pathname: "/(auth)/(tabs)/(favorites)/see-all",
-      params: { type: "Episode", title: t("favorites.episodes") },
-    } as any);
-  }, [router]);
-
-  const handleSeeAllVideos = useCallback(() => {
-    router.push({
-      pathname: "/(auth)/(tabs)/(favorites)/see-all",
-      params: { type: "Video", title: t("favorites.videos") },
-    } as any);
-  }, [router]);
-
-  const handleSeeAllBoxsets = useCallback(() => {
-    router.push({
-      pathname: "/(auth)/(tabs)/(favorites)/see-all",
-      params: { type: "BoxSet", title: t("favorites.boxsets") },
-    } as any);
-  }, [router]);
-
-  const handleSeeAllPlaylists = useCallback(() => {
-    router.push({
-      pathname: "/(auth)/(tabs)/(favorites)/see-all",
-      params: { type: "Playlist", title: t("favorites.playlists") },
-    } as any);
-  }, [router]);
-
   return (
     <View className='flex flex-co gap-y-4'>
       {areAllEmpty() && (
@@ -188,8 +143,6 @@ export const Favorites = () => {
         queryKey={["home", "favorites", "series"]}
         title={t("favorites.series")}
         hideIfEmpty
-        pageSize={pageSize}
-        onPressSeeAll={handleSeeAllSeries}
       />
       <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteMovies}
@@ -197,40 +150,30 @@ export const Favorites = () => {
         title={t("favorites.movies")}
         hideIfEmpty
         orientation='vertical'
-        pageSize={pageSize}
-        onPressSeeAll={handleSeeAllMovies}
       />
       <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteEpisodes}
         queryKey={["home", "favorites", "episodes"]}
         title={t("favorites.episodes")}
         hideIfEmpty
-        pageSize={pageSize}
-        onPressSeeAll={handleSeeAllEpisodes}
       />
       <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteVideos}
         queryKey={["home", "favorites", "videos"]}
         title={t("favorites.videos")}
         hideIfEmpty
-        pageSize={pageSize}
-        onPressSeeAll={handleSeeAllVideos}
       />
       <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteBoxsets}
         queryKey={["home", "favorites", "boxsets"]}
         title={t("favorites.boxsets")}
         hideIfEmpty
-        pageSize={pageSize}
-        onPressSeeAll={handleSeeAllBoxsets}
       />
       <InfiniteScrollingCollectionList
         queryFn={fetchFavoritePlaylists}
         queryKey={["home", "favorites", "playlists"]}
         title={t("favorites.playlists")}
         hideIfEmpty
-        pageSize={pageSize}
-        onPressSeeAll={handleSeeAllPlaylists}
       />
     </View>
   );

components/home/Home.tsx

@@ -21,27 +21,22 @@ 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";
 import { InfiniteScrollingCollectionList } from "@/components/home/InfiniteScrollingCollectionList";
-import { StreamystatsPromotedWatchlists } from "@/components/home/StreamystatsPromotedWatchlists";
-import { StreamystatsRecommendations } from "@/components/home/StreamystatsRecommendations";
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
 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";
@@ -50,15 +45,12 @@ type InfiniteScrollingCollectionListSection = {
   queryFn: QueryFunction<BaseItemDto[], any, number>;
   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 = {
   type: "MediaListSection";
   queryKey: (string | undefined)[];
   queryFn: QueryFunction<BaseItemDto>;
-  priority?: 1 | 2;
 };
 
 type Section = InfiniteScrollingCollectionListSection | MediaListSectionType;
@@ -82,22 +74,7 @@ export const Home = () => {
     retryCheck,
   } = 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]);
+  const [scrollY, setScrollY] = useState(0);
 
   useEffect(() => {
     if (isConnected && !prevIsConnected.current) {
@@ -120,7 +97,7 @@ export const Home = () => {
     }
     navigation.setOptions({
       headerLeft: () => (
-        <Pressable
+        <TouchableOpacity
           onPress={() => {
             router.push("/(auth)/downloads");
           }}
@@ -132,7 +109,7 @@ export const Home = () => {
             color={hasDownloads ? Colors.primary : "white"}
             size={24}
           />
-        </Pressable>
+        </TouchableOpacity>
       ),
     });
   }, [navigation, router, hasDownloads]);
@@ -195,7 +172,6 @@ export const Home = () => {
 
   const refetch = async () => {
     setLoading(true);
-    setLoadedSections(new Set());
     await refreshStreamyfinPluginSettings();
     await invalidateCache();
     setLoading(false);
@@ -218,10 +194,10 @@ export const Home = () => {
           (
             await getUserLibraryApi(api).getLatestMedia({
               userId: user?.Id,
-              limit: 10,
-              fields: ["PrimaryImageAspectRatio"],
+              limit: 100, // Fetch a larger set for pagination
+              fields: ["PrimaryImageAspectRatio", "Path", "Genres"],
               imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               includeItemTypes,
               parentId,
             })
@@ -232,7 +208,6 @@ export const Home = () => {
       },
       type: "InfiniteScrollingCollectionList",
       pageSize,
-      parentId,
     }),
     [api, user?.Id],
   );
@@ -261,143 +236,64 @@ export const Home = () => {
       );
     });
 
-    // Helper to sort items by most recent activity
-    const sortByRecentActivity = (items: BaseItemDto[]): BaseItemDto[] => {
-      return items.sort((a, b) => {
-        const dateA = a.UserData?.LastPlayedDate || a.DateCreated || "";
-        const dateB = b.UserData?.LastPlayedDate || b.DateCreated || "";
-        return new Date(dateB).getTime() - new Date(dateA).getTime();
-      });
-    };
-
-    // Helper to deduplicate items by ID
-    const deduplicateById = (items: BaseItemDto[]): BaseItemDto[] => {
-      const seen = new Set<string>();
-      return items.filter((item) => {
-        if (!item.Id || seen.has(item.Id)) return false;
-        seen.add(item.Id);
-        return true;
-      });
-    };
-
-    // Build the first sections based on merge setting
-    const firstSections: Section[] = settings.mergeNextUpAndContinueWatching
-      ? [
-          {
-            title: t("home.continue_and_next_up"),
-            queryKey: ["home", "continueAndNextUp"],
-            queryFn: async ({ pageParam = 0 }) => {
-              // Fetch both in parallel
-              const [resumeResponse, nextUpResponse] = await Promise.all([
-                getItemsApi(api).getResumeItems({
-                  userId: user.Id,
-                  enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                  includeItemTypes: ["Movie", "Series", "Episode"],
-                  startIndex: 0,
-                  limit: 20,
-                }),
-                getTvShowsApi(api).getNextUp({
-                  userId: user?.Id,
-                  startIndex: 0,
-                  limit: 20,
-                  enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                  enableResumable: false,
-                }),
-              ]);
-
-              const resumeItems = resumeResponse.data.Items || [];
-              const nextUpItems = nextUpResponse.data.Items || [];
-
-              // Combine, sort by recent activity, deduplicate
-              const combined = [...resumeItems, ...nextUpItems];
-              const sorted = sortByRecentActivity(combined);
-              const deduplicated = deduplicateById(sorted);
-
-              // Paginate client-side
-              return deduplicated.slice(pageParam, pageParam + 10);
-            },
-            type: "InfiniteScrollingCollectionList",
-            orientation: "horizontal",
-            pageSize: 10,
-            priority: 1,
-          },
-        ]
-      : [
-          {
-            title: t("home.continue_watching"),
-            queryKey: ["home", "resumeItems"],
-            queryFn: async ({ pageParam = 0 }) =>
-              (
-                await getItemsApi(api).getResumeItems({
-                  userId: user.Id,
-                  enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                  includeItemTypes: ["Movie", "Series", "Episode"],
-                  startIndex: pageParam,
-                  limit: 10,
-                })
-              ).data.Items || [],
-            type: "InfiniteScrollingCollectionList",
-            orientation: "horizontal",
-            pageSize: 10,
-            priority: 1,
-          },
-          {
-            title: t("home.next_up"),
-            queryKey: ["home", "nextUp-all"],
-            queryFn: async ({ pageParam = 0 }) =>
-              (
-                await getTvShowsApi(api).getNextUp({
-                  userId: user?.Id,
-                  startIndex: pageParam,
-                  limit: 10,
-                  enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                  enableResumable: false,
-                })
-              ).data.Items || [],
-            type: "InfiniteScrollingCollectionList",
-            orientation: "horizontal",
-            pageSize: 10,
-            priority: 1,
-          },
-        ];
-
     const ss: Section[] = [
-      ...firstSections,
-      ...latestMediaViews.map((s) => ({ ...s, priority: 2 as const })),
-      // Only show Jellyfin suggested movies if StreamyStats recommendations are disabled
-      ...(!settings?.streamyStatsMovieRecommendations
-        ? [
-            {
-              title: t("home.suggested_movies"),
-              queryKey: ["home", "suggestedMovies", user?.Id],
-              queryFn: async ({ pageParam = 0 }: { pageParam?: number }) =>
-                (
-                  await getSuggestionsApi(api).getSuggestions({
-                    userId: user?.Id,
-                    startIndex: pageParam,
-                    limit: 10,
-                    mediaType: ["Video"],
-                    type: ["Movie"],
-                  })
-                ).data.Items || [],
-              type: "InfiniteScrollingCollectionList" as const,
-              orientation: "vertical" as const,
-              pageSize: 10,
-              priority: 2 as const,
-            },
-          ]
-        : []),
+      {
+        title: t("home.continue_watching"),
+        queryKey: ["home", "resumeItems"],
+        queryFn: async ({ pageParam = 0 }) =>
+          (
+            await getItemsApi(api).getResumeItems({
+              userId: user.Id,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
+              includeItemTypes: ["Movie", "Series", "Episode"],
+              fields: ["Genres"],
+              startIndex: pageParam,
+              limit: 10,
+            })
+          ).data.Items || [],
+        type: "InfiniteScrollingCollectionList",
+        orientation: "horizontal",
+        pageSize: 10,
+      },
+      {
+        title: t("home.next_up"),
+        queryKey: ["home", "nextUp-all"],
+        queryFn: async ({ pageParam = 0 }) =>
+          (
+            await getTvShowsApi(api).getNextUp({
+              userId: user?.Id,
+              fields: ["MediaSourceCount", "Genres"],
+              startIndex: pageParam,
+              limit: 10,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
+              enableResumable: false,
+            })
+          ).data.Items || [],
+        type: "InfiniteScrollingCollectionList",
+        orientation: "horizontal",
+        pageSize: 10,
+      },
+      ...latestMediaViews,
+      {
+        title: t("home.suggested_movies"),
+        queryKey: ["home", "suggestedMovies", user?.Id],
+        queryFn: async ({ pageParam = 0 }) =>
+          (
+            await getSuggestionsApi(api).getSuggestions({
+              userId: user?.Id,
+              startIndex: pageParam,
+              limit: 10,
+              mediaType: ["Video"],
+              type: ["Movie"],
+            })
+          ).data.Items || [],
+        type: "InfiniteScrollingCollectionList",
+        orientation: "vertical",
+        pageSize: 10,
+      },
     ];
     return ss;
-  }, [
-    api,
-    user?.Id,
-    collections,
-    t,
-    createCollectionConfig,
-    settings?.streamyStatsMovieRecommendations,
-    settings.mergeNextUpAndContinueWatching,
-  ]);
+  }, [api, user?.Id, collections, t, createCollectionConfig]);
 
   const customSections = useMemo(() => {
     if (!api || !user?.Id || !settings?.home?.sections) return [];
@@ -426,9 +322,10 @@ export const Home = () => {
           if (section.nextUp) {
             const response = await getTvShowsApi(api).getNextUp({
               userId: user?.Id,
+              fields: ["MediaSourceCount", "Genres"],
               startIndex: pageParam,
               limit: section.nextUp?.limit || pageSize,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               enableResumable: section.nextUp?.enableResumable,
               enableRewatching: section.nextUp?.enableRewatching,
             });
@@ -441,7 +338,7 @@ export const Home = () => {
                 await getUserLibraryApi(api).getLatestMedia({
                   userId: user?.Id,
                   includeItemTypes: section.latest?.includeItemTypes,
-                  limit: section.latest?.limit || 10,
+                  limit: section.latest?.limit || 100, // Fetch larger set
                   isPlayed: section.latest?.isPlayed,
                   groupItems: section.latest?.groupItems,
                 })
@@ -470,8 +367,6 @@ export const Home = () => {
         type: "InfiniteScrollingCollectionList",
         orientation: section?.orientation || "vertical",
         pageSize,
-        // First 2 custom sections are high priority
-        priority: index < 2 ? 1 : 2,
       });
     });
     return ss;
@@ -479,25 +374,6 @@ export const Home = () => {
 
   const sections = settings?.home?.sections ? customSections : defaultSections;
 
-  // Get all high priority section keys and check if all have loaded
-  const highPrioritySectionKeys = useMemo(() => {
-    return sections
-      .filter((s) => s.priority === 1)
-      .map((s) => s.queryKey.join("-"));
-  }, [sections]);
-
-  const allHighPriorityLoaded = useMemo(() => {
-    return highPrioritySectionKeys.every((key) => loadedSections.has(key));
-  }, [highPrioritySectionKeys, loadedSections]);
-
-  const markSectionLoaded = useCallback(
-    (queryKey: (string | undefined | null)[]) => {
-      const key = queryKey.join("-");
-      setLoadedSections((prev) => new Set(prev).add(key));
-    },
-    [],
-  );
-
   if (!isConnected || serverConnected !== true) {
     let title = "";
     let subtitle = "";
@@ -575,6 +451,10 @@ export const Home = () => {
       ref={scrollRef}
       nestedScrollEnabled
       contentInsetAdjustmentBehavior='automatic'
+      onScroll={(event) => {
+        setScrollY(event.nativeEvent.contentOffset.y - 500);
+      }}
+      scrollEventThrottle={16}
       refreshControl={
         <RefreshControl
           refreshing={loading}
@@ -594,90 +474,28 @@ export const Home = () => {
         style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
       >
         {sections.map((section, index) => {
-          // Render Streamystats sections after Continue Watching and Next Up
-          // When merged, they appear after index 0; otherwise after index 1
-          const streamystatsIndex = settings.mergeNextUpAndContinueWatching
-            ? 0
-            : 1;
-          const hasStreamystatsContent =
-            settings.streamyStatsMovieRecommendations ||
-            settings.streamyStatsSeriesRecommendations ||
-            settings.streamyStatsPromotedWatchlists;
-          const streamystatsSections =
-            index === streamystatsIndex && hasStreamystatsContent ? (
-              <View
-                key='streamystats-sections'
-                className='flex flex-col space-y-4'
-              >
-                {settings.streamyStatsMovieRecommendations && (
-                  <StreamystatsRecommendations
-                    title={t(
-                      "home.settings.plugins.streamystats.recommended_movies",
-                    )}
-                    type='Movie'
-                    enabled={allHighPriorityLoaded}
-                  />
-                )}
-                {settings.streamyStatsSeriesRecommendations && (
-                  <StreamystatsRecommendations
-                    title={t(
-                      "home.settings.plugins.streamystats.recommended_series",
-                    )}
-                    type='Series'
-                    enabled={allHighPriorityLoaded}
-                  />
-                )}
-                {settings.streamyStatsPromotedWatchlists && (
-                  <StreamystatsPromotedWatchlists
-                    enabled={allHighPriorityLoaded}
-                  />
-                )}
-              </View>
-            ) : 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
-                  title={section.title}
-                  queryKey={section.queryKey}
-                  queryFn={section.queryFn}
-                  orientation={section.orientation}
-                  hideIfEmpty
-                  pageSize={section.pageSize}
-                  enabled={isHighPriority || allHighPriorityLoaded}
-                  onLoaded={
-                    isHighPriority
-                      ? () => markSectionLoaded(section.queryKey)
-                      : undefined
-                  }
-                  onPressSeeAll={handleSeeAll}
-                />
-                {streamystatsSections}
-              </View>
+              <InfiniteScrollingCollectionList
+                key={index}
+                title={section.title}
+                queryKey={section.queryKey}
+                queryFn={section.queryFn}
+                orientation={section.orientation}
+                hideIfEmpty
+                pageSize={section.pageSize}
+              />
             );
           }
           if (section.type === "MediaListSection") {
             return (
-              <View key={index} className='flex flex-col space-y-4'>
-                <MediaListSection
-                  queryKey={section.queryKey}
-                  queryFn={section.queryFn}
-                />
-                {streamystatsSections}
-              </View>
+              <MediaListSection
+                key={index}
+                queryKey={section.queryKey}
+                queryFn={section.queryFn}
+                scrollY={scrollY}
+                enableLazyLoading={true}
+              />
             );
           }
           return null;

components/home/HomeWithCarousel.tsx

@@ -30,8 +30,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { InfiniteScrollingCollectionList } from "@/components/home/InfiniteScrollingCollectionList";
-import { StreamystatsPromotedWatchlists } from "@/components/home/StreamystatsPromotedWatchlists";
-import { StreamystatsRecommendations } from "@/components/home/StreamystatsRecommendations";
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { Colors } from "@/constants/Colors";
@@ -243,143 +241,64 @@ export const HomeWithCarousel = () => {
       );
     });
 
-    // Helper to sort items by most recent activity
-    const sortByRecentActivity = (items: BaseItemDto[]): BaseItemDto[] => {
-      return items.sort((a, b) => {
-        const dateA = a.UserData?.LastPlayedDate || a.DateCreated || "";
-        const dateB = b.UserData?.LastPlayedDate || b.DateCreated || "";
-        return new Date(dateB).getTime() - new Date(dateA).getTime();
-      });
-    };
-
-    // Helper to deduplicate items by ID
-    const deduplicateById = (items: BaseItemDto[]): BaseItemDto[] => {
-      const seen = new Set<string>();
-      return items.filter((item) => {
-        if (!item.Id || seen.has(item.Id)) return false;
-        seen.add(item.Id);
-        return true;
-      });
-    };
-
-    // Build the first sections based on merge setting
-    const firstSections: Section[] = settings.mergeNextUpAndContinueWatching
-      ? [
-          {
-            title: t("home.continue_and_next_up"),
-            queryKey: ["home", "continueAndNextUp"],
-            queryFn: async ({ pageParam = 0 }) => {
-              // Fetch both in parallel
-              const [resumeResponse, nextUpResponse] = await Promise.all([
-                getItemsApi(api).getResumeItems({
-                  userId: user.Id,
-                  enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
-                  includeItemTypes: ["Movie", "Series", "Episode"],
-                  fields: ["Genres"],
-                  startIndex: 0,
-                  limit: 20,
-                }),
-                getTvShowsApi(api).getNextUp({
-                  userId: user?.Id,
-                  fields: ["MediaSourceCount", "Genres"],
-                  startIndex: 0,
-                  limit: 20,
-                  enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
-                  enableResumable: false,
-                }),
-              ]);
-
-              const resumeItems = resumeResponse.data.Items || [];
-              const nextUpItems = nextUpResponse.data.Items || [];
-
-              // Combine, sort by recent activity, deduplicate
-              const combined = [...resumeItems, ...nextUpItems];
-              const sorted = sortByRecentActivity(combined);
-              const deduplicated = deduplicateById(sorted);
-
-              // Paginate client-side
-              return deduplicated.slice(pageParam, pageParam + 10);
-            },
-            type: "InfiniteScrollingCollectionList",
-            orientation: "horizontal",
-            pageSize: 10,
-          },
-        ]
-      : [
-          {
-            title: t("home.continue_watching"),
-            queryKey: ["home", "resumeItems"],
-            queryFn: async ({ pageParam = 0 }) =>
-              (
-                await getItemsApi(api).getResumeItems({
-                  userId: user.Id,
-                  enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
-                  includeItemTypes: ["Movie", "Series", "Episode"],
-                  fields: ["Genres"],
-                  startIndex: pageParam,
-                  limit: 10,
-                })
-              ).data.Items || [],
-            type: "InfiniteScrollingCollectionList",
-            orientation: "horizontal",
-            pageSize: 10,
-          },
-          {
-            title: t("home.next_up"),
-            queryKey: ["home", "nextUp-all"],
-            queryFn: async ({ pageParam = 0 }) =>
-              (
-                await getTvShowsApi(api).getNextUp({
-                  userId: user?.Id,
-                  fields: ["MediaSourceCount", "Genres"],
-                  startIndex: pageParam,
-                  limit: 10,
-                  enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
-                  enableResumable: false,
-                })
-              ).data.Items || [],
-            type: "InfiniteScrollingCollectionList",
-            orientation: "horizontal",
-            pageSize: 10,
-          },
-        ];
-
     const ss: Section[] = [
-      ...firstSections,
+      {
+        title: t("home.continue_watching"),
+        queryKey: ["home", "resumeItems"],
+        queryFn: async ({ pageParam = 0 }) =>
+          (
+            await getItemsApi(api).getResumeItems({
+              userId: user.Id,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
+              includeItemTypes: ["Movie", "Series", "Episode"],
+              fields: ["Genres"],
+              startIndex: pageParam,
+              limit: 10,
+            })
+          ).data.Items || [],
+        type: "InfiniteScrollingCollectionList",
+        orientation: "horizontal",
+        pageSize: 10,
+      },
+      {
+        title: t("home.next_up"),
+        queryKey: ["home", "nextUp-all"],
+        queryFn: async ({ pageParam = 0 }) =>
+          (
+            await getTvShowsApi(api).getNextUp({
+              userId: user?.Id,
+              fields: ["MediaSourceCount", "Genres"],
+              startIndex: pageParam,
+              limit: 10,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
+              enableResumable: false,
+            })
+          ).data.Items || [],
+        type: "InfiniteScrollingCollectionList",
+        orientation: "horizontal",
+        pageSize: 10,
+      },
       ...latestMediaViews,
-      // Only show Jellyfin suggested movies if StreamyStats recommendations are disabled
-      ...(!settings?.streamyStatsMovieRecommendations
-        ? [
-            {
-              title: t("home.suggested_movies"),
-              queryKey: ["home", "suggestedMovies", user?.Id],
-              queryFn: async ({ pageParam = 0 }: { pageParam?: number }) =>
-                (
-                  await getSuggestionsApi(api).getSuggestions({
-                    userId: user?.Id,
-                    startIndex: pageParam,
-                    limit: 10,
-                    mediaType: ["Video"],
-                    type: ["Movie"],
-                  })
-                ).data.Items || [],
-              type: "InfiniteScrollingCollectionList" as const,
-              orientation: "vertical" as const,
-              pageSize: 10,
-            },
-          ]
-        : []),
+      {
+        title: t("home.suggested_movies"),
+        queryKey: ["home", "suggestedMovies", user?.Id],
+        queryFn: async ({ pageParam = 0 }) =>
+          (
+            await getSuggestionsApi(api).getSuggestions({
+              userId: user?.Id,
+              startIndex: pageParam,
+              limit: 10,
+              mediaType: ["Video"],
+              type: ["Movie"],
+            })
+          ).data.Items || [],
+        type: "InfiniteScrollingCollectionList",
+        orientation: "vertical",
+        pageSize: 10,
+      },
     ];
     return ss;
-  }, [
-    api,
-    user?.Id,
-    collections,
-    t,
-    createCollectionConfig,
-    settings?.streamyStatsMovieRecommendations,
-    settings.mergeNextUpAndContinueWatching,
-  ]);
+  }, [api, user?.Id, collections, t, createCollectionConfig]);
 
   const customSections = useMemo(() => {
     if (!api || !user?.Id || !settings?.home?.sections) return [];
@@ -558,66 +477,28 @@ export const HomeWithCarousel = () => {
       >
         <View className='flex flex-col space-y-4'>
           {sections.map((section, index) => {
-            // Render Streamystats sections after Continue Watching and Next Up
-            // When merged, they appear after index 0; otherwise after index 1
-            const streamystatsIndex = settings.mergeNextUpAndContinueWatching
-              ? 0
-              : 1;
-            const hasStreamystatsContent =
-              settings.streamyStatsMovieRecommendations ||
-              settings.streamyStatsSeriesRecommendations ||
-              settings.streamyStatsPromotedWatchlists;
-            const streamystatsSections =
-              index === streamystatsIndex && hasStreamystatsContent ? (
-                <>
-                  {settings.streamyStatsMovieRecommendations && (
-                    <StreamystatsRecommendations
-                      title={t(
-                        "home.settings.plugins.streamystats.recommended_movies",
-                      )}
-                      type='Movie'
-                    />
-                  )}
-                  {settings.streamyStatsSeriesRecommendations && (
-                    <StreamystatsRecommendations
-                      title={t(
-                        "home.settings.plugins.streamystats.recommended_series",
-                      )}
-                      type='Series'
-                    />
-                  )}
-                  {settings.streamyStatsPromotedWatchlists && (
-                    <StreamystatsPromotedWatchlists />
-                  )}
-                </>
-              ) : null;
-
             if (section.type === "InfiniteScrollingCollectionList") {
               return (
-                <View key={index} className='flex flex-col space-y-4'>
-                  <InfiniteScrollingCollectionList
-                    title={section.title}
-                    queryKey={section.queryKey}
-                    queryFn={section.queryFn}
-                    orientation={section.orientation}
-                    hideIfEmpty
-                    pageSize={section.pageSize}
-                  />
-                  {streamystatsSections}
-                </View>
+                <InfiniteScrollingCollectionList
+                  key={index}
+                  title={section.title}
+                  queryKey={section.queryKey}
+                  queryFn={section.queryFn}
+                  orientation={section.orientation}
+                  hideIfEmpty
+                  pageSize={section.pageSize}
+                />
               );
             }
             if (section.type === "MediaListSection") {
               return (
-                <View key={index} className='flex flex-col space-y-4'>
-                  <MediaListSection
-                    queryKey={section.queryKey}
-                    queryFn={section.queryFn}
-                    scrollY={scrollY}
-                    enableLazyLoading={true}
-                  />
-                  {streamystatsSections}
-                </View>
+                <MediaListSection
+                  key={index}
+                  queryKey={section.queryKey}
+                  queryFn={section.queryFn}
+                  scrollY={scrollY}
+                  enableLazyLoading={true}
+                />
               );
             }
             return null;

components/home/InfiniteScrollingCollectionList.tsx

@@ -4,7 +4,7 @@ import {
   type QueryKey,
   useInfiniteQuery,
 } from "@tanstack/react-query";
-import { useEffect, useMemo, useRef } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
@@ -12,7 +12,6 @@ import {
   View,
   type ViewProps,
 } from "react-native";
-import { SectionHeader } from "@/components/common/SectionHeader";
 import { Text } from "@/components/common/Text";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { Colors } from "../../constants/Colors";
@@ -29,9 +28,6 @@ interface Props extends ViewProps {
   queryFn: QueryFunction<BaseItemDto[], QueryKey, number>;
   hideIfEmpty?: boolean;
   pageSize?: number;
-  onPressSeeAll?: () => void;
-  enabled?: boolean;
-  onLoaded?: () => void;
 }
 
 export const InfiniteScrollingCollectionList: React.FC<Props> = ({
@@ -42,67 +38,32 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
   queryKey,
   hideIfEmpty = false,
   pageSize = 10,
-  onPressSeeAll,
-  enabled = true,
-  onLoaded,
   ...props
 }) => {
-  const effectivePageSize = Math.max(1, pageSize);
-  const hasCalledOnLoaded = useRef(false);
-  const {
-    data,
-    isLoading,
-    isFetchingNextPage,
-    hasNextPage,
-    fetchNextPage,
-    isSuccess,
-  } = useInfiniteQuery({
-    queryKey: queryKey,
-    queryFn: ({ pageParam = 0, ...context }) =>
-      queryFn({ ...context, queryKey, pageParam }),
-    getNextPageParam: (lastPage, allPages) => {
-      // If the last page has fewer items than pageSize, we've reached the end
-      if (lastPage.length < effectivePageSize) {
-        return undefined;
-      }
-      // Otherwise, return the next start index based on how many items we already loaded.
-      // This avoids overlaps if the server/page size differs from our configured page size.
-      return allPages.reduce((acc, page) => acc + page.length, 0);
-    },
-    initialPageParam: 0,
-    staleTime: 60 * 1000, // 1 minute
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: true,
-    enabled,
-  });
-
-  // Notify parent when data has loaded
-  useEffect(() => {
-    if (isSuccess && !hasCalledOnLoaded.current && onLoaded) {
-      hasCalledOnLoaded.current = true;
-      onLoaded();
-    }
-  }, [isSuccess, onLoaded]);
+  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: queryKey,
+      queryFn: ({ pageParam = 0, ...context }) =>
+        queryFn({ ...context, queryKey, pageParam }),
+      getNextPageParam: (lastPage, allPages) => {
+        // If the last page has fewer items than pageSize, we've reached the end
+        if (lastPage.length < pageSize) {
+          return undefined;
+        }
+        // Otherwise, return the next start index
+        return allPages.length * pageSize;
+      },
+      initialPageParam: 0,
+      staleTime: 60 * 1000, // 1 minute
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: true,
+    });
 
   const { t } = useTranslation();
 
-  // Flatten all pages into a single array (and de-dupe by Id to avoid UI duplicates)
-  const allItems = useMemo(() => {
-    const items = data?.pages.flat() ?? [];
-    const seen = new Set<string>();
-    const deduped: BaseItemDto[] = [];
-
-    for (const item of items) {
-      const id = item.Id;
-      if (!id) continue;
-      if (seen.has(id)) continue;
-      seen.add(id);
-      deduped.push(item);
-    }
-
-    return deduped;
-  }, [data]);
+  // Flatten all pages into a single array
+  const allItems = data?.pages.flat() || [];
 
   const snapOffsets = useMemo(() => {
     const itemWidth = orientation === "horizontal" ? 184 : 120; // w-44 (176px) + mr-2 (8px) or w-28 (112px) + mr-2 (8px)
@@ -129,12 +90,9 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
 
   return (
     <View {...props}>
-      <SectionHeader
-        title={title}
-        actionLabel={t("common.seeAll", { defaultValue: "See all" })}
-        actionDisabled={isLoading}
-        onPressAction={onPressSeeAll}
-      />
+      <Text className='px-4 text-lg font-bold mb-2 text-neutral-100'>
+        {title}
+      </Text>
       {isLoading === false && allItems.length === 0 && (
         <View className='px-4'>
           <Text className='text-neutral-500'>{t("home.no_items")}</Text>
@@ -178,11 +136,11 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
           decelerationRate='fast'
         >
           <View className='px-4 flex flex-row'>
-            {allItems.map((item, index) => (
+            {allItems.map((item) => (
               <TouchableItemRouter
                 item={item}
-                key={`${item.Id}-${index}`}
-                className={`mr-2
+                key={item.Id}
+                className={`mr-2 
                   ${orientation === "horizontal" ? "w-44" : "w-28"}
                 `}
               >

components/home/StreamystatsPromotedWatchlists.tsx

@@ -1,245 +0,0 @@
-import type {
-  BaseItemDto,
-  PublicSystemInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { getItemsApi, getSystemApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { useAtomValue } from "jotai";
-import { useMemo } from "react";
-import { ScrollView, View, type ViewProps } from "react-native";
-import { SectionHeader } from "@/components/common/SectionHeader";
-import { Text } from "@/components/common/Text";
-import MoviePoster from "@/components/posters/MoviePoster";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { createStreamystatsApi } from "@/utils/streamystats/api";
-import type { StreamystatsWatchlist } from "@/utils/streamystats/types";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import { ItemCardText } from "../ItemCardText";
-import SeriesPoster from "../posters/SeriesPoster";
-
-const ITEM_WIDTH = 120; // w-28 (112px) + mr-2 (8px)
-
-interface WatchlistSectionProps extends ViewProps {
-  watchlist: StreamystatsWatchlist;
-  jellyfinServerId: string;
-}
-
-const WatchlistSection: React.FC<WatchlistSectionProps> = ({
-  watchlist,
-  jellyfinServerId,
-  ...props
-}) => {
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-  const { settings } = useSettings();
-
-  const { data: items, isLoading } = useQuery({
-    queryKey: [
-      "streamystats",
-      "watchlist",
-      watchlist.id,
-      jellyfinServerId,
-      settings?.streamyStatsServerUrl,
-    ],
-    queryFn: async (): Promise<BaseItemDto[]> => {
-      if (!settings?.streamyStatsServerUrl || !api?.accessToken || !user?.Id) {
-        return [];
-      }
-
-      const streamystatsApi = createStreamystatsApi({
-        serverUrl: settings.streamyStatsServerUrl,
-        jellyfinToken: api.accessToken,
-      });
-
-      const watchlistDetail = await streamystatsApi.getWatchlistItemIds({
-        watchlistId: watchlist.id,
-        jellyfinServerId,
-      });
-
-      const itemIds = watchlistDetail.data?.items;
-      if (!itemIds?.length) {
-        return [];
-      }
-
-      const response = await getItemsApi(api).getItems({
-        userId: user.Id,
-        ids: itemIds,
-        fields: ["PrimaryImageAspectRatio", "Genres"],
-        enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-      });
-
-      return response.data.Items || [];
-    },
-    enabled:
-      Boolean(settings?.streamyStatsServerUrl) &&
-      Boolean(api?.accessToken) &&
-      Boolean(user?.Id),
-    staleTime: 5 * 60 * 1000,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-  });
-
-  const snapOffsets = useMemo(() => {
-    return items?.map((_, index) => index * ITEM_WIDTH) ?? [];
-  }, [items]);
-
-  if (!isLoading && (!items || items.length === 0)) return null;
-
-  return (
-    <View {...props}>
-      <SectionHeader title={watchlist.name} />
-      {isLoading ? (
-        <View className='flex flex-row gap-2 px-4'>
-          {[1, 2, 3].map((i) => (
-            <View className='w-28' key={i}>
-              <View className='bg-neutral-900 aspect-[2/3] w-full rounded-md mb-1' />
-              <View className='rounded-md overflow-hidden mb-1 self-start'>
-                <Text
-                  className='text-neutral-900 bg-neutral-900 rounded-md'
-                  numberOfLines={1}
-                >
-                  Loading...
-                </Text>
-              </View>
-            </View>
-          ))}
-        </View>
-      ) : (
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          snapToOffsets={snapOffsets}
-          decelerationRate='fast'
-        >
-          <View className='px-4 flex flex-row'>
-            {items?.map((item) => (
-              <TouchableItemRouter
-                item={item}
-                key={item.Id}
-                className='mr-2 w-28'
-              >
-                {item.Type === "Movie" && <MoviePoster item={item} />}
-                {item.Type === "Series" && <SeriesPoster item={item} />}
-                <ItemCardText item={item} />
-              </TouchableItemRouter>
-            ))}
-          </View>
-        </ScrollView>
-      )}
-    </View>
-  );
-};
-
-interface StreamystatsPromotedWatchlistsProps extends ViewProps {
-  enabled?: boolean;
-}
-
-export const StreamystatsPromotedWatchlists: React.FC<
-  StreamystatsPromotedWatchlistsProps
-> = ({ enabled = true, ...props }) => {
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-  const { settings } = useSettings();
-
-  const streamyStatsEnabled = useMemo(() => {
-    return Boolean(settings?.streamyStatsServerUrl);
-  }, [settings?.streamyStatsServerUrl]);
-
-  // Fetch server info to get the Jellyfin server ID
-  const { data: serverInfo } = useQuery({
-    queryKey: ["jellyfin", "serverInfo"],
-    queryFn: async (): Promise<PublicSystemInfo | null> => {
-      if (!api) return null;
-      const response = await getSystemApi(api).getPublicSystemInfo();
-      return response.data;
-    },
-    enabled: enabled && Boolean(api) && streamyStatsEnabled,
-    staleTime: 60 * 60 * 1000,
-  });
-
-  const jellyfinServerId = serverInfo?.Id;
-
-  const {
-    data: watchlists,
-    isLoading,
-    isError,
-  } = useQuery({
-    queryKey: [
-      "streamystats",
-      "promotedWatchlists",
-      jellyfinServerId,
-      settings?.streamyStatsServerUrl,
-    ],
-    queryFn: async (): Promise<StreamystatsWatchlist[]> => {
-      if (
-        !settings?.streamyStatsServerUrl ||
-        !api?.accessToken ||
-        !jellyfinServerId
-      ) {
-        return [];
-      }
-
-      const streamystatsApi = createStreamystatsApi({
-        serverUrl: settings.streamyStatsServerUrl,
-        jellyfinToken: api.accessToken,
-      });
-
-      const response = await streamystatsApi.getPromotedWatchlists({
-        jellyfinServerId,
-        includePreview: false,
-      });
-
-      return response.data || [];
-    },
-    enabled:
-      enabled &&
-      streamyStatsEnabled &&
-      Boolean(api?.accessToken) &&
-      Boolean(jellyfinServerId) &&
-      Boolean(user?.Id),
-    staleTime: 5 * 60 * 1000,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-  });
-
-  if (!streamyStatsEnabled) return null;
-  if (isError) return null;
-  if (!isLoading && (!watchlists || watchlists.length === 0)) return null;
-
-  if (isLoading) {
-    return (
-      <View {...props}>
-        <View className='h-4 w-32 bg-neutral-900 rounded ml-4 mb-2' />
-        <View className='flex flex-row gap-2 px-4'>
-          {[1, 2, 3].map((i) => (
-            <View className='w-28' key={i}>
-              <View className='bg-neutral-900 aspect-[2/3] w-full rounded-md mb-1' />
-              <View className='rounded-md overflow-hidden mb-1 self-start'>
-                <Text
-                  className='text-neutral-900 bg-neutral-900 rounded-md'
-                  numberOfLines={1}
-                >
-                  Loading...
-                </Text>
-              </View>
-            </View>
-          ))}
-        </View>
-      </View>
-    );
-  }
-
-  return (
-    <>
-      {watchlists?.map((watchlist) => (
-        <WatchlistSection
-          key={watchlist.id}
-          watchlist={watchlist}
-          jellyfinServerId={jellyfinServerId!}
-          {...props}
-        />
-      ))}
-    </>
-  );
-};

components/home/StreamystatsRecommendations.tsx

@@ -1,197 +0,0 @@
-import type {
-  BaseItemDto,
-  PublicSystemInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { getItemsApi, getSystemApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { useAtomValue } from "jotai";
-import { useMemo } from "react";
-import { ScrollView, View, type ViewProps } from "react-native";
-
-import { SectionHeader } from "@/components/common/SectionHeader";
-import { Text } from "@/components/common/Text";
-import MoviePoster from "@/components/posters/MoviePoster";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { createStreamystatsApi } from "@/utils/streamystats/api";
-import type { StreamystatsRecommendationsIdsResponse } from "@/utils/streamystats/types";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import { ItemCardText } from "../ItemCardText";
-import SeriesPoster from "../posters/SeriesPoster";
-
-const ITEM_WIDTH = 120; // w-28 (112px) + mr-2 (8px)
-
-interface Props extends ViewProps {
-  title: string;
-  type: "Movie" | "Series";
-  limit?: number;
-  enabled?: boolean;
-}
-
-export const StreamystatsRecommendations: React.FC<Props> = ({
-  title,
-  type,
-  limit = 20,
-  enabled = true,
-  ...props
-}) => {
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-  const { settings } = useSettings();
-
-  const streamyStatsEnabled = useMemo(() => {
-    return Boolean(settings?.streamyStatsServerUrl);
-  }, [settings?.streamyStatsServerUrl]);
-
-  // Fetch server info to get the Jellyfin server ID
-  const { data: serverInfo } = useQuery({
-    queryKey: ["jellyfin", "serverInfo"],
-    queryFn: async (): Promise<PublicSystemInfo | null> => {
-      if (!api) return null;
-      const response = await getSystemApi(api).getPublicSystemInfo();
-      return response.data;
-    },
-    enabled: enabled && Boolean(api) && streamyStatsEnabled,
-    staleTime: 60 * 60 * 1000, // 1 hour - server info rarely changes
-  });
-
-  const jellyfinServerId = serverInfo?.Id;
-
-  const {
-    data: recommendationIds,
-    isLoading: isLoadingRecommendations,
-    isError: isRecommendationsError,
-  } = useQuery({
-    queryKey: [
-      "streamystats",
-      "recommendations",
-      type,
-      jellyfinServerId,
-      settings?.streamyStatsServerUrl,
-    ],
-    queryFn: async (): Promise<string[]> => {
-      if (
-        !settings?.streamyStatsServerUrl ||
-        !api?.accessToken ||
-        !jellyfinServerId
-      ) {
-        return [];
-      }
-
-      const streamyStatsApi = createStreamystatsApi({
-        serverUrl: settings.streamyStatsServerUrl,
-        jellyfinToken: api.accessToken,
-      });
-
-      const response = await streamyStatsApi.getRecommendationIds(
-        jellyfinServerId,
-        type,
-        limit,
-      );
-
-      const data = response as StreamystatsRecommendationsIdsResponse;
-
-      if (type === "Movie") {
-        return data.data.movies || [];
-      }
-      return data.data.series || [];
-    },
-    enabled:
-      enabled &&
-      streamyStatsEnabled &&
-      Boolean(api?.accessToken) &&
-      Boolean(jellyfinServerId) &&
-      Boolean(user?.Id),
-    staleTime: 5 * 60 * 1000, // 5 minutes
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-  });
-
-  const {
-    data: items,
-    isLoading: isLoadingItems,
-    isError: isItemsError,
-  } = useQuery({
-    queryKey: [
-      "streamystats",
-      "recommendations",
-      "items",
-      type,
-      recommendationIds,
-    ],
-    queryFn: async (): Promise<BaseItemDto[]> => {
-      if (!api || !user?.Id || !recommendationIds?.length) {
-        return [];
-      }
-
-      const response = await getItemsApi(api).getItems({
-        userId: user.Id,
-        ids: recommendationIds,
-        fields: ["PrimaryImageAspectRatio", "Genres"],
-        enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-      });
-
-      return response.data.Items || [];
-    },
-    enabled:
-      Boolean(recommendationIds?.length) && Boolean(api) && Boolean(user?.Id),
-    staleTime: 5 * 60 * 1000,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-  });
-
-  const isLoading = isLoadingRecommendations || isLoadingItems;
-  const isError = isRecommendationsError || isItemsError;
-
-  const snapOffsets = useMemo(() => {
-    return items?.map((_, index) => index * ITEM_WIDTH) ?? [];
-  }, [items]);
-
-  if (!streamyStatsEnabled) return null;
-  if (isError) return null;
-  if (!isLoading && (!items || items.length === 0)) return null;
-
-  return (
-    <View {...props}>
-      <SectionHeader title={title} />
-      {isLoading ? (
-        <View className='flex flex-row gap-2 px-4'>
-          {[1, 2, 3].map((i) => (
-            <View className='w-28' key={i}>
-              <View className='bg-neutral-900 aspect-[2/3] w-full rounded-md mb-1' />
-              <View className='rounded-md overflow-hidden mb-1 self-start'>
-                <Text
-                  className='text-neutral-900 bg-neutral-900 rounded-md'
-                  numberOfLines={1}
-                >
-                  Loading title...
-                </Text>
-              </View>
-            </View>
-          ))}
-        </View>
-      ) : (
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          snapToOffsets={snapOffsets}
-          decelerationRate='fast'
-        >
-          <View className='px-4 flex flex-row'>
-            {items?.map((item) => (
-              <TouchableItemRouter
-                item={item}
-                key={item.Id}
-                className='mr-2 w-28'
-              >
-                {item.Type === "Movie" && <MoviePoster item={item} />}
-                {item.Type === "Series" && <SeriesPoster item={item} />}
-                <ItemCardText item={item} />
-              </TouchableItemRouter>
-            ))}
-          </View>
-        </ScrollView>
-      )}
-    </View>
-  );
-};

components/item/ItemPeopleSections.tsx

@@ -1,80 +0,0 @@
-import type {
-  BaseItemDto,
-  BaseItemPerson,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import type React from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { InteractionManager, View, type ViewProps } from "react-native";
-import { MoreMoviesWithActor } from "@/components/MoreMoviesWithActor";
-import { CastAndCrew } from "@/components/series/CastAndCrew";
-import { useItemPeopleQuery } from "@/hooks/useItemPeopleQuery";
-
-interface Props extends ViewProps {
-  item: BaseItemDto;
-  isOffline: boolean;
-}
-
-export const ItemPeopleSections: React.FC<Props> = ({
-  item,
-  isOffline,
-  ...props
-}) => {
-  const [enabled, setEnabled] = useState(false);
-
-  useEffect(() => {
-    if (isOffline) return;
-    const task = InteractionManager.runAfterInteractions(() =>
-      setEnabled(true),
-    );
-    return () => task.cancel();
-  }, [isOffline]);
-
-  const { data, isLoading } = useItemPeopleQuery(
-    item.Id,
-    enabled && !isOffline,
-  );
-
-  const people = useMemo(() => (Array.isArray(data) ? data : []), [data]);
-
-  const itemWithPeople = useMemo(() => {
-    return { ...item, People: people } as BaseItemDto;
-  }, [item, people]);
-
-  const topPeople = useMemo(() => people.slice(0, 3), [people]);
-
-  const renderActorSection = useCallback(
-    (person: BaseItemPerson, idx: number, total: number) => {
-      if (!person.Id) return null;
-
-      const spacingClassName = idx === total - 1 ? undefined : "mb-2";
-
-      return (
-        <MoreMoviesWithActor
-          key={person.Id}
-          currentItem={item}
-          actorId={person.Id}
-          actorName={person.Name}
-          className={spacingClassName}
-        />
-      );
-    },
-    [item],
-  );
-
-  if (isOffline || !enabled) return null;
-
-  const shouldSpaceCastAndCrew = topPeople.length > 0;
-
-  return (
-    <View {...props}>
-      <CastAndCrew
-        item={itemWithPeople}
-        loading={isLoading}
-        className={shouldSpaceCastAndCrew ? "mb-2" : undefined}
-      />
-      {topPeople.map((person, idx) =>
-        renderActorSection(person, idx, topPeople.length),
-      )}
-    </View>
-  );
-};

components/jellyseerr/GridSkeleton.tsx

@@ -1,21 +0,0 @@
-import { View } from "react-native";
-
-interface Props {
-  index: number;
-}
-// Dev note might be a good idea to standardize skeletons across the app and have one "file" for it.
-export const GridSkeleton: React.FC<Props> = ({ index }) => {
-  return (
-    <View
-      key={index}
-      className='flex flex-col mr-2 h-auto'
-      style={{ width: "30.5%" }}
-    >
-      <View className='relative rounded-lg overflow-hidden border border-neutral-900 w-full mt-4 aspect-[10/15] bg-neutral-800' />
-      <View className='mt-2 flex flex-col w-full'>
-        <View className='h-4 bg-neutral-800 rounded mb-1' />
-        <View className='h-3 bg-neutral-800 rounded w-1/2' />
-      </View>
-    </View>
-  );
-};

components/jellyseerr/ParallaxSlideShow.tsx

@@ -11,7 +11,6 @@ import { Animated, View, type ViewProps } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
-import { GridSkeleton } from "./GridSkeleton";
 
 const ANIMATION_ENTER = 250;
 const ANIMATION_EXIT = 250;
@@ -29,7 +28,6 @@ interface Props<T> {
   renderItem: (item: T, index: number) => Render;
   keyExtractor: (item: T) => string;
   onEndReached?: (() => void) | null | undefined;
-  isLoading?: boolean;
 }
 
 const ParallaxSlideShow = <T,>({
@@ -42,7 +40,6 @@ const ParallaxSlideShow = <T,>({
   renderItem,
   keyExtractor,
   onEndReached,
-  isLoading = false,
 }: PropsWithChildren<Props<T> & ViewProps>) => {
   const insets = useSafeAreaInsets();
 
@@ -127,40 +124,27 @@ const ParallaxSlideShow = <T,>({
           </View>
           {MainContent?.()}
           <View>
-            {isLoading ? (
-              <View>
-                <Text className='text-lg font-bold my-2'>{listHeader}</Text>
-                <View className='px-4'>
-                  <View className='flex flex-row flex-wrap'>
-                    {Array.from({ length: 9 }, (_, i) => (
-                      <GridSkeleton key={i} index={i} />
-                    ))}
-                  </View>
+            <FlashList
+              data={data}
+              ListEmptyComponent={
+                <View className='flex flex-col items-center justify-center h-full'>
+                  <Text className='font-bold text-xl text-neutral-500'>
+                    No results
+                  </Text>
                 </View>
-              </View>
-            ) : (
-              <FlashList
-                data={data}
-                ListEmptyComponent={
-                  <View className='flex flex-col items-center justify-center h-full'>
-                    <Text className='font-bold text-xl text-neutral-500'>
-                      No results
-                    </Text>
-                  </View>
-                }
-                contentInsetAdjustmentBehavior='automatic'
-                ListHeaderComponent={
-                  <Text className='text-lg font-bold my-2'>{listHeader}</Text>
-                }
-                nestedScrollEnabled
-                showsVerticalScrollIndicator={false}
-                //@ts-expect-error
-                renderItem={({ item, index }) => renderItem(item, index)}
-                keyExtractor={keyExtractor}
-                numColumns={3}
-                ItemSeparatorComponent={() => <View className='h-2 w-2' />}
-              />
-            )}
+              }
+              contentInsetAdjustmentBehavior='automatic'
+              ListHeaderComponent={
+                <Text className='text-lg font-bold my-2'>{listHeader}</Text>
+              }
+              nestedScrollEnabled
+              showsVerticalScrollIndicator={false}
+              //@ts-expect-error
+              renderItem={({ item, index }) => renderItem(item, index)}
+              keyExtractor={keyExtractor}
+              numColumns={3}
+              ItemSeparatorComponent={() => <View className='h-2 w-2' />}
+            />
           </View>
         </View>
       </ParallaxScrollView>

components/list/ListItem.tsx

@@ -6,7 +6,6 @@ import { Text } from "../common/Text";
 interface Props extends ViewProps {
   title?: string | null | undefined;
   subtitle?: string | null | undefined;
-  subtitleColor?: "default" | "red";
   value?: string | null | undefined;
   children?: ReactNode;
   iconAfter?: ReactNode;
@@ -15,7 +14,6 @@ interface Props extends ViewProps {
   textColor?: "default" | "blue" | "red";
   onPress?: () => void;
   disabled?: boolean;
-  disabledByAdmin?: boolean;
 }
 
 export const ListItem: React.FC<PropsWithChildren<Props>> = ({
@@ -29,23 +27,21 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
   textColor = "default",
   onPress,
   disabled = false,
-  disabledByAdmin = false,
   ...viewProps
 }) => {
-  const effectiveSubtitle = disabledByAdmin ? "Disabled by admin" : subtitle;
-  const isDisabled = disabled || disabledByAdmin;
   if (onPress)
     return (
       <TouchableOpacity
-        disabled={isDisabled}
+        disabled={disabled}
         onPress={onPress}
-        className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
+        className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${
+          disabled ? "opacity-50" : ""
+        }`}
         {...(viewProps as any)}
       >
         <ListItemContent
           title={title}
-          subtitle={effectiveSubtitle}
-          subtitleColor={disabledByAdmin ? "red" : undefined}
+          subtitle={subtitle}
           value={value}
           icon={icon}
           textColor={textColor}
@@ -58,13 +54,14 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
     );
   return (
     <View
-      className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
+      className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${
+        disabled ? "opacity-50" : ""
+      }`}
       {...viewProps}
     >
       <ListItemContent
         title={title}
-        subtitle={effectiveSubtitle}
-        subtitleColor={disabledByAdmin ? "red" : undefined}
+        subtitle={subtitle}
         value={value}
         icon={icon}
         textColor={textColor}
@@ -80,7 +77,6 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
 const ListItemContent = ({
   title,
   subtitle,
-  subtitleColor,
   textColor,
   icon,
   value,
@@ -111,7 +107,7 @@ const ListItemContent = ({
           </Text>
           {subtitle && (
             <Text
-              className={`text-[12px] mt-0.5 ${subtitleColor === "red" ? "text-red-600" : "text-[#9899A1]"}`}
+              className='text-[#9899A1] text-[12px] mt-0.5'
               numberOfLines={2}
             >
               {subtitle}