feat: merge PR #448 - Custom Chromecast Controls

- Add custom Chromecast player UI with full controls
- Add trickplay support for Chromecast
- Add sessions dashboard for administrators
- Add progress tracking (supersedes chromecast-fix changes)
- Add continue playback from last position
- Add skip to next/previous episodes
- Add Chromecast settings (H.265 support option)
- Add translations (Italian, Japanese, Dutch, Chinese, Turkish)
- Improve video player controls and context management

.claude/commands/reflect.md

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

.claude/learned-facts.md

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

.github/ISSUE_TEMPLATE/issue_report.yml

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

.github/crowdin.yml

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

.github/workflows/build-apps.yml

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

.github/workflows/check-lockfile.yml

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

.github/workflows/ci-codeql.yml

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

.github/workflows/crowdin.yml

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

.github/workflows/linting.yml

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

.github/workflows/main.yml

@@ -0,0 +1,39 @@
+name: Handle Stale Issues
+on:
+  schedule:
+    - cron: "30 1 * * *" # Runs at 1:30 UTC every day
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+
+    steps:
+      - uses: actions/stale@v9
+        with:
+          # Issue specific settings
+          days-before-issue-stale: 90
+          days-before-issue-close: 7
+          stale-issue-label: "stale"
+          stale-issue-message: |
+            This issue has been automatically marked as stale because it has had no activity in the last 30 days.
+
+            If this issue is still relevant, please leave a comment to keep it open. 
+            Otherwise, it will be closed in 7 days if no further activity occurs.
+
+            Thank you for your contributions!
+          close-issue-message: |
+            This issue has been automatically closed because it has been inactive for 7 days since being marked as stale.
+
+            If you believe this issue is still relevant, please feel free to reopen it and add a comment explaining the current status.
+
+          # Pull request settings (disabled)
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+
+          # Other settings
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          operations-per-run: 100
+          exempt-issue-labels: "Roadmap v1,help needed,enhancement"

.github/workflows/notification.yml

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

.github/workflows/stale.yml

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

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

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

.gitignore

@@ -1,16 +1,30 @@
-# Dependencies and Package Managers
 node_modules/
-bun.lock
-bun.lockb
-package-lock.json
-
-# Expo and React Native Build Artifacts
 .expo/
 dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
 web-build/
-.tsbuildinfo
+modules/vlc-player/android/build
+bun.lockb
+
+# macOS
+.DS_Store
+
+expo-env.d.ts
+
+Streamyfin.app
+
+build-*
+*.mp4
+build-*
+Streamyfin.app
+package-lock.json
 
-# Platform-specific Build Directories
 /ios
 /android
 /iostv
@@ -18,51 +32,15 @@ web-build/
 /androidmobile
 /androidtv
 
-# Module-specific Builds
-modules/vlc-player/android/build
 modules/player/android
-modules/hls-downloader/android/build
 
-# Generated Applications
-Streamyfin.app
+pc-api-7079014811501811218-719-3b9f15aeccf8.json
+credentials.json
 *.apk
 *.ipa
-*.aab
+.continuerc.json
 
-# Certificates and Keys
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-
-# Debug and Temporary Files
-npm-debug.*
-*.orig.*
-*.mp4
-
-# OS-specific Files
-# macOS
-.DS_Store
-
-# IDE and Editor Files
 .vscode/
 .idea/
 .ruby-lsp
-.cursor/
-.claude/
-
-# Environment and Configuration
-expo-env.d.ts
-.continuerc.json
-.env
-.env.local
-
-# Secrets and Credentials
-pc-api-7079014811501811218-719-3b9f15aeccf8.json
-credentials.json
-streamyfin-4fec1-firebase-adminsdk.json
-
-# Version and Backup Files
-/version-backup-*
-modules/background-downloader/android/build/*
+modules/hls-downloader/android/build

CLAUDE.md

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

README.md

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

app.json

@@ -2,13 +2,12 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.48.0",
+    "version": "0.27.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
     "userInterfaceStyle": "dark",
     "jsEngine": "hermes",
-    "newArchEnabled": true,
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "requireFullScreen": true,
@@ -28,31 +27,26 @@
         "usesNonExemptEncryption": false
       },
       "supportsTablet": true,
-      "bundleIdentifier": "com.fredrikburmester.streamyfin",
-      "icon": "./assets/images/icon-ios-liquid-glass.icon",
-      "appleTeamId": "MWD5K362T8"
+      "bundleIdentifier": "com.fredrikburmester.streamyfin"
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 85,
+      "versionCode": 53,
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/icon-android-plain.png",
-        "monochromeImage": "./assets/images/icon-android-themed.png",
-        "backgroundColor": "#2E2E2E"
+        "foregroundImage": "./assets/images/adaptive_icon.png"
       },
       "package": "com.fredrikburmester.streamyfin",
       "permissions": [
         "android.permission.FOREGROUND_SERVICE",
         "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK",
         "android.permission.WRITE_SETTINGS"
-      ],
-      "blockedPermissions": ["android.permission.ACTIVITY_RECOGNITION"],
-      "googleServicesFile": "./google-services.json"
+      ]
     },
     "plugins": [
       "@react-native-tvos/config-tv",
       "expo-router",
       "expo-font",
+      "@config-plugins/ffmpeg-kit-react-native",
       [
         "react-native-video",
         {
@@ -74,7 +68,6 @@
             "useFrameworks": "static"
           },
           "android": {
-            "buildArchs": ["arm64-v8a", "x86_64"],
             "compileSdkVersion": 35,
             "targetSdkVersion": 35,
             "buildToolsVersion": "35.0.0",
@@ -113,27 +106,19 @@
           }
         }
       ],
-      [
-        "expo-splash-screen",
-        {
-          "backgroundColor": "#010101",
-          "image": "./assets/images/icon-ios-plain.png",
-          "imageWidth": 100
-        }
-      ],
-      [
-        "expo-notifications",
-        {
-          "icon": "./assets/images/notification.png",
-          "color": "#9333EA"
-        }
-      ],
-      "expo-web-browser",
-      ["./plugins/with-runtime-framework-headers.js"],
+      ["react-native-bottom-tabs"],
       ["./plugins/withChangeNativeAndroidTextToWhite.js"],
       ["./plugins/withAndroidManifest.js"],
       ["./plugins/withTrustLocalCerts.js"],
-      ["./plugins/withGradleProperties.js"]
+      ["./plugins/withGradleProperties.js"],
+      [
+        "expo-splash-screen",
+        {
+          "backgroundColor": "#2e2e2e",
+          "image": "./assets/images/StreamyFinFinal.png",
+          "imageWidth": 100
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true
@@ -146,12 +131,13 @@
         "projectId": "e79219d1-797f-4fbe-9fa1-cfd360690a68"
       }
     },
-    "owner": "streamyfin",
+    "owner": "fredrikburmester",
     "runtimeVersion": {
       "policy": "appVersion"
     },
     "updates": {
       "url": "https://u.expo.dev/e79219d1-797f-4fbe-9fa1-cfd360690a68"
-    }
+    },
+    "newArchEnabled": false
   }
 }

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

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

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

@@ -1,36 +1,40 @@
-import { Feather, Ionicons } from "@expo/vector-icons";
-import { Stack, useRouter } from "expo-router";
-import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity, View } from "react-native";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
-
-const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");
-
+import { Ionicons, Feather } from "@expo/vector-icons";
+import { Stack, useRouter } from "expo-router";
+import { Platform, TouchableOpacity, View } from "react-native";
+import { useTranslation } from "react-i18next";
+const Chromecast = !Platform.isTV ? require("@/components/Chromecast") : null;
 import { useAtom } from "jotai";
-import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
 import { userAtom } from "@/providers/JellyfinProvider";
+import { useSessions, useSessionsProps } from "@/hooks/useSessions";
 
 export default function IndexLayout() {
-  const _router = useRouter();
+  const router = useRouter();
   const [user] = useAtom(userAtom);
   const { t } = useTranslation();
 
   return (
     <Stack>
       <Stack.Screen
-        name='index'
+        name="index"
         options={{
-          headerShown: !Platform.isTV,
+          headerShown: true,
+          headerLargeTitle: true,
           headerTitle: t("tabs.home"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
+          headerBlurEffect: "prominent",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
+          headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
           headerRight: () => (
-            <View className='flex flex-row items-center px-2'>
+            <View className="flex flex-row items-center space-x-2">
               {!Platform.isTV && (
                 <>
-                  <Chromecast.Chromecast background='transparent' />
-                  {user?.Policy?.IsAdministrator && <SessionsButton />}
+                  <Chromecast.Chromecast />
+                   {user && user.Policy?.IsAdministrator && (
+                    <SessionsButton />
+                   )}
                   <SettingsButton />
                 </>
               )}
@@ -39,251 +43,70 @@ export default function IndexLayout() {
         }}
       />
       <Stack.Screen
-        name='downloads/index'
+        name="downloads/index"
         options={{
-          headerShown: true,
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
           title: t("home.downloads.downloads_title"),
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
         }}
       />
       <Stack.Screen
-        name='downloads/[seriesId]'
+        name="downloads/[seriesId]"
         options={{
-          headerShown: true,
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
           title: t("home.downloads.tvseries"),
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
         }}
       />
       <Stack.Screen
-        name='sessions/index'
+        name="sessions/index"
         options={{
           title: t("home.sessions.title"),
-          headerShown: true,
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
         }}
       />
       <Stack.Screen
-        name='settings'
+        name="settings"
         options={{
           title: t("home.settings.settings_title"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
         }}
       />
       <Stack.Screen
-        name='settings/playback-controls/page'
+        name="settings/optimized-server/page"
         options={{
-          title: t("home.settings.playback_controls.title"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
+          title: "",
         }}
       />
       <Stack.Screen
-        name='settings/audio-subtitles/page'
+        name="settings/marlin-search/page"
         options={{
-          title: t("home.settings.audio_subtitles.title"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
+          title: "",
         }}
       />
       <Stack.Screen
-        name='settings/appearance/page'
+        name="settings/dashboard/sessions"
         options={{
-          title: t("home.settings.appearance.title"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
+          title: t("home.settings.dashboard.sessions_title"),
         }}
       />
       <Stack.Screen
-        name='settings/appearance/hide-libraries/page'
+        name="settings/jellyseerr/page"
         options={{
-          title: t("home.settings.other.hide_libraries"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
+          title: "",
         }}
       />
       <Stack.Screen
-        name='settings/plugins/page'
+        name="settings/hide-libraries/page"
         options={{
-          title: t("home.settings.plugins.plugins_title"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
+          title: "",
         }}
       />
       <Stack.Screen
-        name='settings/plugins/marlin-search/page'
+        name="settings/logs/page"
         options={{
-          title: "Marlin Search",
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
+          title: "",
         }}
       />
       <Stack.Screen
-        name='settings/plugins/jellyseerr/page'
-        options={{
-          title: "Jellyseerr",
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
-        }}
-      />
-      <Stack.Screen
-        name='settings/intro/page'
-        options={{
-          title: t("home.settings.intro.title"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
-        }}
-      />
-      <Stack.Screen
-        name='settings/logs/page'
-        options={{
-          title: t("home.settings.logs.logs_title"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              className='pl-0.5'
-              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-            >
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
-        }}
-      />
-      <Stack.Screen
-        name='intro/page'
+        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",
         }}
       />
@@ -291,17 +114,12 @@ export default function IndexLayout() {
         <Stack.Screen key={name} name={name} options={options} />
       ))}
       <Stack.Screen
-        name='collections/[collectionId]'
+        name="collections/[collectionId]"
         options={{
           title: "",
-          headerLeft: () => (
-            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
           headerShown: true,
           headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios",
+          headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
         }}
       />
@@ -318,27 +136,28 @@ const SettingsButton = () => {
         router.push("/(auth)/settings");
       }}
     >
-      <Feather name='settings' color={"white"} size={22} />
+      <Feather name="settings" color={"white"} size={22} />
     </TouchableOpacity>
   );
 };
 
 const SessionsButton = () => {
   const router = useRouter();
-  const { sessions = [] } = useSessions({} as useSessionsProps);
+  const { sessions = [], _ } = useSessions({} as useSessionsProps);
 
   return (
     <TouchableOpacity
       onPress={() => {
         router.push("/(auth)/sessions");
       }}
-      className='mr-4'
     >
-      <Ionicons
-        name='play-circle'
-        color={sessions.length === 0 ? "white" : "#9333ea"}
-        size={28}
-      />
+      <View className="mr-4">
+        <Ionicons 
+          name="play-circle"
+          color={sessions.length === 0 ? "white" : "#9333ea"}
+          size={25}
+        />
+      </View>
     </TouchableOpacity>
   );
 };

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

@@ -1,181 +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 { router, useLocalSearchParams, useNavigation } from "expo-router";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Alert, Platform, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { EpisodeCard } from "@/components/downloads/EpisodeCard";
-import {
-  SeasonDropdown,
-  type SeasonIndexState,
-} from "@/components/series/SeasonDropdown";
-import { useDownload } from "@/providers/DownloadProvider";
-import { storage } from "@/utils/mmkv";
-
-export default function page() {
-  const navigation = useNavigation();
-  const local = useLocalSearchParams();
-  const { seriesId, episodeSeasonIndex } = local as {
-    seriesId: string;
-    episodeSeasonIndex: number | string | undefined;
-  };
-
-  const [seasonIndexState, setSeasonIndexState] = useState<SeasonIndexState>(
-    {},
-  );
-  const { downloadedItems, deleteItems } = useDownload();
-  const insets = useSafeAreaInsets();
-
-  const series = useMemo(() => {
-    try {
-      return (
-        downloadedItems
-          ?.filter((f) => f.item.SeriesId === seriesId)
-          ?.sort(
-            (a, b) =>
-              (a.item.ParentIndexNumber ?? 0) - (b.item.ParentIndexNumber ?? 0),
-          ) || []
-      );
-    } catch {
-      return [];
-    }
-  }, [downloadedItems, seriesId]);
-
-  // Group episodes by season in a single pass
-  const seasonGroups = useMemo(() => {
-    const groups: Record<number, BaseItemDto[]> = {};
-
-    series.forEach((episode) => {
-      const seasonNumber = episode.item.ParentIndexNumber;
-      if (seasonNumber !== undefined && seasonNumber !== null) {
-        if (!groups[seasonNumber]) {
-          groups[seasonNumber] = [];
-        }
-        groups[seasonNumber].push(episode.item);
-      }
-    });
-
-    // Sort episodes within each season
-    Object.values(groups).forEach((episodes) => {
-      episodes.sort((a, b) => (a.IndexNumber || 0) - (b.IndexNumber || 0));
-    });
-
-    return groups;
-  }, [series]);
-
-  // Get unique seasons (just the season numbers, sorted)
-  const uniqueSeasons = useMemo(() => {
-    const seasonNumbers = Object.keys(seasonGroups)
-      .map(Number)
-      .sort((a, b) => a - b);
-    return seasonNumbers.map((seasonNum) => seasonGroups[seasonNum][0]); // First episode of each season
-  }, [seasonGroups]);
-
-  const seasonIndex =
-    seasonIndexState[series?.[0]?.item?.ParentId ?? ""] ??
-    episodeSeasonIndex ??
-    series?.[0]?.item?.ParentIndexNumber ??
-    "";
-
-  const groupBySeason = useMemo<BaseItemDto[]>(() => {
-    return seasonGroups[Number(seasonIndex)] ?? [];
-  }, [seasonGroups, seasonIndex]);
-
-  const initialSeasonIndex = useMemo(
-    () =>
-      groupBySeason?.[0]?.ParentIndexNumber ??
-      series?.[0]?.item?.ParentIndexNumber,
-    [groupBySeason, series],
-  );
-
-  useEffect(() => {
-    if (series.length > 0) {
-      navigation.setOptions({
-        title: series[0].item.SeriesName,
-      });
-    } else {
-      storage.remove(seriesId);
-      router.back();
-    }
-  }, [series]);
-
-  const deleteSeries = useCallback(() => {
-    Alert.alert(
-      "Delete season",
-      "Are you sure you want to delete the entire season?",
-      [
-        {
-          text: "Cancel",
-          style: "cancel",
-        },
-        {
-          text: "Delete",
-          onPress: () =>
-            deleteItems(
-              groupBySeason
-                .map((item) => item.Id)
-                .filter((id) => id !== undefined),
-            ),
-          style: "destructive",
-        },
-      ],
-    );
-  }, [groupBySeason, deleteItems]);
-
-  const ListHeaderComponent = useCallback(() => {
-    if (series.length === 0) return null;
-
-    return (
-      <View className='flex flex-row items-center justify-start pb-2'>
-        <SeasonDropdown
-          item={series[0].item}
-          seasons={uniqueSeasons}
-          state={seasonIndexState}
-          initialSeasonIndex={initialSeasonIndex!}
-          onSelect={(season) => {
-            setSeasonIndexState((prev) => ({
-              ...prev,
-              [series[0].item.ParentId ?? ""]: season.ParentIndexNumber,
-            }));
-          }}
-        />
-        <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center ml-2'>
-          <Text className='text-xs font-bold'>{groupBySeason.length}</Text>
-        </View>
-        <View className='bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center ml-auto'>
-          <TouchableOpacity onPress={deleteSeries}>
-            <Ionicons name='trash' size={20} color='white' />
-          </TouchableOpacity>
-        </View>
-      </View>
-    );
-  }, [
-    series,
-    uniqueSeasons,
-    seasonIndexState,
-    initialSeasonIndex,
-    groupBySeason,
-    deleteSeries,
-  ]);
-
-  return (
-    <View className='flex-1'>
-      <FlashList
-        key={seasonIndex}
-        data={groupBySeason}
-        renderItem={({ item }) => <EpisodeCard item={item} />}
-        keyExtractor={(item, index) => item.Id ?? `episode-${index}`}
-        ListHeaderComponent={ListHeaderComponent}
-        contentInsetAdjustmentBehavior='automatic'
-        contentContainerStyle={{
-          paddingHorizontal: 16,
-          paddingLeft: insets.left + 16,
-          paddingRight: insets.right + 16,
-          paddingTop: Platform.OS === "android" ? 10 : 8,
-        }}
-      />
-    </View>
-  );
-}

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

@@ -1,15 +1,10 @@
 import { BottomSheetModal } from "@gorhom/bottom-sheet";
-import { useNavigation, useRouter } from "expo-router";
+import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Alert,
-  Platform,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { Alert, Platform, ScrollView, View } from "react-native";
+import { Pressable } from "react-native-gesture-handler";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
@@ -18,8 +13,10 @@ import ActiveDownloads from "@/components/downloads/ActiveDownloads";
 import { DownloadSize } from "@/components/downloads/DownloadSize";
 import { MovieCard } from "@/components/downloads/MovieCard";
 import { SeriesCard } from "@/components/downloads/SeriesCard";
+import useRouter from "@/hooks/useAppRouter";
 import { useDownload } from "@/providers/DownloadProvider";
 import { type DownloadedItem } from "@/providers/Downloads/types";
+import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
 import { queueAtom } from "@/utils/atoms/queue";
 import { writeToLog } from "@/utils/log";
 
@@ -103,12 +100,12 @@ export default function page() {
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <TouchableOpacity
+        <Pressable
           onPress={bottomSheetModalRef.current?.present}
           className='px-2'
         >
           <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
-        </TouchableOpacity>
+        </Pressable>
       ),
     });
   }, [downloadedFiles]);
@@ -166,145 +163,99 @@ export default function page() {
     );
 
   return (
-    <ScrollView
-      showsVerticalScrollIndicator={false}
-      contentInsetAdjustmentBehavior='automatic'
-    >
-      <View style={{ paddingTop: Platform.OS === "android" ? 17 : 0 }}>
-        <View className='mb-4 flex flex-col space-y-4 px-4'>
-          {/* Queue card - hidden */}
-          {/* <View className='bg-neutral-900 p-4 rounded-2xl'>
+    <OfflineModeProvider isOffline={true}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentInsetAdjustmentBehavior='automatic'
+      >
+        <View style={{ paddingTop: Platform.OS === "android" ? 17 : 0 }}>
+          <View className='mb-4 flex flex-col space-y-4 px-4'>
+            <ActiveDownloads />
+          </View>
+
+          {movies.length > 0 && (
+            <View className='mb-4'>
+              <View className='flex flex-row items-center justify-between mb-2 px-4'>
                 <Text className='text-lg font-bold'>
-                  {t("home.downloads.queue")}
+                  {t("home.downloads.movies")}
                 </Text>
-                <Text className='text-xs opacity-70 text-red-600'>
-                  {t("home.downloads.queue_hint")}
-                </Text>
-                <View className='flex flex-col space-y-2 mt-2'>
-                  {queue.map((q, index) => (
-                    <TouchableOpacity
-                      onPress={() =>
-                        router.push(`/(auth)/items/page?id=${q.item.Id}`)
-                      }
-                      className='relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between'
-                      key={index}
-                    >
-                      <View>
-                        <Text className='font-semibold'>{q.item.Name}</Text>
-                        <Text className='text-xs opacity-50'>
-                          {q.item.Type}
-                        </Text>
-                      </View>
-                      <TouchableOpacity
-                        onPress={() => {
-                          removeProcess(q.id);
-                          setQueue((prev) => {
-                            if (!prev) return [];
-                            return [...prev.filter((i) => i.id !== q.id)];
-                          });
-                        }}
-                      >
-                        <Ionicons name='close' size={24} color='red' />
-                      </TouchableOpacity>
-                    </TouchableOpacity>
+                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                  <Text className='text-xs font-bold'>{movies?.length}</Text>
+                </View>
+              </View>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className='px-4 flex flex-row'>
+                  {movies?.map((item) => (
+                    <TouchableItemRouter item={item.item} key={item.item.Id}>
+                      <MovieCard item={item.item} />
+                    </TouchableItemRouter>
                   ))}
                 </View>
-
-                {queue.length === 0 && (
-                  <Text className='opacity-50'>
-                    {t("home.downloads.no_items_in_queue")}
-                  </Text>
-                )}
-              </View> */}
-
-          <ActiveDownloads />
-        </View>
-
-        {movies.length > 0 && (
-          <View className='mb-4'>
-            <View className='flex flex-row items-center justify-between mb-2 px-4'>
-              <Text className='text-lg font-bold'>
-                {t("home.downloads.movies")}
-              </Text>
-              <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                <Text className='text-xs font-bold'>{movies?.length}</Text>
-              </View>
+              </ScrollView>
             </View>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-              <View className='px-4 flex flex-row'>
-                {movies?.map((item) => (
-                  <TouchableItemRouter
-                    item={item.item}
-                    isOffline
-                    key={item.item.Id}
-                  >
-                    <MovieCard item={item.item} />
-                  </TouchableItemRouter>
-                ))}
-              </View>
-            </ScrollView>
-          </View>
-        )}
-        {groupedBySeries.length > 0 && (
-          <View className='mb-4'>
-            <View className='flex flex-row items-center justify-between mb-2 px-4'>
-              <Text className='text-lg font-bold'>
-                {t("home.downloads.tvseries")}
-              </Text>
-              <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                <Text className='text-xs font-bold'>
-                  {groupedBySeries?.length}
+          )}
+          {groupedBySeries.length > 0 && (
+            <View className='mb-4'>
+              <View className='flex flex-row items-center justify-between mb-2 px-4'>
+                <Text className='text-lg font-bold'>
+                  {t("home.downloads.tvseries")}
                 </Text>
+                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                  <Text className='text-xs font-bold'>
+                    {groupedBySeries?.length}
+                  </Text>
+                </View>
               </View>
-            </View>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-              <View className='px-4 flex flex-row'>
-                {groupedBySeries?.map((items) => (
-                  <View className='mb-2 last:mb-0' key={items[0].item.SeriesId}>
-                    <SeriesCard
-                      items={items.map((i) => i.item)}
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className='px-4 flex flex-row'>
+                  {groupedBySeries?.map((items) => (
+                    <View
+                      className='mb-2 last:mb-0'
                       key={items[0].item.SeriesId}
-                    />
-                  </View>
-                ))}
-              </View>
-            </ScrollView>
-          </View>
-        )}
-
-        {otherMedia.length > 0 && (
-          <View className='mb-4'>
-            <View className='flex flex-row items-center justify-between mb-2 px-4'>
-              <Text className='text-lg font-bold'>
-                {t("home.downloads.other_media")}
-              </Text>
-              <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                <Text className='text-xs font-bold'>{otherMedia?.length}</Text>
-              </View>
+                    >
+                      <SeriesCard
+                        items={items.map((i) => i.item)}
+                        key={items[0].item.SeriesId}
+                      />
+                    </View>
+                  ))}
+                </View>
+              </ScrollView>
             </View>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-              <View className='px-4 flex flex-row'>
-                {otherMedia?.map((item) => (
-                  <TouchableItemRouter
-                    item={item.item}
-                    isOffline
-                    key={item.item.Id}
-                  >
-                    <MovieCard item={item.item} />
-                  </TouchableItemRouter>
-                ))}
+          )}
+
+          {otherMedia.length > 0 && (
+            <View className='mb-4'>
+              <View className='flex flex-row items-center justify-between mb-2 px-4'>
+                <Text className='text-lg font-bold'>
+                  {t("home.downloads.other_media")}
+                </Text>
+                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                  <Text className='text-xs font-bold'>
+                    {otherMedia?.length}
+                  </Text>
+                </View>
               </View>
-            </ScrollView>
-          </View>
-        )}
-        {downloadedFiles?.length === 0 && (
-          <View className='flex px-4'>
-            <Text className='opacity-50'>
-              {t("home.downloads.no_downloaded_items")}
-            </Text>
-          </View>
-        )}
-      </View>
-    </ScrollView>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className='px-4 flex flex-row'>
+                  {otherMedia?.map((item) => (
+                    <TouchableItemRouter item={item.item} key={item.item.Id}>
+                      <MovieCard item={item.item} />
+                    </TouchableItemRouter>
+                  ))}
+                </View>
+              </ScrollView>
+            </View>
+          )}
+          {downloadedFiles?.length === 0 && (
+            <View className='flex px-4'>
+              <Text className='opacity-50'>
+                {t("home.downloads.no_downloaded_items")}
+              </Text>
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </OfflineModeProvider>
   );
 }

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

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

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

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

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

@@ -1,27 +1,25 @@
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import { HardwareAccelerationType } from "@jellyfin/sdk/lib/generated-client";
-import {
-  GeneralCommandType,
-  PlaystateCommand,
-  SessionInfoDto,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
-import { FlashList } from "@shopify/flash-list";
-import { useQuery } from "@tanstack/react-query";
-import { useAtomValue } from "jotai";
-import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity, View } from "react-native";
-import { Badge } from "@/components/Badge";
 import { Text } from "@/components/common/Text";
+import { useSessions, useSessionsProps } from "@/hooks/useSessions";
+import { FlashList } from "@shopify/flash-list";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
 import { Loader } from "@/components/Loader";
-import Poster from "@/components/posters/Poster";
-import { useInterval } from "@/hooks/useInterval";
-import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
+import { SessionInfoDto } from "@jellyfin/sdk/lib/generated-client";
+import { useAtomValue } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { formatBitrate } from "@/utils/bitrate";
+import Poster from "@/components/posters/Poster";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { useInterval } from "@/hooks/useInterval";
+import React, { useEffect, useMemo, useState } from "react";
 import { formatTimeString } from "@/utils/time";
+import { formatBitrate } from "@/utils/bitrate";
+import {
+  Ionicons,
+  Entypo,
+  AntDesign,
+  MaterialCommunityIcons,
+} from "@expo/vector-icons";
+import { Badge } from "@/components/Badge";
 
 export default function page() {
   const { sessions, isLoading } = useSessions({} as useSessionsProps);
@@ -29,15 +27,15 @@ export default function page() {
 
   if (isLoading)
     return (
-      <View className='justify-center items-center h-full'>
+      <View className="justify-center items-center h-full">
         <Loader />
       </View>
     );
 
-  if (!sessions || sessions.length === 0)
+  if (!sessions || sessions.length == 0)
     return (
-      <View className='h-full w-full flex justify-center items-center'>
-        <Text className='text-lg text-neutral-500'>
+      <View className="h-full w-full flex justify-center items-center">
+        <Text className="text-lg text-neutral-500">
           {t("home.sessions.no_active_sessions")}
         </Text>
       </View>
@@ -45,15 +43,16 @@ export default function page() {
 
   return (
     <FlashList
-      contentInsetAdjustmentBehavior='automatic'
+      contentInsetAdjustmentBehavior="automatic"
       contentContainerStyle={{
-        paddingTop: Platform.OS === "android" ? 17 : 0,
+        paddingTop: 17,
         paddingHorizontal: 17,
         paddingBottom: 150,
       }}
       data={sessions}
       renderItem={({ item }) => <SessionCard session={item} />}
       keyExtractor={(item) => item.Id || ""}
+      estimatedItemSize={200}
     />
   );
 }
@@ -78,7 +77,7 @@ const SessionCard = ({ session }: SessionCardProps) => {
 
     return Math.round(
       (100 / session.NowPlayingItem?.RunTimeTicks) *
-        (session.NowPlayingItem?.RunTimeTicks - remainingTicks),
+        (session.NowPlayingItem?.RunTimeTicks - remainingTicks)
     );
   };
 
@@ -96,112 +95,26 @@ const SessionCard = ({ session }: SessionCardProps) => {
     }
   }, [session]);
 
-  const { data: ipInfo } = useQuery<{
-    cityName?: string;
-    countryCode?: string;
-  }>({
-    queryKey: ["ipinfo", session.RemoteEndPoint],
-    staleTime: Number.POSITIVE_INFINITY,
-    queryFn: async () => {
-      const resp = await api!.axiosInstance.get(
-        `https://freeipapi.com/api/json/${session.RemoteEndPoint}`,
-      );
-      return resp.data;
-    },
-    enabled: !!api,
-  });
-
-  // Handle session controls
-  const [isControlLoading, setIsControlLoading] = useState<
-    Record<string, boolean>
-  >({});
-
-  const handleSystemCommand = async (command: GeneralCommandType) => {
-    if (!api || !session.Id) return false;
-
-    setIsControlLoading({ ...isControlLoading, [command]: true });
-
-    try {
-      getSessionApi(api).sendSystemCommand({
-        sessionId: session.Id,
-        command,
-      });
-      return true;
-    } catch (error) {
-      console.error(`Error sending ${command} command:`, error);
-      return false;
-    } finally {
-      setIsControlLoading({ ...isControlLoading, [command]: false });
-    }
-  };
-
-  const handlePlaystateCommand = async (command: PlaystateCommand) => {
-    if (!api || !session.Id) return false;
-
-    setIsControlLoading({ ...isControlLoading, [command]: true });
-
-    try {
-      getSessionApi(api).sendPlaystateCommand({
-        sessionId: session.Id,
-        command,
-      });
-
-      return true;
-    } catch (error) {
-      console.error(`Error sending playstate ${command} command:`, error);
-      return false;
-    } finally {
-      setIsControlLoading({ ...isControlLoading, [command]: false });
-    }
-  };
-
-  const handlePlayPause = async () => {
-    console.log("handlePlayPause");
-    await handlePlaystateCommand(PlaystateCommand.PlayPause);
-  };
-
-  const handleStop = async () => {
-    await handlePlaystateCommand(PlaystateCommand.Stop);
-  };
-
-  const handlePrevious = async () => {
-    await handlePlaystateCommand(PlaystateCommand.PreviousTrack);
-  };
-
-  const handleNext = async () => {
-    await handlePlaystateCommand(PlaystateCommand.NextTrack);
-  };
-
-  const handleToggleMute = async () => {
-    await handleSystemCommand(GeneralCommandType.ToggleMute);
-  };
-  const handleVolumeUp = async () => {
-    await handleSystemCommand(GeneralCommandType.VolumeUp);
-  };
-  const handleVolumeDown = async () => {
-    await handleSystemCommand(GeneralCommandType.VolumeDown);
-  };
-
   useInterval(tick, 1000);
 
   return (
-    <View className='flex flex-col shadow-md bg-neutral-900 rounded-2xl mb-4'>
-      <View className='flex flex-row p-4'>
-        <View className='w-20 pr-4'>
+    <View className="flex flex-col shadow-md bg-neutral-900 rounded-2xl mb-4">
+      <View className="flex flex-row p-4">
+        <View className="w-20 pr-4">
           <Poster
             id={session.NowPlayingItem?.Id}
             url={getPrimaryImageUrl({ api, item: session.NowPlayingItem })}
           />
         </View>
-        <View className='w-full flex-1'>
-          <View className='flex flex-row justify-between'>
-            <View className='flex-1 pr-4'>
+        <View className="w-full flex-1">
+          <View className="flex flex-row justify-between">
+            <View className="flex-1 pr-4">
               {session.NowPlayingItem?.Type === "Episode" ? (
                 <>
-                  <Text className='font-bold'>
+                  <Text className="font-bold">
                     {session.NowPlayingItem?.Name}
                   </Text>
-                  <Text numberOfLines={1} className='text-xs opacity-50'>
+                  <Text numberOfLines={1} className="text-xs opacity-50">
                     {`S${session.NowPlayingItem.ParentIndexNumber?.toString()}:E${session.NowPlayingItem.IndexNumber?.toString()}`}
                     {" - "}
                     {session.NowPlayingItem.SeriesName}
@@ -209,151 +122,48 @@ const SessionCard = ({ session }: SessionCardProps) => {
                 </>
               ) : (
                 <>
-                  <Text className='font-bold'>
+                  <Text className="font-bold">
                     {session.NowPlayingItem?.Name}
                   </Text>
-                  <Text className='text-xs opacity-50'>
+                  <Text className="text-xs opacity-50">
                     {session.NowPlayingItem?.ProductionYear}
                   </Text>
-                  <Text className='text-xs opacity-50'>
+                  <Text className="text-xs opacity-50">
                     {session.NowPlayingItem?.SeriesName}
                   </Text>
                 </>
               )}
             </View>
-            <Text className='text-xs opacity-50 align-right text-right'>
+            <Text className="text-xs opacity-50 align-right text-right">
               {session.UserName}
               {"\n"}
               {session.Client}
               {"\n"}
               {session.DeviceName}
-              {"\n"}
-              {ipInfo?.cityName} {ipInfo?.countryCode}
             </Text>
           </View>
-          <View className='flex-1' />
-          <View className='flex flex-col align-bottom'>
-            <View className='flex flex-row justify-between align-bottom mb-1'>
-              <Text className='-ml-0.5 text-xs opacity-50 align-left text-left'>
+          <View className="flex-1" />
+          <View className="flex flex-col align-bottom">
+            <View className="flex flex-row justify-between align-bottom mb-1">
+              <Text className="-ml-0.5 text-xs opacity-50 align-left text-left">
                 {!session.PlayState?.IsPaused ? (
-                  <Ionicons name='play' size={14} color='white' />
+                  <Ionicons name="play" size={14} color="white" />
                 ) : (
-                  <Ionicons name='pause' size={14} color='white' />
+                  <Ionicons name="pause" size={14} color="white" />
                 )}
               </Text>
-              <Text className='text-xs opacity-50 align-right text-right'>
+              <Text className="text-xs opacity-50 align-right text-right">
                 {formatTimeString(remainingTicks, "tick")} left
               </Text>
             </View>
-            <View className='align-bottom bg-gray-800 h-1'>
+            <View className="align-bottom bg-gray-800 h-1">
               <View
-                className={"bg-purple-600 h-full"}
+                className={`bg-purple-600 h-full`}
                 style={{
                   width: `${getProgressPercentage()}%`,
                 }}
               />
             </View>
-
-            {/* Session controls */}
-            <View className='flex flex-row mt-2 space-x-4 justify-center'>
-              <TouchableOpacity
-                onPress={handlePrevious}
-                disabled={isControlLoading[PlaystateCommand.PreviousTrack]}
-                style={{
-                  opacity: isControlLoading[PlaystateCommand.PreviousTrack]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                <MaterialCommunityIcons
-                  name='skip-previous'
-                  size={24}
-                  color='white'
-                />
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handlePlayPause}
-                disabled={isControlLoading[PlaystateCommand.PlayPause]}
-                style={{
-                  opacity: isControlLoading[PlaystateCommand.PlayPause]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                {session.PlayState?.IsPaused ? (
-                  <Ionicons name='play' size={24} color='white' />
-                ) : (
-                  <Ionicons name='pause' size={24} color='white' />
-                )}
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handleStop}
-                disabled={isControlLoading[PlaystateCommand.Stop]}
-                style={{
-                  opacity: isControlLoading[PlaystateCommand.Stop] ? 0.5 : 1,
-                }}
-              >
-                <Ionicons name='stop' size={24} color='white' />
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handleNext}
-                disabled={isControlLoading[PlaystateCommand.NextTrack]}
-                style={{
-                  opacity: isControlLoading[PlaystateCommand.NextTrack]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                <MaterialCommunityIcons
-                  name='skip-next'
-                  size={24}
-                  color='white'
-                />
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handleVolumeDown}
-                disabled={isControlLoading[GeneralCommandType.VolumeDown]}
-                style={{
-                  opacity: isControlLoading[GeneralCommandType.VolumeDown]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                <Ionicons name='volume-low' size={24} color='white' />
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handleToggleMute}
-                disabled={isControlLoading[GeneralCommandType.ToggleMute]}
-                style={{
-                  opacity: isControlLoading[GeneralCommandType.ToggleMute]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                <Ionicons
-                  name='volume-mute'
-                  size={24}
-                  color={session.PlayState?.IsMuted ? "red" : "white"}
-                />
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handleVolumeUp}
-                disabled={isControlLoading[GeneralCommandType.VolumeUp]}
-                style={{
-                  opacity: isControlLoading[GeneralCommandType.VolumeUp]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                <Ionicons name='volume-high' size={24} color='white' />
-              </TouchableOpacity>
-            </View>
           </View>
         </View>
       </View>
@@ -368,21 +178,20 @@ interface TranscodingBadgesProps {
 
 const TranscodingBadges = ({ properties }: TranscodingBadgesProps) => {
   const iconMap = {
-    bitrate: <Ionicons name='speedometer-outline' size={12} color='white' />,
-    codec: <Ionicons name='layers-outline' size={12} color='white' />,
+    bitrate: <Ionicons name="speedometer-outline" size={12} color="white" />,
+    codec: <Ionicons name="layers-outline" size={12} color="white" />,
     videoRange: (
-      <Ionicons name='color-palette-outline' size={12} color='white' />
+      <Ionicons name="color-palette-outline" size={12} color="white" />
     ),
-    resolution: <Ionicons name='film-outline' size={12} color='white' />,
-    language: <Ionicons name='language-outline' size={12} color='white' />,
-    audioChannels: <Ionicons name='mic-outline' size={12} color='white' />,
-    hwType: <Ionicons name='hardware-chip-outline' size={12} color='white' />,
+    resolution: <Ionicons name="film-outline" size={12} color="white" />,
+    language: <Ionicons name="language-outline" size={12} color="white" />,
+    audioChannels: <Ionicons name="mic-outline" size={12} color="white" />,
   } as const;
 
   const icon = (val: string) => {
     return (
       iconMap[val as keyof typeof iconMap] ?? (
-        <Ionicons name='layers-outline' size={12} color='white' />
+        <Ionicons name="layers-outline" size={12} color="white" />
       )
     );
   };
@@ -391,8 +200,6 @@ const TranscodingBadges = ({ properties }: TranscodingBadgesProps) => {
     switch (key) {
       case "bitrate":
         return formatBitrate(val);
-      case "hwType":
-        return val === HardwareAccelerationType.None ? "sw" : "hw";
       default:
         return val;
     }
@@ -403,8 +210,8 @@ const TranscodingBadges = ({ properties }: TranscodingBadgesProps) => {
     .map(([key]) => (
       <Badge
         key={key}
-        variant='gray'
-        className='m-0 p-0 pt-0.5 mr-1'
+        variant="gray"
+        className="m-0 p-0 pt-0.5 mr-1"
         text={formatVal(key, properties[key as keyof StreamProps])}
         iconLeft={icon(key)}
       />
@@ -412,7 +219,6 @@ const TranscodingBadges = ({ properties }: TranscodingBadgesProps) => {
 };
 
 interface StreamProps {
-  hwType?: HardwareAccelerationType | null | undefined;
   resolution?: string | null | undefined;
   language?: string | null | undefined;
   codec?: string | null | undefined;
@@ -424,7 +230,7 @@ interface StreamProps {
 interface TranscodingStreamViewProps {
   title: string | undefined;
   value?: string;
-  isTranscoding: boolean;
+  isTranscoding: Boolean;
   transcodeValue?: string | undefined | null;
   properties: StreamProps;
   transcodeProperties?: StreamProps;
@@ -435,40 +241,43 @@ const TranscodingStreamView = ({
   isTranscoding,
   properties,
   transcodeProperties,
+  value,
+  transcodeValue,
 }: TranscodingStreamViewProps) => {
   return (
-    <View className='flex flex-col pt-2 first:pt-0'>
-      <View className='flex flex-row'>
-        <Text className='text-xs opacity-50 w-20 font-bold text-right pr-4'>
+    <View className="flex flex-col pt-2 first:pt-0">
+      <View className="flex flex-row">
+        <Text className="text-xs opacity-50 w-20 font-bold text-right pr-4">
           {title}
         </Text>
-        <Text className='flex-1'>
+        <Text className="flex-1">
           <TranscodingBadges properties={properties} />
         </Text>
       </View>
       {isTranscoding && transcodeProperties ? (
-        <View className='flex flex-row'>
-          <Text className='-mt-0 text-xs opacity-50 w-20 font-bold text-right pr-4'>
-            <MaterialCommunityIcons
-              name='arrow-right-bottom'
-              size={14}
-              color='white'
-            />
-          </Text>
-          <Text className='flex-1 text-sm mt-1'>
-            <TranscodingBadges properties={transcodeProperties} />
-          </Text>
-        </View>
+        <>
+          <View className="flex flex-row">
+            <Text className="-mt-0 text-xs opacity-50 w-20 font-bold text-right pr-4">
+              <MaterialCommunityIcons
+                name="arrow-right-bottom"
+                size={14}
+                color="white"
+              />
+            </Text>
+            <Text className="flex-1 text-sm mt-1">
+              <TranscodingBadges properties={transcodeProperties} />
+            </Text>
+          </View>
+        </>
       ) : null}
     </View>
   );
 };
 
 const TranscodingView = ({ session }: SessionCardProps) => {
-  const { t } = useTranslation();
   const videoStream = useMemo(() => {
     return session.NowPlayingItem?.MediaStreams?.filter(
-      (s) => s.Type === "Video",
+      (s) => s.Type == "Video"
     )[0];
   }, [session]);
 
@@ -487,36 +296,35 @@ const TranscodingView = ({ session }: SessionCardProps) => {
   }, [session.PlayState?.SubtitleStreamIndex]);
 
   const isTranscoding = useMemo(() => {
-    return (
-      session.PlayState?.PlayMethod === "Transcode" && session.TranscodingInfo
-    );
-  }, [session.PlayState?.PlayMethod, session.TranscodingInfo]);
+    return session.PlayState?.PlayMethod == "Transcode";
+  }, [session.PlayState?.PlayMethod]);
 
   const videoStreamTitle = () => {
     return videoStream?.DisplayTitle?.split(" ")[0];
   };
 
   return (
-    <View className='flex flex-col bg-neutral-800 rounded-b-2xl p-4 pt-2'>
+    <View className="flex flex-col bg-neutral-800 rounded-b-2xl p-4 pt-2">
       <TranscodingStreamView
-        title={t("common.video")}
+        title="Video"
         properties={{
           resolution: videoStreamTitle(),
           bitrate: videoStream?.BitRate,
           codec: videoStream?.Codec,
         }}
         transcodeProperties={{
-          hwType: session.TranscodingInfo?.HardwareAccelerationType,
           bitrate: session.TranscodingInfo?.Bitrate,
           codec: session.TranscodingInfo?.VideoCodec,
         }}
         isTranscoding={
-          !!(isTranscoding && !session.TranscodingInfo?.IsVideoDirect)
+          isTranscoding && !session.TranscodingInfo?.IsVideoDirect
+            ? true
+            : false
         }
       />
 
       <TranscodingStreamView
-        title={t("common.audio")}
+        title="Audio"
         properties={{
           language: audioStream?.Language,
           bitrate: audioStream?.BitRate,
@@ -524,24 +332,29 @@ const TranscodingView = ({ session }: SessionCardProps) => {
           audioChannels: audioStream?.ChannelLayout,
         }}
         transcodeProperties={{
+          bitrate: session.TranscodingInfo?.Bitrate,
           codec: session.TranscodingInfo?.AudioCodec,
           audioChannels: session.TranscodingInfo?.AudioChannels?.toString(),
         }}
         isTranscoding={
-          !!(isTranscoding && !session.TranscodingInfo?.IsVideoDirect)
+          isTranscoding && !session.TranscodingInfo?.IsVideoDirect
+            ? true
+            : false
         }
       />
 
       {subtitleStream && (
-        <TranscodingStreamView
-          title={t("common.subtitle")}
-          isTranscoding={false}
-          properties={{
-            language: subtitleStream?.Language,
-            codec: subtitleStream?.Codec,
-          }}
-          transcodeValue={null}
-        />
+        <>
+          <TranscodingStreamView
+            title="Subtitle"
+            isTranscoding={false}
+            properties={{
+              language: subtitleStream?.Language,
+              codec: subtitleStream?.Codec,
+            }}
+            transcodeValue={null}
+          />
+        </>
       )}
     </View>
   );

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

@@ -1,23 +1,41 @@
-import { useNavigation, useRouter } from "expo-router";
-import { t } from "i18next";
-import { useAtom } from "jotai";
-import { useEffect } from "react";
-import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
 import { AppLanguageSelector } from "@/components/settings/AppLanguageSelector";
+import { AudioToggles } from "@/components/settings/AudioToggles";
+import DownloadSettings from "@/components/settings/DownloadSettings";
+import { MediaProvider } from "@/components/settings/MediaContext";
+import { MediaToggles } from "@/components/settings/MediaToggles";
+import { OtherSettings } from "@/components/settings/OtherSettings";
+import { PluginSettings } from "@/components/settings/PluginSettings";
 import { QuickConnect } from "@/components/settings/QuickConnect";
 import { StorageSettings } from "@/components/settings/StorageSettings";
+import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
 import { UserInfo } from "@/components/settings/UserInfo";
-import { useJellyfin, userAtom } from "@/providers/JellyfinProvider";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useJellyfin } from "@/providers/JellyfinProvider";
+import { clearLogs } from "@/utils/log";
+import { storage } from "@/utils/mmkv";
+import { useNavigation, useRouter } from "expo-router";
+import { t } from "i18next";
+import React, { useEffect } from "react";
+import { ScrollView, Switch, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAtom } from "jotai";
+import { userAtom } from "@/providers/JellyfinProvider";
+import { ChromecastSettings } from "@/components/settings/ChromecastSettings";
 
 export default function settings() {
   const router = useRouter();
   const insets = useSafeAreaInsets();
-  const [_user] = useAtom(userAtom);
+  const [user] = useAtom(userAtom);
   const { logout } = useJellyfin();
+  const successHapticFeedback = useHaptic("success");
+
+  const onClearLogsClicked = async () => {
+    clearLogs();
+    successHapticFeedback();
+  };
 
   const navigation = useNavigation();
   useEffect(() => {
@@ -28,7 +46,7 @@ export default function settings() {
             logout();
           }}
         >
-          <Text className='text-red-600 px-2'>
+          <Text className="text-red-600">
             {t("home.settings.log_out_button")}
           </Text>
         </TouchableOpacity>
@@ -38,62 +56,64 @@ export default function settings() {
 
   return (
     <ScrollView
-      contentInsetAdjustmentBehavior='automatic'
       contentContainerStyle={{
         paddingLeft: insets.left,
         paddingRight: insets.right,
       }}
     >
-      <View
-        className='p-4 flex flex-col'
-        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
-      >
-        <View className='mb-4'>
-          <UserInfo />
-        </View>
+      <View className="p-4 flex flex-col gap-y-4">
+        <UserInfo />
 
-        <QuickConnect className='mb-4' />
+        <QuickConnect className="mb-4" />
 
-        <View className='mb-4'>
-          <AppLanguageSelector />
-        </View>
+        <MediaProvider>
+          <MediaToggles className="mb-4" />
+          <AudioToggles className="mb-4" />
+          <SubtitleToggles className="mb-4" />
+        </MediaProvider>
 
-        <View className='mb-4'>
-          <ListGroup title={t("home.settings.categories.title")}>
-            <ListItem
-              onPress={() => router.push("/settings/playback-controls/page")}
-              showArrow
-              title={t("home.settings.playback_controls.title")}
-            />
-            <ListItem
-              onPress={() => router.push("/settings/audio-subtitles/page")}
-              showArrow
-              title={t("home.settings.audio_subtitles.title")}
-            />
-            <ListItem
-              onPress={() => router.push("/settings/appearance/page")}
-              showArrow
-              title={t("home.settings.appearance.title")}
-            />
-            <ListItem
-              onPress={() => router.push("/settings/plugins/page")}
-              showArrow
-              title={t("home.settings.plugins.plugins_title")}
-            />
-            <ListItem
-              onPress={() => router.push("/settings/intro/page")}
-              showArrow
-              title={t("home.settings.intro.title")}
-            />
+        <OtherSettings />
+
+        <DownloadSettings />
+
+        <PluginSettings />
+
+        <AppLanguageSelector />
+
+        <ChromecastSettings />
+
+        <ListGroup title={"Intro"}>
+          <ListItem
+            onPress={() => {
+              router.push("/intro/page");
+            }}
+            title={t("home.settings.intro.show_intro")}
+          />
+          <ListItem
+            textColor="red"
+            onPress={() => {
+              storage.set("hasShownIntro", false);
+            }}
+            title={t("home.settings.intro.reset_intro")}
+          />
+        </ListGroup>
+
+        <View className="mb-4">
+          <ListGroup title={t("home.settings.logs.logs_title")}>
             <ListItem
               onPress={() => router.push("/settings/logs/page")}
               showArrow
               title={t("home.settings.logs.logs_title")}
             />
+            <ListItem
+              textColor="red"
+              onPress={onClearLogsClicked}
+              title={t("home.settings.logs.delete_all_logs")}
+            />
           </ListGroup>
         </View>
 
-        {!Platform.isTV && <StorageSettings />}
+        <StorageSettings />
       </View>
     </ScrollView>
   );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -13,6 +13,7 @@ import Animated, {
 import { Text } from "@/components/common/Text";
 import { ItemContent } from "@/components/ItemContent";
 import { useItemQuery } from "@/hooks/useItemQuery";
+import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
 
 const Page: React.FC = () => {
   const { id } = useLocalSearchParams() as { id: string };
@@ -21,14 +22,16 @@ const Page: React.FC = () => {
   const { offline } = useLocalSearchParams() as { offline?: string };
   const isOffline = offline === "true";
 
-  const { data: item, isError } = useItemQuery(id, false, undefined, [
+  // 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,
   ]);
 
-  // preload media sources in background
-  useItemQuery(id, false, undefined, []);
+  // Lazily preload item with full media sources in background
+  const { data: itemWithSources } = useItemQuery(id, isOffline, undefined, []);
 
   const opacity = useSharedValue(1);
   const animatedStyle = useAnimatedStyle(() => {
@@ -73,33 +76,35 @@ const Page: React.FC = () => {
     );
 
   return (
-    <View className='flex flex-1 relative'>
-      <Animated.View
-        pointerEvents={"none"}
-        style={[animatedStyle]}
-        className='absolute top-0 left-0 flex flex-col items-start h-screen w-screen px-4 z-50 bg-black'
-      >
-        <View
-          style={{
-            height: item?.Type === "Episode" ? 300 : 450,
-          }}
-          className='bg-transparent rounded-lg mb-4 w-full'
-        />
-        <View className='h-6 bg-neutral-900 rounded mb-4 w-14' />
-        <View className='h-10 bg-neutral-900 rounded-lg mb-2 w-1/2' />
-        <View className='h-3 bg-neutral-900 rounded mb-3 w-8' />
-        <View className='flex flex-row space-x-1 mb-8'>
-          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
-          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
-          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
-        </View>
-        <View className='h-3 bg-neutral-900 rounded w-2/3 mb-1' />
-        <View className='h-10 bg-neutral-900 rounded-lg w-full mb-2' />
-        <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
-        <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
-      </Animated.View>
-      {item && <ItemContent item={item} isOffline={isOffline} />}
-    </View>
+    <OfflineModeProvider isOffline={isOffline}>
+      <View className='flex flex-1 relative'>
+        <Animated.View
+          pointerEvents={"none"}
+          style={[animatedStyle]}
+          className='absolute top-0 left-0 flex flex-col items-start h-screen w-screen px-4 z-50 bg-black'
+        >
+          <View
+            style={{
+              height: item?.Type === "Episode" ? 300 : 450,
+            }}
+            className='bg-transparent rounded-lg mb-4 w-full'
+          />
+          <View className='h-6 bg-neutral-900 rounded mb-4 w-14' />
+          <View className='h-10 bg-neutral-900 rounded-lg mb-2 w-1/2' />
+          <View className='h-3 bg-neutral-900 rounded mb-3 w-8' />
+          <View className='flex flex-row space-x-1 mb-8'>
+            <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+            <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+            <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+          </View>
+          <View className='h-3 bg-neutral-900 rounded w-2/3 mb-1' />
+          <View className='h-10 bg-neutral-900 rounded-lg w-full mb-2' />
+          <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
+          <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
+        </Animated.View>
+        {item && <ItemContent item={item} itemWithSources={itemWithSources} />}
+      </View>
+    </OfflineModeProvider>
   );
 };
 

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

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

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

@@ -8,7 +8,7 @@ import {
 } from "@gorhom/bottom-sheet";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation, useRouter } from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -27,6 +27,7 @@ import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { JellyserrRatings } from "@/components/Ratings";
 import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
 import { ItemActions } from "@/components/series/SeriesActions";
+import useRouter from "@/hooks/useAppRouter";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
 import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";

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

@@ -1,29 +1,29 @@
+import {
+  useLocalSearchParams,
+  useSegments,
+} from "expo-router";
+import React, { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { useLocalSearchParams } from "expo-router";
-import { orderBy, uniqBy } from "lodash";
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { Text } from "@/components/common/Text";
-import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
-import { OverviewText } from "@/components/OverviewText";
-import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
-import type { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
+import { Text } from "@/components/common/Text";
+import { Image } from "expo-image";
+import { OverviewText } from "@/components/OverviewText";
+import {orderBy, uniqBy} from "lodash";
+import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
+import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
+import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
+import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import { useTranslation } from "react-i18next";
 
 export default function page() {
   const local = useLocalSearchParams();
   const { t } = useTranslation();
 
-  const {
-    jellyseerrApi,
-    jellyseerrRegion: region,
-    jellyseerrLocale: locale,
-  } = useJellyseerr();
+  const { jellyseerrApi, jellyseerrUser, jellyseerrRegion: region, jellyseerrLocale: locale } = useJellyseerr();
 
   const { personId } = local as { personId: string };
 
-  const { data } = useQuery({
+  const { data, isLoading, isFetching } = useQuery({
     queryKey: ["jellyseerr", "person", personId],
     queryFn: async () => ({
       details: await jellyseerrApi?.personDetails(personId),
@@ -34,27 +34,18 @@ export default function page() {
 
   const castedRoles: PersonCreditCast[] = useMemo(
     () =>
-      uniqBy(
-        orderBy(
-          data?.combinedCredits?.cast,
-          ["voteCount", "voteAverage"],
-          "desc",
-        ),
-        "id",
-      ),
-    [data?.combinedCredits],
+      uniqBy(orderBy(
+        data?.combinedCredits?.cast,
+        ["voteCount", "voteAverage"],
+        "desc"
+      ), 'id'),
+    [data?.combinedCredits]
   );
   const backdrops = useMemo(
-    () =>
-      jellyseerrApi
-        ? castedRoles.map((c) =>
-            jellyseerrApi.imageProxy(
-              c.backdropPath,
-              "w1920_and_h800_multi_faces",
-            ),
-          )
-        : [],
-    [jellyseerrApi, data?.combinedCredits],
+    () => jellyseerrApi
+      ? castedRoles.map((c) => jellyseerrApi.imageProxy(c.backdropPath, "w1920_and_h800_multi_faces"))
+      : [],
+    [jellyseerrApi, data?.combinedCredits]
   );
 
   return (
@@ -67,15 +58,15 @@ export default function page() {
         <Image
           key={data?.details?.id}
           id={data?.details?.id.toString()}
-          className='rounded-full bottom-1'
+          className="rounded-full bottom-1"
           source={{
             uri: jellyseerrApi?.imageProxy(
               data?.details?.profilePath,
-              "w600_and_h600_bestv2",
+              "w600_and_h600_bestv2"
             ),
           }}
           cachePolicy={"memory-disk"}
-          contentFit='cover'
+          contentFit="cover"
           style={{
             width: 125,
             height: 125,
@@ -84,26 +75,27 @@ export default function page() {
       }
       HeaderContent={() => (
         <>
-          <Text className='font-bold text-2xl mb-1'>{data?.details?.name}</Text>
-          <Text className='opacity-50'>
+          <Text className="font-bold text-2xl mb-1">
+            {data?.details?.name}
+          </Text>
+          <Text className="opacity-50">
             {t("jellyseerr.born")}{" "}
-            {data?.details?.birthday &&
-              new Date(data.details.birthday).toLocaleDateString(
-                `${locale}-${region}`,
-                {
-                  year: "numeric",
-                  month: "long",
-                  day: "numeric",
-                },
-              )}{" "}
+            {new Date(data?.details?.birthday!!).toLocaleDateString(
+              `${locale}-${region}`,
+              {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              }
+            )}{" "}
             | {data?.details?.placeOfBirth}
           </Text>
         </>
       )}
       MainContent={() => (
-        <OverviewText text={data?.details?.biography} className='mt-4' />
+        <OverviewText text={data?.details?.biography} className="mt-4" />
       )}
-      renderItem={(item, _index) => <JellyseerrPoster item={item} />}
+      renderItem={(item, index) => <JellyseerrPoster item={item as MovieResult | TvResult} />}
     />
   );
 }

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@ import type {
   BaseItemDto,
   BaseItemDtoQueryResult,
   BaseItemKind,
+  ItemFilter,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   getFilterApi,
@@ -27,7 +28,11 @@ 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,
@@ -39,12 +44,19 @@ import {
   sortOrderOptions,
   sortOrderPreferenceAtom,
   tagsFilterAtom,
+  useFilterOptions,
   yearFilterAtom,
 } from "@/utils/atoms/filters";
+import { useSettings } from "@/utils/atoms/settings";
 
 const Page = () => {
-  const searchParams = useLocalSearchParams();
-  const { libraryId } = searchParams as { libraryId: string };
+  const searchParams = useLocalSearchParams() as {
+    libraryId: string;
+    sortBy?: string;
+    sortOrder?: string;
+    filterBy?: string;
+  };
+  const { libraryId } = searchParams;
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -54,9 +66,13 @@ 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 [sortOrderPreference, setOderByPreference] = useAtom(
+  const [filterByPreference, setFilterByPreference] = useAtom(
+    FilterByPreferenceAtom,
+  );
+  const [sortOrderPreference, setOrderByPreference] = useAtom(
     sortOrderPreferenceAtom,
   );
 
@@ -65,17 +81,33 @@ const Page = () => {
   const { t } = useTranslation();
 
   useEffect(() => {
-    const sop = getSortOrderPreference(libraryId, sortOrderPreference);
-    if (sop) {
-      _setSortOrder([sop]);
+    // Check for URL params first (from "See All" navigation)
+    const urlSortBy = searchParams.sortBy as SortByOption | undefined;
+    const urlSortOrder = searchParams.sortOrder as SortOrderOption | undefined;
+    const urlFilterBy = searchParams.filterBy as FilterByOption | undefined;
+
+    // Apply sortOrder: URL param > saved preference > default
+    if (urlSortOrder && Object.values(SortOrderOption).includes(urlSortOrder)) {
+      _setSortOrder([urlSortOrder]);
     } else {
-      _setSortOrder([SortOrderOption.Ascending]);
+      const sop = getSortOrderPreference(libraryId, sortOrderPreference);
+      _setSortOrder([sop || SortOrderOption.Ascending]);
     }
-    const obp = getSortByPreference(libraryId, sortByPreference);
-    if (obp) {
-      _setSortBy([obp]);
+
+    // Apply sortBy: URL param > saved preference > default
+    if (urlSortBy && Object.values(SortByOption).includes(urlSortBy)) {
+      _setSortBy([urlSortBy]);
     } else {
-      _setSortBy([SortByOption.SortName]);
+      const obp = getSortByPreference(libraryId, sortByPreference);
+      _setSortBy([obp || SortByOption.SortName]);
+    }
+
+    // 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] : []);
     }
   }, [
     libraryId,
@@ -83,6 +115,11 @@ const Page = () => {
     sortByPreference,
     _setSortOrder,
     _setSortBy,
+    filterByPreference,
+    _setFilterBy,
+    searchParams.sortBy,
+    searchParams.sortOrder,
+    searchParams.filterBy,
   ]);
 
   const setSortBy = useCallback(
@@ -100,14 +137,28 @@ const Page = () => {
     (sortOrder: SortOrderOption[]) => {
       const sop = getSortOrderPreference(libraryId, sortOrderPreference);
       if (sortOrder[0] !== sop) {
-        setOderByPreference({
+        setOrderByPreference({
           ...sortOrderPreference,
           [libraryId]: sortOrder[0],
         });
       }
       _setSortOrder(sortOrder);
     },
-    [libraryId, sortOrderPreference, setOderByPreference, _setSortOrder],
+    [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],
   );
 
   const nrOfCols = useMemo(() => {
@@ -158,6 +209,10 @@ const Page = () => {
         itemType = "Series";
       } else if (library.CollectionType === "boxsets") {
         itemType = "BoxSet";
+      } else if (library.CollectionType === "homevideos") {
+        itemType = "Video";
+      } else if (library.CollectionType === "musicvideos") {
+        itemType = "MusicVideo";
       }
 
       const response = await getItemsApi(api).getItems({
@@ -168,6 +223,7 @@ 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,
@@ -190,6 +246,7 @@ const Page = () => {
       selectedTags,
       sortBy,
       sortOrder,
+      filterBy,
     ],
   );
 
@@ -203,6 +260,7 @@ const Page = () => {
         selectedTags,
         sortBy,
         sortOrder,
+        filterBy,
       ],
       queryFn: fetchItems,
       getNextPageParam: (lastPage, pages) => {
@@ -268,7 +326,8 @@ const Page = () => {
   );
 
   const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
-
+  const generalFilters = useFilterOptions();
+  const settings = useSettings();
   const ListHeaderComponent = useCallback(
     () => (
       <FlatList
@@ -404,6 +463,26 @@ 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}
@@ -424,6 +503,9 @@ const Page = () => {
       sortOrder,
       setSortOrder,
       isFetching,
+      filterBy,
+      setFilter,
+      settings,
     ],
   );
 

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

@@ -39,7 +39,6 @@ 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

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

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

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

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

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

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

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

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

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

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

@@ -1,22 +1,26 @@
-import { Stack } from "expo-router";
-import { useTranslation } from "react-i18next";
-import { Platform } from "react-native";
 import {
   commonScreenOptions,
   nestedTabPageScreenOptions,
 } from "@/components/stacks/NestedTabPageStack";
+import { Stack } from "expo-router";
+import { Platform } from "react-native";
+import { useTranslation } from "react-i18next";
 
 export default function SearchLayout() {
   const { t } = useTranslation();
   return (
     <Stack>
       <Stack.Screen
-        name='index'
+        name="index"
         options={{
-          headerShown: !Platform.isTV,
+          headerShown: true,
+          headerLargeTitle: true,
           headerTitle: t("tabs.search"),
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
         }}
       />
@@ -24,26 +28,26 @@ export default function SearchLayout() {
         <Stack.Screen key={name} name={name} options={options} />
       ))}
       <Stack.Screen
-        name='collections/[collectionId]'
+        name="collections/[collectionId]"
         options={{
           title: "",
-          headerShown: !Platform.isTV,
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
+          headerShown: true,
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
         }}
       />
-      <Stack.Screen name='jellyseerr/page' options={commonScreenOptions} />
+      <Stack.Screen name="jellyseerr/page" options={commonScreenOptions} />
       <Stack.Screen
-        name='jellyseerr/person/[personId]'
+        name="jellyseerr/person/[personId]"
         options={commonScreenOptions}
       />
       <Stack.Screen
-        name='jellyseerr/company/[companyId]'
+        name="jellyseerr/company/[companyId]"
         options={commonScreenOptions}
       />
       <Stack.Screen
-        name='jellyseerr/genre/[genreId]'
+        name="jellyseerr/genre/[genreId]"
         options={commonScreenOptions}
       />
     </Stack>

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

@@ -1,43 +1,38 @@
-import type {
+import { Input } from "@/components/common/Input";
+import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
+import { Tag } from "@/components/GenreTags";
+import { ItemCardText } from "@/components/ItemCardText";
+import { JellyserrIndexPage } from "@/components/jellyseerr/JellyseerrIndexPage";
+import MoviePoster from "@/components/posters/MoviePoster";
+import SeriesPoster from "@/components/posters/SeriesPoster";
+import { LoadingSkeleton } from "@/components/search/LoadingSkeleton";
+import { SearchItemWrapper } from "@/components/search/SearchItemWrapper";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import {
   BaseItemDto,
   BaseItemKind,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { getItemsApi, getSearchApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { router, useLocalSearchParams, useNavigation } from "expo-router";
+import { Href, router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import {
+import React, {
   useCallback,
   useEffect,
-  useId,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
-import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDebounce } from "use-debounce";
-import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
-import { Input } from "@/components/common/Input";
-import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import { ItemCardText } from "@/components/ItemCardText";
-import {
-  JellyseerrSearchSort,
-  JellyserrIndexPage,
-} from "@/components/jellyseerr/JellyseerrIndexPage";
-import MoviePoster from "@/components/posters/MoviePoster";
-import SeriesPoster from "@/components/posters/SeriesPoster";
-import { DiscoverFilters } from "@/components/search/DiscoverFilters";
-import { LoadingSkeleton } from "@/components/search/LoadingSkeleton";
-import { SearchItemWrapper } from "@/components/search/SearchItemWrapper";
-import { SearchTabButtons } from "@/components/search/SearchTabButtons";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
+import { useTranslation } from "react-i18next";
 import { eventBus } from "@/utils/eventBus";
 
 type SearchType = "Library" | "Discover";
@@ -55,13 +50,8 @@ export default function search() {
   const params = useLocalSearchParams();
   const insets = useSafeAreaInsets();
 
-  const [user] = useAtom(userAtom);
-
   const { t } = useTranslation();
 
-  const searchFilterId = useId();
-  const orderFilterId = useId();
-
   const { q } = params as { q: string };
 
   const [searchType, setSearchType] = useState<SearchType>("Library");
@@ -70,27 +60,17 @@ export default function search() {
   const [debouncedSearch] = useDebounce(search, 500);
 
   const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
 
-  const { settings } = useSettings();
+  const [settings] = useSettings();
   const { jellyseerrApi } = useJellyseerr();
-  const [jellyseerrOrderBy, setJellyseerrOrderBy] =
-    useState<JellyseerrSearchSort>(
-      JellyseerrSearchSort[
-        JellyseerrSearchSort.DEFAULT
-      ] as unknown as JellyseerrSearchSort,
-    );
-  const [jellyseerrSortOrder, setJellyseerrSortOrder] = useState<
-    "asc" | "desc"
-  >("desc");
 
   const searchEngine = useMemo(() => {
     return settings?.searchEngine || "Jellyfin";
   }, [settings]);
 
   useEffect(() => {
-    if (q && q.length > 0) {
-      setSearch(q);
-    }
+    if (q && q.length > 0) setSearch(q);
   }, [q]);
 
   const searchFn = useCallback(
@@ -101,52 +81,45 @@ export default function search() {
       types: BaseItemKind[];
       query: string;
     }): Promise<BaseItemDto[]> => {
-      if (!api || !query) {
-        return [];
-      }
+      if (!api || !query) return [];
 
       try {
         if (searchEngine === "Jellyfin") {
-          const searchApi = await getItemsApi(api).getItems({
+          const searchApi = await getSearchApi(api).getSearchHints({
             searchTerm: query,
             limit: 10,
             includeItemTypes: types,
-            recursive: true,
-            userId: user?.Id,
           });
 
-          return (searchApi.data.Items as BaseItemDto[]) || [];
+          return (searchApi.data.SearchHints as BaseItemDto[]) || [];
+        } else {
+          if (!settings?.marlinServerUrl) return [];
+
+          const url = `${
+            settings.marlinServerUrl
+          }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
+            .map((type) => encodeURIComponent(type))
+            .join("&includeItemTypes=")}`;
+
+          const response1 = await axios.get(url);
+
+          const ids = response1.data.ids;
+
+          if (!ids || !ids.length) return [];
+
+          const response2 = await getItemsApi(api).getItems({
+            ids,
+            enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+          });
+
+          return (response2.data.Items as BaseItemDto[]) || [];
         }
-        if (!settings?.marlinServerUrl) {
-          return [];
-        }
-
-        const url = `${
-          settings.marlinServerUrl
-        }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
-          .map((type) => encodeURIComponent(type))
-          .join("&includeItemTypes=")}`;
-
-        const response1 = await axios.get(url);
-
-        const ids = response1.data.ids;
-
-        if (!ids || !ids.length) {
-          return [];
-        }
-
-        const response2 = await getItemsApi(api).getItems({
-          ids,
-          enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-        });
-
-        return (response2.data.Items as BaseItemDto[]) || [];
       } catch (error) {
         console.error("Error during search:", error);
         return []; // Ensure an empty array is returned in case of an error
       }
     },
-    [api, searchEngine, settings],
+    [api, searchEngine, settings]
   );
 
   type HeaderSearchBarRef = {
@@ -176,10 +149,8 @@ export default function search() {
 
   useEffect(() => {
     const unsubscribe = eventBus.on("searchTabPressed", () => {
-      // Screen not active
-      if (!searchBarRef.current) {
-        return;
-      }
+      // Screen not actuve
+      if (!searchBarRef.current) return;
       // Screen is active, focus search bar
       searchBarRef.current?.focus();
     });
@@ -254,186 +225,165 @@ export default function search() {
   }, [l1, l2, l3, l7, l8]);
 
   return (
-    <ScrollView
-      keyboardDismissMode='on-drag'
-      contentInsetAdjustmentBehavior='automatic'
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
-    >
-      {/* <View
-        className='flex flex-col'
-        style={{
-          marginTop: Platform.OS === "android" ? 16 : 0,
+    <>
+      <ScrollView
+        keyboardDismissMode="on-drag"
+        contentInsetAdjustmentBehavior="automatic"
+        contentContainerStyle={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
         }}
-      > */}
-      {Platform.isTV && (
-        <Input
-          placeholder={t("search.search")}
-          onChangeText={(text) => {
-            router.setParams({ q: "" });
-            setSearch(text);
-          }}
-          keyboardType='default'
-          returnKeyType='done'
-          autoCapitalize='none'
-          clearButtonMode='while-editing'
-          maxLength={500}
-        />
-      )}
-      <View
-        className='flex flex-col'
-        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
       >
-        {jellyseerrApi && (
-          <View className='pl-4 pr-4 flex flex-row'>
-            <SearchTabButtons
-              searchType={searchType}
-              setSearchType={setSearchType}
-              t={t}
-            />
-            {searchType === "Discover" &&
-              !loading &&
-              noResults &&
-              debouncedSearch.length > 0 && (
-                <DiscoverFilters
-                  searchFilterId={searchFilterId}
-                  orderFilterId={orderFilterId}
-                  jellyseerrOrderBy={jellyseerrOrderBy}
-                  setJellyseerrOrderBy={setJellyseerrOrderBy}
-                  jellyseerrSortOrder={jellyseerrSortOrder}
-                  setJellyseerrSortOrder={setJellyseerrSortOrder}
-                  t={t}
+        <View
+          className="flex flex-col"
+          style={{
+            marginTop: Platform.OS === "android" ? 16 : 0,
+          }}
+        >
+          {jellyseerrApi && (
+            <View className="flex flex-row flex-wrap space-x-2 px-4 mb-2">
+              <TouchableOpacity onPress={() => setSearchType("Library")}>
+                <Tag
+                  text={t("search.library")}
+                  textClass="p-1"
+                  className={
+                    searchType === "Library" ? "bg-purple-600" : undefined
+                  }
                 />
-              )}
-          </View>
-        )}
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => setSearchType("Discover")}>
+                <Tag
+                  text={t("search.discover")}
+                  textClass="p-1"
+                  className={
+                    searchType === "Discover" ? "bg-purple-600" : undefined
+                  }
+                />
+              </TouchableOpacity>
+            </View>
+          )}
 
-        <View className='mt-2'>
-          <LoadingSkeleton isLoading={loading} />
+          <View className="mt-2">
+            <LoadingSkeleton isLoading={loading} />
+          </View>
+
+          {searchType === "Library" ? (
+            <View className={l1 || l2 ? "opacity-0" : "opacity-100"}>
+              <SearchItemWrapper
+                header={t("search.movies")}
+                ids={movies?.map((m) => m.Id!)}
+                renderItem={(item: BaseItemDto) => (
+                  <TouchableItemRouter
+                    key={item.Id}
+                    className="flex flex-col w-28 mr-2"
+                    item={item}
+                  >
+                    <MoviePoster item={item} key={item.Id} />
+                    <Text numberOfLines={2} className="mt-2">
+                      {item.Name}
+                    </Text>
+                    <Text className="opacity-50 text-xs">
+                      {item.ProductionYear}
+                    </Text>
+                  </TouchableItemRouter>
+                )}
+              />
+              <SearchItemWrapper
+                ids={series?.map((m) => m.Id!)}
+                header={t("search.series")}
+                renderItem={(item: BaseItemDto) => (
+                  <TouchableItemRouter
+                    key={item.Id}
+                    item={item}
+                    className="flex flex-col w-28 mr-2"
+                  >
+                    <SeriesPoster item={item} key={item.Id} />
+                    <Text numberOfLines={2} className="mt-2">
+                      {item.Name}
+                    </Text>
+                    <Text className="opacity-50 text-xs">
+                      {item.ProductionYear}
+                    </Text>
+                  </TouchableItemRouter>
+                )}
+              />
+              <SearchItemWrapper
+                ids={episodes?.map((m) => m.Id!)}
+                header={t("search.episodes")}
+                renderItem={(item: BaseItemDto) => (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className="flex flex-col w-44 mr-2"
+                  >
+                    <ContinueWatchingPoster item={item} />
+                    <ItemCardText item={item} />
+                  </TouchableItemRouter>
+                )}
+              />
+              <SearchItemWrapper
+                ids={collections?.map((m) => m.Id!)}
+                header={t("search.collections")}
+                renderItem={(item: BaseItemDto) => (
+                  <TouchableItemRouter
+                    key={item.Id}
+                    item={item}
+                    className="flex flex-col w-28 mr-2"
+                  >
+                    <MoviePoster item={item} key={item.Id} />
+                    <Text numberOfLines={2} className="mt-2">
+                      {item.Name}
+                    </Text>
+                  </TouchableItemRouter>
+                )}
+              />
+              <SearchItemWrapper
+                ids={actors?.map((m) => m.Id!)}
+                header={t("search.actors")}
+                renderItem={(item: BaseItemDto) => (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className="flex flex-col w-28 mr-2"
+                  >
+                    <MoviePoster item={item} />
+                    <ItemCardText item={item} />
+                  </TouchableItemRouter>
+                )}
+              />
+            </View>
+          ) : (
+            <JellyserrIndexPage searchQuery={debouncedSearch} />
+          )}
+
+          {searchType === "Library" && (
+            <>
+              {!loading && noResults && debouncedSearch.length > 0 ? (
+                <View>
+                  <Text className="text-center text-lg font-bold mt-4">
+                    {t("search.no_results_found_for")}
+                  </Text>
+                  <Text className="text-xs text-purple-600 text-center">
+                    "{debouncedSearch}"
+                  </Text>
+                </View>
+              ) : debouncedSearch.length === 0 ? (
+                <View className="mt-4 flex flex-col items-center space-y-2">
+                  {exampleSearches.map((e) => (
+                    <TouchableOpacity
+                      onPress={() => setSearch(e)}
+                      key={e}
+                      className="mb-2"
+                    >
+                      <Text className="text-purple-600">{e}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              ) : null}
+            </>
+          )}
         </View>
-
-        {searchType === "Library" ? (
-          <View className={l1 || l2 ? "opacity-0" : "opacity-100"}>
-            <SearchItemWrapper
-              header={t("search.movies")}
-              items={movies}
-              renderItem={(item: BaseItemDto) => (
-                <TouchableItemRouter
-                  key={item.Id}
-                  className='flex flex-col w-28 mr-2'
-                  item={item}
-                >
-                  <MoviePoster item={item} key={item.Id} />
-                  <Text numberOfLines={2} className='mt-2'>
-                    {item.Name}
-                  </Text>
-                  <Text className='opacity-50 text-xs'>
-                    {item.ProductionYear}
-                  </Text>
-                </TouchableItemRouter>
-              )}
-            />
-            <SearchItemWrapper
-              items={series}
-              header={t("search.series")}
-              renderItem={(item: BaseItemDto) => (
-                <TouchableItemRouter
-                  key={item.Id}
-                  item={item}
-                  className='flex flex-col w-28 mr-2'
-                >
-                  <SeriesPoster item={item} key={item.Id} />
-                  <Text numberOfLines={2} className='mt-2'>
-                    {item.Name}
-                  </Text>
-                  <Text className='opacity-50 text-xs'>
-                    {item.ProductionYear}
-                  </Text>
-                </TouchableItemRouter>
-              )}
-            />
-            <SearchItemWrapper
-              items={episodes}
-              header={t("search.episodes")}
-              renderItem={(item: BaseItemDto) => (
-                <TouchableItemRouter
-                  item={item}
-                  key={item.Id}
-                  className='flex flex-col w-44 mr-2'
-                >
-                  <ContinueWatchingPoster item={item} />
-                  <ItemCardText item={item} />
-                </TouchableItemRouter>
-              )}
-            />
-            <SearchItemWrapper
-              items={collections}
-              header={t("search.collections")}
-              renderItem={(item: BaseItemDto) => (
-                <TouchableItemRouter
-                  key={item.Id}
-                  item={item}
-                  className='flex flex-col w-28 mr-2'
-                >
-                  <MoviePoster item={item} key={item.Id} />
-                  <Text numberOfLines={2} className='mt-2'>
-                    {item.Name}
-                  </Text>
-                </TouchableItemRouter>
-              )}
-            />
-            <SearchItemWrapper
-              items={actors}
-              header={t("search.actors")}
-              renderItem={(item: BaseItemDto) => (
-                <TouchableItemRouter
-                  item={item}
-                  key={item.Id}
-                  className='flex flex-col w-28 mr-2'
-                >
-                  <MoviePoster item={item} />
-                  <ItemCardText item={item} />
-                </TouchableItemRouter>
-              )}
-            />
-          </View>
-        ) : (
-          <JellyserrIndexPage
-            searchQuery={debouncedSearch}
-            sortType={jellyseerrOrderBy}
-            order={jellyseerrSortOrder}
-          />
-        )}
-
-        {searchType === "Library" &&
-          (!loading && noResults && debouncedSearch.length > 0 ? (
-            <View>
-              <Text className='text-center text-lg font-bold mt-4'>
-                {t("search.no_results_found_for")}
-              </Text>
-              <Text className='text-xs text-purple-600 text-center'>
-                "{debouncedSearch}"
-              </Text>
-            </View>
-          ) : debouncedSearch.length === 0 ? (
-            <View className='mt-4 flex flex-col items-center space-y-2'>
-              {exampleSearches.map((e) => (
-                <TouchableOpacity
-                  onPress={() => {
-                    setSearch(e);
-                    searchBarRef.current?.setText(e);
-                  }}
-                  key={e}
-                  className='mb-2'
-                >
-                  <Text className='text-purple-600'>{e}</Text>
-                </TouchableOpacity>
-              ))}
-            </View>
-          ) : null)}
-      </View>
-    </ScrollView>
+      </ScrollView>
+    </>
   );
 }

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

@@ -0,0 +1,298 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { FlashList } from "@shopify/flash-list";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  Alert,
+  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 useRouter from "@/hooks/useAppRouter";
+import { useOrientation } from "@/hooks/useOrientation";
+import {
+  useDeleteWatchlist,
+  useRemoveFromWatchlist,
+} from "@/hooks/useWatchlistMutations";
+import {
+  useWatchlistDetailQuery,
+  useWatchlistItemsQuery,
+} from "@/hooks/useWatchlists";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { userAtom } from "@/providers/JellyfinProvider";
+
+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

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

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

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

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

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

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

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

@@ -1,33 +1,36 @@
+import React, { useCallback, useRef } from "react";
+import { Platform } from "react-native";
+import { useTranslation } from "react-i18next";
+
+import { useFocusEffect, useRouter, withLayoutContext } from "expo-router";
+
 import {
   createNativeBottomTabNavigator,
-  type NativeBottomTabNavigationEventMap,
-  type NativeBottomTabNavigationOptions,
+  NativeBottomTabNavigationEventMap,
 } from "@bottom-tabs/react-navigation";
+
+const { Navigator } = createNativeBottomTabNavigator();
+import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";
+
+import { Colors } from "@/constants/Colors";
+import { useSettings } from "@/utils/atoms/settings";
+import { storage } from "@/utils/mmkv";
 import type {
   ParamListBase,
   TabNavigationState,
 } from "@react-navigation/native";
-import { useFocusEffect, useRouter, withLayoutContext } from "expo-router";
-import { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { Platform } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
-import { Colors } from "@/constants/Colors";
-import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
-import { storage } from "@/utils/mmkv";
-
-const { Navigator } = createNativeBottomTabNavigator();
 
 export const NativeTabs = withLayoutContext<
-  NativeBottomTabNavigationOptions,
+  BottomTabNavigationOptions,
   typeof Navigator,
   TabNavigationState<ParamListBase>,
   NativeBottomTabNavigationEventMap
 >(Navigator);
 
 export default function TabLayout() {
-  const { settings } = useSettings();
+  const [settings] = useSettings();
   const { t } = useTranslation();
   const router = useRouter();
 
@@ -43,82 +46,103 @@ export default function TabLayout() {
           clearTimeout(timer);
         };
       }
-    }, []),
+    }, [])
   );
 
   return (
     <>
-      <SystemBars hidden={false} style='light' />
+      <SystemBars hidden={false} style="light" />
       <NativeTabs
         sidebarAdaptable={false}
+        ignoresTopSafeArea
         tabBarStyle={{
           backgroundColor: "#121212",
         }}
         tabBarActiveTintColor={Colors.primary}
-        activeIndicatorColor={"#392c3b"}
-        scrollEdgeAppearance='default'
+        scrollEdgeAppearance="default"
       >
-        <NativeTabs.Screen redirect name='index' />
+        <NativeTabs.Screen redirect name="index" />
         <NativeTabs.Screen
-          listeners={(_e) => ({
-            tabPress: (_e) => {
+          listeners={({ navigation }) => ({
+            tabPress: (e) => {
               eventBus.emit("scrollToTop");
             },
           })}
-          name='(home)'
+          name="(home)"
           options={{
             title: t("tabs.home"),
             tabBarIcon:
-              Platform.OS === "android"
-                ? (_e) => require("@/assets/icons/house.fill.png")
-                : (_e) => ({ sfSymbol: "house.fill" }),
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/house.fill.png")
+                : ({ focused }) =>
+                    focused
+                      ? { sfSymbol: "house.fill" }
+                      : { sfSymbol: "house" },
           }}
         />
         <NativeTabs.Screen
-          listeners={(_e) => ({
-            tabPress: (_e) => {
+          listeners={({ navigation }) => ({
+            tabPress: (e) => {
               eventBus.emit("searchTabPressed");
             },
           })}
-          name='(search)'
+          name="(search)"
           options={{
-            role: "search",
             title: t("tabs.search"),
             tabBarIcon:
-              Platform.OS === "android"
-                ? (_e) => require("@/assets/icons/magnifyingglass.png")
-                : (_e) => ({ sfSymbol: "magnifyingglass" }),
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/magnifyingglass.png")
+                : ({ focused }) =>
+                    focused
+                      ? { sfSymbol: "magnifyingglass" }
+                      : { sfSymbol: "magnifyingglass" },
           }}
         />
         <NativeTabs.Screen
-          name='(favorites)'
+          name="(favorites)"
           options={{
             title: t("tabs.favorites"),
             tabBarIcon:
-              Platform.OS === "android"
-                ? (_e) => require("@/assets/icons/heart.fill.png")
-                : (_e) => ({ sfSymbol: "heart.fill" }),
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    focused
+                      ? require("@/assets/icons/heart.fill.png")
+                      : require("@/assets/icons/heart.png")
+                : ({ focused }) =>
+                    focused
+                      ? { sfSymbol: "heart.fill" }
+                      : { sfSymbol: "heart" },
           }}
         />
         <NativeTabs.Screen
-          name='(libraries)'
+          name="(libraries)"
           options={{
             title: t("tabs.library"),
             tabBarIcon:
-              Platform.OS === "android"
-                ? (_e) => require("@/assets/icons/server.rack.png")
-                : (_e) => ({ sfSymbol: "rectangle.stack.fill" }),
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/server.rack.png")
+                : ({ focused }) =>
+                    focused
+                      ? { sfSymbol: "rectangle.stack.fill" }
+                      : { sfSymbol: "rectangle.stack" },
           }}
         />
         <NativeTabs.Screen
-          name='(custom-links)'
+          name="(custom-links)"
           options={{
             title: t("tabs.custom_links"),
-            tabBarItemHidden: !settings?.showCustomMenuLinks,
+            // @ts-expect-error
+            tabBarItemHidden: settings?.showCustomMenuLinks ? false : true,
             tabBarIcon:
-              Platform.OS === "android"
-                ? (_e) => require("@/assets/icons/list.png")
-                : (_e) => ({ sfSymbol: "list.dash.fill" }),
+              Platform.OS == "android"
+                ? ({ focused }) => require("@/assets/icons/list.png")
+                : ({ focused }) =>
+                    focused
+                      ? { sfSymbol: "list.dash.fill" }
+                      : { sfSymbol: "list.dash" },
           }}
         />
       </NativeTabs>

app/(auth)/now-playing.tsx

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

app/(auth)/player/_layout.tsx

@@ -1,13 +1,57 @@
 import { Stack } from "expo-router";
+import React, { useEffect } from "react";
 import { SystemBars } from "react-native-edge-to-edge";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { useSettings } from "@/utils/atoms/settings";
+import { Platform } from "react-native";
 
 export default function Layout() {
+  const [settings] = useSettings();
+
+  useEffect(() => {
+    if (Platform.isTV) return;
+
+    if (settings.defaultVideoOrientation) {
+      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
+    }
+
+    return () => {
+      if (Platform.isTV) return;
+
+      if (settings.autoRotate === true) {
+        ScreenOrientation.unlockAsync();
+      } else {
+        ScreenOrientation.lockAsync(
+          ScreenOrientation.OrientationLock.PORTRAIT_UP
+        );
+      }
+    };
+  }, [settings]);
+
   return (
     <>
       <SystemBars hidden />
       <Stack>
         <Stack.Screen
-          name='direct-player'
+          name="direct-player"
+          options={{
+            headerShown: false,
+            autoHideHomeIndicator: true,
+            title: "",
+            animation: "fade",
+          }}
+        />
+        <Stack.Screen
+          name="transcoding-player"
+          options={{
+            headerShown: false,
+            autoHideHomeIndicator: true,
+            title: "",
+            animation: "fade",
+          }}
+        />
+        <Stack.Screen
+          name="google-cast-player"
           options={{
             headerShown: false,
             autoHideHomeIndicator: true,

app/(auth)/player/google-cast-player.tsx

@@ -0,0 +1,184 @@
+import React, { useMemo, useRef, useState } from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { Button } from "@/components/Button";
+import { Feather } from "@expo/vector-icons";
+import { RoundButton } from "@/components/RoundButton";
+
+import GoogleCast, {
+  CastButton,
+  CastContext,
+  CastState,
+  useCastDevice,
+  useCastState,
+  useDevices,
+  useMediaStatus,
+  useRemoteMediaClient,
+} from "react-native-google-cast";
+import { useCallback, useEffect } from "react";
+import { Platform } from "react-native";
+import { useRouter } from "expo-router";
+import { useHaptic } from "@/hooks/useHaptic";
+import ChromecastControls from "@/components/ChromecastControls";
+import { useTranslation } from "react-i18next";
+
+export default function Player() {
+  const castState = useCastState();
+
+  const client = useRemoteMediaClient();
+  const castDevice = useCastDevice();
+  const devices = useDevices();
+  const sessionManager = GoogleCast.getSessionManager();
+  const discoveryManager = GoogleCast.getDiscoveryManager();
+  const mediaStatus = useMediaStatus();
+
+  const [wasMediaPlaying, setWasMediaPlaying] = useState(false);
+  const reportPlaybackStopedRef = useRef(() => {});
+
+  useEffect(() => {
+    if (mediaStatus) return; // media currently playing
+
+    // media was just playing, report playback stopped
+    if (wasMediaPlaying) {
+      reportPlaybackStopedRef.current();
+      setWasMediaPlaying(false);
+    }
+  }, [mediaStatus, wasMediaPlaying]);
+
+  const router = useRouter();
+
+  const lightHapticFeedback = useHaptic("light");
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    (async () => {
+      if (!discoveryManager) {
+        console.warn("DiscoveryManager is not initialized");
+        return;
+      }
+
+      await discoveryManager.startDiscovery();
+    })();
+  }, [client, devices, castDevice, sessionManager, discoveryManager]);
+
+  // Android requires the cast button to be present for startDiscovery to work
+  const AndroidCastButton = useCallback(
+    () =>
+      Platform.OS === "android" ? (
+        <CastButton tintColor="transparent" />
+      ) : (
+        <></>
+      ),
+    [Platform.OS]
+  );
+
+  const GoHomeButton = useCallback(
+    () => (
+      <Button
+        onPress={() => {
+          router.push("/(auth)/(home)/");
+        }}
+      >
+        {t("chromecast.go_home")}
+      </Button>
+    ),
+    [router]
+  );
+
+  const ChromecastControlsMemoized = useMemo(() => {
+    if (!mediaStatus || !client) return undefined;
+    return (
+      <ChromecastControls
+        mediaStatus={mediaStatus}
+        client={client}
+        setWasMediaPlaying={setWasMediaPlaying}
+        reportPlaybackStopedRef={reportPlaybackStopedRef}
+      />
+    );
+  }, [mediaStatus, client, setWasMediaPlaying]);
+
+  if (
+    castState === CastState.NO_DEVICES_AVAILABLE ||
+    castState === CastState.NOT_CONNECTED
+  ) {
+    // no devices to connect to
+    if (devices.length === 0) {
+      return (
+        <View className="w-screen h-screen flex flex-col ">
+          <AndroidCastButton />
+          <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+            <Text className="text-white text-lg">
+              {t("chromecast.no_devices_available")}
+            </Text>
+            <Text className="text-gray-400">
+              {t("chromecast.are_you_on_same_network")}
+            </Text>
+          </View>
+          <View className="px-10">
+            <GoHomeButton />
+          </View>
+        </View>
+      );
+    }
+    // no device selected
+    return (
+      <View className="w-screen h-screen flex flex-col ">
+        <AndroidCastButton />
+        <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+          <RoundButton
+            size="large"
+            background={false}
+            onPress={() => {
+              lightHapticFeedback();
+              CastContext.showCastDialog();
+            }}
+          >
+            <AndroidCastButton />
+            <Feather name="cast" size={42} color={"white"} />
+          </RoundButton>
+          <Text className="text-white text-xl mt-2">
+            {t("chromecast.no_device_selected")}
+          </Text>
+          <Text className="text-gray-400">
+            {t("chromecast.click_icon_to_connect")}
+          </Text>
+        </View>
+        <View className="px-10">
+          <GoHomeButton />
+        </View>
+      </View>
+    );
+  }
+
+  if (castState === CastState.CONNECTING) {
+    return (
+      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+        <Text className="text-white font-semibold lg mb-2">
+          {t("chromecast.establishing_connection")}
+        </Text>
+        <Loader />
+      </View>
+    );
+  }
+
+  // connected, but no media playing
+  if (!mediaStatus) {
+    return (
+      <View className="w-screen h-screen flex flex-col ">
+        <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+          <Text className="text-white text-lg">
+            {t("chromecast.no_media_selected")}
+          </Text>
+          <Text className="text-gray-400">{t("chromecast.start_playing")}</Text>
+        </View>
+        <View className="px-10">
+          <GoHomeButton />
+        </View>
+      </View>
+    );
+  }
+
+  return ChromecastControlsMemoized;
+}

app/_layout.tsx

@@ -1,58 +1,44 @@
 import "@/augmentations";
-import { ActionSheetProvider } from "@expo/react-native-action-sheet";
-import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import { DarkTheme, ThemeProvider } from "@react-navigation/native";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import * as BackgroundTask from "expo-background-task";
-import * as Device from "expo-device";
 import { Platform } from "react-native";
-import { GlobalModal } from "@/components/GlobalModal";
 import i18n from "@/i18n";
 import { DownloadProvider } from "@/providers/DownloadProvider";
-import { GlobalModalProvider } from "@/providers/GlobalModalProvider";
 import {
-  apiAtom,
   getOrSetDeviceId,
+  getTokenFromStorage,
   JellyfinProvider,
 } from "@/providers/JellyfinProvider";
-import { NetworkStatusProvider } from "@/providers/NetworkStatusProvider";
+import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import {
-  BACKGROUND_FETCH_TASK,
-  BACKGROUND_FETCH_TASK_SESSIONS,
-  registerBackgroundFetchAsyncSessions,
-} from "@/utils/background-tasks";
-import {
-  LogProvider,
-  writeErrorLog,
-  writeInfoLog,
-  writeToLog,
-} from "@/utils/log";
+import { Settings, useSettings } from "@/utils/atoms/settings";
+import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
+import { LogProvider, writeToLog } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
-
+import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
+import { ActionSheetProvider } from "@expo/react-native-action-sheet";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+const BackGroundDownloader = !Platform.isTV
+  ? require("@kesha-antonov/react-native-background-downloader")
+  : null;
+import { DarkTheme, ThemeProvider } from "@react-navigation/native";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+const BackgroundFetch = !Platform.isTV
+  ? require("expo-background-fetch")
+  : null;
+import * as FileSystem from "expo-file-system";
 const Notifications = !Platform.isTV ? require("expo-notifications") : null;
-
-import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
-import { getLocales } from "expo-localization";
-import type { EventSubscription } from "expo-modules-core";
-import type {
-  Notification,
-  NotificationResponse,
-} from "expo-notifications/build/Notifications.types";
-import type { ExpoPushToken } from "expo-notifications/build/Tokens.types";
-import { router, Stack, useSegments } from "expo-router";
+import { router, Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
-import * as TaskManager from "expo-task-manager";
-import { Provider as JotaiProvider, useAtom } from "jotai";
-import { useCallback, useEffect, useRef, useState } from "react";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+const TaskManager = !Platform.isTV ? require("expo-task-manager") : null;
+import { getLocales } from "expo-localization";
+import { Provider as JotaiProvider } from "jotai";
+import { useEffect, useRef } from "react";
 import { I18nextProvider } from "react-i18next";
-import { Appearance } from "react-native";
+import { Appearance, AppState } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { userAtom } from "@/providers/JellyfinProvider";
-import { store } from "@/utils/store";
 import "react-native-reanimated";
 import { Toaster } from "sonner-native";
 
@@ -75,96 +61,165 @@ SplashScreen.setOptions({
   fade: true,
 });
 
-function redirect(notification: typeof Notifications.Notification) {
-  const url = notification.request.content.data?.url;
-  if (url) {
-    router.push(url);
-  }
-}
-
 function useNotificationObserver() {
-  useEffect(() => {
-    if (Platform.isTV) return;
+  if (Platform.isTV) return;
 
+  useEffect(() => {
     let isMounted = true;
 
+    function redirect(notification: typeof Notifications.Notification) {
+      const url = notification.request.content.data?.url;
+      if (url) {
+        router.push(url);
+      }
+    }
+
     Notifications.getLastNotificationResponseAsync().then(
       (response: { notification: any }) => {
         if (!isMounted || !response?.notification) {
           return;
         }
         redirect(response?.notification);
-      },
+      }
+    );
+
+    const subscription = Notifications.addNotificationResponseReceivedListener(
+      (response: { notification: any }) => {
+        redirect(response.notification);
+      }
     );
 
     return () => {
       isMounted = false;
+      subscription.remove();
     };
   }, []);
 }
 
 if (!Platform.isTV) {
-  TaskManager.defineTask(BACKGROUND_FETCH_TASK_SESSIONS, async () => {
-    console.log("TaskManager ~ sessions trigger");
-
-    const api = store.get(apiAtom);
-    if (api === null || api === undefined) return;
-
-    const response = await getSessionApi(api).getSessions({
-      activeWithinSeconds: 360,
-    });
-
-    const result = response.data.filter((s) => s.NowPlayingItem);
-    Notifications.setBadgeCountAsync(result.length);
-
-    return BackgroundTask.BackgroundTaskResult.Success;
-  });
-
   TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
     console.log("TaskManager ~ trigger");
-    // Background fetch task placeholder - currently unused
-    return BackgroundTask.BackgroundTaskResult.Success;
+
+    const now = Date.now();
+
+    const settingsData = storage.getString("settings");
+
+    if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
+
+    const settings: Partial<Settings> = JSON.parse(settingsData);
+    const url = settings?.optimizedVersionsServerUrl;
+
+    if (!settings?.autoDownload || !url)
+      return BackgroundFetch.BackgroundFetchResult.NoData;
+
+    const token = getTokenFromStorage();
+    const deviceId = getOrSetDeviceId();
+    const baseDirectory = FileSystem.documentDirectory;
+
+    if (!token || !deviceId || !baseDirectory)
+      return BackgroundFetch.BackgroundFetchResult.NoData;
+
+    const jobs = await getAllJobsByDeviceId({
+      deviceId,
+      authHeader: token,
+      url,
+    });
+
+    console.log("TaskManager ~ Active jobs: ", jobs.length);
+
+    for (let job of jobs) {
+      if (job.status === "completed") {
+        const downloadUrl = url + "download/" + job.id;
+        const tasks = await BackGroundDownloader.checkForExistingDownloads();
+
+        if (tasks.find((task: { id: string }) => task.id === job.id)) {
+          console.log("TaskManager ~ Download already in progress: ", job.id);
+          continue;
+        }
+
+        BackGroundDownloader.download({
+          id: job.id,
+          url: downloadUrl,
+          destination: `${baseDirectory}${job.item.Id}.mp4`,
+          headers: {
+            Authorization: token,
+          },
+        })
+          .begin(() => {
+            console.log("TaskManager ~ Download started: ", job.id);
+          })
+          .done(() => {
+            console.log("TaskManager ~ Download completed: ", job.id);
+            saveDownloadedItemInfo(job.item);
+            BackGroundDownloader.completeHandler(job.id);
+            cancelJobById({
+              authHeader: token,
+              id: job.id,
+              url: url,
+            });
+            Notifications.scheduleNotificationAsync({
+              content: {
+                title: job.item.Name,
+                body: "Download completed",
+                data: {
+                  url: `/downloads`,
+                },
+              },
+              trigger: null,
+            });
+          })
+          .error((error: any) => {
+            console.log("TaskManager ~ Download error: ", job.id, error);
+            BackGroundDownloader.completeHandler(job.id);
+            Notifications.scheduleNotificationAsync({
+              content: {
+                title: job.item.Name,
+                body: "Download failed",
+                data: {
+                  url: `/downloads`,
+                },
+              },
+              trigger: null,
+            });
+          });
+      }
+    }
+
+    console.log(`Auto download started: ${new Date(now).toISOString()}`);
+
+    // Be sure to return the successful result type!
+    return BackgroundFetch.BackgroundFetchResult.NewData;
   });
 }
 
 const checkAndRequestPermissions = async () => {
   try {
     const hasAskedBefore = storage.getString(
-      "hasAskedForNotificationPermission",
+      "hasAskedForNotificationPermission"
     );
-    let granted = false;
+
     if (hasAskedBefore !== "true") {
       const { status } = await Notifications.requestPermissionsAsync();
-      granted = status === "granted";
-      if (granted) {
+
+      if (status === "granted") {
         writeToLog("INFO", "Notification permissions granted.");
         console.log("Notification permissions granted.");
       } else {
         writeToLog("ERROR", "Notification permissions denied.");
         console.log("Notification permissions denied.");
       }
+
       storage.set("hasAskedForNotificationPermission", "true");
     } else {
-      // Already asked before, check current status
-      const { status } = await Notifications.getPermissionsAsync();
-      granted = status === "granted";
-      if (!granted) {
-        writeToLog(
-          "ERROR",
-          "Notification permissions denied (already asked before).",
-        );
-        console.log("Notification permissions denied (already asked before).");
-      }
+      console.log("Already asked for notification permissions before.");
     }
-    return granted;
   } catch (error) {
     writeToLog(
       "ERROR",
       "Error checking/requesting notification permissions:",
-      error,
+      error
     );
     console.error("Error checking/requesting notification permissions:", error);
-    return false;
   }
 };
 
@@ -187,218 +242,147 @@ export default function RootLayout() {
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 30000,
+      staleTime: 0,
+      refetchOnMount: true,
+      refetchOnReconnect: true,
+      refetchOnWindowFocus: true,
+      retryOnMount: true,
     },
   },
 });
 
 function Layout() {
-  const { settings } = useSettings();
-  const [user] = useAtom(userAtom);
-  const [api] = useAtom(apiAtom);
-  const _segments = useSegments();
+  const [settings] = useSettings();
+  const appState = useRef(AppState.currentState);
 
   useEffect(() => {
     i18n.changeLanguage(
-      settings?.preferedLanguage ?? getLocales()[0].languageCode ?? "en",
+      settings?.preferedLanguage ?? getLocales()[0].languageCode ?? "en"
     );
   }, [settings?.preferedLanguage, i18n]);
 
-  useNotificationObserver();
+  if (!Platform.isTV) {
+    useNotificationObserver();
 
-  const [expoPushToken, setExpoPushToken] = useState<ExpoPushToken>();
-  const notificationListener = useRef<EventSubscription>(null);
-  const responseListener = useRef<EventSubscription>(null);
+    useEffect(() => {
+      checkAndRequestPermissions();
+    }, []);
 
-  useEffect(() => {
-    if (!Platform.isTV && expoPushToken && api && user) {
-      api
-        ?.post("/Streamyfin/device", {
-          token: expoPushToken.data,
-          deviceId: getOrSetDeviceId(),
-          userId: user.Id,
-        })
-        .then((_) => console.log("Posted expo push token"))
-        .catch((_) =>
-          writeErrorLog("Failed to push expo push token to plugin"),
+    useEffect(() => {
+      // If the user has auto rotate enabled, unlock the orientation
+      if (Platform.isTV) return;
+      if (settings.autoRotate === true) {
+        ScreenOrientation.unlockAsync();
+      } else {
+        // If the user has auto rotate disabled, lock the orientation to portrait
+        ScreenOrientation.lockAsync(
+          ScreenOrientation.OrientationLock.PORTRAIT_UP
         );
-    } else console.log("No token available");
-  }, [api, expoPushToken, user]);
+      }
+    }, [settings]);
 
-  const registerNotifications = useCallback(async () => {
-    if (Platform.OS === "android") {
-      console.log("Setting android notification channel 'default'");
-      await Notifications?.setNotificationChannelAsync("default", {
-        name: "default",
-      });
-
-      // Create dedicated channel for download notifications
-      console.log("Setting android notification channel 'downloads'");
-      await Notifications?.setNotificationChannelAsync("downloads", {
-        name: "Downloads",
-        importance: Notifications.AndroidImportance.DEFAULT,
-        vibrationPattern: [0, 250, 250, 250],
-        lightColor: "#FF231F7C",
-      });
-    }
-
-    const granted = await checkAndRequestPermissions();
-    if (!granted) {
-      console.log(
-        "Notification permissions not granted, skipping background fetch and push token registration.",
-      );
-      return;
-    }
-
-    if (!Platform.isTV && user && user.Policy?.IsAdministrator) {
-      await registerBackgroundFetchAsyncSessions();
-    }
-
-    // only create push token for real devices (pointless for emulators)
-    if (Device.isDevice) {
-      Notifications?.getExpoPushTokenAsync({
-        projectId: "e79219d1-797f-4fbe-9fa1-cfd360690a68",
-      })
-        .then((token: ExpoPushToken) => {
-          if (token) {
-            console.log("Expo push token obtained:", token.data);
-            setExpoPushToken(token);
+    useEffect(() => {
+      const subscription = AppState.addEventListener(
+        "change",
+        (nextAppState) => {
+          if (
+            appState.current.match(/inactive|background/) &&
+            nextAppState === "active"
+          ) {
+            BackGroundDownloader.checkForExistingDownloads();
           }
-        })
-        .catch((reason: any) => {
-          console.error("Failed to get push token:", reason);
-          writeErrorLog("Failed to get Expo push token", reason);
-        });
-    }
-  }, [user]);
+        }
+      );
 
-  useEffect(() => {
-    if (!Platform.isTV) {
-      void registerNotifications();
-
-      notificationListener.current =
-        Notifications?.addNotificationReceivedListener(
-          (notification: Notification) => {
-            console.log(
-              "Notification received while app running",
-              notification,
-            );
-          },
-        );
-
-      responseListener.current =
-        Notifications?.addNotificationResponseReceivedListener(
-          (response: NotificationResponse) => {
-            // redirect if internal notification
-            redirect(response?.notification);
-
-            // Currently the notifications supported by the plugin will send data for deep links.
-            const { title, data } = response.notification.request.content;
-            writeInfoLog(`Notification ${title} opened`, data);
-
-            let url: any;
-            const type = (data?.type ?? "").toString().toLowerCase();
-            const itemId = data?.id;
-
-            switch (type) {
-              case "movie":
-                url = `/(auth)/(tabs)/home/items/page?id=${itemId}`;
-                break;
-              case "episode":
-                // `/(auth)/(tabs)/${from}/items/page?id=${item.Id}`;
-                // We just clicked a notification for an individual episode.
-                if (itemId) {
-                  url = `/(auth)/(tabs)/home/items/page?id=${itemId}`;
-                  // summarized season notification for multiple episodes. Bring them to series season
-                } else {
-                  const seriesId = data.seriesId;
-                  const seasonIndex = data.seasonIndex;
-                  if (seasonIndex) {
-                    url = `/(auth)/(tabs)/home/series/${seriesId}?seasonIndex=${seasonIndex}`;
-                  } else {
-                    url = `/(auth)/(tabs)/home/series/${seriesId}`;
-                  }
-                }
-                break;
-            }
-
-            writeInfoLog(`Notification attempting to redirect to ${url}`);
-            if (url) {
-              router.push(url);
-            }
-          },
-        );
+      BackGroundDownloader.checkForExistingDownloads();
 
       return () => {
-        notificationListener.current?.remove();
-        responseListener.current?.remove();
+        subscription.remove();
       };
-    }
-  }, [user]);
+    }, []);
+  }
 
   return (
     <QueryClientProvider client={queryClient}>
-      <JellyfinProvider>
-        <NetworkStatusProvider>
+      <JobQueueProvider>
+        <JellyfinProvider>
           <PlaySettingsProvider>
             <LogProvider>
               <WebSocketProvider>
                 <DownloadProvider>
-                  <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",
-                            },
+                  <BottomSheetModalProvider>
+                    <SystemBars style="light" hidden={false} />
+                    <ThemeProvider value={DarkTheme}>
+                      <Stack initialRouteName="(auth)/(tabs)">
+                        <Stack.Screen
+                          name="(auth)/(tabs)"
+                          options={{
+                            headerShown: false,
+                            title: "",
+                            header: () => null,
                           }}
-                          closeButton
                         />
-                        <GlobalModal />
-                      </ThemeProvider>
-                    </BottomSheetModalProvider>
-                  </GlobalModalProvider>
+                        <Stack.Screen
+                          name="(auth)/player"
+                          options={{
+                            headerShown: false,
+                            title: "",
+                            header: () => null,
+                          }}
+                        />
+                        <Stack.Screen
+                          name="login"
+                          options={{
+                            headerShown: true,
+                            title: "",
+                            headerTransparent: true,
+                          }}
+                        />
+                        <Stack.Screen name="+not-found" />
+                      </Stack>
+                      <Toaster
+                        duration={4000}
+                        toastOptions={{
+                          style: {
+                            backgroundColor: "#262626",
+                            borderColor: "#363639",
+                            borderWidth: 1,
+                          },
+                          titleStyle: {
+                            color: "white",
+                          },
+                        }}
+                        closeButton
+                      />
+                    </ThemeProvider>
+                  </BottomSheetModalProvider>
                 </DownloadProvider>
               </WebSocketProvider>
             </LogProvider>
           </PlaySettingsProvider>
-        </NetworkStatusProvider>
-      </JellyfinProvider>
+        </JellyfinProvider>
+      </JobQueueProvider>
     </QueryClientProvider>
   );
 }
+
+function saveDownloadedItemInfo(item: BaseItemDto) {
+  try {
+    const downloadedItems = storage.getString("downloadedItems");
+    let items: BaseItemDto[] = downloadedItems
+      ? JSON.parse(downloadedItems)
+      : [];
+
+    const existingItemIndex = items.findIndex((i) => i.Id === item.Id);
+    if (existingItemIndex !== -1) {
+      items[existingItemIndex] = item;
+    } else {
+      items.push(item);
+    }
+
+    storage.set("downloadedItems", JSON.stringify(items));
+  } catch (error) {
+    writeToLog("ERROR", "Failed to save downloaded item information:", error);
+    console.error("Failed to save downloaded item information:", error);
+  }
+}

app/login.tsx

@@ -1,20 +1,3 @@
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import type { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
-import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation } from "expo-router";
-import { t } from "i18next";
-import { useAtomValue } from "jotai";
-import { useCallback, useEffect, useState } from "react";
-import {
-  Alert,
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { z } from "zod";
 import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
@@ -22,7 +5,24 @@ import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
 import { PreviousServersList } from "@/components/PreviousServersList";
 import { Colors } from "@/constants/Colors";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
+import { Image } from "expo-image";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import { useAtom, useAtomValue } from "jotai";
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Keyboard } from "react-native";
 
+import { z } from "zod";
+import { t } from "i18next";
 const CredentialsSchema = z.object({
   username: z.string().min(1, t("login.username_required")),
 });
@@ -42,14 +42,14 @@ const Login: React.FC = () => {
 
   const [loadingServerCheck, setLoadingServerCheck] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
-  const [serverURL, setServerURL] = useState<string>(_apiUrl || "");
+  const [serverURL, setServerURL] = useState<string>(_apiUrl);
   const [serverName, setServerName] = useState<string>("");
   const [credentials, setCredentials] = useState<{
     username: string;
     password: string;
   }>({
-    username: _username || "",
-    password: _password || "",
+    username: _username,
+    password: _password,
   });
 
   /**
@@ -58,17 +58,16 @@ const Login: React.FC = () => {
   useEffect(() => {
     (async () => {
       if (_apiUrl) {
-        await setServer({
+        setServer({
           address: _apiUrl,
         });
 
-        // Wait for server setup and state updates to complete
         setTimeout(() => {
           if (_username && _password) {
             setCredentials({ username: _username, password: _password });
             login(_username, _password);
           }
-        }, 0);
+        }, 300);
       }
     })();
   }, [_apiUrl, _username, _password]);
@@ -82,10 +81,10 @@ const Login: React.FC = () => {
             onPress={() => {
               removeServer();
             }}
-            className='flex flex-row items-center pr-2 pl-1'
+            className="flex flex-row items-center"
           >
-            <Ionicons name='chevron-back' size={18} color={Colors.primary} />
-            <Text className=' ml-1 text-purple-600'>
+            <Ionicons name="chevron-back" size={18} color={Colors.primary} />
+            <Text className="ml-2 text-purple-600">
               {t("login.change_server")}
             </Text>
           </TouchableOpacity>
@@ -108,7 +107,7 @@ const Login: React.FC = () => {
       } else {
         Alert.alert(
           t("login.connection_failed"),
-          t("login.an_unexpected_error_occured"),
+          t("login.an_unexpected_error_occured")
         );
       }
     } finally {
@@ -133,52 +132,27 @@ const Login: React.FC = () => {
    */
   const checkUrl = useCallback(async (url: string) => {
     setLoadingServerCheck(true);
-    const baseUrl = url.replace(/^https?:\/\//i, "");
-    const protocols = ["https", "http"];
+
     try {
-      return checkHttp(baseUrl, protocols);
-    } catch (e) {
-      if (e instanceof Error && e.message === "Server too old") {
-        throw e;
+      const response = await fetch(`${url}/System/Info/Public`, {
+        mode: "cors",
+      });
+
+      if (response.ok) {
+        const data = (await response.json()) as PublicSystemInfo;
+
+        setServerName(data.ServerName || "");
+        return url;
       }
+
+      return undefined;
+    } catch {
       return undefined;
     } finally {
       setLoadingServerCheck(false);
     }
   }, []);
 
-  async function checkHttp(baseUrl: string, protocols: string[]) {
-    for (const protocol of protocols) {
-      try {
-        const response = await fetch(
-          `${protocol}://${baseUrl}/System/Info/Public`,
-          {
-            mode: "cors",
-          },
-        );
-        if (response.ok) {
-          const data = (await response.json()) as PublicSystemInfo;
-          const serverVersion = data.Version?.split(".");
-          if (serverVersion && +serverVersion[0] <= 10) {
-            if (+serverVersion[1] < 10) {
-              Alert.alert(
-                t("login.too_old_server_text"),
-                t("login.too_old_server_description"),
-              );
-              throw new Error("Server too old");
-            }
-          }
-          setServerName(data.ServerName || "");
-          return `${protocol}://${baseUrl}`;
-        }
-      } catch (e) {
-        if (e instanceof Error && e.message === "Server too old") {
-          throw e;
-        }
-      }
-    }
-    return undefined;
-  }
   /**
    * Handles the connection attempt to a Jellyfin server.
    *
@@ -197,17 +171,17 @@ const Login: React.FC = () => {
    */
   const handleConnect = useCallback(async (url: string) => {
     url = url.trim().replace(/\/$/, "");
-    try {
-      const result = await checkUrl(url);
-      if (result === undefined) {
-        Alert.alert(
-          t("login.connection_failed"),
-          t("login.could_not_connect_to_server"),
-        );
-        return;
-      }
-      await setServer({ address: result });
-    } catch {}
+    const result = await checkUrl(url);
+
+    if (result === undefined) {
+      Alert.alert(
+        t("login.connection_failed"),
+        t("login.could_not_connect_to_server")
+      );
+      return;
+    }
+
+    setServer({ address: url });
   }, []);
 
   const handleQuickConnect = async () => {
@@ -221,317 +195,151 @@ const Login: React.FC = () => {
             {
               text: t("login.got_it"),
             },
-          ],
+          ]
         );
       }
-    } catch (_error) {
+    } catch (error) {
       Alert.alert(
         t("login.error_title"),
-        t("login.failed_to_initiate_quick_connect"),
+        t("login.failed_to_initiate_quick_connect")
       );
     }
   };
 
-  return Platform.isTV ? (
-    // TV layout
-    <SafeAreaView className='flex-1 bg-black'>
+  return (
+    <SafeAreaView style={{ flex: 1, paddingBottom: 16 }}>
       <KeyboardAvoidingView
         behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1 }}
       >
         {api?.basePath ? (
-          // ------------ Username/Password view ------------
-          <View className='flex-1 items-center justify-center'>
-            {/* Safe centered column with max width so TV doesn’t stretch too far */}
-            <View className='w-[92%] max-w-[900px] px-2 -mt-12'>
-              <Text className='text-3xl font-bold text-white mb-1'>
-                {serverName ? (
-                  <>
-                    {`${t("login.login_to_title")} `}
-                    <Text className='text-purple-500'>{serverName}</Text>
-                  </>
-                ) : (
-                  t("login.login_title")
-                )}
-              </Text>
-              <Text className='text-xs text-neutral-400 mb-6'>
-                {api.basePath}
-              </Text>
+          <>
+            <View className="flex flex-col h-full relative items-center justify-center">
+              <View className="px-4 -mt-20 w-full">
+                <View className="flex flex-col space-y-2">
+                  <Text className="text-2xl font-bold -mb-2">
+                    <>
+                      {serverName ? (
+                        <>
+                          {t("login.login_to_title") + " "}
+                          <Text className="text-purple-600">{serverName}</Text>
+                        </>
+                      ) : (
+                        t("login.login_title")
+                      )}
+                    </>
+                  </Text>
+                  <Text className="text-xs text-neutral-400">
+                    {api.basePath}
+                  </Text>
+                  <Input
+                    placeholder={t("login.username_placeholder")}
+                    onChangeText={(text) =>
+                      setCredentials({ ...credentials, username: text })
+                    }
+                    value={credentials.username}
+                    secureTextEntry={false}
+                    keyboardType="default"
+                    returnKeyType="done"
+                    autoCapitalize="none"
+                    textContentType="username"
+                    clearButtonMode="while-editing"
+                    maxLength={500}
+                  />
 
-              {/* Username */}
-              <Input
-                placeholder={t("login.username_placeholder")}
-                onChangeText={(text: string) =>
-                  setCredentials({ ...credentials, username: text })
-                }
-                onEndEditing={(e) => {
-                  const newValue = e.nativeEvent.text;
-                  if (newValue && newValue !== credentials.username) {
-                    setCredentials({ ...credentials, username: newValue });
-                  }
-                }}
-                value={credentials.username}
-                keyboardType='default'
-                returnKeyType='done'
-                autoCapitalize='none'
-                textContentType='oneTimeCode'
-                clearButtonMode='while-editing'
-                maxLength={500}
-                extraClassName='mb-4'
-                autoFocus={false}
-                blurOnSubmit={true}
-              />
-
-              {/* Password */}
-              <Input
-                placeholder={t("login.password_placeholder")}
-                onChangeText={(text: string) =>
-                  setCredentials({ ...credentials, password: text })
-                }
-                onEndEditing={(e) => {
-                  const newValue = e.nativeEvent.text;
-                  if (newValue && newValue !== credentials.password) {
-                    setCredentials({ ...credentials, password: newValue });
-                  }
-                }}
-                value={credentials.password}
-                secureTextEntry
-                keyboardType='default'
-                returnKeyType='done'
-                autoCapitalize='none'
-                textContentType='password'
-                clearButtonMode='while-editing'
-                maxLength={500}
-                extraClassName='mb-4'
-                autoFocus={false}
-                blurOnSubmit={true}
-              />
-
-              <View className='mt-4'>
-                <Button
-                  onPress={handleLogin}
-                  disabled={!credentials.username.trim()}
-                >
-                  {t("login.login_button")}
-                </Button>
-              </View>
-              <View className='mt-3'>
-                <Button
-                  onPress={handleQuickConnect}
-                  className='bg-neutral-800 border border-neutral-700'
-                >
-                  {t("login.quick_connect")}
-                </Button>
+                  <Input
+                    placeholder={t("login.password_placeholder")}
+                    onChangeText={(text) =>
+                      setCredentials({ ...credentials, password: text })
+                    }
+                    value={credentials.password}
+                    secureTextEntry
+                    keyboardType="default"
+                    returnKeyType="done"
+                    autoCapitalize="none"
+                    textContentType="password"
+                    clearButtonMode="while-editing"
+                    maxLength={500}
+                  />
+                  <View className="flex flex-row items-center justify-between">
+                    <Button
+                      onPress={handleLogin}
+                      loading={loading}
+                      className="flex-1 mr-2"
+                    >
+                      {t("login.login_button")}
+                    </Button>
+                    <TouchableOpacity
+                      onPress={handleQuickConnect}
+                      className="p-2 bg-neutral-900 rounded-xl h-12 w-12 flex items-center justify-center"
+                    >
+                      <MaterialCommunityIcons
+                        name="cellphone-lock"
+                        size={24}
+                        color="white"
+                      />
+                    </TouchableOpacity>
+                  </View>
+                </View>
               </View>
+
+              <View className="absolute bottom-0 left-0 w-full px-4 mb-2"></View>
             </View>
-          </View>
+          </>
         ) : (
-          // ------------ Server connect view ------------
-          <View className='flex-1 items-center justify-center'>
-            <View className='w-[92%] max-w-[900px] -mt-2'>
-              <View className='items-center mb-1'>
+          <>
+            <View className="flex flex-col h-full items-center justify-center w-full">
+              <View className="flex flex-col gap-y-2 px-4 w-full -mt-36">
                 <Image
-                  source={require("@/assets/images/icon-ios-plain.png")}
-                  style={{ width: 110, height: 110 }}
-                  contentFit='contain'
+                  style={{
+                    width: 100,
+                    height: 100,
+                    marginLeft: -23,
+                    marginBottom: -20,
+                  }}
+                  source={require("@/assets/images/StreamyFinFinal.png")}
+                />
+                <Text className="text-3xl font-bold">Streamyfin</Text>
+                <Text className="text-neutral-500">
+                  {t("server.enter_url_to_jellyfin_server")}
+                </Text>
+                <Input
+                  aria-label="Server URL"
+                  placeholder={t("server.server_url_placeholder")}
+                  onChangeText={setServerURL}
+                  value={serverURL}
+                  keyboardType="url"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="URL"
+                  maxLength={500}
                 />
-              </View>
-
-              <Text className='text-white text-4xl font-bold text-center'>
-                Streamyfin
-              </Text>
-              <Text className='text-neutral-400 text-base text-left mt-2 mb-1'>
-                {t("server.enter_url_to_jellyfin_server")}
-              </Text>
-
-              {/* Full-width Input with clear focus ring */}
-              <Input
-                aria-label='Server URL'
-                placeholder={t("server.server_url_placeholder")}
-                onChangeText={setServerURL}
-                value={serverURL}
-                keyboardType='url'
-                returnKeyType='done'
-                autoCapitalize='none'
-                textContentType='URL'
-                maxLength={500}
-                autoFocus={false}
-                blurOnSubmit={true}
-              />
-
-              {/* Full-width primary button */}
-              <View className='mt-4'>
                 <Button
+                  loading={loadingServerCheck}
+                  disabled={loadingServerCheck}
                   onPress={async () => {
                     await handleConnect(serverURL);
                   }}
+                  className="w-full grow"
                 >
                   {t("server.connect_button")}
                 </Button>
-              </View>
-
-              {/* Lists stay full width but inside max width container */}
-              <View className='mt-2'>
                 <JellyfinServerDiscovery
-                  onServerSelect={async (server: any) => {
+                  onServerSelect={(server) => {
                     setServerURL(server.address);
-                    if (server.serverName) setServerName(server.serverName);
-                    await handleConnect(server.address);
+                    if (server.serverName) {
+                      setServerName(server.serverName);
+                    }
+                    handleConnect(server.address);
                   }}
                 />
                 <PreviousServersList
-                  onServerSelect={async (s: any) => {
-                    await handleConnect(s.address);
+                  onServerSelect={(s) => {
+                    handleConnect(s.address);
                   }}
                 />
               </View>
             </View>
-          </View>
-        )}
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  ) : (
-    // Mobile layout
-    <SafeAreaView style={{ flex: 1, paddingBottom: 16 }}>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : undefined}
-        style={{ flex: 1 }}
-      >
-        {api?.basePath ? (
-          <View className='flex flex-col flex-1 items-center justify-center'>
-            <View className='px-4 -mt-20 w-full'>
-              <View className='flex flex-col space-y-2'>
-                <Text className='text-2xl font-bold -mb-2'>
-                  {serverName ? (
-                    <>
-                      {`${t("login.login_to_title")} `}
-                      <Text className='text-purple-600'>{serverName}</Text>
-                    </>
-                  ) : (
-                    t("login.login_title")
-                  )}
-                </Text>
-                <Text className='text-xs text-neutral-400'>{api.basePath}</Text>
-                <Input
-                  placeholder={t("login.username_placeholder")}
-                  onChangeText={(text) =>
-                    setCredentials({ ...credentials, username: text })
-                  }
-                  onEndEditing={(e) => {
-                    const newValue = e.nativeEvent.text;
-                    if (newValue && newValue !== credentials.username) {
-                      setCredentials({ ...credentials, username: newValue });
-                    }
-                  }}
-                  value={credentials.username}
-                  keyboardType='default'
-                  returnKeyType='done'
-                  autoCapitalize='none'
-                  // Changed from username to oneTimeCode because it is a known issue in RN
-                  // https://github.com/facebook/react-native/issues/47106#issuecomment-2521270037
-                  textContentType='oneTimeCode'
-                  clearButtonMode='while-editing'
-                  maxLength={500}
-                />
-
-                <Input
-                  placeholder={t("login.password_placeholder")}
-                  onChangeText={(text) =>
-                    setCredentials({ ...credentials, password: text })
-                  }
-                  onEndEditing={(e) => {
-                    const newValue = e.nativeEvent.text;
-                    if (newValue && newValue !== credentials.password) {
-                      setCredentials({ ...credentials, password: newValue });
-                    }
-                  }}
-                  value={credentials.password}
-                  secureTextEntry
-                  keyboardType='default'
-                  returnKeyType='done'
-                  autoCapitalize='none'
-                  textContentType='password'
-                  clearButtonMode='while-editing'
-                  maxLength={500}
-                />
-                <View className='flex flex-row items-center justify-between'>
-                  <Button
-                    onPress={handleLogin}
-                    loading={loading}
-                    disabled={!credentials.username.trim()}
-                    className='flex-1 mr-2'
-                  >
-                    {t("login.login_button")}
-                  </Button>
-                  <TouchableOpacity
-                    onPress={handleQuickConnect}
-                    className='p-2 bg-neutral-900 rounded-xl h-12 w-12 flex items-center justify-center'
-                  >
-                    <MaterialCommunityIcons
-                      name='cellphone-lock'
-                      size={24}
-                      color='white'
-                    />
-                  </TouchableOpacity>
-                </View>
-              </View>
-            </View>
-
-            <View className='absolute bottom-0 left-0 w-full px-4 mb-2' />
-          </View>
-        ) : (
-          <View className='flex flex-col flex-1 items-center justify-center w-full'>
-            <View className='flex flex-col gap-y-2 px-4 w-full -mt-36'>
-              <Image
-                style={{
-                  width: 100,
-                  height: 100,
-                  marginLeft: -23,
-                  marginBottom: -20,
-                }}
-                source={require("@/assets/images/icon-ios-plain.png")}
-              />
-              <Text className='text-3xl font-bold'>Streamyfin</Text>
-              <Text className='text-neutral-500'>
-                {t("server.enter_url_to_jellyfin_server")}
-              </Text>
-              <Input
-                aria-label='Server URL'
-                placeholder={t("server.server_url_placeholder")}
-                onChangeText={setServerURL}
-                value={serverURL}
-                keyboardType='url'
-                returnKeyType='done'
-                autoCapitalize='none'
-                textContentType='URL'
-                maxLength={500}
-              />
-              <Button
-                loading={loadingServerCheck}
-                disabled={loadingServerCheck}
-                onPress={async () => {
-                  await handleConnect(serverURL);
-                }}
-                className='w-full grow'
-              >
-                {t("server.connect_button")}
-              </Button>
-              <JellyfinServerDiscovery
-                onServerSelect={async (server) => {
-                  setServerURL(server.address);
-                  if (server.serverName) {
-                    setServerName(server.serverName);
-                  }
-                  await handleConnect(server.address);
-                }}
-              />
-              <PreviousServersList
-                onServerSelect={async (s) => {
-                  await handleConnect(s.address);
-                }}
-              />
-            </View>
-          </View>
+          </>
         )}
       </KeyboardAvoidingView>
     </SafeAreaView>

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.3.5/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
   "files": {
     "includes": [
       "**/*",
@@ -8,7 +8,8 @@
       "!android",
       "!Streamyfin.app",
       "!utils/jellyseerr",
-      "!.expo"
+      "!.expo",
+      "!docs/jellyfin-openapi-stable.json"
     ]
   },
   "linter": {

components/AccountsSheet.tsx

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

components/AddToFavorites.tsx

@@ -1,21 +1,22 @@
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import type { FC } from "react";
-import { View, type ViewProps } from "react-native";
-import { RoundButton } from "@/components/RoundButton";
+
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useFavorite } from "@/hooks/useFavorite";
+import { View } from "react-native";
+import { RoundButton } from "@/components/RoundButton";
 
 interface Props extends ViewProps {
   item: BaseItemDto;
 }
 
-export const AddToFavorites: FC<Props> = ({ item, ...props }) => {
-  const { isFavorite, toggleFavorite } = useFavorite(item);
-
+export const AddToFavorites = ({ item, ...props }) => {
+  const { isFavorite, toggleFavorite, _} = useFavorite(item);
+  
   return (
     <View {...props}>
       <RoundButton
-        size='large'
+        size="large"
         icon={isFavorite ? "heart" : "heart-outline"}
+        fillColor={isFavorite ? "primary" : undefined}
         onPress={toggleFavorite}
       />
     </View>

components/AddToWatchlist.tsx

@@ -0,0 +1,43 @@
+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/Badge.tsx

@@ -1,4 +1,5 @@
-import { View, type ViewProps } from "react-native";
+import { Platform, StyleSheet, View, type ViewProps } from "react-native";
+import { GlassEffectView } from "react-native-glass-effect-view";
 import { Text } from "./common/Text";
 
 interface Props extends ViewProps {
@@ -13,6 +14,30 @@ export const Badge: React.FC<Props> = ({
   variant = "purple",
   ...props
 }) => {
+  const content = (
+    <View style={styles.content}>
+      {iconLeft && <View style={styles.iconLeft}>{iconLeft}</View>}
+      <Text
+        className={`
+          text-xs
+          ${variant === "purple" && "text-white"}
+      `}
+      >
+        {text}
+      </Text>
+    </View>
+  );
+
+  if (Platform.OS === "ios") {
+    return (
+      <View {...props} style={[styles.container, props.style]}>
+        <GlassEffectView style={{ borderRadius: 100 }}>
+          {content}
+        </GlassEffectView>
+      </View>
+    );
+  }
+
   return (
     <View
       {...props}
@@ -34,3 +59,23 @@ export const Badge: React.FC<Props> = ({
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    alignSelf: "flex-start",
+    flexShrink: 1,
+    flexGrow: 0,
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 50,
+    backgroundColor: "transparent",
+  },
+  iconLeft: {
+    marginRight: 4,
+  },
+});

components/Chromecast.tsx

@@ -1,6 +1,10 @@
 import { Feather } from "@expo/vector-icons";
-import { useCallback, useEffect } from "react";
-import { Platform, TouchableOpacity } from "react-native";
+import type { PlaybackProgressInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useRef } from "react";
+import { Platform } from "react-native";
+import { Pressable } from "react-native-gesture-handler";
 import GoogleCast, {
   CastButton,
   CastContext,
@@ -9,7 +13,9 @@ import GoogleCast, {
   useMediaStatus,
   useRemoteMediaClient,
 } from "react-native-google-cast";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { RoundButton } from "./RoundButton";
+import { useRouter } from "expo-router";
 
 export function Chromecast({
   width = 48,
@@ -23,6 +29,12 @@ export function Chromecast({
   const sessionManager = GoogleCast.getSessionManager();
   const discoveryManager = GoogleCast.getDiscoveryManager();
   const mediaStatus = useMediaStatus();
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+
+  const lastReportedProgressRef = useRef(0);
+
+  const router = useRouter();
 
   useEffect(() => {
     (async () => {
@@ -35,6 +47,53 @@ export function Chromecast({
     })();
   }, [client, devices, castDevice, sessionManager, discoveryManager]);
 
+  // Report video progress to Jellyfin server
+  useEffect(() => {
+    if (
+      !api ||
+      !user?.Id ||
+      !mediaStatus ||
+      !mediaStatus.mediaInfo?.contentId
+    ) {
+      return;
+    }
+
+    const streamPosition = mediaStatus.streamPosition || 0;
+
+    // Report every 10 seconds
+    if (Math.abs(streamPosition - lastReportedProgressRef.current) < 10) {
+      return;
+    }
+
+    const contentId = mediaStatus.mediaInfo.contentId;
+    const positionTicks = Math.floor(streamPosition * 10000000);
+    const isPaused = mediaStatus.playerState === "paused";
+    const streamUrl = mediaStatus.mediaInfo.contentUrl || "";
+    const isTranscoding = streamUrl.includes("m3u8");
+
+    const progressInfo: PlaybackProgressInfo = {
+      ItemId: contentId,
+      PositionTicks: positionTicks,
+      IsPaused: isPaused,
+      PlayMethod: isTranscoding ? "Transcode" : "DirectStream",
+      PlaySessionId: contentId,
+    };
+
+    getPlaystateApi(api)
+      .reportPlaybackProgress({ playbackProgressInfo: progressInfo })
+      .then(() => {
+        lastReportedProgressRef.current = streamPosition;
+      })
+      .catch((error) => {
+        console.error("Failed to report Chromecast progress:", error);
+      });
+  }, [
+    api,
+    user?.Id,
+    mediaStatus?.streamPosition,
+    mediaStatus?.mediaInfo?.contentId,
+  ]);
+
   // Android requires the cast button to be present for startDiscovery to work
   const AndroidCastButton = useCallback(
     () =>
@@ -44,7 +103,7 @@ export function Chromecast({
 
   if (Platform.OS === "ios") {
     return (
-      <TouchableOpacity
+      <Pressable
         className='mr-4'
         onPress={() => {
           if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
@@ -54,7 +113,7 @@ export function Chromecast({
       >
         <AndroidCastButton />
         <Feather name='cast' size={22} color={"white"} />
-      </TouchableOpacity>
+      </Pressable>
     );
   }
 
@@ -65,7 +124,7 @@ export function Chromecast({
         className='mr-2'
         background={false}
         onPress={() => {
-          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+          if (mediaStatus?.currentItemId) router.push('/player/google-cast-player');
           else CastContext.showCastDialog();
         }}
         {...props}
@@ -79,7 +138,7 @@ export function Chromecast({
     <RoundButton
       size='large'
       onPress={() => {
-        if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+        if (mediaStatus?.currentItemId) router.push('/player/google-cast-player');
         else CastContext.showCastDialog();
       }}
       {...props}

components/ChromecastControls.tsx

@@ -0,0 +1,897 @@
+import React, { useMemo, useRef, useState } from "react";
+import { Alert, TouchableOpacity, View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { Feather, Ionicons } from "@expo/vector-icons";
+import { RoundButton } from "@/components/RoundButton";
+
+import {
+  CastButton,
+  CastContext,
+  MediaStatus,
+  RemoteMediaClient,
+  useStreamPosition,
+} from "react-native-google-cast";
+import { useCallback, useEffect } from "react";
+import { Platform } from "react-native";
+import { Image } from "expo-image";
+import { Slider } from "react-native-awesome-slider";
+import {
+  runOnJS,
+  SharedValue,
+  useAnimatedReaction,
+  useSharedValue,
+} from "react-native-reanimated";
+import { debounce } from "lodash";
+import { useSettings } from "@/utils/atoms/settings";
+import { useHaptic } from "@/hooks/useHaptic";
+import { writeToLog } from "@/utils/log";
+import { formatTimeString } from "@/utils/time";
+import SkipButton from "@/components/video-player/controls/SkipButton";
+import NextEpisodeCountDownButton from "@/components/video-player/controls/NextEpisodeCountDownButton";
+import { useIntroSkipper } from "@/hooks/useIntroSkipper";
+import { useCreditSkipper } from "@/hooks/useCreditSkipper";
+import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
+import { useTrickplay } from "@/hooks/useTrickplay";
+import { secondsToTicks } from "@/utils/secondsToTicks";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { chromecastLoadMedia } from "@/utils/chromecastLoadMedia";
+import { useAtomValue } from "jotai";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { chromecast as chromecastProfile } from "@/utils/profiles/chromecast";
+import { SelectedOptions } from "./ItemContent";
+import {
+  getDefaultPlaySettings,
+  previousIndexes,
+} from "@/utils/jellyfin/getDefaultPlaySettings";
+import { useQuery } from "@tanstack/react-query";
+import {
+  getPlaystateApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { useTranslation } from "react-i18next";
+import { Colors } from "@/constants/Colors";
+import { useRouter } from "expo-router";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { ItemImage } from "@/components/common/ItemImage";
+import { BitrateSelector } from "@/components/BitrateSelector";
+import { ItemHeader } from "@/components/ItemHeader";
+import { MediaSourceSelector } from "@/components/MediaSourceSelector";
+import { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
+import { ItemTechnicalDetails } from "@/components/ItemTechnicalDetails";
+import { OverviewText } from "@/components/OverviewText";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { PlayedStatus } from "./PlayedStatus";
+import { AddToFavorites } from "./AddToFavorites";
+
+export default function ChromecastControls({
+  mediaStatus,
+  client,
+  setWasMediaPlaying,
+  reportPlaybackStopedRef,
+}: {
+  mediaStatus: MediaStatus;
+  client: RemoteMediaClient;
+  setWasMediaPlaying: (wasPlaying: boolean) => void;
+  reportPlaybackStopedRef: React.MutableRefObject<() => void>;
+}) {
+  const lightHapticFeedback = useHaptic("light");
+
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+
+  const [settings] = useSettings();
+
+  const [currentTime, setCurrentTime] = useState(0);
+  const [remainingTime, setRemainingTime] = useState(Infinity);
+  const max = useSharedValue(mediaStatus.mediaInfo?.streamDuration || 0);
+
+  const streamPosition = useStreamPosition();
+  const progress = useSharedValue(streamPosition || 0);
+
+  const wasPlayingRef = useRef(false);
+
+  const isSeeking = useSharedValue(false);
+  const isPlaying = useMemo(
+    () => mediaStatus.playerState === "playing",
+    [mediaStatus.playerState]
+  );
+  const isBufferingOrLoading = useMemo(
+    () =>
+      mediaStatus.playerState === null ||
+      mediaStatus.playerState === "buffering" ||
+      mediaStatus.playerState === "loading",
+    [mediaStatus.playerState]
+  );
+
+  // request update of media status every player state change
+  useEffect(() => {
+    client.requestStatus();
+  }, [mediaStatus.playerState]);
+
+  // update max progress
+  useEffect(() => {
+    if (mediaStatus.mediaInfo?.streamDuration)
+      max.value = mediaStatus.mediaInfo?.streamDuration;
+  }, [mediaStatus.mediaInfo?.streamDuration]);
+
+  const updateTimes = useCallback(
+    (currentProgress: number, maxValue: number) => {
+      setCurrentTime(currentProgress);
+      setRemainingTime(maxValue - currentProgress);
+    },
+    []
+  );
+
+  useAnimatedReaction(
+    () => ({
+      progress: progress.value,
+      max: max.value,
+      isSeeking: isSeeking.value,
+    }),
+    (result) => {
+      if (result.isSeeking === false) {
+        runOnJS(updateTimes)(result.progress, result.max);
+      }
+    },
+    [updateTimes]
+  );
+
+  const { mediaMetadata, itemId, streamURL } = useMemo(
+    () => ({
+      mediaMetadata: mediaStatus.mediaInfo?.metadata,
+      itemId: mediaStatus.mediaInfo?.contentId,
+      streamURL: mediaStatus.mediaInfo?.contentUrl,
+    }),
+    [mediaStatus]
+  );
+
+  const type = useMemo(
+    () => mediaMetadata?.type || "generic",
+    [mediaMetadata?.type]
+  );
+  const images = useMemo(
+    () => mediaMetadata?.images || [],
+    [mediaMetadata?.images]
+  );
+
+  const { playbackOptions, sessionId, mediaSourceId } = useMemo(() => {
+    const mediaCustomData = mediaStatus.mediaInfo?.customData as
+      | {
+          playbackOptions: SelectedOptions;
+          sessionId?: string;
+          mediaSourceId?: string;
+        }
+      | undefined;
+
+    return (
+      mediaCustomData || {
+        playbackOptions: undefined,
+        sessionId: undefined,
+        mediaSourceId: undefined,
+      }
+    );
+  }, [mediaStatus.mediaInfo?.customData]);
+
+  const {
+    data: item,
+    // currently nothing is indicating that item is loading, because most of the time it loads very fast
+    isLoading: isLoadingItem,
+    isError: isErrorItem,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ["item", itemId],
+    queryFn: async () => {
+      if (!itemId) return;
+      const res = await getUserLibraryApi(api!).getItem({
+        itemId,
+        userId: user?.Id,
+      });
+
+      return res.data;
+    },
+    enabled: !!itemId,
+    staleTime: 0,
+  });
+
+  const onProgress = useCallback(
+    async (progressInTicks: number, isPlaying: boolean) => {
+      if (!item?.Id || !streamURL) return;
+
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item.Id,
+        audioStreamIndex: playbackOptions?.audioIndex,
+        subtitleStreamIndex: playbackOptions?.subtitleIndex,
+        mediaSourceId,
+        positionTicks: Math.floor(progressInTicks),
+        isPaused: !isPlaying,
+        playMethod: streamURL.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: sessionId,
+      });
+    },
+    [api, item, playbackOptions, mediaSourceId, streamURL, sessionId]
+  );
+
+  // update progess on stream position change
+  useEffect(() => {
+    if (streamPosition) {
+      progress.value = streamPosition;
+      onProgress(secondsToTicks(streamPosition), isPlaying);
+    }
+  }, [streamPosition, isPlaying]);
+
+  const reportPlaybackStart = useCallback(async () => {
+    if (!streamURL) return;
+
+    await getPlaystateApi(api!).onPlaybackStart({
+      itemId: item?.Id!,
+      audioStreamIndex: playbackOptions?.audioIndex,
+      subtitleStreamIndex: playbackOptions?.subtitleIndex,
+      mediaSourceId,
+      playMethod: streamURL.includes("m3u8") ? "Transcode" : "DirectStream",
+      playSessionId: sessionId,
+    });
+  }, [api, item, playbackOptions, mediaSourceId, streamURL, sessionId]);
+
+  // report playback started
+  useEffect(() => {
+    setWasMediaPlaying(true);
+    reportPlaybackStart();
+  }, [reportPlaybackStart]);
+
+  // update the reportPlaybackStoppedRef
+  useEffect(() => {
+    reportPlaybackStopedRef.current = async () => {
+      if (!streamURL) return;
+
+      await getPlaystateApi(api!).onPlaybackStopped({
+        itemId: item?.Id!,
+        mediaSourceId,
+        positionTicks: secondsToTicks(progress.value),
+        playSessionId: sessionId,
+      });
+    };
+  }, [
+    api,
+    item,
+    playbackOptions,
+    progress,
+    mediaSourceId,
+    streamURL,
+    sessionId,
+  ]);
+
+  const { previousItem, nextItem } = useAdjacentItems({
+    item: {
+      Id: itemId,
+      SeriesId: item?.SeriesId,
+      Type: item?.Type,
+    },
+  });
+
+  const goToItem = useCallback(
+    async (item: BaseItemDto) => {
+      if (!api) {
+        console.warn("Failed to go to item: No api!");
+        return;
+      }
+
+      const previousIndexes: previousIndexes = {
+        subtitleIndex: playbackOptions?.subtitleIndex || undefined,
+        audioIndex: playbackOptions?.audioIndex || undefined,
+      };
+
+      const {
+        mediaSource,
+        audioIndex: defaultAudioIndex,
+        subtitleIndex: defaultSubtitleIndex,
+      } = getDefaultPlaySettings(item, settings, previousIndexes, undefined);
+
+      // Get a new URL with the Chromecast device profile:
+      const data = await getStreamUrl({
+        api,
+        item,
+        deviceProfile: chromecastProfile,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+        userId: user?.Id,
+        audioStreamIndex: defaultAudioIndex,
+        // maxStreamingBitrate: playbackOptions.bitrate?.value,   // TODO handle bitrate limit
+        subtitleStreamIndex: defaultSubtitleIndex,
+        mediaSourceId: mediaSource?.Id,
+      });
+
+      if (!data?.url) {
+        console.warn("No URL returned from getStreamUrl", data);
+        Alert.alert("Client error", "Could not create stream for Chromecast");
+        return;
+      }
+
+      await chromecastLoadMedia({
+        client,
+        item,
+        contentUrl: data.url,
+        sessionId: data.sessionId || undefined,
+        mediaSourceId: data.mediaSource?.Id || undefined,
+        playbackOptions,
+        images: [
+          {
+            url: getParentBackdropImageUrl({
+              api,
+              item,
+              quality: 90,
+              width: 2000,
+            })!,
+          },
+        ],
+      });
+
+      await client.requestStatus();
+    },
+    [client, api]
+  );
+
+  const goToNextItem = useCallback(() => {
+    if (!nextItem) {
+      console.warn("Failed to skip to next item: No next item!");
+      return;
+    }
+    lightHapticFeedback();
+    goToItem(nextItem);
+  }, [nextItem, lightHapticFeedback]);
+
+  const goToPreviousItem = useCallback(() => {
+    if (!previousItem) {
+      console.warn("Failed to skip to next item: No next item!");
+      return;
+    }
+    lightHapticFeedback();
+    goToItem(previousItem);
+  }, [previousItem, lightHapticFeedback]);
+
+  const pause = useCallback(() => {
+    client.pause();
+  }, [client]);
+
+  const play = useCallback(() => {
+    client.play();
+  }, [client]);
+
+  const seek = useCallback(
+    (time: number) => {
+      // skip to next episode if seeking to end (for credit skipping)
+      // with 1 second room to react
+      if (nextItem && time >= max.value - 1) {
+        goToNextItem();
+        return;
+      }
+      client.seek({
+        position: time,
+      });
+    },
+    [client, goToNextItem, nextItem, max]
+  );
+
+  const togglePlay = useCallback(() => {
+    if (isPlaying) pause();
+    else play();
+  }, [isPlaying, play, pause]);
+
+  const handleSkipBackward = useCallback(async () => {
+    if (!settings?.rewindSkipTime) return;
+    wasPlayingRef.current = isPlaying;
+    lightHapticFeedback();
+    try {
+      const curr = progress.value;
+      if (curr !== undefined) {
+        const newTime = Math.max(0, curr - settings.rewindSkipTime);
+        seek(newTime);
+        if (wasPlayingRef.current === true) play();
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video backwards", error);
+    }
+  }, [settings, isPlaying]);
+
+  const handleSkipForward = useCallback(async () => {
+    if (!settings?.forwardSkipTime) return;
+    wasPlayingRef.current = isPlaying;
+    lightHapticFeedback();
+    try {
+      const curr = progress.value;
+      if (curr !== undefined) {
+        const newTime = curr + settings.forwardSkipTime;
+        seek(Math.max(0, newTime));
+        if (wasPlayingRef.current === true) play();
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video forwards", error);
+    }
+  }, [settings, isPlaying]);
+
+  const { showSkipButton, skipIntro } = useIntroSkipper(
+    itemId,
+    currentTime,
+    seek,
+    play,
+    false
+  );
+
+  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
+    itemId,
+    currentTime,
+    seek,
+    play,
+    false
+  );
+
+  // Android requires the cast button to be present for startDiscovery to work
+  const AndroidCastButton = useCallback(
+    () =>
+      Platform.OS === "android" ? (
+        <CastButton tintColor="transparent" />
+      ) : (
+        <></>
+      ),
+    [Platform.OS]
+  );
+
+  const TrickplaySliderMemoized = useMemo(
+    () => (
+      <TrickplaySlider
+        item={item}
+        progress={progress}
+        wasPlayingRef={wasPlayingRef}
+        isPlaying={isPlaying}
+        isSeeking={isSeeking}
+        range={{ max }}
+        play={play}
+        pause={pause}
+        seek={seek}
+      />
+    ),
+    [
+      item,
+      progress,
+      wasPlayingRef,
+      isPlaying,
+      isSeeking,
+      max,
+      play,
+      pause,
+      seek,
+    ]
+  );
+
+  const NextEpisodeButtonMemoized = useMemo(
+    () => (
+      <NextEpisodeCountDownButton
+        show={nextItem !== null && max.value > 0 && remainingTime < 10}
+        onFinish={goToNextItem}
+        onPress={goToNextItem}
+      />
+    ),
+    [nextItem, max, remainingTime, goToNextItem]
+  );
+
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const insets = useSafeAreaInsets();
+
+  const [loadingLogo, setLoadingLogo] = useState(true);
+  const [headerHeight, setHeaderHeight] = useState(350);
+
+  const logoUrl = useMemo(() => images[0]?.url, [images]);
+
+  if (isErrorItem) {
+    return (
+      <View className="w-full h-full flex flex-col items-center justify-center bg-black">
+        <View className="p-12 flex gap-4">
+          <Text className="text-center font-semibold text-red-500 text-lg">
+            {t("chromecast.error_loading_item")}
+          </Text>
+          {error && (
+            <Text className="text-center opacity-80">{error.message}</Text>
+          )}
+        </View>
+        <View className="flex gap-2 mt-auto mb-20">
+          <TouchableOpacity
+            className="flex flex-row items-center justify-center gap-2"
+            onPress={() => refetch()}
+          >
+            <Ionicons name="reload" size={24} color={Colors.primary} />
+            <Text className="ml-2 text-purple-600 text-lg">
+              {t("chromecast.retry_load_item")}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            className="flex flex-row items-center justify-center gap-2"
+            onPress={() => {
+              router.push("/(auth)/(home)/");
+            }}
+          >
+            <Ionicons name="home" size={16} color={Colors.text} />
+            <Text className="ml-2 text-white text-sm underline">
+              {t("chromecast.go_home")}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+
+  if (!item) {
+    return <Text>Do something when item is undefined</Text>;
+  }
+
+  if (!playbackOptions) {
+    return <Text>Do something when playbackOptions is undefined</Text>;
+  }
+
+  return (
+    <View
+      className="flex-1 relative"
+      style={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      {/* TODO do navigation header properly */}
+      <View
+        className="flex flex-row justify-between absolute w-full top-2 z-50"
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        }}
+      >
+        <RoundButton size="large" icon="arrow-back" />
+        {item.Type !== "Program" && (
+          <View className="flex flex-row items-center space-x-2">
+            <RoundButton
+              size="large"
+              onPress={() => {
+                CastContext.showCastDialog();
+              }}
+            >
+              <AndroidCastButton />
+              <Feather name="cast" size={24} color={"white"} />
+            </RoundButton>
+            <PlayedStatus items={[item]} size="large" />
+            <AddToFavorites item={item} />
+          </View>
+        )}
+      </View>
+      <ParallaxScrollView
+        className={`flex-1 ${loadingLogo ? "opacity-0" : "opacity-100"}`}
+        headerHeight={headerHeight}
+        headerImage={
+          <View style={[{ flex: 1 }]}>
+            <ItemImage
+              variant={
+                item.Type === "Movie" && logoUrl ? "Backdrop" : "Primary"
+              }
+              item={item}
+              style={{
+                width: "100%",
+                height: "100%",
+              }}
+            />
+          </View>
+        }
+        logo={
+          <>
+            {logoUrl ? (
+              <Image
+                source={{
+                  uri: logoUrl,
+                }}
+                style={{
+                  height: 130,
+                  width: "100%",
+                  resizeMode: "contain",
+                }}
+                onLoad={() => setLoadingLogo(false)}
+                onError={() => setLoadingLogo(false)}
+              />
+            ) : null}
+          </>
+        }
+      >
+        <View className="flex flex-col bg-transparent shrink">
+          <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
+            <ItemHeader item={item} className="mb-4" />
+            {item.Type !== "Program" && !Platform.isTV && (
+              <View className="flex flex-row items-center justify-start w-full h-16">
+                <BitrateSelector
+                  className="mr-1"
+                  onChange={(val) =>
+                    // setSelectedOptions(
+                    //   (prev) => prev && { ...prev, bitrate: val }
+                    // )
+                    console.log("new selected options", val)
+                  }
+                  selected={playbackOptions.bitrate}
+                />
+                <MediaSourceSelector
+                  className="mr-1"
+                  item={item}
+                  onChange={(val) =>
+                    // setSelectedOptions((prev) =>
+                    //   prev && {
+                    //     ...prev,
+                    //     mediaSource: val,
+                    //   }
+                    // )
+                    console.log("new selected options", val)
+                  }
+                  selected={playbackOptions.mediaSource}
+                />
+                <AudioTrackSelector
+                  className="mr-1"
+                  source={playbackOptions.mediaSource}
+                  onChange={(val) => {
+                    // setSelectedOptions((prev) =>
+                    //   prev && {
+                    //     ...prev,
+                    //     audioIndex: val,
+                    //   }
+                    // );
+                    console.log("new selected options", val);
+                  }}
+                  selected={playbackOptions.audioIndex}
+                />
+                <SubtitleTrackSelector
+                  source={playbackOptions.mediaSource}
+                  onChange={(val) =>
+                    // setSelectedOptions(
+                    //   (prev) =>
+                    //     prev && {
+                    //       ...prev,
+                    //       subtitleIndex: val,
+                    //     }
+                    // )
+                    console.log("new selected options", val)
+                  }
+                  selected={playbackOptions.subtitleIndex}
+                />
+              </View>
+            )}
+          </View>
+          <ItemTechnicalDetails source={playbackOptions.mediaSource} />
+          <OverviewText text={item.Overview} className="px-4 mb-4" />
+        </View>
+      </ParallaxScrollView>
+      <View className="pt-2">
+        {TrickplaySliderMemoized}
+        <View className="flex flex-row items-center justify-between mt-2">
+          <Text className="text-[12px] text-neutral-400">
+            {formatTimeString(currentTime, "s")}
+          </Text>
+          <Text className="text-[12px] text-neutral-400">
+            -{formatTimeString(remainingTime, "s")}
+          </Text>
+        </View>
+        <View className="flex flex-row w-full items-center justify-evenly mt-2 mb-10">
+          <TouchableOpacity onPress={goToPreviousItem} disabled={!previousItem}>
+            <Ionicons
+              name="play-skip-back-outline"
+              size={30}
+              color={previousItem ? "white" : "gray"}
+            />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={handleSkipBackward}>
+            <Ionicons name="play-back-outline" size={30} color="white" />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => togglePlay()}
+            className="flex w-14 h-14 items-center justify-center"
+          >
+            {!isBufferingOrLoading ? (
+              <Ionicons
+                name={isPlaying ? "pause" : "play"}
+                size={50}
+                color="white"
+              />
+            ) : (
+              <Loader size={"large"} />
+            )}
+          </TouchableOpacity>
+          <TouchableOpacity onPress={handleSkipForward}>
+            <Ionicons name="play-forward-outline" size={30} color="white" />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={goToNextItem} disabled={!nextItem}>
+            <Ionicons
+              name="play-skip-forward-outline"
+              size={30}
+              color={nextItem ? "white" : "gray"}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+      {/* TODO find proper placement for these buttons */}
+      {/* <View className="flex flex-row w-full justify-end px-6 pb-6">
+        <SkipButton
+          showButton={showSkipButton}
+          onPress={skipIntro}
+          buttonText="Skip Intro"
+        />
+        <SkipButton
+          showButton={showSkipCreditButton}
+          onPress={skipCredit}
+          buttonText="Skip Credits"
+        />
+        {NextEpisodeButtonMemoized}
+      </View> */}
+    </View>
+  );
+}
+
+type TrickplaySliderProps = {
+  item?: BaseItemDto;
+  progress: SharedValue<number>;
+  wasPlayingRef: React.MutableRefObject<boolean>;
+  isPlaying: boolean;
+  isSeeking: SharedValue<boolean>;
+  range: { min?: SharedValue<number>; max: SharedValue<number> };
+  play: () => void;
+  pause: () => void;
+  seek: (time: number) => void;
+};
+
+function TrickplaySlider({
+  item,
+  progress,
+  wasPlayingRef,
+  isPlaying,
+  isSeeking,
+  range,
+  play,
+  pause,
+  seek,
+}: TrickplaySliderProps) {
+  const [isSliding, setIsSliding] = useState(false);
+  const lastProgressRef = useRef<number>(0);
+
+  const min = useSharedValue(range.min?.value || 0);
+
+  const {
+    trickPlayUrl,
+    calculateTrickplayUrl,
+    trickplayInfo,
+    prefetchAllTrickplayImages,
+  } = useTrickplay(
+    {
+      Id: item?.Id,
+      RunTimeTicks: secondsToTicks(progress.value),
+      Trickplay: item?.Trickplay,
+    },
+    true
+  );
+
+  useEffect(() => {
+    prefetchAllTrickplayImages();
+  }, []);
+
+  const handleSliderStart = useCallback(() => {
+    setIsSliding(true);
+    wasPlayingRef.current = isPlaying;
+    lastProgressRef.current = progress.value;
+
+    pause();
+    isSeeking.value = true;
+  }, [isPlaying]);
+
+  const handleSliderComplete = useCallback(async (value: number) => {
+    isSeeking.value = false;
+    progress.value = value;
+    setIsSliding(false);
+
+    seek(Math.max(0, Math.floor(value)));
+    if (wasPlayingRef.current === true) play();
+  }, []);
+
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+  const handleSliderChange = useCallback(
+    debounce((value: number) => {
+      calculateTrickplayUrl(secondsToTicks(value));
+      const progressInSeconds = Math.floor(value);
+      const hours = Math.floor(progressInSeconds / 3600);
+      const minutes = Math.floor((progressInSeconds % 3600) / 60);
+      const seconds = progressInSeconds % 60;
+      setTime({ hours, minutes, seconds });
+    }, 3),
+    []
+  );
+
+  const memoizedRenderBubble = useCallback(() => {
+    if (!trickPlayUrl || !trickplayInfo) {
+      return null;
+    }
+    const { x, y, url } = trickPlayUrl;
+    const tileWidth = 150;
+    const tileHeight = 150 / trickplayInfo.aspectRatio!;
+
+    return (
+      <View
+        style={{
+          position: "absolute",
+          left: -62,
+          bottom: 0,
+          paddingTop: 30,
+          paddingBottom: 5,
+          width: tileWidth * 1.5,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <View
+          style={{
+            width: tileWidth,
+            height: tileHeight,
+            alignSelf: "center",
+            transform: [{ scale: 1.4 }],
+            borderRadius: 5,
+          }}
+          className="bg-neutral-800 overflow-hidden"
+        >
+          <Image
+            cachePolicy={"memory-disk"}
+            style={{
+              width: 150 * trickplayInfo?.data.TileWidth!,
+              height:
+                (150 / trickplayInfo.aspectRatio!) *
+                trickplayInfo?.data.TileHeight!,
+              transform: [
+                { translateX: -x * tileWidth },
+                { translateY: -y * tileHeight },
+              ],
+              resizeMode: "cover",
+            }}
+            source={{ uri: url }}
+            contentFit="cover"
+          />
+        </View>
+        <Text
+          style={{
+            marginTop: 30,
+            fontSize: 16,
+          }}
+        >
+          {`${time.hours > 0 ? `${time.hours}:` : ""}${
+            time.minutes < 10 ? `0${time.minutes}` : time.minutes
+          }:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`}
+        </Text>
+      </View>
+    );
+  }, [trickPlayUrl, trickplayInfo, time]);
+
+  return (
+    <Slider
+      theme={{
+        maximumTrackTintColor: "rgba(255,255,255,0.2)",
+        minimumTrackTintColor: "#fff",
+        cacheTrackTintColor: "rgba(255,255,255,0.3)",
+        bubbleBackgroundColor: "#fff",
+        bubbleTextColor: "#666",
+        heartbeatColor: "#999",
+      }}
+      renderThumb={() => null}
+      onSlidingStart={handleSliderStart}
+      onSlidingComplete={handleSliderComplete}
+      onValueChange={handleSliderChange}
+      containerStyle={{
+        borderRadius: 100,
+      }}
+      renderBubble={() => isSliding && memoizedRenderBubble()}
+      sliderHeight={10}
+      thumbWidth={0}
+      progress={progress}
+      minimumValue={min}
+      maximumValue={range.max}
+    />
+  );
+}

components/DownloadItem.tsx

@@ -1,30 +1,30 @@
+import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { queueActions, queueAtom } from "@/utils/atoms/queue";
+import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { saveDownloadItemInfoToDiskTmp } from "@/utils/optimize-server";
+import download from "@/utils/profiles/download";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import {
   BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
+  BottomSheetBackdropProps,
   BottomSheetModal,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
-import type {
+import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { type Href, router } from "expo-router";
-import { t } from "i18next";
+import { Href, router, useFocusEffect } from "expo-router";
 import { useAtom } from "jotai";
-import type React from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Alert, Platform, Switch, View, type ViewProps } from "react-native";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { Alert, Platform, View, ViewProps } from "react-native";
 import { toast } from "sonner-native";
-import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { queueAtom } from "@/utils/atoms/queue";
-import { useSettings } from "@/utils/atoms/settings";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { getDownloadUrl } from "@/utils/jellyfin/media/getDownloadUrl";
 import { AudioTrackSelector } from "./AudioTrackSelector";
-import { type Bitrate, BitrateSelector } from "./BitrateSelector";
+import { Bitrate, BitrateSelector } from "./BitrateSelector";
 import { Button } from "./Button";
 import { Text } from "./common/Text";
 import { Loader } from "./Loader";
@@ -32,13 +32,7 @@ import { MediaSourceSelector } from "./MediaSourceSelector";
 import ProgressCircle from "./ProgressCircle";
 import { RoundButton } from "./RoundButton";
 import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
-
-export type SelectedOptions = {
-  bitrate: Bitrate;
-  mediaSource: MediaSourceInfo | undefined;
-  audioIndex: number | undefined;
-  subtitleIndex: number;
-};
+import { t } from "i18next";
 
 interface DownloadProps extends ViewProps {
   items: BaseItemDto[];
@@ -60,27 +54,32 @@ export const DownloadItems: React.FC<DownloadProps> = ({
 }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const [queue, _setQueue] = useAtom(queueAtom);
-  const { settings } = useSettings();
-  const [downloadUnwatchedOnly, setDownloadUnwatchedOnly] = useState(false);
+  const [queue, setQueue] = useAtom(queueAtom);
+  const [settings] = useSettings();
 
-  const { processes, startBackgroundDownload, downloadedItems } = useDownload();
-  const downloadedFiles = downloadedItems;
+  const { processes, startBackgroundDownload, downloadedFiles } = useDownload();
+  const { startRemuxing } = useRemuxHlsToMp4();
 
-  const [selectedOptions, setSelectedOptions] = useState<
-    SelectedOptions | undefined
+  const [selectedMediaSource, setSelectedMediaSource] = useState<
+    MediaSourceInfo | undefined | null
   >(undefined);
-
-  const {
-    defaultAudioIndex,
-    defaultBitrate,
-    defaultMediaSource,
-    defaultSubtitleIndex,
-  } = useDefaultPlaySettings(items[0], settings);
+  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] =
+    useState<number>(0);
+  const [maxBitrate, setMaxBitrate] = useState<Bitrate>(
+    settings?.defaultBitrate ?? {
+      key: "Max",
+      value: undefined,
+    }
+  );
 
   const userCanDownload = useMemo(
     () => user?.Policy?.EnableContentDownloading,
-    [user],
+    [user]
+  );
+  const usingOptimizedServer = useMemo(
+    () => settings?.downloadMethod === DownloadMethod.Optimized,
+    [settings]
   );
 
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -89,9 +88,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     bottomSheetModalRef.current?.present();
   }, []);
 
-  const handleSheetChanges = useCallback((_index: number) => {
-    // Modal state tracking handled by BottomSheetModal
-  }, []);
+  const handleSheetChanges = useCallback((index: number) => {}, []);
 
   const closeModal = useCallback(() => {
     bottomSheetModalRef.current?.dismiss();
@@ -102,45 +99,21 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   const itemsNotDownloaded = useMemo(
     () =>
       items.filter((i) => !downloadedFiles?.some((f) => f.item.Id === i.Id)),
-    [items, downloadedFiles],
+    [items, downloadedFiles]
   );
 
-  // Initialize selectedOptions with default values
-  useEffect(() => {
-    setSelectedOptions(() => ({
-      bitrate: defaultBitrate,
-      mediaSource: defaultMediaSource,
-      subtitleIndex: defaultSubtitleIndex ?? -1,
-      audioIndex: defaultAudioIndex,
-    }));
-  }, [
-    defaultAudioIndex,
-    defaultBitrate,
-    defaultSubtitleIndex,
-    defaultMediaSource,
-  ]);
-
-  const itemsToDownload = useMemo(() => {
-    if (downloadUnwatchedOnly) {
-      return itemsNotDownloaded.filter((item) => !item.UserData?.Played);
-    }
-    return itemsNotDownloaded;
-  }, [itemsNotDownloaded, downloadUnwatchedOnly]);
-
   const allItemsDownloaded = useMemo(() => {
     if (items.length === 0) return false;
     return itemsNotDownloaded.length === 0;
   }, [items, itemsNotDownloaded]);
   const itemsProcesses = useMemo(
-    () =>
-      processes?.filter((p) => p?.item?.Id && itemIds.includes(p.item.Id)) ||
-      [],
-    [processes, itemIds],
+    () => processes?.filter((p) => itemIds.includes(p.item.Id)),
+    [processes, itemIds]
   );
 
   const progress = useMemo(() => {
-    if (itemIds.length === 1)
-      return itemsProcesses.reduce((acc, p) => acc + (p.progress || 0), 0);
+    if (itemIds.length == 1)
+      return itemsProcesses.reduce((acc, p) => acc + p.progress, 0);
     return (
       ((itemIds.length -
         queue.filter((q) => itemIds.includes(q.item.Id)).length) /
@@ -152,16 +125,9 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   const itemsQueued = useMemo(() => {
     return (
       itemsNotDownloaded.length > 0 &&
-      itemsNotDownloaded.every((p) => queue.some((q) => p.Id === q.item.Id))
+      itemsNotDownloaded.every((p) => queue.some((q) => p.Id == q.item.Id))
     );
   }, [queue, itemsNotDownloaded]);
-
-  const itemsInProgressOrQueued = useMemo(() => {
-    const inProgress = itemsProcesses.length;
-    const inQueue = queue.filter((q) => itemIds.includes(q.item.Id)).length;
-    return inProgress + inQueue;
-  }, [itemsProcesses, queue, itemIds]);
-
   const navigateToDownloads = () => router.push("/downloads");
 
   const onDownloadedPress = () => {
@@ -174,106 +140,119 @@ export const DownloadItems: React.FC<DownloadProps> = ({
             params: {
               episodeSeasonIndex: firstItem.ParentIndexNumber,
             },
-          } as Href),
+          } as Href)
     );
   };
 
+  const acceptDownloadOptions = useCallback(() => {
+    if (userCanDownload === true) {
+      if (itemsNotDownloaded.some((i) => !i.Id)) {
+        throw new Error("No item id");
+      }
+      closeModal();
+
+      if (usingOptimizedServer) initiateDownload(...itemsNotDownloaded);
+      else {
+        queueActions.enqueue(
+          queue,
+          setQueue,
+          ...itemsNotDownloaded.map((item) => ({
+            id: item.Id!,
+            execute: async () => await initiateDownload(item),
+            item,
+          }))
+        );
+      }
+    } else {
+      toast.error(
+        t("home.downloads.toasts.you_are_not_allowed_to_download_files")
+      );
+    }
+  }, [
+    queue,
+    setQueue,
+    itemsNotDownloaded,
+    usingOptimizedServer,
+    userCanDownload,
+    maxBitrate,
+    selectedMediaSource,
+    selectedAudioStream,
+    selectedSubtitleStream,
+  ]);
+
   const initiateDownload = useCallback(
     async (...items: BaseItemDto[]) => {
       if (
         !api ||
         !user?.Id ||
         items.some((p) => !p.Id) ||
-        (itemsNotDownloaded.length === 1 && !selectedOptions?.mediaSource?.Id)
+        (itemsNotDownloaded.length === 1 && !selectedMediaSource?.Id)
       ) {
         throw new Error(
-          "DownloadItem ~ initiateDownload: No api or user or item",
+          "DownloadItem ~ initiateDownload: No api or user or item"
         );
       }
-      const downloadDetailsPromises = items.map(async (item) => {
-        const { mediaSource, audioIndex, subtitleIndex } =
-          itemsNotDownloaded.length > 1
-            ? getDefaultPlaySettings(item, settings!)
-            : {
-                mediaSource: selectedOptions?.mediaSource,
-                audioIndex: selectedOptions?.audioIndex,
-                subtitleIndex: selectedOptions?.subtitleIndex,
-              };
+      let mediaSource = selectedMediaSource;
+      let audioIndex: number | undefined = selectedAudioStream;
+      let subtitleIndex: number | undefined = selectedSubtitleStream;
 
-        const downloadDetails = await getDownloadUrl({
+      for (const item of items) {
+        if (itemsNotDownloaded.length > 1) {
+          const defaults = getDefaultPlaySettings(item, settings!);
+          mediaSource = defaults.mediaSource;
+          audioIndex = defaults.audioIndex;
+          subtitleIndex = defaults.subtitleIndex;
+          // Keep using the selected bitrate for consistency across all downloads
+        }
+
+        const res = await getStreamUrl({
           api,
           item,
-          userId: user.Id!,
-          mediaSource: mediaSource!,
-          audioStreamIndex: audioIndex ?? -1,
-          subtitleStreamIndex: subtitleIndex ?? -1,
-          maxBitrate: selectedOptions?.bitrate || defaultBitrate,
-          deviceId: api.deviceInfo.id,
+          startTimeTicks: 0,
+          userId: user?.Id,
+          audioStreamIndex: audioIndex,
+          maxStreamingBitrate: maxBitrate.value,
+          mediaSourceId: mediaSource?.Id,
+          subtitleStreamIndex: subtitleIndex,
+          deviceProfile: download,
         });
 
-        return {
-          url: downloadDetails?.url,
-          item,
-          mediaSource: downloadDetails?.mediaSource,
-        };
-      });
-
-      const downloadDetails = await Promise.all(downloadDetailsPromises);
-      for (const { url, item, mediaSource } of downloadDetails) {
-        if (!url) {
+        if (!res) {
           Alert.alert(
             t("home.downloads.something_went_wrong"),
-            t("home.downloads.could_not_get_stream_url_from_jellyfin"),
+            t("home.downloads.could_not_get_stream_url_from_jellyfin")
           );
           continue;
         }
-        if (!mediaSource) {
-          console.error(`Could not get download URL for ${item.Name}`);
-          toast.error(
-            t("home.downloads.toasts.could_not_get_download_url_for_item", {
-              itemName: item.Name,
-            }),
-          );
-          continue;
+
+        const { mediaSource: source, url } = res;
+
+        if (!url || !source) throw new Error("No url");
+
+        saveDownloadItemInfoToDiskTmp(item, source, url);
+
+        if (usingOptimizedServer) {
+          await startBackgroundDownload(url, item, source);
+        } else {
+          await startRemuxing(item, url, source);
         }
-        await startBackgroundDownload(
-          url,
-          item,
-          mediaSource,
-          selectedOptions?.bitrate || defaultBitrate,
-        );
       }
     },
     [
       api,
       user?.Id,
       itemsNotDownloaded,
-      selectedOptions,
+      selectedMediaSource,
+      selectedAudioStream,
+      selectedSubtitleStream,
       settings,
-      defaultBitrate,
+      maxBitrate,
+      usingOptimizedServer,
       startBackgroundDownload,
-    ],
+      startRemuxing,
+    ]
   );
 
-  const acceptDownloadOptions = useCallback(async () => {
-    if (userCanDownload === true) {
-      if (itemsToDownload.some((i) => !i.Id)) {
-        throw new Error("No item id");
-      }
-
-      closeModal();
-
-      // Wait for modal dismiss animation to complete
-      setTimeout(() => {
-        initiateDownload(...itemsToDownload);
-      }, 300);
-    } else {
-      toast.error(
-        t("home.downloads.toasts.you_are_not_allowed_to_download_files"),
-      );
-    }
-  }, [closeModal, initiateDownload, itemsToDownload, userCanDownload]);
-
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop
@@ -282,42 +261,44 @@ export const DownloadItems: React.FC<DownloadProps> = ({
         appearsOnIndex={0}
       />
     ),
-    [],
+    []
+  );
+  useFocusEffect(
+    useCallback(() => {
+      if (!settings) return;
+      if (itemsNotDownloaded.length !== 1) return;
+      const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+        getDefaultPlaySettings(items[0], settings);
+
+      setSelectedMediaSource(mediaSource ?? undefined);
+      setSelectedAudioStream(audioIndex ?? 0);
+      setSelectedSubtitleStream(subtitleIndex ?? -1);
+      setMaxBitrate(bitrate);
+    }, [items, itemsNotDownloaded, settings])
   );
 
   const renderButtonContent = () => {
-    // For single item downloads, show progress if item is being processed
-    // For multi-item downloads (season/series), show progress only if 2+ items are in progress or queued
-    const shouldShowProgress =
-      itemIds.length === 1
-        ? itemsProcesses.length > 0
-        : itemsInProgressOrQueued > 1;
-
-    if (processes.length > 0 && shouldShowProgress) {
+    if (processes && itemsProcesses.length > 0) {
       return progress === 0 ? (
         <Loader />
       ) : (
-        <View className='-rotate-45'>
+        <View className="-rotate-45">
           <ProgressCircle
             size={24}
             fill={progress}
             width={4}
-            tintColor='#9334E9'
-            backgroundColor='#bdc3c7'
+            tintColor="#9334E9"
+            backgroundColor="#bdc3c7"
           />
         </View>
       );
-    }
-
-    if (itemsQueued) {
-      return <Ionicons name='hourglass' size={24} color='white' />;
-    }
-
-    if (allItemsDownloaded) {
+    } else if (itemsQueued) {
+      return <Ionicons name="hourglass" size={24} color="white" />;
+    } else if (allItemsDownloaded) {
       return <DownloadedIconComponent />;
+    } else {
+      return <MissingDownloadIconComponent />;
     }
-
-    return <MissingDownloadIconComponent />;
   };
 
   const onButtonPress = () => {
@@ -348,100 +329,64 @@ export const DownloadItems: React.FC<DownloadProps> = ({
         }}
         onChange={handleSheetChanges}
         backdropComponent={renderBackdrop}
-        enablePanDownToClose
-        enableDismissOnClose
-        android_keyboardInputMode='adjustResize'
-        keyboardBehavior='interactive'
-        keyboardBlurBehavior='restore'
       >
         <BottomSheetView>
-          <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
+          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
             <View>
-              <Text className='font-bold text-2xl text-neutral-100'>
+              <Text className="font-bold text-2xl text-neutral-100">
                 {title}
               </Text>
-              <Text className='text-neutral-300'>
+              <Text className="text-neutral-300">
                 {subtitle ||
                   t("item_card.download.download_x_item", {
-                    item_count: itemsToDownload.length,
+                    item_count: itemsNotDownloaded.length,
                   })}
               </Text>
             </View>
-            <View className='flex flex-col space-y-2 w-full'>
-              <View className='items-start'>
-                <BitrateSelector
-                  inverted
-                  onChange={(val) =>
-                    setSelectedOptions(
-                      (prev) => prev && { ...prev, bitrate: val },
-                    )
-                  }
-                  selected={selectedOptions?.bitrate}
-                />
-              </View>
-              {itemsNotDownloaded.length > 1 && (
-                <View className='flex flex-row items-center justify-between w-full py-2'>
-                  <Text>{t("item_card.download.download_unwatched_only")}</Text>
-                  <Switch
-                    onValueChange={setDownloadUnwatchedOnly}
-                    value={downloadUnwatchedOnly}
-                  />
-                </View>
-              )}
+            <View className="flex flex-col space-y-2 w-full items-start">
+              <BitrateSelector
+                inverted
+                onChange={setMaxBitrate}
+                selected={maxBitrate}
+              />
               {itemsNotDownloaded.length === 1 && (
-                <View>
-                  <View className='items-start'>
-                    <MediaSourceSelector
-                      item={items[0]}
-                      onChange={(val) =>
-                        setSelectedOptions(
-                          (prev) =>
-                            prev && {
-                              ...prev,
-                              mediaSource: val,
-                            },
-                        )
-                      }
-                      selected={selectedOptions?.mediaSource}
-                    />
-                  </View>
-                  {selectedOptions?.mediaSource && (
-                    <View className='flex flex-col space-y-2 items-start'>
+                <>
+                  <MediaSourceSelector
+                    item={items[0]}
+                    onChange={setSelectedMediaSource}
+                    selected={selectedMediaSource}
+                  />
+                  {selectedMediaSource && (
+                    <View className="flex flex-col space-y-2">
                       <AudioTrackSelector
-                        source={selectedOptions.mediaSource}
-                        onChange={(val) => {
-                          setSelectedOptions(
-                            (prev) =>
-                              prev && {
-                                ...prev,
-                                audioIndex: val,
-                              },
-                          );
-                        }}
-                        selected={selectedOptions.audioIndex}
+                        source={selectedMediaSource}
+                        onChange={setSelectedAudioStream}
+                        selected={selectedAudioStream}
                       />
                       <SubtitleTrackSelector
-                        source={selectedOptions.mediaSource}
-                        onChange={(val) => {
-                          setSelectedOptions(
-                            (prev) =>
-                              prev && {
-                                ...prev,
-                                subtitleIndex: val,
-                              },
-                          );
-                        }}
-                        selected={selectedOptions.subtitleIndex}
+                        source={selectedMediaSource}
+                        onChange={setSelectedSubtitleStream}
+                        selected={selectedSubtitleStream}
                       />
                     </View>
                   )}
-                </View>
+                </>
               )}
             </View>
-
-            <Button onPress={acceptDownloadOptions} color='purple'>
+            <Button
+              className="mt-auto"
+              onPress={acceptDownloadOptions}
+              color="purple"
+            >
               {t("item_card.download.download_button")}
             </Button>
+            <View className="opacity-70 text-center w-full flex items-center">
+              <Text className="text-xs">
+                {usingOptimizedServer
+                  ? t("item_card.download.using_optimized_server")
+                  : t("item_card.download.using_default_method")}
+              </Text>
+            </View>
           </View>
         </BottomSheetView>
       </BottomSheetModal>
@@ -459,17 +404,17 @@ export const DownloadSingleItem: React.FC<{
     <DownloadItems
       size={size}
       title={
-        item.Type === "Episode"
+        item.Type == "Episode"
           ? t("item_card.download.download_episode")
           : t("item_card.download.download_movie")
       }
       subtitle={item.Name!}
       items={[item]}
       MissingDownloadIconComponent={() => (
-        <Ionicons name='cloud-download-outline' size={24} color='white' />
+        <Ionicons name="cloud-download-outline" size={24} color="white" />
       )}
       DownloadedIconComponent={() => (
-        <Ionicons name='cloud-download' size={26} color='#9333ea' />
+        <Ionicons name="cloud-download" size={26} color="#9333ea" />
       )}
     />
   );

components/GenreTags.tsx

@@ -1,11 +1,14 @@
 // GenreTags.tsx
 import type React from "react";
 import {
+  Platform,
   type StyleProp,
+  StyleSheet,
   type TextStyle,
   View,
   type ViewProps,
 } from "react-native";
+import { GlassEffectView } from "react-native-glass-effect-view";
 import { Text } from "./common/Text";
 
 interface TagProps {
@@ -20,6 +23,23 @@ export const Tag: React.FC<
     textStyle?: StyleProp<TextStyle>;
   } & ViewProps
 > = ({ text, textClass, textStyle, ...props }) => {
+  if (Platform.OS === "ios") {
+    return (
+      <View>
+        <GlassEffectView style={styles.glass}>
+          <View
+            style={{
+              paddingHorizontal: 8,
+              paddingVertical: 4,
+            }}
+          >
+            <Text>{text}</Text>
+          </View>
+        </GlassEffectView>
+      </View>
+    );
+  }
+
   return (
     <View className='bg-neutral-800 rounded-full px-2 py-1' {...props}>
       <Text className={textClass} style={textStyle}>
@@ -29,6 +49,16 @@ export const Tag: React.FC<
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    borderRadius: 50,
+  },
+  glass: {
+    borderRadius: 50,
+  },
+});
+
 export const Tags: React.FC<
   TagProps & { tagProps?: ViewProps } & ViewProps
 > = ({ tags, textClass = "text-xs", tagProps, ...props }) => {

components/GlobalModal.tsx

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

components/IntroSheet.tsx

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

components/ItemContent.tsx

@@ -1,4 +1,25 @@
-import type {
+import { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
+import { DownloadSingleItem } from "@/components/DownloadItem";
+import { OverviewText } from "@/components/OverviewText";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+// const PlayButton = !Platform.isTV ? require("@/components/PlayButton") : null;
+import { PlayButton } from "@/components/PlayButton";
+import { PlayedStatus } from "@/components/PlayedStatus";
+import { SimilarItems } from "@/components/SimilarItems";
+import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
+import { ItemImage } from "@/components/common/ItemImage";
+import { CastAndCrew } from "@/components/series/CastAndCrew";
+import { CurrentSeries } from "@/components/series/CurrentSeries";
+import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
+import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
+import { useImageColors } from "@/hooks/useImageColors";
+import { useOrientation } from "@/hooks/useOrientation";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
+import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
@@ -8,32 +29,11 @@ import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useState } from "react";
 import { Platform, View } from "react-native";
 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 { MediaSourceButton } from "@/components/MediaSourceButton";
-import { OverviewText } from "@/components/OverviewText";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-// const PlayButton = !Platform.isTV ? require("@/components/PlayButton") : null;
-import { PlayButton } from "@/components/PlayButton";
-import { PlayedStatus } from "@/components/PlayedStatus";
-import { SimilarItems } from "@/components/SimilarItems";
-import { CastAndCrew } from "@/components/series/CastAndCrew";
-import { CurrentSeries } from "@/components/series/CurrentSeries";
-import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
-import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
-import { useImageColorsReturn } from "@/hooks/useImageColorsReturn";
-import { useOrientation } from "@/hooks/useOrientation";
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { AddToFavorites } from "./AddToFavorites";
 import { ItemHeader } from "./ItemHeader";
 import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
+import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
-import { PlayInRemoteSessionButton } from "./PlayInRemoteSession";
-
 const Chromecast = !Platform.isTV ? require("./Chromecast") : null;
 
 export type SelectedOptions = {
@@ -43,21 +43,14 @@ export type SelectedOptions = {
   subtitleIndex: number;
 };
 
-interface ItemContentProps {
-  item: BaseItemDto;
-  isOffline: boolean;
-}
-
-export const ItemContent: React.FC<ItemContentProps> = React.memo(
-  ({ item, isOffline }) => {
+export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
+  ({ item }) => {
     const [api] = useAtom(apiAtom);
-    const { settings } = useSettings();
+    const [settings] = useSettings();
     const { orientation } = useOrientation();
     const navigation = useNavigation();
     const insets = useSafeAreaInsets();
-    const [user] = useAtom(userAtom);
-
-    const itemColors = useImageColorsReturn({ item });
+    useImageColors({ item });
 
     const [loadingLogo, setLoadingLogo] = useState(true);
     const [headerHeight, setHeaderHeight] = useState(350);
@@ -71,16 +64,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
       defaultBitrate,
       defaultMediaSource,
       defaultSubtitleIndex,
-    } = useDefaultPlaySettings(item!, settings);
-
-    const logoUrl = useMemo(
-      () => (item ? getLogoImageUrlById({ api, item }) : null),
-      [api, item],
-    );
-
-    const loading = useMemo(() => {
-      return Boolean(logoUrl && loadingLogo);
-    }, [loadingLogo, logoUrl]);
+    } = useDefaultPlaySettings(item, settings);
 
     // Needs to automatically change the selected to the default values for default indexes.
     useEffect(() => {
@@ -97,64 +81,49 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
       defaultMediaSource,
     ]);
 
-    useEffect(() => {
-      if (!Platform.isTV) {
+    if (!Platform.isTV) {
+      useEffect(() => {
         navigation.setOptions({
           headerRight: () =>
-            item &&
-            (Platform.OS === "ios" ? (
-              <View className='flex flex-row items-center pl-2'>
-                <Chromecast.Chromecast width={22} height={22} />
+            item && (
+              <View className="flex flex-row items-center space-x-2">
+                <Chromecast.Chromecast
+                  background="blur"
+                  width={22}
+                  height={22}
+                />
                 {item.Type !== "Program" && (
-                  <View className='flex flex-row items-center'>
+                  <View className="flex flex-row items-center space-x-2">
                     {!Platform.isTV && (
-                      <DownloadSingleItem item={item} size='large' />
+                      <DownloadSingleItem item={item} size="large" />
                     )}
-                    {user?.Policy?.IsAdministrator && (
-                      <PlayInRemoteSessionButton item={item} size='large' />
-                    )}
-
-                    <PlayedStatus items={[item]} size='large' />
+                    <PlayedStatus items={[item]} size="large" />
                     <AddToFavorites item={item} />
                   </View>
                 )}
               </View>
-            ) : (
-              <View className='flex flex-row items-center space-x-2'>
-                <Chromecast.Chromecast width={22} height={22} />
-                {item.Type !== "Program" && (
-                  <View className='flex flex-row items-center space-x-2'>
-                    {!Platform.isTV && (
-                      <DownloadSingleItem item={item} size='large' />
-                    )}
-                    {user?.Policy?.IsAdministrator && (
-                      <PlayInRemoteSessionButton item={item} size='large' />
-                    )}
-
-                    <PlayedStatus items={[item]} size='large' />
-                    <AddToFavorites item={item} />
-                  </View>
-                )}
-              </View>
-            )),
+            ),
         });
-      }
-    }, [item, navigation, user]);
+      }, [item]);
+    }
 
     useEffect(() => {
-      if (item) {
-        if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
-          setHeaderHeight(230);
-        else if (item.Type === "Movie") setHeaderHeight(500);
-        else setHeaderHeight(350);
-      }
-    }, [item, orientation]);
+      if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
+        setHeaderHeight(230);
+      else if (item.Type === "Movie") setHeaderHeight(500);
+      else setHeaderHeight(350);
+    }, [item.Type, orientation]);
 
-    if (!item || !selectedOptions) return null;
+    const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
+
+    const loading = useMemo(() => {
+      return Boolean(logoUrl && loadingLogo);
+    }, [loadingLogo, logoUrl]);
+    if (!selectedOptions) return null;
 
     return (
       <View
-        className='flex-1 relative'
+        className="flex-1 relative"
         style={{
           paddingLeft: insets.left,
           paddingRight: insets.right,
@@ -178,91 +147,123 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
             </View>
           }
           logo={
-            logoUrl ? (
-              <Image
-                source={{
-                  uri: logoUrl,
-                }}
-                style={{
-                  height: 130,
-                  width: "100%",
-                }}
-                contentFit='contain'
-                onLoad={() => setLoadingLogo(false)}
-                onError={() => setLoadingLogo(false)}
-              />
-            ) : (
-              <View />
-            )
+            <>
+              {logoUrl ? (
+                <Image
+                  source={{
+                    uri: logoUrl,
+                  }}
+                  style={{
+                    height: 130,
+                    width: "100%",
+                    resizeMode: "contain",
+                  }}
+                  onLoad={() => setLoadingLogo(false)}
+                  onError={() => setLoadingLogo(false)}
+                />
+              ) : null}
+            </>
           }
         >
-          <View className='flex flex-col bg-transparent shrink'>
-            <View className='flex flex-col px-4 w-full pt-2 mb-2 shrink'>
-              <ItemHeader item={item} className='mb-2' />
-
-              <View className='flex flex-row px-0 mb-2 justify-between space-x-2'>
-                <PlayButton
-                  selectedOptions={selectedOptions}
-                  item={item}
-                  isOffline={isOffline}
-                  colors={itemColors}
-                />
-                <View className='w-1' />
-                {!isOffline && (
-                  <MediaSourceButton
-                    selectedOptions={selectedOptions}
-                    setSelectedOptions={setSelectedOptions}
-                    item={item}
-                    colors={itemColors}
+          <View className="flex flex-col bg-transparent shrink">
+            <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
+              <ItemHeader item={item} className="mb-4" />
+              {item.Type !== "Program" && !Platform.isTV && (
+                <View className="flex flex-row items-center justify-start w-full h-16">
+                  <BitrateSelector
+                    className="mr-1"
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) => prev && { ...prev, bitrate: val }
+                      )
+                    }
+                    selected={selectedOptions.bitrate}
                   />
-                )}
-              </View>
-            </View>
-            {item.Type === "Episode" && (
-              <SeasonEpisodesCarousel
-                item={item}
-                loading={loading}
-                isOffline={isOffline}
-              />
-            )}
-
-            {!isOffline &&
-              selectedOptions.mediaSource?.MediaStreams &&
-              selectedOptions.mediaSource.MediaStreams.length > 0 && (
-                <ItemTechnicalDetails source={selectedOptions.mediaSource} />
+                  <MediaSourceSelector
+                    className="mr-1"
+                    item={item}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            mediaSource: val,
+                          }
+                      )
+                    }
+                    selected={selectedOptions.mediaSource}
+                  />
+                  <AudioTrackSelector
+                    className="mr-1"
+                    source={selectedOptions.mediaSource}
+                    onChange={(val) => {
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            audioIndex: val,
+                          }
+                      );
+                    }}
+                    selected={selectedOptions.audioIndex}
+                  />
+                  <SubtitleTrackSelector
+                    source={selectedOptions.mediaSource}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            subtitleIndex: val,
+                          }
+                      )
+                    }
+                    selected={selectedOptions.subtitleIndex}
+                  />
+                </View>
               )}
 
-            <OverviewText text={item.Overview} className='px-4 mb-4' />
+              <PlayButton
+                className="grow"
+                selectedOptions={selectedOptions}
+                item={item}
+              />
+            </View>
+
+            {item.Type === "Episode" && (
+              <SeasonEpisodesCarousel item={item} loading={loading} />
+            )}
+
+            <ItemTechnicalDetails source={selectedOptions.mediaSource} />
+            <OverviewText text={item.Overview} className="px-4 mb-4" />
 
             {item.Type !== "Program" && (
               <>
-                {item.Type === "Episode" && !isOffline && (
-                  <CurrentSeries item={item} className='mb-4' />
+                {item.Type === "Episode" && (
+                  <CurrentSeries item={item} className="mb-4" />
                 )}
 
-                {!isOffline && (
-                  <CastAndCrew item={item} className='mb-4' loading={loading} />
-                )}
+                <CastAndCrew item={item} className="mb-4" loading={loading} />
 
-                {item.People && item.People.length > 0 && !isOffline && (
-                  <View className='mb-4'>
+                {item.People && item.People.length > 0 && (
+                  <View className="mb-4">
                     {item.People.slice(0, 3).map((person, idx) => (
                       <MoreMoviesWithActor
                         currentItem={item}
                         key={idx}
                         actorId={person.Id!}
-                        className='mb-4'
+                        className="mb-4"
                       />
                     ))}
                   </View>
                 )}
 
-                {!isOffline && <SimilarItems itemId={item.Id} />}
+                <SimilarItems itemId={item.Id} />
               </>
             )}
           </View>
         </ParallaxScrollView>
       </View>
     );
-  },
+  }
 );

components/ItemTechnicalDetails.tsx

@@ -1,38 +1,39 @@
 import { Ionicons } from "@expo/vector-icons";
 import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
-import type {
   MediaSourceInfo,
-  MediaStream,
+  type MediaStream,
 } from "@jellyfin/sdk/lib/generated-client";
-import type React from "react";
-import { useMemo, useRef } from "react";
-import { useTranslation } from "react-i18next";
+import React, { useMemo, useRef } from "react";
 import { TouchableOpacity, View } from "react-native";
-import { formatBitrate } from "@/utils/bitrate";
 import { Badge } from "./Badge";
 import { Text } from "./common/Text";
+import {
+  BottomSheetModal,
+  BottomSheetBackdropProps,
+  BottomSheetBackdrop,
+  BottomSheetView,
+  BottomSheetScrollView,
+} from "@gorhom/bottom-sheet";
+import { Button } from "./Button";
+import { useTranslation } from "react-i18next";
+import { formatBitrate } from "@/utils/bitrate";
 
 interface Props {
   source?: MediaSourceInfo;
 }
 
-export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
+export const ItemTechnicalDetails: React.FC<Props> = ({ source, ...props }) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const { t } = useTranslation();
 
   return (
-    <View className='px-4 mt-2 mb-4'>
-      <Text className='text-lg font-bold mb-4'>{t("item_card.video")}</Text>
+    <View className="px-4 mt-2 mb-4">
+      <Text className="text-lg font-bold mb-4">{t("item_card.video")}</Text>
       <TouchableOpacity onPress={() => bottomSheetModalRef.current?.present()}>
-        <View className='flex flex-row space-x-2'>
+        <View className="flex flex-row space-x-2">
           <VideoStreamInfo source={source} />
         </View>
-        <Text className='text-purple-600'>{t("item_card.more_details")}</Text>
+        <Text className="text-purple-600">{t("item_card.more_details")}</Text>
       </TouchableOpacity>
       <BottomSheetModal
         ref={bottomSheetModalRef}
@@ -52,37 +53,37 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
         )}
       >
         <BottomSheetScrollView>
-          <View className='flex flex-col space-y-2 p-4 mb-4'>
-            <View>
-              <Text className='text-lg font-bold mb-4'>
+          <View className="flex flex-col space-y-2 p-4 mb-4">
+            <View className="">
+              <Text className="text-lg font-bold mb-4">
                 {t("item_card.video")}
               </Text>
-              <View className='flex flex-row space-x-2'>
+              <View className="flex flex-row space-x-2">
                 <VideoStreamInfo source={source} />
               </View>
             </View>
 
-            <View>
-              <Text className='text-lg font-bold mb-2'>
+            <View className="">
+              <Text className="text-lg font-bold mb-2">
                 {t("item_card.audio")}
               </Text>
               <AudioStreamInfo
                 audioStreams={
                   source?.MediaStreams?.filter(
-                    (stream) => stream.Type === "Audio",
+                    (stream) => stream.Type === "Audio"
                   ) || []
                 }
               />
             </View>
 
-            <View>
-              <Text className='text-lg font-bold mb-2'>
+            <View className="">
+              <Text className="text-lg font-bold mb-2">
                 {t("item_card.subtitles")}
               </Text>
               <SubtitleStreamInfo
                 subtitleStreams={
                   source?.MediaStreams?.filter(
-                    (stream) => stream.Type === "Subtitle",
+                    (stream) => stream.Type === "Subtitle"
                   ) || []
                 }
               />
@@ -100,25 +101,25 @@ const SubtitleStreamInfo = ({
   subtitleStreams: MediaStream[];
 }) => {
   return (
-    <View className='flex flex-col'>
-      {subtitleStreams.map((stream, _index) => (
-        <View key={stream.Index} className='flex flex-col'>
-          <Text className='text-xs mb-3 text-neutral-400'>
+    <View className="flex flex-col">
+      {subtitleStreams.map((stream, index) => (
+        <View key={stream.Index} className="flex flex-col">
+          <Text className="text-xs mb-3 text-neutral-400">
             {stream.DisplayTitle}
           </Text>
-          <View className='flex flex-row flex-wrap gap-2'>
+          <View className="flex flex-row flex-wrap gap-2">
             <Badge
-              variant='gray'
+              variant="gray"
               iconLeft={
-                <Ionicons name='language-outline' size={16} color='white' />
+                <Ionicons name="language-outline" size={16} color="white" />
               }
               text={stream.Language}
             />
             <Badge
-              variant='gray'
+              variant="gray"
               text={stream.Codec}
               iconLeft={
-                <Ionicons name='layers-outline' size={16} color='white' />
+                <Ionicons name="layers-outline" size={16} color="white" />
               }
             />
           </View>
@@ -130,40 +131,40 @@ const SubtitleStreamInfo = ({
 
 const AudioStreamInfo = ({ audioStreams }: { audioStreams: MediaStream[] }) => {
   return (
-    <View className='flex flex-col'>
+    <View className="flex flex-col">
       {audioStreams.map((audioStreams, index) => (
-        <View key={index} className='flex flex-col'>
-          <Text className='mb-3 text-neutral-400 text-xs'>
+        <View key={index} className="flex flex-col">
+          <Text className="mb-3 text-neutral-400 text-xs">
             {audioStreams.DisplayTitle}
           </Text>
-          <View className='flex-row flex-wrap gap-2'>
+          <View className="flex-row flex-wrap gap-2">
             <Badge
-              variant='gray'
+              variant="gray"
               iconLeft={
-                <Ionicons name='language-outline' size={16} color='white' />
+                <Ionicons name="language-outline" size={16} color="white" />
               }
               text={audioStreams.Language}
             />
             <Badge
-              variant='gray'
+              variant="gray"
               iconLeft={
                 <Ionicons
-                  name='musical-notes-outline'
+                  name="musical-notes-outline"
                   size={16}
-                  color='white'
+                  color="white"
                 />
               }
               text={audioStreams.Codec}
             />
             <Badge
-              variant='gray'
-              iconLeft={<Ionicons name='mic-outline' size={16} color='white' />}
+              variant="gray"
+              iconLeft={<Ionicons name="mic-outline" size={16} color="white" />}
               text={audioStreams.ChannelLayout}
             />
             <Badge
-              variant='gray'
+              variant="gray"
               iconLeft={
-                <Ionicons name='speedometer-outline' size={16} color='white' />
+                <Ionicons name="speedometer-outline" size={16} color="white" />
               }
               text={formatBitrate(audioStreams.BitRate)}
             />
@@ -175,55 +176,53 @@ const AudioStreamInfo = ({ audioStreams }: { audioStreams: MediaStream[] }) => {
 };
 
 const VideoStreamInfo = ({ source }: { source?: MediaSourceInfo }) => {
-  const videoStream = useMemo(() => {
-    return source?.MediaStreams?.find((stream) => stream.Type === "Video") as
-      | MediaStream
-      | undefined;
-  }, [source?.MediaStreams]);
+  if (!source) return null;
 
-  if (!source || !videoStream) return null;
+  const videoStream = useMemo(() => {
+    return source.MediaStreams?.find(
+      (stream) => stream.Type === "Video"
+    ) as MediaStream;
+  }, [source.MediaStreams]);
+
+  if (!videoStream) return null;
 
   return (
-    <View className='flex-row flex-wrap gap-2'>
+    <View className="flex-row flex-wrap gap-2">
       <Badge
-        variant='gray'
-        iconLeft={<Ionicons name='film-outline' size={16} color='white' />}
+        variant="gray"
+        iconLeft={<Ionicons name="film-outline" size={16} color="white" />}
         text={formatFileSize(source.Size)}
       />
       <Badge
-        variant='gray'
-        iconLeft={<Ionicons name='film-outline' size={16} color='white' />}
+        variant="gray"
+        iconLeft={<Ionicons name="film-outline" size={16} color="white" />}
         text={`${videoStream.Width}x${videoStream.Height}`}
       />
       <Badge
-        variant='gray'
+        variant="gray"
         iconLeft={
-          <Ionicons name='color-palette-outline' size={16} color='white' />
+          <Ionicons name="color-palette-outline" size={16} color="white" />
         }
         text={videoStream.VideoRange}
       />
       <Badge
-        variant='gray'
+        variant="gray"
         iconLeft={
-          <Ionicons name='code-working-outline' size={16} color='white' />
+          <Ionicons name="code-working-outline" size={16} color="white" />
         }
         text={videoStream.Codec}
       />
       <Badge
-        variant='gray'
+        variant="gray"
         iconLeft={
-          <Ionicons name='speedometer-outline' size={16} color='white' />
+          <Ionicons name="speedometer-outline" size={16} color="white" />
         }
         text={formatBitrate(videoStream.BitRate)}
       />
       <Badge
-        variant='gray'
-        iconLeft={<Ionicons name='play-outline' size={16} color='white' />}
-        text={
-          videoStream.AverageFrameRate != null
-            ? `${videoStream.AverageFrameRate.toFixed(0)} fps`
-            : ""
-        }
+        variant="gray"
+        iconLeft={<Ionicons name="play-outline" size={16} color="white" />}
+        text={`${videoStream.AverageFrameRate?.toFixed(0)} fps`}
       />
     </View>
   );
@@ -234,9 +233,6 @@ const formatFileSize = (bytes?: number | null) => {
 
   const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
   if (bytes === 0) return "0 Byte";
-  const i = Number.parseInt(
-    Math.floor(Math.log(bytes) / Math.log(1024)).toString(),
-    10,
-  );
-  return `${Math.round((bytes / 1024 ** i) * 100) / 100} ${sizes[i]}`;
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString());
+  return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + " " + sizes[i];
 };

components/MediaSourceButton.tsx

@@ -7,13 +7,12 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import type { ThemeColors } from "@/hooks/useImageColorsReturn";
-import { useItemQuery } from "@/hooks/useItemQuery";
 import { BITRATES } from "./BitRateSheet";
 import type { SelectedOptions } from "./ItemContent";
 import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
 
 interface Props extends React.ComponentProps<typeof TouchableOpacity> {
-  item: BaseItemDto;
+  item?: BaseItemDto | null;
   selectedOptions: SelectedOptions;
   setSelectedOptions: React.Dispatch<
     React.SetStateAction<SelectedOptions | undefined>
@@ -29,12 +28,6 @@ export const MediaSourceButton: React.FC<Props> = ({
 }: Props) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const { data: itemWithSources, isLoading } = useItemQuery(
-    item.Id,
-    false,
-    undefined,
-    [],
-  );
 
   const effectiveColors = colors || {
     primary: "#7c3aed",
@@ -42,7 +35,7 @@ export const MediaSourceButton: React.FC<Props> = ({
   };
 
   useEffect(() => {
-    const firstMediaSource = itemWithSources?.MediaSources?.[0];
+    const firstMediaSource = item?.MediaSources?.[0];
     if (!firstMediaSource) return;
     setSelectedOptions((prev) => {
       if (!prev) return prev;
@@ -51,7 +44,7 @@ export const MediaSourceButton: React.FC<Props> = ({
         mediaSource: firstMediaSource,
       };
     });
-  }, [itemWithSources, setSelectedOptions]);
+  }, [item, setSelectedOptions]);
 
   const getMediaSourceDisplayName = useCallback((source: MediaSourceInfo) => {
     const videoStream = source.MediaStreams?.find((x) => x.Type === "Video");
@@ -93,13 +86,10 @@ export const MediaSourceButton: React.FC<Props> = ({
     });
 
     // Media Source group (only if multiple sources)
-    if (
-      itemWithSources?.MediaSources &&
-      itemWithSources.MediaSources.length > 1
-    ) {
+    if (item?.MediaSources && item.MediaSources.length > 1) {
       groups.push({
         title: t("item_card.video"),
-        options: itemWithSources.MediaSources.map((source) => ({
+        options: item.MediaSources.map((source) => ({
           type: "radio" as const,
           label: getMediaSourceDisplayName(source),
           value: source,
@@ -159,7 +149,7 @@ export const MediaSourceButton: React.FC<Props> = ({
 
     return groups;
   }, [
-    itemWithSources,
+    item,
     selectedOptions,
     audioStreams,
     subtitleStreams,
@@ -170,7 +160,7 @@ export const MediaSourceButton: React.FC<Props> = ({
 
   const trigger = (
     <TouchableOpacity
-      disabled={!item || isLoading}
+      disabled={!item}
       onPress={() => setOpen(true)}
       className='relative'
     >
@@ -179,7 +169,7 @@ export const MediaSourceButton: React.FC<Props> = ({
         className='absolute w-12 h-12 rounded-full'
       />
       <View className='w-12 h-12 rounded-full z-10 items-center justify-center'>
-        {isLoading ? (
+        {!item ? (
           <ActivityIndicator size='small' color={effectiveColors.text} />
         ) : (
           <Ionicons name='list' size={24} color={effectiveColors.text} />

components/MoreMoviesWithActor.tsx

@@ -3,6 +3,7 @@ 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";
@@ -10,16 +11,18 @@ 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
 }) => {
@@ -27,19 +30,6 @@ 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 () => {
@@ -72,29 +62,34 @@ 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: actor?.Name })}
+        {t("item_card.more_with", { name: actorName ?? "" })}
       </Text>
       <HorizontalScroll
         data={items}
         loading={isLoading}
-        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>
-        )}
+        height={POSTER_CAROUSEL_HEIGHT}
+        renderItem={renderItem}
       />
     </View>
   );

components/PINEntryModal.tsx

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

components/PasswordEntryModal.tsx

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

components/PlatformDropdown.tsx

@@ -25,7 +25,14 @@ export type ToggleOption = {
   disabled?: boolean;
 };
 
-export type Option = RadioOption | ToggleOption;
+export type ActionOption = {
+  type: "action";
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+};
+
+export type Option = RadioOption | ToggleOption | ActionOption;
 
 // Option group structure
 export type OptionGroup = {
@@ -54,9 +61,7 @@ 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>
 );
@@ -66,21 +71,22 @@ const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
   isLast,
 }) => {
   const isToggle = option.type === "toggle";
-  const handlePress = isToggle ? option.onToggle : option.onPress;
+  const isAction = option.type === "action";
+  const handlePress = isToggle
+    ? option.onToggle
+    : (option as RadioOption | ActionOption).onPress;
 
   return (
     <>
       <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 ? (
           <ToggleSwitch value={option.value} />
-        ) : option.selected ? (
+        ) : isAction ? null : (option as RadioOption).selected ? (
           <Ionicons name='checkmark-circle' size={24} color='#9333ea' />
         ) : (
           <Ionicons name='ellipse-outline' size={24} color='#6b7280' />
@@ -154,6 +160,15 @@ const BottomSheetContent: React.FC<{
           },
         };
       }
+      if (option.type === "action") {
+        return {
+          ...option,
+          onPress: () => {
+            option.onPress();
+            onClose?.();
+          },
+        };
+      }
       return option;
     }),
   }));
@@ -219,11 +234,7 @@ const PlatformDropdownComponent = ({
     return (
       <Host style={expoUIConfig?.hostStyle}>
         <ContextMenu>
-          <ContextMenu.Trigger>
-            <View className=''>
-              {trigger || <Button variant='bordered'>Show Menu</Button>}
-            </View>
-          </ContextMenu.Trigger>
+          <ContextMenu.Trigger>{trigger}</ContextMenu.Trigger>
           <ContextMenu.Items>
             {groups.flatMap((group, groupIndex) => {
               // Check if this group has radio options
@@ -233,6 +244,9 @@ const PlatformDropdownComponent = ({
               const toggleOptions = group.options.filter(
                 (opt) => opt.type === "toggle",
               ) as ToggleOption[];
+              const actionOptions = group.options.filter(
+                (opt) => opt.type === "action",
+              ) as ActionOption[];
 
               const items = [];
 
@@ -299,6 +313,21 @@ const PlatformDropdownComponent = ({
                 );
               });
 
+              // Add Buttons for action options (no icon)
+              actionOptions.forEach((option, optionIndex) => {
+                items.push(
+                  <Button
+                    key={`action-${groupIndex}-${optionIndex}`}
+                    onPress={() => {
+                      option.onPress();
+                    }}
+                    disabled={option.disabled}
+                  >
+                    {option.label}
+                  </Button>,
+                );
+              });
+
               return items;
             })}
           </ContextMenu.Items>

components/PlayButton.tsx

@@ -1,12 +1,19 @@
+import { Platform, Pressable } from "react-native";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
+import { useSettings } from "@/utils/atoms/settings";
+import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import ios from "@/utils/profiles/ios";
+import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import { BottomSheetView } from "@gorhom/bottom-sheet";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { Alert, Platform, TouchableOpacity, View } from "react-native";
+import { Alert, TouchableOpacity, View } from "react-native";
 import CastContext, {
   CastButton,
   PlayServicesState,
@@ -23,28 +30,17 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import { useHaptic } from "@/hooks/useHaptic";
-import type { ThemeColors } from "@/hooks/useImageColorsReturn";
-import { getDownloadedItemById } from "@/providers/Downloads/database";
-import { useGlobalModal } from "@/providers/GlobalModalProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
-import { useSettings } from "@/utils/atoms/settings";
-import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { Button } from "./Button";
+import { SelectedOptions } from "./ItemContent";
 import { chromecast } from "@/utils/profiles/chromecast";
 import { chromecasth265 } from "@/utils/profiles/chromecasth265";
-import { runtimeTicksToMinutes } from "@/utils/time";
-import { Button } from "./Button";
-import { Text } from "./common/Text";
-import type { SelectedOptions } from "./ItemContent";
+import { useTranslation } from "react-i18next";
+import { useHaptic } from "@/hooks/useHaptic";
+import { chromecastLoadMedia } from "@/utils/chromecastLoadMedia";
 
-interface Props extends React.ComponentProps<typeof TouchableOpacity> {
+interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
   selectedOptions: SelectedOptions;
-  isOffline?: boolean;
-  colors?: ThemeColors;
 }
 
 const ANIMATION_DURATION = 500;
@@ -53,60 +49,53 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({
   item,
   selectedOptions,
-  isOffline,
-  colors,
+  ...props
 }: Props) => {
   const { showActionSheetWithOptions } = useActionSheet();
   const client = useRemoteMediaClient();
   const mediaStatus = useMediaStatus();
   const { t } = useTranslation();
-  const { showModal, hideModal } = useGlobalModal();
 
-  const [globalColorAtom] = useAtom(itemThemeColorAtom);
+  const [colorAtom] = useAtom(itemThemeColorAtom);
   const api = useAtomValue(apiAtom);
   const user = useAtomValue(userAtom);
 
-  // Use colors prop if provided, otherwise fallback to global atom
-  const effectiveColors = colors || globalColorAtom;
-
   const router = useRouter();
 
   const startWidth = useSharedValue(0);
   const targetWidth = useSharedValue(0);
-  const endColor = useSharedValue(effectiveColors);
-  const startColor = useSharedValue(effectiveColors);
+  const endColor = useSharedValue(colorAtom);
+  const startColor = useSharedValue(colorAtom);
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
-  const { settings, updateSettings } = useSettings();
+  const [settings] = useSettings();
   const lightHapticFeedback = useHaptic("light");
 
   const goToPlayer = useCallback(
-    (q: string) => {
-      if (settings.maxAutoPlayEpisodeCount.value !== -1) {
-        updateSettings({ autoPlayEpisodeCount: 0 });
-      }
+    (q: string, bitrateValue: number | undefined) => {
       router.push(`/player/direct-player?${q}`);
     },
-    [router, isOffline],
+    [router]
   );
 
-  const handleNormalPlayFlow = useCallback(async () => {
+  const onPress = useCallback(async () => {
+    console.log("onPress");
     if (!item) return;
 
+    lightHapticFeedback();
+
     const queryParams = new URLSearchParams({
       itemId: item.Id!,
       audioIndex: selectedOptions.audioIndex?.toString() ?? "",
       subtitleIndex: selectedOptions.subtitleIndex?.toString() ?? "",
       mediaSourceId: selectedOptions.mediaSource?.Id ?? "",
       bitrateValue: selectedOptions.bitrate?.value?.toString() ?? "",
-      playbackPosition: item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-      offline: isOffline ? "true" : "false",
     });
 
     const queryString = queryParams.toString();
 
     if (!client) {
-      goToPlayer(queryString);
+      goToPlayer(queryString, selectedOptions.bitrate?.value);
       return;
     }
 
@@ -132,42 +121,14 @@ export const PlayButton: React.FC<Props> = ({
                 // Check if user wants H265 for Chromecast
                 const enableH265 = settings.enableH265ForChromecast;
 
-                // Validate required parameters before calling getStreamUrl
-                if (!api) {
-                  console.warn("API not available for Chromecast streaming");
-                  Alert.alert(
-                    t("player.client_error"),
-                    t("player.missing_parameters"),
-                  );
-                  return;
-                }
-                if (!user?.Id) {
-                  console.warn(
-                    "User not authenticated for Chromecast streaming",
-                  );
-                  Alert.alert(
-                    t("player.client_error"),
-                    t("player.missing_parameters"),
-                  );
-                  return;
-                }
-                if (!item?.Id) {
-                  console.warn("Item not available for Chromecast streaming");
-                  Alert.alert(
-                    t("player.client_error"),
-                    t("player.missing_parameters"),
-                  );
-                  return;
-                }
-
                 // Get a new URL with the Chromecast device profile
                 try {
                   const data = await getStreamUrl({
                     api,
                     item,
                     deviceProfile: enableH265 ? chromecasth265 : chromecast,
-                    startTimeTicks: item?.UserData?.PlaybackPositionTicks ?? 0,
-                    userId: user.Id,
+                    startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+                    userId: user?.Id,
                     audioStreamIndex: selectedOptions.audioIndex,
                     maxStreamingBitrate: selectedOptions.bitrate?.value,
                     mediaSourceId: selectedOptions.mediaSource?.Id,
@@ -180,76 +141,35 @@ export const PlayButton: React.FC<Props> = ({
                     console.warn("No URL returned from getStreamUrl", data);
                     Alert.alert(
                       t("player.client_error"),
-                      t("player.could_not_create_stream_for_chromecast"),
+                      t("player.could_not_create_stream_for_chromecast")
                     );
                     return;
                   }
 
-                  client
-                    .loadMedia({
-                      mediaInfo: {
-                        contentUrl: data?.url,
-                        contentType: "video/mp4",
-                        metadata:
-                          item.Type === "Episode"
-                            ? {
-                                type: "tvShow",
-                                title: item.Name || "",
-                                episodeNumber: item.IndexNumber || 0,
-                                seasonNumber: item.ParentIndexNumber || 0,
-                                seriesTitle: item.SeriesName || "",
-                                images: [
-                                  {
-                                    url: getParentBackdropImageUrl({
-                                      api,
-                                      item,
-                                      quality: 90,
-                                      width: 2000,
-                                    })!,
-                                  },
-                                ],
-                              }
-                            : item.Type === "Movie"
-                              ? {
-                                  type: "movie",
-                                  title: item.Name || "",
-                                  subtitle: item.Overview || "",
-                                  images: [
-                                    {
-                                      url: getPrimaryImageUrl({
-                                        api,
-                                        item,
-                                        quality: 90,
-                                        width: 2000,
-                                      })!,
-                                    },
-                                  ],
-                                }
-                              : {
-                                  type: "generic",
-                                  title: item.Name || "",
-                                  subtitle: item.Overview || "",
-                                  images: [
-                                    {
-                                      url: getPrimaryImageUrl({
-                                        api,
-                                        item,
-                                        quality: 90,
-                                        width: 2000,
-                                      })!,
-                                    },
-                                  ],
-                                },
+                  chromecastLoadMedia({
+                    client,
+                    item,
+                    contentUrl: data.url,
+                    sessionId: data.sessionId || undefined,
+                    mediaSourceId: data.mediaSource?.Id || undefined,
+                    playbackOptions: selectedOptions,
+                    images: [
+                      {
+                        url: getParentBackdropImageUrl({
+                          api,
+                          item,
+                          quality: 90,
+                          width: 2000,
+                        })!,
                       },
-                      startTime: 0,
-                    })
-                    .then(() => {
-                      // state is already set when reopening current media, so skip it here.
-                      if (isOpeningCurrentlyPlayingMedia) {
-                        return;
-                      }
-                      CastContext.showExpandedControls();
-                    });
+                    ],
+                  }).then(() => {
+                    // state is already set when reopening current media, so skip it here.
+                    if (isOpeningCurrentlyPlayingMedia) {
+                      return;
+                    }
+                    router.push("/player/google-cast-player");
+                  });
                 } catch (e) {
                   console.log(e);
                 }
@@ -257,12 +177,12 @@ export const PlayButton: React.FC<Props> = ({
             });
             break;
           case 1:
-            goToPlayer(queryString);
+            goToPlayer(queryString, selectedOptions.bitrate?.value);
             break;
           case cancelButtonIndex:
             break;
         }
-      },
+      }
     );
   }, [
     item,
@@ -274,128 +194,16 @@ export const PlayButton: React.FC<Props> = ({
     showActionSheetWithOptions,
     mediaStatus,
     selectedOptions,
-    goToPlayer,
-    isOffline,
-    t,
-  ]);
-
-  const onPress = useCallback(async () => {
-    console.log("onPress");
-    if (!item) return;
-
-    lightHapticFeedback();
-
-    // Check if item is downloaded
-    const downloadedItem = item.Id ? getDownloadedItemById(item.Id) : undefined;
-
-    if (downloadedItem) {
-      if (Platform.OS === "android") {
-        // Show bottom sheet for Android
-        showModal(
-          <BottomSheetView>
-            <View className='px-4 mt-4 mb-12'>
-              <View className='pb-6'>
-                <Text className='text-2xl font-bold mb-2'>
-                  {t("player.downloaded_file_title")}
-                </Text>
-                <Text className='opacity-70 text-base'>
-                  {t("player.downloaded_file_message")}
-                </Text>
-              </View>
-              <View className='space-y-3'>
-                <Button
-                  onPress={() => {
-                    hideModal();
-                    const queryParams = new URLSearchParams({
-                      itemId: item.Id!,
-                      offline: "true",
-                      playbackPosition:
-                        item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-                    });
-                    goToPlayer(queryParams.toString());
-                  }}
-                  color='purple'
-                >
-                  {Platform.OS === "android"
-                    ? "Play downloaded file"
-                    : t("player.downloaded_file_yes")}
-                </Button>
-                <Button
-                  onPress={() => {
-                    hideModal();
-                    handleNormalPlayFlow();
-                  }}
-                  color='white'
-                  variant='border'
-                >
-                  {Platform.OS === "android"
-                    ? "Stream file"
-                    : t("player.downloaded_file_no")}
-                </Button>
-              </View>
-            </View>
-          </BottomSheetView>,
-          {
-            snapPoints: ["35%"],
-            enablePanDownToClose: true,
-          },
-        );
-      } else {
-        // Show alert for iOS
-        Alert.alert(
-          t("player.downloaded_file_title"),
-          t("player.downloaded_file_message"),
-          [
-            {
-              text: t("player.downloaded_file_yes"),
-              onPress: () => {
-                const queryParams = new URLSearchParams({
-                  itemId: item.Id!,
-                  offline: "true",
-                  playbackPosition:
-                    item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-                });
-                goToPlayer(queryParams.toString());
-              },
-              isPreferred: true,
-            },
-            {
-              text: t("player.downloaded_file_no"),
-              onPress: () => {
-                handleNormalPlayFlow();
-              },
-            },
-            {
-              text: t("player.downloaded_file_cancel"),
-              style: "cancel",
-            },
-          ],
-        );
-      }
-      return;
-    }
-
-    // If not downloaded, proceed with normal flow
-    handleNormalPlayFlow();
-  }, [
-    item,
-    lightHapticFeedback,
-    handleNormalPlayFlow,
-    goToPlayer,
-    t,
-    showModal,
-    hideModal,
-    effectiveColors,
   ]);
 
   const derivedTargetWidth = useDerivedValue(() => {
     if (!item || !item.RunTimeTicks) return 0;
     const userData = item.UserData;
-    if (userData?.PlaybackPositionTicks) {
+    if (userData && userData.PlaybackPositionTicks) {
       return userData.PlaybackPositionTicks > 0
         ? Math.max(
             (userData.PlaybackPositionTicks / item.RunTimeTicks) * 100,
-            MIN_PLAYBACK_WIDTH,
+            MIN_PLAYBACK_WIDTH
           )
         : 0;
     }
@@ -412,11 +220,11 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.7, 0, 0.3, 1.0),
       });
     },
-    [item],
+    [item]
   );
 
   useAnimatedReaction(
-    () => effectiveColors,
+    () => colorAtom,
     (newColor) => {
       endColor.value = newColor;
       colorChangeProgress.value = 0;
@@ -425,19 +233,19 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.9, 0, 0.31, 0.99),
       });
     },
-    [effectiveColors],
+    [colorAtom]
   );
 
   useEffect(() => {
     const timeout_2 = setTimeout(() => {
-      startColor.value = effectiveColors;
+      startColor.value = colorAtom;
       startWidth.value = targetWidth.value;
     }, ANIMATION_DURATION);
 
     return () => {
       clearTimeout(timeout_2);
     };
-  }, [effectiveColors, item]);
+  }, [colorAtom, item]);
 
   /**
    * ANIMATED STYLES
@@ -446,7 +254,7 @@ export const PlayButton: React.FC<Props> = ({
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.primary, endColor.value.primary],
+      [startColor.value.primary, endColor.value.primary]
     ),
   }));
 
@@ -454,7 +262,7 @@ export const PlayButton: React.FC<Props> = ({
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.primary, endColor.value.primary],
+      [startColor.value.primary, endColor.value.primary]
     ),
   }));
 
@@ -462,7 +270,7 @@ export const PlayButton: React.FC<Props> = ({
     width: `${interpolate(
       widthProgress.value,
       [0, 1],
-      [startWidth.value, targetWidth.value],
+      [startWidth.value, targetWidth.value]
     )}%`,
   }));
 
@@ -470,65 +278,23 @@ export const PlayButton: React.FC<Props> = ({
     color: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.text, endColor.value.text],
+      [startColor.value.text, endColor.value.text]
     ),
   }));
-
-  // if (Platform.OS === "ios")
-  //   return (
-  //     <Host
-  //       style={{
-  //         height: 50,
-  //         flex: 1,
-  //         flexShrink: 0,
-  //       }}
-  //     >
-  //       <Button
-  //         variant='glassProminent'
-  //         onPress={onPress}
-  //         color={effectiveColors.primary}
-  //         modifiers={[fixedSize()]}
-  //       >
-  //         <View className='flex flex-row items-center space-x-2 h-full w-full justify-center -mb-3.5 '>
-  //           <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
-  //             {runtimeTicksToMinutes(
-  //               (item?.RunTimeTicks || 0) -
-  //                 (item?.UserData?.PlaybackPositionTicks || 0),
-  //             )}
-  //             {(item?.UserData?.PlaybackPositionTicks || 0) > 0 && " left"}
-  //           </Animated.Text>
-  //           <Animated.Text style={animatedTextStyle}>
-  //             <Ionicons name='play-circle' size={24} />
-  //           </Animated.Text>
-  //           {client && (
-  //             <Animated.Text style={animatedTextStyle}>
-  //               <Feather name='cast' size={22} />
-  //               <CastButton tintColor='transparent' />
-  //             </Animated.Text>
-  //           )}
-  //           {!client && settings?.openInVLC && (
-  //             <Animated.Text style={animatedTextStyle}>
-  //               <MaterialCommunityIcons
-  //                 name='vlc'
-  //                 size={18}
-  //                 color={animatedTextStyle.color}
-  //               />
-  //             </Animated.Text>
-  //           )}
-  //         </View>
-  //       </Button>
-  //     </Host>
-  //   );
+  /**
+   * *********************
+   */
 
   return (
     <TouchableOpacity
       disabled={!item}
-      accessibilityLabel='Play button'
-      accessibilityHint='Tap to play the media'
+      accessibilityLabel="Play button"
+      accessibilityHint="Tap to play the media"
       onPress={onPress}
-      className={"relative flex-1"}
+      className={`relative`}
+      {...props}
     >
-      <View className='absolute w-full h-full top-0 left-0 rounded-full z-10 overflow-hidden'>
+      <View className="absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden">
         <Animated.View
           style={[
             animatedPrimaryStyle,
@@ -542,37 +308,33 @@ export const PlayButton: React.FC<Props> = ({
 
       <Animated.View
         style={[animatedAverageStyle, { opacity: 0.5 }]}
-        className='absolute w-full h-full top-0 left-0 rounded-full'
+        className="absolute w-full h-full top-0 left-0 rounded-xl"
       />
       <View
         style={{
           borderWidth: 1,
-          borderColor: effectiveColors.primary,
+          borderColor: colorAtom.primary,
           borderStyle: "solid",
         }}
-        className='flex flex-row items-center justify-center bg-transparent rounded-full z-20 h-12 w-full '
+        className="flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full "
       >
-        <View className='flex flex-row items-center space-x-2'>
+        <View className="flex flex-row items-center space-x-2">
           <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
-            {runtimeTicksToMinutes(
-              (item?.RunTimeTicks || 0) -
-                (item?.UserData?.PlaybackPositionTicks || 0),
-            )}
-            {(item?.UserData?.PlaybackPositionTicks || 0) > 0 && " left"}
+            {runtimeTicksToMinutes(item?.RunTimeTicks)}
           </Animated.Text>
           <Animated.Text style={animatedTextStyle}>
-            <Ionicons name='play-circle' size={24} />
+            <Ionicons name="play-circle" size={24} />
           </Animated.Text>
           {client && (
             <Animated.Text style={animatedTextStyle}>
-              <Feather name='cast' size={22} />
-              <CastButton tintColor='transparent' />
+              <Feather name="cast" size={22} />
+              <CastButton tintColor="transparent" />
             </Animated.Text>
           )}
           {!client && settings?.openInVLC && (
             <Animated.Text style={animatedTextStyle}>
               <MaterialCommunityIcons
-                name='vlc'
+                name="vlc"
                 size={18}
                 color={animatedTextStyle.color}
               />

components/PlayButton.tv.tsx

@@ -1,9 +1,15 @@
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { Platform } from "react-native";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
+import { useSettings } from "@/utils/atoms/settings";
+import { runtimeTicksToMinutes } from "@/utils/time";
+import { useActionSheet } from "@expo/react-native-action-sheet";
+import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useRouter } from "expo-router";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { Alert, TouchableOpacity, View } from "react-native";
 import Animated, {
   Easing,
   interpolate,
@@ -14,18 +20,14 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import { Button } from "./Button";
+import { SelectedOptions } from "./ItemContent";
+import { useTranslation } from "react-i18next";
 import { useHaptic } from "@/hooks/useHaptic";
-import type { ThemeColors } from "@/hooks/useImageColorsReturn";
-import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
-import { useSettings } from "@/utils/atoms/settings";
-import { runtimeTicksToMinutes } from "@/utils/time";
-import type { Button } from "./Button";
-import type { SelectedOptions } from "./ItemContent";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
   selectedOptions: SelectedOptions;
-  colors?: ThemeColors;
 }
 
 const ANIMATION_DURATION = 500;
@@ -34,30 +36,31 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({
   item,
   selectedOptions,
-  colors,
   ...props
 }: Props) => {
-  const [globalColorAtom] = useAtom(itemThemeColorAtom);
+  const { showActionSheetWithOptions } = useActionSheet();
+  const { t } = useTranslation();
 
-  // Use colors prop if provided, otherwise fallback to global atom
-  const effectiveColors = colors || globalColorAtom;
+  const [colorAtom] = useAtom(itemThemeColorAtom);
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
 
   const router = useRouter();
 
   const startWidth = useSharedValue(0);
   const targetWidth = useSharedValue(0);
-  const endColor = useSharedValue(effectiveColors);
-  const startColor = useSharedValue(effectiveColors);
+  const endColor = useSharedValue(colorAtom);
+  const startColor = useSharedValue(colorAtom);
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
-  const { settings } = useSettings();
+  const [settings] = useSettings();
   const lightHapticFeedback = useHaptic("light");
 
   const goToPlayer = useCallback(
-    (q: string) => {
+    (q: string, bitrateValue: number | undefined) => {
       router.push(`/player/direct-player?${q}`);
     },
-    [router],
+    [router]
   );
 
   const onPress = () => {
@@ -75,18 +78,18 @@ export const PlayButton: React.FC<Props> = ({
     });
 
     const queryString = queryParams.toString();
-    goToPlayer(queryString);
+    goToPlayer(queryString, selectedOptions.bitrate?.value);
     return;
   };
 
   const derivedTargetWidth = useDerivedValue(() => {
     if (!item || !item.RunTimeTicks) return 0;
     const userData = item.UserData;
-    if (userData?.PlaybackPositionTicks) {
+    if (userData && userData.PlaybackPositionTicks) {
       return userData.PlaybackPositionTicks > 0
         ? Math.max(
             (userData.PlaybackPositionTicks / item.RunTimeTicks) * 100,
-            MIN_PLAYBACK_WIDTH,
+            MIN_PLAYBACK_WIDTH
           )
         : 0;
     }
@@ -103,11 +106,11 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.7, 0, 0.3, 1.0),
       });
     },
-    [item],
+    [item]
   );
 
   useAnimatedReaction(
-    () => effectiveColors,
+    () => colorAtom,
     (newColor) => {
       endColor.value = newColor;
       colorChangeProgress.value = 0;
@@ -116,19 +119,19 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.9, 0, 0.31, 0.99),
       });
     },
-    [effectiveColors],
+    [colorAtom]
   );
 
   useEffect(() => {
     const timeout_2 = setTimeout(() => {
-      startColor.value = effectiveColors;
+      startColor.value = colorAtom;
       startWidth.value = targetWidth.value;
     }, ANIMATION_DURATION);
 
     return () => {
       clearTimeout(timeout_2);
     };
-  }, [effectiveColors, item]);
+  }, [colorAtom, item]);
 
   /**
    * ANIMATED STYLES
@@ -137,7 +140,7 @@ export const PlayButton: React.FC<Props> = ({
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.primary, endColor.value.primary],
+      [startColor.value.primary, endColor.value.primary]
     ),
   }));
 
@@ -145,7 +148,7 @@ export const PlayButton: React.FC<Props> = ({
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.primary, endColor.value.primary],
+      [startColor.value.primary, endColor.value.primary]
     ),
   }));
 
@@ -153,7 +156,7 @@ export const PlayButton: React.FC<Props> = ({
     width: `${interpolate(
       widthProgress.value,
       [0, 1],
-      [startWidth.value, targetWidth.value],
+      [startWidth.value, targetWidth.value]
     )}%`,
   }));
 
@@ -161,7 +164,7 @@ export const PlayButton: React.FC<Props> = ({
     color: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.text, endColor.value.text],
+      [startColor.value.text, endColor.value.text]
     ),
   }));
   /**
@@ -170,13 +173,13 @@ export const PlayButton: React.FC<Props> = ({
 
   return (
     <TouchableOpacity
-      accessibilityLabel='Play button'
-      accessibilityHint='Tap to play the media'
+      accessibilityLabel="Play button"
+      accessibilityHint="Tap to play the media"
       onPress={onPress}
-      className={"relative"}
+      className={`relative`}
       {...props}
     >
-      <View className='absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden'>
+      <View className="absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden">
         <Animated.View
           style={[
             animatedPrimaryStyle,
@@ -190,27 +193,27 @@ export const PlayButton: React.FC<Props> = ({
 
       <Animated.View
         style={[animatedAverageStyle, { opacity: 0.5 }]}
-        className='absolute w-full h-full top-0 left-0 rounded-xl'
+        className="absolute w-full h-full top-0 left-0 rounded-xl"
       />
       <View
         style={{
           borderWidth: 1,
-          borderColor: effectiveColors.primary,
+          borderColor: colorAtom.primary,
           borderStyle: "solid",
         }}
-        className='flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full '
+        className="flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full "
       >
-        <View className='flex flex-row items-center space-x-2'>
+        <View className="flex flex-row items-center space-x-2">
           <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
             {runtimeTicksToMinutes(item?.RunTimeTicks)}
           </Animated.Text>
           <Animated.Text style={animatedTextStyle}>
-            <Ionicons name='play-circle' size={24} />
+            <Ionicons name="play-circle" size={24} />
           </Animated.Text>
           {settings?.openInVLC && (
             <Animated.Text style={animatedTextStyle}>
               <MaterialCommunityIcons
-                name='vlc'
+                name="vlc"
                 size={18}
                 color={animatedTextStyle.color}
               />

components/PlaybackSpeedSelector.tsx

@@ -0,0 +1,180 @@
+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,12 +1,12 @@
 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";
 
 interface Props extends ViewProps {
   items: BaseItemDto[];
-  isOffline?: boolean;
   size?: "default" | "large";
 }
 
@@ -14,14 +14,16 @@ 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={async () => {
-          await toggle(!allPlayed);
-        }}
+        onPress={handlePress}
         size={props.size}
       />
     </View>

components/PreviousServersList.tsx

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

components/RoundButton.tsx

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

components/SaveAccountModal.tsx

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

components/SimilarItems.tsx

@@ -6,6 +6,7 @@ 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";
@@ -53,7 +54,7 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({
       <HorizontalScroll
         data={movies}
         loading={isLoading}
-        height={247}
+        height={POSTER_CAROUSEL_HEIGHT}
         noItemsText={t("item_card.no_similar_items_found")}
         renderItem={(item: BaseItemDto, idx: number) => (
           <TouchableItemRouter