fix: handle optional chaining for 'other' media items in DownloadProvider

This reverts commit e9effd5436.

.claude/settings.local.json

@@ -0,0 +1,14 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash(bun install:*)",
+      "Bash(bunx expo prebuild:*)",
+      "Bash(bunx expo run:*)",
+      "Bash(npx expo prebuild:*)",
+      "Bash(npx expo run:*)",
+      "Bash(xcodebuild:*)"
+    ],
+    "deny": []
+  }
+}

.cursor/rules/no-custom-ios-folder-logic.mdc

@@ -0,0 +1,7 @@
+---
+description: Don't write code directly in the ios folder. 
+globs:
+alwaysApply: true
+---
+
+We never write code directly in the ios folder. This code is generated by expo plugins.

.github/CONTRIBUTING.md

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

.github/copilot-instructions.md

@@ -3,94 +3,58 @@
 ## Project Overview
 
 Streamyfin is a cross-platform Jellyfin video streaming client built with Expo (React Native).  
-It supports mobile (iOS/Android) and TV platforms, integrates with Jellyfin and Jellyseerr APIs,
-and provides seamless media streaming with offline capabilities and Chromecast support.
+It supports mobile (iOS/Android) and TV platforms, and integrates with Jellyfin and Jellyseerr APIs.
 
 ## Main Technologies
 
-- **Runtime**: Bun (JavaScript/TypeScript execution)
-- **Framework**: React Native (Expo)
-- **Language**: TypeScript (strict mode)
-- **State Management**: Jotai (global state) + React Query (server state)
-- **API SDK**: Jellyfin SDK (TypeScript)
-- **Navigation**: Expo Router (file-based routing)
-- **Code Quality**: BiomeJS (formatting/linting)
-- **Build Platform**: EAS (Expo Application Services)
-- **CI/CD**: GitHub Actions with Bun
-
-## Package Management
-
-**CRITICAL: ALWAYS use `bun` for all package management operations**
-
-- **NEVER use `npm`, `yarn` or `npx` commands**
-- Use `bun install` instead of `npm install` or `yarn install`
-- Use `bun add <package>` instead of `npm install <package>`
-- Use `bun remove <package>` instead of `npm uninstall <package>`
-- Use `bun run <script>` instead of `npm run <script>`
-- Use `bunx <command>` instead of `npx <command>`
-- For Expo: use `bunx create-expo-app` or `bunx @expo/cli`
+- React Native (Expo)
+- TypeScript
+- React Query
+- Jotai (state management)
+- Jellyfin SDK (TypeScript)
+- BiomeJS (code formatting/linting)
+- EAS (Expo Application Services)
+- Shell scripting (for automation)
+- GitHub Actions (CI/CD)
 
 ## Code Structure
 
 - `app/` – Main application code (screens, navigation, etc.)
 - `components/` – Reusable UI components
 - `providers/` – Context and API providers (e.g., JellyfinProvider.tsx)
-- `utils/` – Utility functions and Jotai atoms
+- `utils/` – Utility functions and atoms
 - `assets/` – Images and static assets
 - `scripts/` – Automation scripts (Node.js, Bash)
 - `plugins/` – Expo/Metro plugins
+- `README.md` – Project documentation
 
-## Coding Standards
+## Coding Conventions
 
-- Use TypeScript for ALL files (no .js files)
-- Use descriptive English names for variables, functions, and components
-- Prefer functional React components with hooks
-- Use Jotai atoms for global state management
-- Use React Query for server state and caching
-- Follow BiomeJS formatting and linting rules
-- Use `const` over `let`, avoid `var` entirely
-- Implement proper error boundaries
-- Use React.memo() for performance optimization
-- Handle both mobile and TV navigation patterns
+- Use TypeScript for all new code.
+- Prefer functional React components.
+- Use hooks for state and side effects.
+- Use Jotai for global state.
+- Use React Query for data fetching/caching.
+- Use BiomeJS for formatting and linting.
+- Follow the established folder structure for screens/components.
 
-## API Integration
+## API Usage
 
-- Use Jellyfin SDK for all server interactions
-- Access authenticated APIs via `apiAtom` and `userAtom` from JellyfinProvider
-- Implement proper loading states and error handling
-- Use React Query for caching and background updates
-- Handle offline scenarios gracefully
-
-## Performance Optimization
-
-- Leverage Bun's superior runtime performance
-- Optimize FlatList components with proper props
-- Use lazy loading for non-critical components
-- Implement proper image caching strategies
-- Monitor bundle size and use tree-shaking effectively
-
-## Testing
-
-- Use Bun's built-in test runner when possible
-- Test files: `*.test.ts` or `*.test.tsx`
-- Run tests with: `bun test`
-- Mock external APIs in tests
-- Focus on testing business logic and custom hooks
+- Use the Jellyfin SDK for all server interactions.
+- Use the `apiAtom` and `userAtom` from `JellyfinProvider` for authenticated API calls.
+- For navigation, use `expo-router`.
 
 ## Commit Messages
 
-Use Conventional Commits (https://www.conventionalcommits.org/):
-Exemples:
-- `feat(player): add Chromecast support`
-- `fix(auth): handle expired JWT tokens`
-- `chore(deps): update Jellyfin SDK`
+- Use [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) (e.g., `feat:`, `fix:`, `chore:`).
+- Example: `feat(player): add Chromecast support`
 
 ## Special Instructions
 
-- Prioritize cross-platform compatibility (mobile + TV)
-- Ensure accessibility for TV remote navigation
-- Use existing atoms, hooks, and utilities before creating new ones
-- Maintain compatibility with Expo and EAS workflows
-- Always verify Bun compatibility when suggesting new dependencies
+- When suggesting code, prefer using existing atoms, hooks, and utility functions.
+- When adding new features, ensure they are accessible via both mobile and TV navigation if relevant.
+- When updating dependencies or scripts, check for compatibility with Expo and EAS.
+
+---
 
 **Copilot: Please use these instructions to provide context-aware suggestions and code completions for this repository.**

.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/artifact-comment.yml

@@ -26,7 +26,7 @@ jobs:
 
     steps:
       - name: 🔍 Get PR and Artifacts
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+        uses: actions/github-script@v8
         with:
           script: |
             // Check if we're running from a fork (more precise detection)

.github/workflows/build-apps.yml

@@ -76,7 +76,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: streamyfin-android-phone-apk-${{ env.DATE_TAG }}
           path: |
@@ -147,7 +147,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: streamyfin-android-tv-apk-${{ env.DATE_TAG }}
           path: |
@@ -210,7 +210,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload IPA artifact
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: streamyfin-ios-phone-ipa-${{ env.DATE_TAG }}
           path: build-*.ipa

.github/workflows/ci-codeql.yml

@@ -31,13 +31,13 @@ jobs:
           fetch-depth: 0
 
       - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended,security-and-quality
 
       - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/autobuild@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5

.github/workflows/crowdin.yml

@@ -1,50 +1,34 @@
-name: 🌐 Translation Sync
+name: Crowdin Action
 
 on:
   push:
-    branches: [develop]
-    paths:
-      - "translations/**"
-      - "crowdin.yml"
-      - "i18n.ts"
-      - ".github/workflows/crowdin.yml"
-  # Run weekly to pull new translations
-  schedule:
-    - cron: "0 2 * * 1" # Every Monday at 2 AM UTC
-  workflow_dispatch:
-
-permissions:
-  contents: write
-  pull-requests: write
+    branches: [ main ]
 
 jobs:
-  sync-translations:
+  synchronize-with-crowdin:
     runs-on: ubuntu-latest
 
     steps:
-      - name: 📥 Checkout Repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
-        with:
-          fetch-depth: 0
+      - name: Checkout
+        uses: actions/checkout@v4
 
-      - name: 🌐 Sync Translations with Crowdin
-        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
+      - name: crowdin action
+        uses: crowdin/github-action@v2
         with:
           upload_sources: true
           upload_translations: true
           download_translations: true
-          localization_branch_name: I10n_crowdin_translations
+          localization_branch_name: l10n_crowdin_translations
           create_pull_request: true
-          pull_request_title: "feat: New Crowdin Translations"
-          pull_request_body: "New Crowdin translations by [Crowdin GH Action](https://github.com/crowdin/github-action)"
-          pull_request_base_branch_name: "develop"
-          pull_request_labels: "🌐 translation"
-          # Quality control options
-          skip_untranslated_strings: true
-          export_only_approved: false
-          # Commit customization
-          commit_message: "feat(i18n): update translations from Crowdin"
+          pull_request_title: 'feat: New Crowdin Translations'
+          pull_request_body: 'New Crowdin translations by [Crowdin GH Action](https://github.com/crowdin/github-action)'
+          pull_request_base_branch_name: 'develop'
         env:
+          # A classic GitHub Personal Access Token with the 'repo' scope selected (the user should have write access to the repository).
           GITHUB_TOKEN: ${{ secrets.CROWDIN_GITHUB_TOKEN }}
+          
+          # A numeric ID, found at https://crowdin.com/project/<projectName>/tools/api
           CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+
+          # Visit https://crowdin.com/settings#api-key to create this token
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.github/workflows/linting.yml

@@ -57,7 +57,7 @@ jobs:
           fetch-depth: 0
 
       - name: Dependency Review
-        uses: actions/dependency-review-action@40c09b7dc99638e5ddb0bfd91c1673effc064d8a # v4.8.1
+        uses: actions/dependency-review-action@56339e523c0409420f6c2c9a2f4292bbb3c07dd3 # v4.8.0
         with:
           fail-on-severity: high
           base-ref: ${{ github.event.pull_request.base.sha || 'develop' }}
@@ -107,7 +107,7 @@ jobs:
           fetch-depth: 0
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version: '24.x'
 

.github/workflows/notification.yml

@@ -1,18 +1,13 @@
-name: 🛎️ Discord Notification
+name: 🛎️ Discord Pull Request Notification
 
 on:
   pull_request:
     types: [opened, reopened]
     branches: [develop]
-  workflow_run:
-    workflows: ["*"]
-    types: [completed]
-    branches: [develop]
 
 jobs:
   notify:
     runs-on: ubuntu-24.04
-    if: github.event_name == 'pull_request'
     steps:
       - name: 🛎️ Notify Discord
         uses: Ilshidur/action-discord@d2594079a10f1d6739ee50a2471f0ca57418b554 # 0.4.0
@@ -26,21 +21,3 @@ jobs:
             **By:** ${{ github.event.pull_request.user.login }}
             **Branch:** ${{ github.event.pull_request.head.ref }}
             🔗 ${{ github.event.pull_request.html_url }}
-
-  notify-on-failure:
-    runs-on: ubuntu-24.04
-    if: github.event_name == 'workflow_run' && github.event.workflow_run.conclusion == 'failure'
-    steps:
-      - name: 🚨 Notify Discord on Failure
-        uses: Ilshidur/action-discord@d2594079a10f1d6739ee50a2471f0ca57418b554 # 0.4.0
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.WEBHOOK_FAILED_JOB_URL }}
-          DISCORD_AVATAR: https://avatars.githubusercontent.com/u/193271640
-        with:
-          args: |
-            🚨 **Workflow Failed** in **${{ github.repository }}**
-            **Workflow:** ${{ github.event.workflow_run.name }}
-            **Branch:** ${{ github.event.workflow_run.head_branch }}
-            **Triggered by:** ${{ github.event.workflow_run.triggering_actor.login }}
-            **Commit:** ${{ github.event.workflow_run.head_commit.message }}
-            🔗 ${{ github.event.workflow_run.html_url }}

.github/workflows/stale.yml

@@ -15,7 +15,7 @@ jobs:
 
     steps:
       - name: 🔄 Mark/Close Stale Issues
-        uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
+        uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10.0.0
         with:
           # Global settings
           repo-token: ${{ secrets.GITHUB_TOKEN }}

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

@@ -21,7 +21,7 @@ jobs:
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version: '24.x'
           cache: 'npm'

.gitignore

@@ -1,6 +1,4 @@
-# Dependencies and Package Managers
 node_modules/
-<<<<<<< HEAD
 .expo/
 dist/
 npm-debug.*
@@ -16,28 +14,14 @@ modules/vlc-player/android/build
 # macOS
 .DS_Store
 
-# VSCode settings
-.vscode/settings.json
-
 expo-env.d.ts
 
 Streamyfin.app
 
 *.mp4
 Streamyfin.app
-=======
-bun.lock
-bun.lockb
->>>>>>> origin/develop
 package-lock.json
 
-# Expo and React Native Build Artifacts
-.expo/
-dist/
-web-build/
-.tsbuildinfo
-
-# Platform-specific Build Directories
 /ios
 /android
 /iostv
@@ -45,50 +29,21 @@ 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
+modules/hls-downloader/android/build
+streamyfin-4fec1-firebase-adminsdk.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-*
+*.aab
+/version-backup-*
+bun.lockb

.vscode/extensions.json

@@ -1,24 +0,0 @@
-{
-  // ==========================================
-  // Streamyfin - Recommended VS Code Extensions
-  // ==========================================
-  // Essential extensions for working with Streamyfin
-  // See .github/copilot-instructions.md for coding standards
-
-  "recommendations": [
-    // Code Quality & Formatting
-    "biomejs.biome", // Fast formatter and linter for JavaScript/TypeScript - replaces ESLint + Prettier
-
-    // React Native & Expo
-    "expo.vscode-expo-tools", // Official Expo extension - provides commands, debugging, and config IntelliSense
-    "msjsdiag.vscode-react-native", // React Native debugging and IntelliSense - essential for RN development
-
-    // Developer Experience
-    "bradlc.vscode-tailwindcss", // Tailwind CSS IntelliSense - autocomplete for NativeWind classes
-    "yoavbls.pretty-ts-errors", // Makes TypeScript error messages human-readable with formatting and highlights
-    "usernamehw.errorlens", // Shows errors and warnings inline in the editor - faster debugging
-
-    // Bun Support
-    "oven.bun-vscode" // Official Bun extension - provides debugging and language support for Bun runtime
-  ]
-}

.vscode/settings.json

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

GLOBAL_MODAL_GUIDE.md

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

README.md

@@ -5,135 +5,146 @@
   <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.**
+**Streamyfin is a simple, user-friendly Jellyfin video streaming client built with Expo. Designed as an alternative to other Jellyfin clients, it aims to offer a smooth and reliable streaming experience. We hope you'll find it a valuable addition to your media streaming toolbox.**
 
 ---
 
 <p align="center">
-  <img src="./assets/images/screenshots/screenshot1.png" width="20%">
+  <img src="./assets/images/screenshots/screenshot1.png" width="22%">
   &nbsp;
-  <img src="./assets/images/screenshots/screenshot3.png" width="20%">
+  <img src="./assets/images/screenshots/screenshot3.png" width="22%">
   &nbsp;
-  <img src="./assets/images/screenshots/screenshot2.png" width="20%">
+  <img src="./assets/images/screenshots/screenshot2.png" width="22%">
   &nbsp;
-  <img src="./assets/images/jellyseerr.PNG" width="21%">
+  <img src="./assets/images/jellyseerr.PNG" width="23%">
 </p>
 
 
 ## 🌟 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.
+- 📥 **Download media** (Experimental): Save your media locally and watch it offline.
+- 📡 **Chromecast** (Experimental): Cast your media to any Chromecast-enabled device.
+- 📡 **Settings management** (Experimental): Manage app settings for all your users with a JF plugin.
+- 🤖 **Jellyseerr integration**: Request media directly in the app.
+- 👁️ **Sessions View:** View all active sessions currently streaming on your server.
 
 ## 🧪 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 features are still in development, and your patience and feedback are much appreciated as we work to improve them.
 
 ### 📥 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.
+
+### 🎥 Chromecast
+
+Chromecast support is still in development, and we're working on improving it. Currently, it supports casting videos, but we're working on adding support for subtitles and other features.
 
 ### 🧩 Streamyfin Plugin
 
 The Jellyfin Plugin for Streamyfin is a plugin you install into Jellyfin that holds all settings for the client Streamyfin. This allows you to synchronize settings across all your users, like for example:
 
-- 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
+- Auto log in to Jellyseerr without the user having to do anything
+- Choose the default languages
+- Set download method and search provider
+- Customize home screen
+- And much more...
 
 [Streamyfin Plugin](https://github.com/streamyfin/jellyfin-plugin-streamyfin)
 
-### 📡 Chromecast
-
-Chromecast support is currently under development. Video casting is already available, and we're actively working on adding subtitle support and additional features.
-
 ### 🔍 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.
 
-## 📥 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
+## 📄 License
 
-Need assistance or have any questions?
+Streamyfin is licensed under the Mozilla Public License 2.0 (MPL-2.0).
+This means you are free to use, modify, and distribute this software. The MPL-2.0 is a copyleft license that allows for more flexibility in combining the software with proprietary code.
+Key points of the MPL-2.0:
 
-- **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)  
+- You can use the software for any purpose
+- You can modify the software and distribute modified versions
+- You must include the original copyright and license notices
+- You must disclose your source code for any modifications to the covered files
+- Larger works may combine MPL code with code under other licenses
+- MPL-licensed components must remain under the MPL, but the larger work can be under a different license
+- For the full text of the license, please see the LICENSE file in this repository
 
+## 🌐 Connect with Us
+
+Join our Discord: [![](https://dcbadge.limes.pink/api/server/https://discord.gg/BuGG9ZNhaE)](https://discord.gg/BuGG9ZNhaE)
+
+Need support or have questions:
+
+- GitHub Issues: Report bugs or request features here.
+- Email: [developer@streamyfin.app](mailto:developer@streamyfin.app)
 
 ## ❓ FAQ
 
-1. Q: Why can't I see my libraries in Streamyfin?  
-   A: Make sure your server is running one of the latest versions and that you have at least one library that isn't audio only
-2. Q: Why can't I see my music library?
-   A: We don't currently support music and are unlikely to support music in the near future
+1. Q: Why can't I see my libraries in Streamyfin?   
+   A: Make sure your server is running one of the latest versions and that you have at least one library that isn't audio only.
+2. Q: Why can't I see my music library?   
+   A: We don't currently support music and are unlikely to support music in the near future.
 
 ## 📝 Credits
 
-Streamyfin is developed by [Fredrik Burmester](https://github.com/fredrikburmester) and is not affiliated with Jellyfin. The app is built using Expo, React Native, and other open-source libraries.
+Streamyfin is developed by [Fredrik Burmester](https://github.com/fredrikburmester) and is not affiliated with Jellyfin. The app is built with Expo, React Native, and other open-source libraries.
 
-## 🎖️ Core Developers
+## ✨ Acknowledgements
+
+We would like to thank the Jellyfin team for their great software and awesome support on discord.
+
+Special shoutout to the JF official clients for being an inspiration to ours.
+
+### 🏆 Core Developers
 
 Thanks to the following contributors for their significant contributions:
 
@@ -218,41 +229,21 @@ Thanks to the following contributors for their significant contributions:
 </table>
 </div>
 
-## ✨ Acknowledgements
+And all other developers who have contributed to Streamyfin, thank you for your contributions.
 
-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
+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)
 
-## 📄 License
-
-Streamyfin is licensed under the Mozilla Public License 2.0 (MPL-2.0).
-This means you are free to use, modify, and distribute this software. The MPL-2.0 is a copyleft license that allows for more flexibility in combining the software with proprietary code.
-Key points of the MPL-2.0:
-
-- You can use the software for any purpose
-- You can modify the software and distribute modified versions
-- You must include the original copyright and license notices
-- You must disclose your source code for any modifications to the covered files
-- Larger works may combine MPL code with code under other licenses
-- MPL-licensed components must remain under the MPL, but the larger work can be under a different license
-- For the full text of the license, please see the LICENSE file in this repository
-
 ## ⚠️ Disclaimer
-Streamyfin does not promote, support, or condone piracy in any form. The app is intended solely for streaming media that you personally own and control. It does not provide or include any media content. Any discussions, support requests, or references to piracy, as well as any tools, software, or websites related to piracy, are strictly prohibited across all our channels.
+Streamyfin does not promote, support, or condone piracy in any form. The app is intended solely for streaming media that you personally own and control. It does not provide or include any media content. Any discussions or support requests related to piracy are strictly prohibited across all our channels.
 
 ## 🤝 Sponsorship
 VPS hosting generously provided by [Hexabyte](https://hexabyte.se/en/vps/?currency=eur) and [SweHosting](https://swehosting.se/en/#tj%C3%A4nster)

app.json

@@ -8,6 +8,7 @@
     "scheme": "streamyfin",
     "userInterfaceStyle": "dark",
     "jsEngine": "hermes",
+    "newArchEnabled": true,
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "requireFullScreen": true,
@@ -77,6 +78,7 @@
             "useFrameworks": "static"
           },
           "android": {
+            "buildArchs": ["arm64-v8a", "x86_64"],
             "compileSdkVersion": 35,
             "targetSdkVersion": 35,
             "buildToolsVersion": "35.0.0",
@@ -154,7 +156,6 @@
     },
     "updates": {
       "url": "https://u.expo.dev/e79219d1-797f-4fbe-9fa1-cfd360690a68"
-    },
-    "newArchEnabled": false
+    }
   }
 }

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

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

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

@@ -22,6 +22,11 @@ export default function IndexLayout() {
         options={{
           headerShown: !Platform.isTV,
           headerTitle: t("tabs.home"),
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
@@ -43,48 +48,88 @@ export default function IndexLayout() {
         name='downloads/index'
         options={{
           title: t("home.downloads.downloads_title"),
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='downloads/[seriesId]'
         options={{
           title: t("home.downloads.tvseries"),
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='sessions/index'
         options={{
           title: t("home.sessions.title"),
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='settings'
         options={{
           title: t("home.settings.settings_title"),
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='settings/marlin-search/page'
         options={{
           title: "",
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='settings/jellyseerr/page'
         options={{
           title: "",
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='settings/hide-libraries/page'
         options={{
           title: "",
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='settings/logs/page'
         options={{
           title: "",
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
@@ -92,6 +137,11 @@ export default function IndexLayout() {
         options={{
           headerShown: false,
           title: "",
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
           presentation: "modal",
         }}
       />
@@ -102,6 +152,11 @@ export default function IndexLayout() {
         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",

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

@@ -91,7 +91,7 @@ export default function page() {
         title: series[0].item.SeriesName,
       });
     } else {
-      storage.delete(seriesId);
+      storage.remove(seriesId);
       router.back();
     }
   }, [series]);

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

@@ -7,7 +7,7 @@ import {
 } from "@gorhom/bottom-sheet";
 import { useNavigation, useRouter } from "expo-router";
 import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
 import { toast } from "sonner-native";
@@ -23,26 +23,7 @@ import { type DownloadedItem } from "@/providers/Downloads/types";
 import { queueAtom } from "@/utils/atoms/queue";
 import { writeToLog } from "@/utils/log";
 
-interface HeaderRightProps {
-  readonly downloadedFiles: DownloadedItem[] | null;
-  readonly onPress: () => void;
-}
-
-function HeaderRight({ downloadedFiles, onPress }: HeaderRightProps) {
-  return (
-    <TouchableOpacity onPress={onPress}>
-      <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
-    </TouchableOpacity>
-  );
-}
-
-function CustomBottomSheetBackdrop(props: Readonly<BottomSheetBackdropProps>) {
-  return (
-    <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} />
-  );
-}
-
-const DownloadsPage = () => {
+export default function page() {
   const navigation = useNavigation();
   const { t } = useTranslation();
   const [queue, setQueue] = useAtom(queueAtom);
@@ -55,17 +36,6 @@ const DownloadsPage = () => {
   const router = useRouter();
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
-  const handleRemoveQueueItem = useCallback(
-    (queueItemId: string) => {
-      removeProcess(queueItemId);
-      setQueue((prev) => {
-        if (!prev) return [];
-        return prev.filter((i) => i.id !== queueItemId);
-      });
-    },
-    [removeProcess, setQueue],
-  );
-
   const [showMigration, setShowMigration] = useState(false);
 
   const migration_20241124 = () => {
@@ -83,20 +53,19 @@ const DownloadsPage = () => {
         {
           text: t("home.downloads.delete"),
           style: "destructive",
-          onPress: () => {
-            deleteAllFiles()
-              .then(() => setShowMigration(false))
-              .catch((error) => {
-                console.error("Failed to delete all files:", error);
-                setShowMigration(false);
-              });
+          onPress: async () => {
+            await deleteAllFiles();
+            setShowMigration(false);
           },
         },
       ],
     );
   };
 
-  const downloadedFiles = getDownloadedItems();
+  const downloadedFiles = useMemo(
+    () => getDownloadedItems(),
+    [getDownloadedItems],
+  );
 
   const movies = useMemo(() => {
     try {
@@ -137,21 +106,15 @@ const DownloadsPage = () => {
     }
   }, [downloadedFiles]);
 
-  const headerRightComponent = useMemo(
-    () => (
-      <HeaderRight
-        downloadedFiles={downloadedFiles}
-        onPress={() => bottomSheetModalRef.current?.present()}
-      />
-    ),
-    [downloadedFiles],
-  );
-
   useEffect(() => {
     navigation.setOptions({
-      headerRight: () => headerRightComponent,
+      headerRight: () => (
+        <TouchableOpacity onPress={bottomSheetModalRef.current?.present}>
+          <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
+        </TouchableOpacity>
+      ),
     });
-  }, [headerRightComponent, navigation]);
+  }, [downloadedFiles]);
 
   useEffect(() => {
     if (showMigration) {
@@ -220,13 +183,13 @@ const DownloadsPage = () => {
                   {t("home.downloads.queue_hint")}
                 </Text>
                 <View className='flex flex-col space-y-2 mt-2'>
-                  {queue.map((q) => (
+                  {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={q.id}
+                      key={index}
                     >
                       <View>
                         <Text className='font-semibold'>{q.item.Name}</Text>
@@ -235,7 +198,13 @@ const DownloadsPage = () => {
                         </Text>
                       </View>
                       <TouchableOpacity
-                        onPress={() => handleRemoveQueueItem(q.id)}
+                        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>
@@ -354,7 +323,13 @@ const DownloadsPage = () => {
         backgroundStyle={{
           backgroundColor: "#171717",
         }}
-        backdropComponent={CustomBottomSheetBackdrop}
+        backdropComponent={(props: BottomSheetBackdropProps) => (
+          <BottomSheetBackdrop
+            {...props}
+            disappearsOnIndex={-1}
+            appearsOnIndex={0}
+          />
+        )}
       >
         <BottomSheetView>
           <View className='p-4 space-y-4 mb-4'>
@@ -377,6 +352,4 @@ const DownloadsPage = () => {
       </BottomSheetModal>
     </>
   );
-};
-
-export default DownloadsPage;
+}

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

@@ -1,4 +1,4 @@
-import { HomeIndex } from "@/components/settings/HomeIndex";
+import { HomeIndex } from "@/components/home/HomeIndex";
 
 export default function page() {
   return <HomeIndex />;

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

@@ -1,7 +1,7 @@
 import { useNavigation, useRouter } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
-import { useEffect, useMemo } from "react";
+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";
@@ -25,19 +25,7 @@ import { useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import { clearLogs } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
 
-interface LogoutButtonProps {
-  readonly onPress: () => void;
-}
-
-function LogoutButton({ onPress }: LogoutButtonProps) {
-  return (
-    <TouchableOpacity onPress={onPress}>
-      <Text className='text-red-600'>{t("home.settings.log_out_button")}</Text>
-    </TouchableOpacity>
-  );
-}
-
-const SettingsPage = () => {
+export default function settings() {
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const [_user] = useAtom(userAtom);
@@ -49,17 +37,22 @@ const SettingsPage = () => {
     successHapticFeedback();
   };
 
-  const headerRightComponent = useMemo(
-    () => <LogoutButton onPress={() => logout()} />,
-    [logout],
-  );
-
   const navigation = useNavigation();
   useEffect(() => {
     navigation.setOptions({
-      headerRight: () => headerRightComponent,
+      headerRight: () => (
+        <TouchableOpacity
+          onPress={() => {
+            logout();
+          }}
+        >
+          <Text className='text-red-600 px-2'>
+            {t("home.settings.log_out_button")}
+          </Text>
+        </TouchableOpacity>
+      ),
     });
-  }, [headerRightComponent, navigation]);
+  }, []);
 
   return (
     <ScrollView
@@ -125,6 +118,4 @@ const SettingsPage = () => {
       </View>
     </ScrollView>
   );
-};
-
-export default SettingsPage;
+}

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

@@ -1,4 +1,3 @@
-import * as FileSystem from "expo-file-system";
 import { useNavigation } from "expo-router";
 import * as Sharing from "expo-sharing";
 import { useCallback, useEffect, useId, useMemo, useState } from "react";

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

@@ -393,7 +393,6 @@ const page: React.FC = () => {
       data={flatData}
       renderItem={renderItem}
       keyExtractor={keyExtractor}
-      estimatedItemSize={255}
       numColumns={
         orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5
       }

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

@@ -1,18 +1,3 @@
-import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
-
-interface HeaderRightProps {
-  readonly details: MovieDetails | TvDetails | null | undefined;
-}
-
-function HeaderRight({ details }: HeaderRightProps) {
-  if (!details) return null;
-  return (
-    <TouchableOpacity className='rounded-full p-2 bg-neutral-800/80'>
-      <ItemActions item={details} />
-    </TouchableOpacity>
-  );
-}
-
 import { Ionicons } from "@expo/vector-icons";
 import {
   BottomSheetBackdrop,
@@ -34,30 +19,29 @@ import { Text } from "@/components/common/Text";
 import { GenreTags } from "@/components/GenreTags";
 import Cast from "@/components/jellyseerr/Cast";
 import DetailFacts from "@/components/jellyseerr/DetailFacts";
+import RequestModal from "@/components/jellyseerr/RequestModal";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { JellyserrRatings } from "@/components/Ratings";
 import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
 import { ItemActions } from "@/components/series/SeriesActions";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
+import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
 import {
   type IssueType,
   IssueTypeName,
 } from "@/utils/jellyseerr/server/constants/issue";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
+import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
+import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 import type {
   MovieResult,
   TvResult,
 } from "@/utils/jellyseerr/server/models/Search";
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import RequestModal from "@/components/jellyseerr/RequestModal";
-import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
-import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
-
 const Page: React.FC = () => {
   const insets = useSafeAreaInsets();
   const params = useLocalSearchParams();
@@ -78,7 +62,7 @@ const Page: React.FC = () => {
 
   const [issueType, setIssueType] = useState<IssueType>();
   const [issueMessage, setIssueMessage] = useState<string>();
-  const [requestBody, setRequestBody] = useState<MediaRequestBody>();
+  const [requestBody, _setRequestBody] = useState<MediaRequestBody>();
   const advancedReqModalRef = useRef<BottomSheetModal>(null);
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
@@ -129,18 +113,18 @@ const Page: React.FC = () => {
     }
   }, [jellyseerrApi, details, result, issueType, issueMessage]);
 
-  const handleSetRequestBody = useCallback(
+  const setRequestBody = useCallback(
     (body: MediaRequestBody) => {
-      setRequestBody(body);
+      _setRequestBody(body);
       advancedReqModalRef?.current?.present?.();
     },
-    [requestBody, setRequestBody, advancedReqModalRef],
+    [requestBody, _setRequestBody, advancedReqModalRef],
   );
 
   const request = useCallback(async () => {
     const body: MediaRequestBody = {
       mediaId: Number(result.id!),
-      mediaType: mediaType,
+      mediaType: mediaType!,
       tvdbId: details?.externalIds?.tvdbId,
       seasons: (details as TvDetails)?.seasons
         ?.filter?.((s) => s.seasonNumber !== 0)
@@ -148,12 +132,20 @@ const Page: React.FC = () => {
     };
 
     if (hasAdvancedRequestPermission) {
-      handleSetRequestBody(body);
+      setRequestBody(body);
       return;
     }
 
     requestMedia(mediaTitle, body, refetch);
-  }, [details, result, requestMedia, hasAdvancedRequestPermission]);
+  }, [
+    details,
+    result,
+    requestMedia,
+    hasAdvancedRequestPermission,
+    mediaTitle,
+    refetch,
+    mediaType,
+  ]);
 
   const isAnime = useMemo(
     () =>
@@ -162,81 +154,35 @@ const Page: React.FC = () => {
     [details],
   );
 
-  const headerRightComponent = useMemo(
-    () => <HeaderRight details={details as MovieDetails | TvDetails | null} />,
-    [details],
+  const issueTypeOptionGroups = useMemo(
+    () => [
+      {
+        title: t("jellyseerr.types"),
+        options: Object.entries(IssueTypeName)
+          .reverse()
+          .map(([key, value]) => ({
+            type: "radio" as const,
+            label: value,
+            value: key,
+            selected: key === String(issueType),
+            onPress: () => setIssueType(key as unknown as IssueType),
+          })),
+      },
+    ],
+    [issueType, t],
   );
 
   useEffect(() => {
-    navigation.setOptions({
-      headerRight: () => headerRightComponent,
-    });
-  }, [headerRightComponent, navigation]);
-
-  const renderActionButton = () => {
-    if (isLoading || isFetching) {
-      return (
-        <Button
-          loading={true}
-          disabled={true}
-          color='purple'
-          className='mt-4'
-        />
-      );
+    if (details) {
+      navigation.setOptions({
+        headerRight: () => (
+          <TouchableOpacity className='rounded-full p-2 bg-neutral-800/80'>
+            <ItemActions item={details} />
+          </TouchableOpacity>
+        ),
+      });
     }
-
-    if (canRequest) {
-      return (
-        <Button color='purple' onPress={request} className='mt-4'>
-          {t("jellyseerr.request_button")}
-        </Button>
-      );
-    }
-
-    if (details?.mediaInfo?.jellyfinMediaId) {
-      return (
-        <View className='flex flex-row space-x-2 mt-4'>
-          {!Platform.isTV && (
-            <Button
-              className='flex-1 bg-yellow-500/50 border-yellow-400 ring-yellow-400 text-yellow-100'
-              color='transparent'
-              onPress={() => bottomSheetModalRef?.current?.present()}
-              iconLeft={
-                <Ionicons name='warning-outline' size={20} color='white' />
-              }
-              style={{
-                borderWidth: 1,
-                borderStyle: "solid",
-              }}
-            >
-              <Text className='text-sm'>
-                {t("jellyseerr.report_issue_button")}
-              </Text>
-            </Button>
-          )}
-          <Button
-            className='flex-1 bg-purple-600/50 border-purple-400 ring-purple-400 text-purple-100'
-            onPress={() => {
-              const url =
-                mediaType === MediaType.MOVIE
-                  ? `/(auth)/(tabs)/(search)/items/page?id=${details?.mediaInfo.jellyfinMediaId}`
-                  : `/(auth)/(tabs)/(search)/series/${details?.mediaInfo.jellyfinMediaId}`;
-              router.push(url as any);
-            }}
-            iconLeft={<Ionicons name='play-outline' size={20} color='white' />}
-            style={{
-              borderWidth: 1,
-              borderStyle: "solid",
-            }}
-          >
-            <Text className='text-sm'>Play</Text>
-          </Button>
-        </View>
-      );
-    }
-
-    return null;
-  };
+  }, [details]);
 
   return (
     <View
@@ -388,7 +334,7 @@ const Page: React.FC = () => {
                 details={details as TvDetails}
                 refetch={refetch}
                 hasAdvancedRequest={hasAdvancedRequestPermission}
-                onAdvancedRequest={(data) => handleSetRequestBody(data)}
+                onAdvancedRequest={(data) => setRequestBody(data)}
               />
             )}
             <DetailFacts
@@ -407,11 +353,11 @@ const Page: React.FC = () => {
         type={mediaType}
         isAnime={isAnime}
         onRequested={() => {
-          setRequestBody(undefined);
+          _setRequestBody(undefined);
           advancedReqModalRef?.current?.close();
           refetch();
         }}
-        onDismiss={() => setRequestBody(undefined)}
+        onDismiss={() => _setRequestBody(undefined)}
       />
       {!Platform.isTV && (
         // This is till it's fixed because the menu isn't selectable on TV
@@ -434,50 +380,23 @@ const Page: React.FC = () => {
                 </Text>
               </View>
               <View className='flex flex-col space-y-2 items-start'>
-                <View className='flex flex-col'>
-                  <DropdownMenu.Root>
-                    <DropdownMenu.Trigger>
-                      <View className='flex flex-col'>
-                        <Text className='opacity-50 mb-1 text-xs'>
-                          {t("jellyseerr.issue_type")}
+                <View className='flex flex-col w-full'>
+                  <Text className='opacity-50 mb-1 text-xs'>
+                    {t("jellyseerr.issue_type")}
+                  </Text>
+                  <PlatformDropdown
+                    groups={issueTypeOptionGroups}
+                    trigger={
+                      <View className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                        <Text numberOfLines={1}>
+                          {issueType
+                            ? IssueTypeName[issueType]
+                            : t("jellyseerr.select_an_issue")}
                         </Text>
-                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-                          <Text style={{}} className='' numberOfLines={1}>
-                            {issueType
-                              ? IssueTypeName[issueType]
-                              : t("jellyseerr.select_an_issue")}
-                          </Text>
-                        </TouchableOpacity>
                       </View>
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Content
-                      loop={false}
-                      side='bottom'
-                      align='center'
-                      alignOffset={0}
-                      avoidCollisions={true}
-                      collisionPadding={0}
-                      sideOffset={0}
-                    >
-                      <DropdownMenu.Label>
-                        {t("jellyseerr.types")}
-                      </DropdownMenu.Label>
-                      {Object.entries(IssueTypeName)
-                        .reverse()
-                        .map(([key, value], _idx) => (
-                          <DropdownMenu.Item
-                            key={value}
-                            onSelect={() =>
-                              setIssueType(key as unknown as IssueType)
-                            }
-                          >
-                            <DropdownMenu.ItemTitle>
-                              {value}
-                            </DropdownMenu.ItemTitle>
-                          </DropdownMenu.Item>
-                        ))}
-                    </DropdownMenu.Content>
-                  </DropdownMenu.Root>
+                    }
+                    title={t("jellyseerr.types")}
+                  />
                 </View>
 
                 <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full'>

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

@@ -19,49 +19,9 @@ import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 
-function MissingDownloadIcon() {
-  return <Ionicons name='download' size={22} color='white' />;
-}
-
-function DownloadedIcon() {
-  return <Ionicons name='checkmark-done-outline' size={24} color='#9333ea' />;
-}
-
-interface SeriesHeaderRightProps {
-  readonly isLoading: boolean;
-  readonly item: any;
-  readonly allEpisodes: any[];
-}
-
-function SeriesHeaderRight({
-  isLoading,
-  item,
-  allEpisodes,
-}: SeriesHeaderRightProps) {
-  const { t } = useTranslation();
-
-  if (isLoading || !item || !allEpisodes || allEpisodes.length === 0) {
-    return null;
-  }
-
-  return (
-    <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={MissingDownloadIcon}
-          DownloadedIconComponent={DownloadedIcon}
-        />
-      )}
-    </View>
-  );
-}
-
-const SeriesPage: React.FC = () => {
+const page: React.FC = () => {
   const navigation = useNavigation();
+  const { t } = useTranslation();
   const params = useLocalSearchParams();
   const { id: seriesId, seasonIndex } = params as {
     id: string;
@@ -125,22 +85,36 @@ const SeriesPage: React.FC = () => {
     enabled: !!api && !!user?.Id && !!item?.Id,
   });
 
-  const headerRightComponent = useMemo(
-    () => (
-      <SeriesHeaderRight
-        isLoading={isLoading}
-        item={item}
-        allEpisodes={allEpisodes || []}
-      />
-    ),
-    [isLoading, item, allEpisodes],
-  );
-
   useEffect(() => {
     navigation.setOptions({
-      headerRight: () => headerRightComponent,
+      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>
+        ),
     });
-  }, [headerRightComponent, navigation]);
+  }, [allEpisodes, isLoading, item]);
 
   if (!item || !backdropUrl) return null;
 
@@ -184,4 +158,4 @@ const SeriesPage: React.FC = () => {
   );
 };
 
-export default SeriesPage;
+export default page;

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

@@ -1,85 +1,164 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity } from "react-native";
-import { LibraryOptionsSheet } from "@/components/settings/LibraryOptionsSheet";
+import { Platform } from "react-native";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { useSettings } from "@/utils/atoms/settings";
 
 export default function IndexLayout() {
   const { settings, updateSettings, pluginSettings } = useSettings();
-  const [optionsSheetOpen, setOptionsSheetOpen] = useState(false);
 
   const { t } = useTranslation();
 
   if (!settings?.libraryOptions) return null;
 
   return (
-    <>
-      <Stack>
-        <Stack.Screen
-          name='index'
-          options={{
-            headerShown: !Platform.isTV,
-            headerTitle: t("tabs.library"),
-            headerBlurEffect: "none",
-            headerTransparent: Platform.OS === "ios",
-            headerShadowVisible: false,
-            headerRight: () =>
-              !pluginSettings?.libraryOptions?.locked &&
-              !Platform.isTV && (
-                <TouchableOpacity
-                  onPress={() => setOptionsSheetOpen(true)}
-                  className='flex flex-row items-center justify-center w-9 h-9'
-                >
+    <Stack>
+      <Stack.Screen
+        name='index'
+        options={{
+          headerShown: !Platform.isTV,
+          headerTitle: t("tabs.library"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerRight: () =>
+            !pluginSettings?.libraryOptions?.locked &&
+            !Platform.isTV && (
+              <PlatformDropdown
+                trigger={
                   <Ionicons
                     name='ellipsis-horizontal-outline'
                     size={24}
                     color='white'
                   />
-                </TouchableOpacity>
-              ),
-          }}
-        />
-        <Stack.Screen
-          name='[libraryId]'
-          options={{
-            title: "",
-            headerShown: !Platform.isTV,
-            headerBlurEffect: "none",
-            headerTransparent: Platform.OS === "ios",
-            headerShadowVisible: false,
-          }}
-        />
-        {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
-          <Stack.Screen key={name} name={name} options={options} />
-        ))}
-        <Stack.Screen
-          name='collections/[collectionId]'
-          options={{
-            title: "",
-            headerShown: !Platform.isTV,
-            headerBlurEffect: "none",
-            headerTransparent: Platform.OS === "ios",
-            headerShadowVisible: false,
-          }}
-        />
-      </Stack>
-      <LibraryOptionsSheet
-        open={optionsSheetOpen}
-        setOpen={setOptionsSheetOpen}
-        settings={settings.libraryOptions}
-        updateSettings={(options) =>
-          updateSettings({
-            libraryOptions: {
-              ...settings.libraryOptions,
-              ...options,
-            },
-          })
-        }
-        disabled={pluginSettings?.libraryOptions?.locked}
+                }
+                title={t("library.options.display")}
+                groups={[
+                  {
+                    title: t("library.options.display"),
+                    options: [
+                      {
+                        type: "radio",
+                        label: t("library.options.row"),
+                        value: "row",
+                        selected: settings.libraryOptions.display === "row",
+                        onPress: () =>
+                          updateSettings({
+                            libraryOptions: {
+                              ...settings.libraryOptions,
+                              display: "row",
+                            },
+                          }),
+                      },
+                      {
+                        type: "radio",
+                        label: t("library.options.list"),
+                        value: "list",
+                        selected: settings.libraryOptions.display === "list",
+                        onPress: () =>
+                          updateSettings({
+                            libraryOptions: {
+                              ...settings.libraryOptions,
+                              display: "list",
+                            },
+                          }),
+                      },
+                    ],
+                  },
+                  {
+                    title: t("library.options.image_style"),
+                    options: [
+                      {
+                        type: "radio",
+                        label: t("library.options.poster"),
+                        value: "poster",
+                        selected:
+                          settings.libraryOptions.imageStyle === "poster",
+                        onPress: () =>
+                          updateSettings({
+                            libraryOptions: {
+                              ...settings.libraryOptions,
+                              imageStyle: "poster",
+                            },
+                          }),
+                      },
+                      {
+                        type: "radio",
+                        label: t("library.options.cover"),
+                        value: "cover",
+                        selected:
+                          settings.libraryOptions.imageStyle === "cover",
+                        onPress: () =>
+                          updateSettings({
+                            libraryOptions: {
+                              ...settings.libraryOptions,
+                              imageStyle: "cover",
+                            },
+                          }),
+                      },
+                    ],
+                  },
+                  {
+                    title: "Options",
+                    options: [
+                      {
+                        type: "toggle",
+                        label: t("library.options.show_titles"),
+                        value: settings.libraryOptions.showTitles,
+                        onToggle: () =>
+                          updateSettings({
+                            libraryOptions: {
+                              ...settings.libraryOptions,
+                              showTitles: !settings.libraryOptions.showTitles,
+                            },
+                          }),
+                        disabled:
+                          settings.libraryOptions.imageStyle === "poster",
+                      },
+                      {
+                        type: "toggle",
+                        label: t("library.options.show_stats"),
+                        value: settings.libraryOptions.showStats,
+                        onToggle: () =>
+                          updateSettings({
+                            libraryOptions: {
+                              ...settings.libraryOptions,
+                              showStats: !settings.libraryOptions.showStats,
+                            },
+                          }),
+                      },
+                    ],
+                  },
+                ]}
+              />
+            ),
+        }}
       />
-    </>
+      <Stack.Screen
+        name='[libraryId]'
+        options={{
+          title: "",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+        }}
+      />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
+      <Stack.Screen
+        name='collections/[collectionId]'
+        options={{
+          title: "",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+        }}
+      />
+    </Stack>
   );
 }

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

@@ -87,8 +87,8 @@ export default function index() {
         paddingTop: 17,
         paddingHorizontal: settings?.libraryOptions?.display === "row" ? 0 : 17,
         paddingBottom: 150,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
+        paddingLeft: insets.left + 17,
+        paddingRight: insets.right + 17,
       }}
       data={libraries}
       renderItem={({ item }) => <LibraryItemCard library={item} />}
@@ -105,7 +105,6 @@ export default function index() {
           <View className='h-4' />
         )
       }
-      estimatedItemSize={200}
     />
   );
 }

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

@@ -24,8 +24,6 @@ import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import { FilterButton } from "@/components/filters/FilterButton";
-import { Tag } from "@/components/GenreTags";
 import { ItemCardText } from "@/components/ItemCardText";
 import {
   JellyseerrSearchSort,
@@ -33,8 +31,10 @@ import {
 } from "@/components/jellyseerr/JellyseerrIndexPage";
 import MoviePoster from "@/components/posters/MoviePoster";
 import SeriesPoster from "@/components/posters/SeriesPoster";
+import { DiscoverFilters } from "@/components/search/DiscoverFilters";
 import { LoadingSkeleton } from "@/components/search/LoadingSkeleton";
 import { SearchItemWrapper } from "@/components/search/SearchItemWrapper";
+import { SearchTabButtons } from "@/components/search/SearchTabButtons";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -282,69 +282,29 @@ export default function search() {
           maxLength={500}
         />
       )}
-      <View
-        className='flex flex-col'
-        style={{
-          marginTop: Platform.OS === "android" ? 16 : 0,
-        }}
-      >
+      <View className='flex flex-col'>
         {jellyseerrApi && (
-          <ScrollView
-            horizontal
-            className='flex flex-row flex-wrap space-x-2 px-4 mb-2'
-          >
-            <TouchableOpacity onPress={() => setSearchType("Library")}>
-              <Tag
-                text={t("search.library")}
-                textClass='p-1'
-                className={
-                  searchType === "Library" ? "bg-purple-600" : undefined
-                }
-              />
-            </TouchableOpacity>
-            <TouchableOpacity onPress={() => setSearchType("Discover")}>
-              <Tag
-                text={t("search.discover")}
-                textClass='p-1'
-                className={
-                  searchType === "Discover" ? "bg-purple-600" : undefined
-                }
-              />
-            </TouchableOpacity>
+          <View className='pl-4 pr-4 pt-2 flex flex-row'>
+            <SearchTabButtons
+              searchType={searchType}
+              setSearchType={setSearchType}
+              t={t}
+            />
             {searchType === "Discover" &&
               !loading &&
               noResults &&
               debouncedSearch.length > 0 && (
-                <View className='flex flex-row justify-end items-center space-x-1'>
-                  <FilterButton
-                    id={searchFilterId}
-                    queryKey='jellyseerr_search'
-                    queryFn={async () =>
-                      Object.keys(JellyseerrSearchSort).filter((v) =>
-                        Number.isNaN(Number(v)),
-                      )
-                    }
-                    set={(value) => setJellyseerrOrderBy(value[0])}
-                    values={[jellyseerrOrderBy]}
-                    title={t("library.filters.sort_by")}
-                    renderItemLabel={(item) =>
-                      t(`home.settings.plugins.jellyseerr.order_by.${item}`)
-                    }
-                    disableSearch={true}
-                  />
-                  <FilterButton
-                    id={orderFilterId}
-                    queryKey='jellysearr_search'
-                    queryFn={async () => ["asc", "desc"]}
-                    set={(value) => setJellyseerrSortOrder(value[0])}
-                    values={[jellyseerrSortOrder]}
-                    title={t("library.filters.sort_order")}
-                    renderItemLabel={(item) => t(`library.filters.${item}`)}
-                    disableSearch={true}
-                  />
-                </View>
+                <DiscoverFilters
+                  searchFilterId={searchFilterId}
+                  orderFilterId={orderFilterId}
+                  jellyseerrOrderBy={jellyseerrOrderBy}
+                  setJellyseerrOrderBy={setJellyseerrOrderBy}
+                  jellyseerrSortOrder={jellyseerrSortOrder}
+                  setJellyseerrSortOrder={setJellyseerrSortOrder}
+                  t={t}
+                />
               )}
-          </ScrollView>
+          </View>
         )}
 
         <View className='mt-2'>

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

@@ -47,7 +47,7 @@ import { writeToLog } from "@/utils/log";
 import { generateDeviceProfile } from "@/utils/profiles/native";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
 
-export default function Page() {
+export default function page() {
   const videoRef = useRef<VlcPlayerViewRef>(null);
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);
@@ -55,7 +55,7 @@ export default function Page() {
   const navigation = useNavigation();
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
-  const [showControls, setShowControls] = useState(true);
+  const [showControls, _setShowControls] = useState(true);
   const [aspectRatio, setAspectRatio] = useState<
     "default" | "16:9" | "4:3" | "1:1" | "21:9"
   >("default");
@@ -75,19 +75,19 @@ export default function Page() {
     : require("react-native-volume-manager");
 
   const downloadUtils = useDownload();
-  const downloadedFiles = downloadUtils.getDownloadedItems();
+  const downloadedFiles = useMemo(
+    () => downloadUtils.getDownloadedItems(),
+    [downloadUtils.getDownloadedItems],
+  );
 
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
   const lightHapticFeedback = useHaptic("light");
 
-  const setShowControlsWithHaptic = useCallback(
-    (show: boolean) => {
-      setShowControls(show);
-      lightHapticFeedback();
-    },
-    [lightHapticFeedback, setShowControls],
-  );
+  const setShowControls = useCallback((show: boolean) => {
+    _setShowControls(show);
+    lightHapticFeedback();
+  }, []);
 
   const {
     itemId,
@@ -147,7 +147,7 @@ export default function Page() {
         if (offline && !Platform.isTV) {
           const data = downloadUtils.getDownloadedItemById(itemId);
           if (data) {
-            fetchedItem = data.item;
+            fetchedItem = data.item as BaseItemDto;
             setDownloadedItem(data);
           }
         } else {
@@ -182,82 +182,64 @@ export default function Page() {
     isError: false,
   });
 
-  const createOfflineStream = useCallback(() => {
-    if (!downloadedItem?.mediaSource || !item) return null;
-
-    return {
-      mediaSource: downloadedItem.mediaSource,
-      sessionId: "",
-      url: downloadedItem.videoFilePath,
-    };
-  }, [downloadedItem, item]);
-
-  const validateStreamingRequirements = useCallback(() => {
-    if (!api) {
-      console.warn("API not available for streaming");
-      return false;
-    }
-    if (!user?.Id) {
-      console.warn("User not authenticated for streaming");
-      return false;
-    }
-    return true;
-  }, [api, user?.Id]);
-
-  const fetchOnlineStream = useCallback(async () => {
-    if (!validateStreamingRequirements() || !user?.Id) return null;
-
-    const native = generateDeviceProfile();
-    const transcoding = generateDeviceProfile({ transcode: true });
-
-    const res = await getStreamUrl({
-      api,
-      item,
-      startTimeTicks: getInitialPlaybackTicks(),
-      userId: user.Id,
-      audioStreamIndex: audioIndex,
-      maxStreamingBitrate: bitrateValue,
-      mediaSourceId: mediaSourceId,
-      subtitleStreamIndex: subtitleIndex,
-      deviceProfile: bitrateValue ? transcoding : native,
-    });
-
-    if (!res) return null;
-
-    const { mediaSource, sessionId, url } = res;
-    if (!sessionId || !mediaSource || !url) {
-      Alert.alert(t("player.error"), t("player.failed_to_get_stream_url"));
-      return null;
-    }
-
-    return { mediaSource, sessionId, url };
-  }, [
-    validateStreamingRequirements,
-    api,
-    item,
-    getInitialPlaybackTicks,
-    user?.Id,
-    audioIndex,
-    bitrateValue,
-    mediaSourceId,
-    subtitleIndex,
-    t,
-  ]);
-
   useEffect(() => {
     const fetchStreamData = async () => {
       setStreamStatus({ isLoading: true, isError: false });
       try {
+        // Don't attempt to fetch stream data if item is not available
         if (!item?.Id) {
           console.log("Item not loaded yet, skipping stream data fetch");
           setStreamStatus({ isLoading: false, isError: false });
           return;
         }
 
-        const result = offline
-          ? createOfflineStream()
-          : await fetchOnlineStream();
+        let result: Stream | null = null;
+        if (offline && downloadedItem && downloadedItem.mediaSource) {
+          const url = downloadedItem.videoFilePath;
+          if (item) {
+            result = {
+              mediaSource: downloadedItem.mediaSource,
+              sessionId: "",
+              url: url,
+            };
+          }
+        } else {
+          // Validate required parameters before calling getStreamUrl
+          if (!api) {
+            console.warn("API not available for streaming");
+            setStreamStatus({ isLoading: false, isError: true });
+            return;
+          }
+          if (!user?.Id) {
+            console.warn("User not authenticated for streaming");
+            setStreamStatus({ isLoading: false, isError: true });
+            return;
+          }
 
+          const native = generateDeviceProfile();
+          const transcoding = generateDeviceProfile({ transcode: true });
+          const res = await getStreamUrl({
+            api,
+            item,
+            startTimeTicks: getInitialPlaybackTicks(),
+            userId: user.Id,
+            audioStreamIndex: audioIndex,
+            maxStreamingBitrate: bitrateValue,
+            mediaSourceId: mediaSourceId,
+            subtitleStreamIndex: subtitleIndex,
+            deviceProfile: bitrateValue ? transcoding : native,
+          });
+          if (!res) return;
+          const { mediaSource, sessionId, url } = res;
+          if (!sessionId || !mediaSource || !url) {
+            Alert.alert(
+              t("player.error"),
+              t("player.failed_to_get_stream_url"),
+            );
+            return;
+          }
+          result = { mediaSource, sessionId, url };
+        }
         setStream(result);
         setStreamStatus({ isLoading: false, isError: false });
       } catch (error) {
@@ -274,9 +256,6 @@ export default function Page() {
     item,
     user?.Id,
     downloadedItem,
-    offline,
-    createOfflineStream,
-    fetchOnlineStream,
   ]);
 
   useEffect(() => {
@@ -345,8 +324,8 @@ export default function Page() {
     if (!stream) return;
     return {
       itemId: item?.Id!,
-      audioStreamIndex: audioIndex || undefined,
-      subtitleStreamIndex: subtitleIndex || undefined,
+      audioStreamIndex: audioIndex ? audioIndex : undefined,
+      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
       mediaSourceId: mediaSourceId,
       positionTicks: msToTicks(progress.get()),
       isPaused: !isPlaying,
@@ -502,46 +481,15 @@ export default function Page() {
     }
   }, []);
 
-  const handleTogglePlay = useCallback(() => {
-    togglePlay().catch((error) => console.error("Error toggling play:", error));
-  }, [togglePlay]);
-
-  const handleToggleMute = useCallback(() => {
-    toggleMuteCb().catch((error) =>
-      console.error("Error toggling mute:", error),
-    );
-  }, [toggleMuteCb]);
-
-  const handleVolumeUp = useCallback(() => {
-    volumeUpCb().catch((error) =>
-      console.error("Error increasing volume:", error),
-    );
-  }, [volumeUpCb]);
-
-  const handleVolumeDown = useCallback(() => {
-    volumeDownCb().catch((error) =>
-      console.error("Error decreasing volume:", error),
-    );
-  }, [volumeDownCb]);
-
-  const handleSetVolume = useCallback(
-    (volume: number) => {
-      setVolumeCb(volume).catch((error) =>
-        console.error("Error setting volume:", error),
-      );
-    },
-    [setVolumeCb],
-  );
-
   useWebSocket({
     isPlaying: isPlaying,
-    togglePlay: handleTogglePlay,
+    togglePlay: togglePlay,
     stopPlayback: stop,
     offline,
-    toggleMute: handleToggleMute,
-    volumeUp: handleVolumeUp,
-    volumeDown: handleVolumeDown,
-    setVolume: handleSetVolume,
+    toggleMute: toggleMuteCb,
+    volumeUp: volumeUpCb,
+    volumeDown: volumeDownCb,
+    setVolume: setVolumeCb,
   });
 
   const onPlaybackStateChanged = useCallback(
@@ -788,6 +736,7 @@ export default function Page() {
         <Controls
           mediaSource={stream?.mediaSource}
           item={item}
+          videoRef={videoRef}
           togglePlay={togglePlay}
           isPlaying={isPlaying}
           isSeeking={isSeeking}
@@ -795,12 +744,13 @@ export default function Page() {
           cacheProgress={cacheProgress}
           isBuffering={isBuffering}
           showControls={showControls}
-          setShowControls={setShowControlsWithHaptic}
+          setShowControls={setShowControls}
           isVideoLoaded={isVideoLoaded}
           startPictureInPicture={startPictureInPicture}
           play={play}
           pause={pause}
           seek={seek}
+          enableTrickplay={true}
           getAudioTracks={getAudioTracks}
           getSubtitleTracks={getSubtitleTracks}
           offline={offline}

app/+html.tsx

@@ -5,7 +5,7 @@ import { type PropsWithChildren } from "react";
  * This file is web-only and used to configure the root HTML for every web page during static rendering.
  * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
  */
-export default function Root({ children }: Readonly<PropsWithChildren>) {
+export default function Root({ children }: PropsWithChildren) {
   return (
     <html lang='en'>
       <head>

app/_layout.tsx

@@ -1,15 +1,16 @@
 import "@/augmentations";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import { Appearance, AppState, Platform } from "react-native";
+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,
-  userAtom,
 } from "@/providers/JellyfinProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
@@ -37,7 +38,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import * as BackgroundTask from "expo-background-task";
 
 import * as Device from "expo-device";
-import * as FileSystem from "expo-file-system";
+import { Paths } from "expo-file-system";
 
 const Notifications = !Platform.isTV ? require("expo-notifications") : null;
 
@@ -46,9 +47,10 @@ import { router, Stack, useSegments } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 
 import * as TaskManager from "expo-task-manager";
-import { Provider as JotaiProvider, useAtom } from "jotai";
+import { Provider as JotaiProvider } from "jotai";
 import { useEffect, useRef, useState } from "react";
 import { I18nextProvider } from "react-i18next";
+import { Appearance, AppState } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
@@ -60,7 +62,9 @@ import type {
   NotificationResponse,
 } from "expo-notifications/build/Notifications.types";
 import type { ExpoPushToken } from "expo-notifications/build/Tokens.types";
+import { useAtom } from "jotai";
 import { Toaster } from "sonner-native";
+import { userAtom } from "@/providers/JellyfinProvider";
 import { store } from "@/utils/store";
 
 if (!Platform.isTV) {
@@ -141,7 +145,7 @@ if (!Platform.isTV) {
 
     const token = getTokenFromStorage();
     const deviceId = getOrSetDeviceId();
-    const baseDirectory = FileSystem.documentDirectory;
+    const baseDirectory = Paths.document.uri;
 
     if (!token || !deviceId || !baseDirectory)
       return BackgroundTask.BackgroundTaskResult.Failed;
@@ -279,7 +283,7 @@ function Layout() {
       return;
     }
 
-    if (!Platform.isTV && user?.Policy?.IsAdministrator) {
+    if (!Platform.isTV && user && user.Policy?.IsAdministrator) {
       await registerBackgroundFetchAsyncSessions();
     }
 
@@ -316,7 +320,7 @@ function Layout() {
             writeInfoLog(`Notification ${title} opened`, data);
 
             let url: any;
-            const type = String(data?.type ?? "").toLowerCase();
+            const type = (data?.type ?? "").toString().toLowerCase();
             const itemId = data?.id;
 
             switch (type) {
@@ -327,13 +331,13 @@ function Layout() {
                 // `/(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=${String(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/${String(seriesId)}?seasonIndex=${String(seasonIndex)}`;
+                    url = `/(auth)/(tabs)/home/series/${seriesId}?seasonIndex=${seasonIndex}`;
                   } else {
                     url = `/(auth)/(tabs)/home/series/${seriesId}`;
                   }
@@ -384,7 +388,7 @@ function Layout() {
   ]);
 
   useEffect(() => {
-    if (Platform.isTV) {
+    if (Platform.isTV || !BackGroundDownloader) {
       return;
     }
 
@@ -393,7 +397,7 @@ function Layout() {
         appState.current.match(/inactive|background/) &&
         nextAppState === "active"
       ) {
-        BackGroundDownloader.checkForExistingDownloads().catch(
+        BackGroundDownloader?.checkForExistingDownloads().catch(
           (error: unknown) => {
             writeErrorLog("Failed to resume background downloads", error);
           },
@@ -401,9 +405,11 @@ function Layout() {
       }
     });
 
-    BackGroundDownloader.checkForExistingDownloads().catch((error: unknown) => {
-      writeErrorLog("Failed to resume background downloads", error);
-    });
+    BackGroundDownloader?.checkForExistingDownloads().catch(
+      (error: unknown) => {
+        writeErrorLog("Failed to resume background downloads", error);
+      },
+    );
     return () => {
       subscription.remove();
     };
@@ -416,52 +422,55 @@ function Layout() {
           <LogProvider>
             <WebSocketProvider>
               <DownloadProvider>
-                <BottomSheetModalProvider>
-                  <SystemBars style='light' hidden={false} />
-                  <ThemeProvider value={DarkTheme}>
-                    <Stack initialRouteName='(auth)/(tabs)'>
-                      <Stack.Screen
-                        name='(auth)/(tabs)'
-                        options={{
-                          headerShown: false,
-                          title: "",
-                          header: () => null,
+                <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: true,
+                          }}
+                        />
+                        <Stack.Screen name='+not-found' />
+                      </Stack>
+                      <Toaster
+                        duration={4000}
+                        toastOptions={{
+                          style: {
+                            backgroundColor: "#262626",
+                            borderColor: "#363639",
+                            borderWidth: 1,
+                          },
+                          titleStyle: {
+                            color: "white",
+                          },
                         }}
+                        closeButton
                       />
-                      <Stack.Screen
-                        name='(auth)/player'
-                        options={{
-                          headerShown: false,
-                          title: "",
-                          header: () => null,
-                        }}
-                      />
-                      <Stack.Screen
-                        name='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>
+                      <GlobalModal />
+                    </ThemeProvider>
+                  </BottomSheetModalProvider>
+                </GlobalModalProvider>
               </DownloadProvider>
             </WebSocketProvider>
           </LogProvider>

app/login.tsx

@@ -4,7 +4,6 @@ import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { t } from "i18next";
 import { useAtomValue } from "jotai";
-import type React from "react";
 import { useCallback, useEffect, useState } from "react";
 import {
   Alert,
@@ -82,10 +81,10 @@ const Login: React.FC = () => {
             onPress={() => {
               removeServer();
             }}
-            className='flex flex-row items-center'
+            className='flex flex-row items-center pr-2 pl-1'
           >
             <Ionicons name='chevron-back' size={18} color={Colors.primary} />
-            <Text className='ml-2 text-purple-600'>
+            <Text className=' ml-1 text-purple-600'>
               {t("login.change_server")}
             </Text>
           </TouchableOpacity>

assets/icons/jellyseerr-logo.svg

@@ -115,4 +115,4 @@
       <path id="path259-2-6-4-6-7-0-1-0-5-9-4-7-1-5-7-6-2" class="cls-11" d="M46.97,39.46c5.94,0,10.75,4.81,10.75,10.75s-4.81,10.75-10.75,10.75-10.75-4.81-10.75-10.75c0-1.1.16-2.16.47-3.17.84,1.87,2.72,3.17,4.9,3.17,2.97,0,5.37-2.41,5.37-5.37,0-2.18-1.3-4.06-3.17-4.9,1-.31,2.06-.47,3.17-.47h.01Z"/>
     </g>
   </g>
-</svg>
+</svg>

augmentations/mmkv.ts

@@ -1,4 +1,4 @@
-import { MMKV } from "react-native-mmkv";
+import { storage } from "@/utils/mmkv";
 
 declare module "react-native-mmkv" {
   interface MMKV {
@@ -9,7 +9,7 @@ declare module "react-native-mmkv" {
 
 // Add the augmentation methods directly to the MMKV prototype
 // This follows the recommended pattern while adding the helper methods your app uses
-MMKV.prototype.get = function <T>(key: string): T | undefined {
+(storage as any).get = function <T>(key: string): T | undefined {
   try {
     const serializedItem = this.getString(key);
     if (!serializedItem) return undefined;
@@ -20,10 +20,10 @@ MMKV.prototype.get = function <T>(key: string): T | undefined {
   }
 };
 
-MMKV.prototype.setAny = function (key: string, value: any | undefined): void {
+(storage as any).setAny = function (key: string, value: any | undefined): void {
   try {
     if (value === undefined) {
-      this.delete(key);
+      this.remove(key);
     } else {
       this.set(key, JSON.stringify(value));
     }

babel.config.js

@@ -2,6 +2,6 @@ module.exports = (api) => {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel", "react-native-reanimated/plugin"],
+    plugins: ["nativewind/babel", "react-native-worklets/plugin"],
   };
 };

biome.json

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

components/AudioTrackSelector.tsx

@@ -1,11 +1,9 @@
 import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo } from "react";
-import { Platform, TouchableOpacity, View } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
+import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
 
 interface Props extends React.ComponentProps<typeof View> {
   source?: MediaSourceInfo;
@@ -20,6 +18,8 @@ export const AudioTrackSelector: React.FC<Props> = ({
   ...props
 }) => {
   const isTv = Platform.isTV;
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation();
 
   const audioStreams = useMemo(
     () => source?.MediaStreams?.filter((x) => x.Type === "Audio"),
@@ -31,55 +31,58 @@ export const AudioTrackSelector: React.FC<Props> = ({
     [audioStreams, selected],
   );
 
-  const { t } = useTranslation();
+  const optionGroups: OptionGroup[] = useMemo(
+    () => [
+      {
+        options:
+          audioStreams?.map((audio, idx) => ({
+            type: "radio" as const,
+            label: audio.DisplayTitle || `Audio Stream ${idx + 1}`,
+            value: audio.Index ?? idx,
+            selected: audio.Index === selected,
+            onPress: () => {
+              if (audio.Index !== null && audio.Index !== undefined) {
+                onChange(audio.Index);
+              }
+            },
+          })) || [],
+      },
+    ],
+    [audioStreams, selected, onChange],
+  );
+
+  const handleOptionSelect = () => {
+    setOpen(false);
+  };
+
+  const trigger = (
+    <View className='flex flex-col' {...props}>
+      <Text className='opacity-50 mb-1 text-xs'>{t("item_card.audio")}</Text>
+      <TouchableOpacity
+        className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
+        onPress={() => setOpen(true)}
+      >
+        <Text numberOfLines={1}>{selectedAudioSteam?.DisplayTitle}</Text>
+      </TouchableOpacity>
+    </View>
+  );
 
   if (isTv) return null;
 
   return (
-    <View
-      className='flex shrink'
-      style={{
-        minWidth: 50,
+    <PlatformDropdown
+      groups={optionGroups}
+      trigger={trigger}
+      title={t("item_card.audio")}
+      open={open}
+      onOpenChange={setOpen}
+      onOptionSelect={handleOptionSelect}
+      expoUIConfig={{
+        hostStyle: { flex: 1 },
       }}
-    >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <View className='flex flex-col' {...props}>
-            <Text className='opacity-50 mb-1 text-xs'>
-              {t("item_card.audio")}
-            </Text>
-            <TouchableOpacity className='bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-              <Text className='' numberOfLines={1}>
-                {selectedAudioSteam?.DisplayTitle}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side='bottom'
-          align='start'
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Label>Audio streams</DropdownMenu.Label>
-          {audioStreams?.map((audio, idx: number) => (
-            <DropdownMenu.Item
-              key={idx.toString()}
-              onSelect={() => {
-                if (audio.Index !== null && audio.Index !== undefined)
-                  onChange(audio.Index);
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {audio.DisplayTitle}
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </View>
+      bottomSheetConfig={{
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };

components/BitrateSelector.tsx

@@ -1,10 +1,8 @@
-import { Platform, TouchableOpacity, View } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
+import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
 
 export type Bitrate = {
   key: string;
@@ -61,6 +59,8 @@ export const BitrateSelector: React.FC<Props> = ({
   ...props
 }) => {
   const isTv = Platform.isTV;
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation();
 
   const sorted = useMemo(() => {
     if (inverted)
@@ -76,53 +76,59 @@ export const BitrateSelector: React.FC<Props> = ({
     );
   }, [inverted]);
 
-  const { t } = useTranslation();
+  const optionGroups: OptionGroup[] = useMemo(
+    () => [
+      {
+        options: sorted.map((bitrate) => ({
+          type: "radio" as const,
+          label: bitrate.key,
+          value: bitrate,
+          selected: bitrate.value === selected?.value,
+          onPress: () => onChange(bitrate),
+        })),
+      },
+    ],
+    [sorted, selected, onChange],
+  );
+
+  const handleOptionSelect = (optionId: string) => {
+    const selectedBitrate = sorted.find((b) => b.key === optionId);
+    if (selectedBitrate) {
+      onChange(selectedBitrate);
+    }
+    setOpen(false);
+  };
+
+  const trigger = (
+    <View className='flex flex-col' {...props}>
+      <Text className='opacity-50 mb-1 text-xs'>{t("item_card.quality")}</Text>
+      <TouchableOpacity
+        className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
+        onPress={() => setOpen(true)}
+      >
+        <Text numberOfLines={1}>
+          {BITRATES.find((b) => b.value === selected?.value)?.key}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
 
   if (isTv) return null;
 
   return (
-    <View
-      className='flex shrink'
-      style={{
-        minWidth: 60,
-        maxWidth: 200,
+    <PlatformDropdown
+      groups={optionGroups}
+      trigger={trigger}
+      title={t("item_card.quality")}
+      open={open}
+      onOpenChange={setOpen}
+      onOptionSelect={handleOptionSelect}
+      expoUIConfig={{
+        hostStyle: { flex: 1 },
       }}
-    >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <View className='flex flex-col' {...props}>
-            <Text className='opacity-50 mb-1 text-xs'>
-              {t("item_card.quality")}
-            </Text>
-            <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-              <Text style={{}} className='' numberOfLines={1}>
-                {BITRATES.find((b) => b.value === selected?.value)?.key}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={false}
-          side='bottom'
-          align='center'
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={0}
-          sideOffset={0}
-        >
-          <DropdownMenu.Label>Bitrates</DropdownMenu.Label>
-          {sorted.map((b) => (
-            <DropdownMenu.Item
-              key={b.key}
-              onSelect={() => {
-                onChange(b);
-              }}
-            >
-              <DropdownMenu.ItemTitle>{b.key}</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </View>
+      bottomSheetConfig={{
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };

components/Button.tsx

@@ -56,7 +56,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
       useNativeDriver: true,
     }).start();
 
-  const getColorClasses = (color: string, focused: boolean) => {
+  const colorClasses = useMemo(() => {
     switch (color) {
       case "purple":
         return focused
@@ -68,38 +68,12 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
         return "bg-neutral-900";
       case "transparent":
         return "bg-transparent";
-      default:
-        return "bg-purple-600 border border-purple-700";
     }
-  };
-
-  const colorClasses = useMemo(
-    () => getColorClasses(color, focused),
-    [color, focused],
-  );
+  }, [color, focused]);
 
   const lightHapticFeedback = useHaptic("light");
 
-  const handlePress = () => {
-    if (!loading && !disabled && onPress) {
-      onPress();
-      lightHapticFeedback();
-    }
-  };
-
-  const getTextClasses = () => {
-    const baseClasses = "text-white font-bold text-base";
-    const disabledClass = disabled ? " text-gray-300" : "";
-    const rightMargin = iconRight ? " mr-2" : "";
-    const leftMargin = iconLeft ? " ml-2" : "";
-    return `${baseClasses}${disabledClass} ${textClassName}${rightMargin}${leftMargin}`;
-  };
-
-  const getJustifyClass = () => {
-    return justify === "between" ? "justify-between" : "justify-center";
-  };
-
-  const renderTVButton = () => (
+  return Platform.isTV ? (
     <Pressable
       className='w-full'
       onPress={onPress}
@@ -119,7 +93,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
           shadowOffset: { width: 0, height: 0 },
           shadowOpacity: focused ? 0.9 : 0,
           shadowRadius: focused ? 18 : 0,
-          elevation: focused ? 12 : 0,
+          elevation: focused ? 12 : 0, // Android glow
         }}
       >
         <View
@@ -131,9 +105,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
         </View>
       </Animated.View>
     </Pressable>
-  );
-
-  const renderTouchButton = () => (
+  ) : (
     <TouchableOpacity
       className={`
         p-3 rounded-xl items-center justify-center
@@ -141,7 +113,12 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
         ${colorClasses}
         ${className}
       `}
-      onPress={handlePress}
+      onPress={() => {
+        if (!loading && !disabled && onPress) {
+          onPress();
+          lightHapticFeedback();
+        }
+      }}
       disabled={disabled || loading}
       {...props}
     >
@@ -151,15 +128,25 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
         </View>
       ) : (
         <View
-          className={`flex flex-row items-center justify-between w-full ${getJustifyClass()}`}
+          className={`
+            flex flex-row items-center justify-between w-full
+            ${justify === "between" ? "justify-between" : "justify-center"}`}
         >
-          {iconLeft || <View className='w-4' />}
-          <Text className={getTextClasses()}>{children}</Text>
-          {iconRight || <View className='w-4' />}
+          {iconLeft ? iconLeft : <View className='w-4' />}
+          <Text
+            className={`
+          text-white font-bold text-base
+          ${disabled ? "text-gray-300" : ""}
+          ${textClassName}
+          ${iconRight ? "mr-2" : ""}
+          ${iconLeft ? "ml-2" : ""}
+        `}
+          >
+            {children}
+          </Text>
+          {iconRight ? iconRight : <View className='w-4' />}
         </View>
       )}
     </TouchableOpacity>
   );
-
-  return Platform.isTV ? renderTVButton() : renderTouchButton();
 };

components/DownloadItem.tsx

@@ -66,7 +66,10 @@ export const DownloadItems: React.FC<DownloadProps> = ({
 
   const { processes, startBackgroundDownload, getDownloadedItems } =
     useDownload();
-  const downloadedFiles = getDownloadedItems();
+  const downloadedFiles = useMemo(
+    () => getDownloadedItems(),
+    [getDownloadedItems],
+  );
 
   const [selectedOptions, setSelectedOptions] = useState<
     SelectedOptions | undefined
@@ -359,16 +362,18 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                   })}
               </Text>
             </View>
-            <View className='flex flex-col space-y-2 w-full items-start'>
-              <BitrateSelector
-                inverted
-                onChange={(val) =>
-                  setSelectedOptions(
-                    (prev) => prev && { ...prev, bitrate: val },
-                  )
-                }
-                selected={selectedOptions?.bitrate}
-              />
+            <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>
@@ -380,21 +385,23 @@ export const DownloadItems: React.FC<DownloadProps> = ({
               )}
               {itemsNotDownloaded.length === 1 && (
                 <View>
-                  <MediaSourceSelector
-                    item={items[0]}
-                    onChange={(val) =>
-                      setSelectedOptions(
-                        (prev) =>
-                          prev && {
-                            ...prev,
-                            mediaSource: val,
-                          },
-                      )
-                    }
-                    selected={selectedOptions?.mediaSource}
-                  />
+                  <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'>
+                    <View className='flex flex-col space-y-2 items-start'>
                       <AudioTrackSelector
                         source={selectedOptions.mediaSource}
                         onChange={(val) => {
@@ -427,11 +434,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
               )}
             </View>
 
-            <Button
-              className='mt-auto'
-              onPress={acceptDownloadOptions}
-              color='purple'
-            >
+            <Button onPress={acceptDownloadOptions} color='purple'>
               {t("item_card.download.download_button")}
             </Button>
           </View>

components/ExampleGlobalModalUsage.tsx

@@ -0,0 +1,203 @@
+/**
+ * Example Usage of Global Modal
+ *
+ * This file demonstrates how to use the global modal system from anywhere in your app.
+ * You can delete this file after understanding how it works.
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import { TouchableOpacity, View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { useGlobalModal } from "@/providers/GlobalModalProvider";
+
+/**
+ * Example 1: Simple Content Modal
+ */
+export const SimpleModalExample = () => {
+  const { showModal } = useGlobalModal();
+
+  const handleOpenModal = () => {
+    showModal(
+      <View className='p-6'>
+        <Text className='text-2xl font-bold mb-4 text-white'>Simple Modal</Text>
+        <Text className='text-white mb-4'>
+          This is a simple modal with just some text content.
+        </Text>
+        <Text className='text-neutral-400'>
+          Swipe down or tap outside to close.
+        </Text>
+      </View>,
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={handleOpenModal}
+      className='bg-purple-600 px-4 py-2 rounded-lg'
+    >
+      <Text className='text-white font-semibold'>Open Simple Modal</Text>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * Example 2: Modal with Custom Snap Points
+ */
+export const CustomSnapPointsExample = () => {
+  const { showModal } = useGlobalModal();
+
+  const handleOpenModal = () => {
+    showModal(
+      <View className='p-6' style={{ minHeight: 400 }}>
+        <Text className='text-2xl font-bold mb-4 text-white'>
+          Custom Snap Points
+        </Text>
+        <Text className='text-white mb-4'>
+          This modal has custom snap points (25%, 50%, 90%).
+        </Text>
+        <View className='bg-neutral-800 p-4 rounded-lg'>
+          <Text className='text-white'>
+            Try dragging the modal to different heights!
+          </Text>
+        </View>
+      </View>,
+      {
+        snapPoints: ["25%", "50%", "90%"],
+        enableDynamicSizing: false,
+      },
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={handleOpenModal}
+      className='bg-blue-600 px-4 py-2 rounded-lg'
+    >
+      <Text className='text-white font-semibold'>Custom Snap Points</Text>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * Example 3: Complex Component in Modal
+ */
+const SettingsModalContent = () => {
+  const { hideModal } = useGlobalModal();
+
+  const settings = [
+    {
+      id: 1,
+      title: "Notifications",
+      icon: "notifications-outline" as const,
+      enabled: true,
+    },
+    { id: 2, title: "Dark Mode", icon: "moon-outline" as const, enabled: true },
+    {
+      id: 3,
+      title: "Auto-play",
+      icon: "play-outline" as const,
+      enabled: false,
+    },
+  ];
+
+  return (
+    <View className='p-6'>
+      <Text className='text-2xl font-bold mb-6 text-white'>Settings</Text>
+
+      {settings.map((setting, index) => (
+        <View
+          key={setting.id}
+          className={`flex-row items-center justify-between py-4 ${
+            index !== settings.length - 1 ? "border-b border-neutral-700" : ""
+          }`}
+        >
+          <View className='flex-row items-center gap-3'>
+            <Ionicons name={setting.icon} size={24} color='white' />
+            <Text className='text-white text-lg'>{setting.title}</Text>
+          </View>
+          <View
+            className={`w-12 h-7 rounded-full ${
+              setting.enabled ? "bg-purple-600" : "bg-neutral-600"
+            }`}
+          >
+            <View
+              className={`w-5 h-5 rounded-full bg-white shadow-md transform ${
+                setting.enabled ? "translate-x-6" : "translate-x-1"
+              }`}
+              style={{ marginTop: 4 }}
+            />
+          </View>
+        </View>
+      ))}
+
+      <TouchableOpacity
+        onPress={hideModal}
+        className='bg-purple-600 px-4 py-3 rounded-lg mt-6'
+      >
+        <Text className='text-white font-semibold text-center'>Close</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export const ComplexModalExample = () => {
+  const { showModal } = useGlobalModal();
+
+  const handleOpenModal = () => {
+    showModal(<SettingsModalContent />);
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={handleOpenModal}
+      className='bg-green-600 px-4 py-2 rounded-lg'
+    >
+      <Text className='text-white font-semibold'>Complex Component</Text>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * Example 4: Modal Triggered from Function (e.g., API response)
+ */
+export const useShowSuccessModal = () => {
+  const { showModal } = useGlobalModal();
+
+  return (message: string) => {
+    showModal(
+      <View className='p-6 items-center'>
+        <View className='bg-green-500 rounded-full p-4 mb-4'>
+          <Ionicons name='checkmark' size={48} color='white' />
+        </View>
+        <Text className='text-2xl font-bold mb-2 text-white'>Success!</Text>
+        <Text className='text-white text-center'>{message}</Text>
+      </View>,
+    );
+  };
+};
+
+/**
+ * Main Demo Component
+ */
+export const GlobalModalDemo = () => {
+  const showSuccess = useShowSuccessModal();
+
+  return (
+    <View className='p-6 gap-4'>
+      <Text className='text-2xl font-bold mb-4 text-white'>
+        Global Modal Examples
+      </Text>
+
+      <SimpleModalExample />
+      <CustomSnapPointsExample />
+      <ComplexModalExample />
+
+      <TouchableOpacity
+        onPress={() => showSuccess("Operation completed successfully!")}
+        className='bg-orange-600 px-4 py-2 rounded-lg'
+      >
+        <Text className='text-white font-semibold'>Show Success Modal</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};

components/GlobalModal.tsx

@@ -0,0 +1,71 @@
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+} from "@gorhom/bottom-sheet";
+import { useCallback } from "react";
+import { useGlobalModal } from "@/providers/GlobalModalProvider";
+
+/**
+ * GlobalModal Component
+ *
+ * This component renders a global bottom sheet modal that can be controlled
+ * from anywhere in the app using the useGlobalModal hook.
+ *
+ * Place this component at the root level of your app (in _layout.tsx)
+ * after BottomSheetModalProvider.
+ */
+export const GlobalModal = () => {
+  const { hideModal, modalState, modalRef } = useGlobalModal();
+
+  const handleSheetChanges = useCallback(
+    (index: number) => {
+      if (index === -1) {
+        hideModal();
+      }
+    },
+    [hideModal],
+  );
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    [],
+  );
+
+  const defaultOptions = {
+    enableDynamicSizing: true,
+    enablePanDownToClose: true,
+    backgroundStyle: {
+      backgroundColor: "#171717",
+    },
+    handleIndicatorStyle: {
+      backgroundColor: "white",
+    },
+  };
+
+  // Merge default options with provided options
+  const modalOptions = { ...defaultOptions, ...modalState.options };
+
+  return (
+    <BottomSheetModal
+      ref={modalRef}
+      {...(modalOptions.snapPoints
+        ? { snapPoints: modalOptions.snapPoints }
+        : { enableDynamicSizing: modalOptions.enableDynamicSizing })}
+      onChange={handleSheetChanges}
+      backdropComponent={renderBackdrop}
+      handleIndicatorStyle={modalOptions.handleIndicatorStyle}
+      backgroundStyle={modalOptions.backgroundStyle}
+      enablePanDownToClose={modalOptions.enablePanDownToClose}
+      enableDismissOnClose
+    >
+      {modalState.content}
+    </BottomSheetModal>
+  );
+};

components/MediaSourceSelector.tsx

@@ -2,13 +2,11 @@ import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { useCallback, useMemo } from "react";
-import { Platform, TouchableOpacity, View } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
+import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
+import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
 
 interface Props extends React.ComponentProps<typeof View> {
   item: BaseItemDto;
@@ -23,7 +21,7 @@ export const MediaSourceSelector: React.FC<Props> = ({
   ...props
 }) => {
   const isTv = Platform.isTV;
-
+  const [open, setOpen] = useState(false);
   const { t } = useTranslation();
 
   const getDisplayName = useCallback((source: MediaSourceInfo) => {
@@ -46,50 +44,60 @@ export const MediaSourceSelector: React.FC<Props> = ({
     return getDisplayName(selected);
   }, [selected, getDisplayName]);
 
+  const optionGroups: OptionGroup[] = useMemo(
+    () => [
+      {
+        options:
+          item.MediaSources?.map((source) => ({
+            type: "radio" as const,
+            label: getDisplayName(source),
+            value: source,
+            selected: source.Id === selected?.Id,
+            onPress: () => onChange(source),
+          })) || [],
+      },
+    ],
+    [item.MediaSources, selected, getDisplayName, onChange],
+  );
+
+  const handleOptionSelect = (optionId: string) => {
+    const selectedSource = item.MediaSources?.find(
+      (source, idx) => `${source.Id || idx}` === optionId,
+    );
+    if (selectedSource) {
+      onChange(selectedSource);
+    }
+    setOpen(false);
+  };
+
+  const trigger = (
+    <View className='flex flex-col' {...props}>
+      <Text className='opacity-50 mb-1 text-xs'>{t("item_card.video")}</Text>
+      <TouchableOpacity
+        className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center'
+        onPress={() => setOpen(true)}
+      >
+        <Text numberOfLines={1}>{selectedName}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+
   if (isTv) return null;
 
   return (
-    <View
-      className='flex shrink'
-      style={{
-        minWidth: 50,
+    <PlatformDropdown
+      groups={optionGroups}
+      trigger={trigger}
+      title={t("item_card.video")}
+      open={open}
+      onOpenChange={setOpen}
+      onOptionSelect={handleOptionSelect}
+      expoUIConfig={{
+        hostStyle: { flex: 1 },
       }}
-    >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <View className='flex flex-col' {...props}>
-            <Text className='opacity-50 mb-1 text-xs'>
-              {t("item_card.video")}
-            </Text>
-            <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center'>
-              <Text numberOfLines={1}>{selectedName}</Text>
-            </TouchableOpacity>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side='bottom'
-          align='start'
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Label>Media sources</DropdownMenu.Label>
-          {item.MediaSources?.map((source, idx: number) => (
-            <DropdownMenu.Item
-              key={idx.toString()}
-              onSelect={() => {
-                onChange(source);
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {getDisplayName(source)}
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </View>
+      bottomSheetConfig={{
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };

components/PlatformDropdown.tsx

@@ -0,0 +1,323 @@
+import { Button, ContextMenu, Host, Picker } from "@expo/ui/swift-ui";
+import { Ionicons } from "@expo/vector-icons";
+import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
+import React, { useEffect } from "react";
+import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { useGlobalModal } from "@/providers/GlobalModalProvider";
+
+// Option types
+export type RadioOption<T = any> = {
+  type: "radio";
+  label: string;
+  value: T;
+  selected: boolean;
+  onPress: () => void;
+  disabled?: boolean;
+};
+
+export type ToggleOption = {
+  type: "toggle";
+  label: string;
+  value: boolean;
+  onToggle: () => void;
+  disabled?: boolean;
+};
+
+export type Option = RadioOption | ToggleOption;
+
+// Option group structure
+export type OptionGroup = {
+  title?: string;
+  options: Option[];
+};
+
+interface PlatformDropdownProps {
+  trigger?: React.ReactNode;
+  title?: string;
+  groups: OptionGroup[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onOptionSelect?: (value?: any) => void;
+  expoUIConfig?: {
+    hostStyle?: any;
+  };
+  bottomSheetConfig?: {
+    enableDynamicSizing?: boolean;
+    enablePanDownToClose?: boolean;
+  };
+}
+
+const ToggleSwitch: React.FC<{ value: boolean }> = ({ value }) => (
+  <View
+    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"
+      }`}
+    />
+  </View>
+);
+
+const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
+  option,
+  isLast,
+}) => {
+  const isToggle = option.type === "toggle";
+  const handlePress = isToggle ? option.onToggle : option.onPress;
+
+  return (
+    <>
+      <TouchableOpacity
+        onPress={handlePress}
+        disabled={option.disabled}
+        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 ? (
+          <Ionicons name='checkmark-circle' size={24} color='#9333ea' />
+        ) : (
+          <Ionicons name='ellipse-outline' size={24} color='#6b7280' />
+        )}
+      </TouchableOpacity>
+      {!isLast && (
+        <View
+          style={{
+            height: StyleSheet.hairlineWidth,
+          }}
+          className='bg-neutral-700 mx-4'
+        />
+      )}
+    </>
+  );
+};
+
+const OptionGroupComponent: React.FC<{ group: OptionGroup }> = ({ group }) => (
+  <View className='mb-6'>
+    {group.title && (
+      <Text className='text-lg font-semibold mb-3 text-neutral-300'>
+        {group.title}
+      </Text>
+    )}
+    <View
+      style={{
+        borderRadius: 12,
+        overflow: "hidden",
+      }}
+      className='bg-neutral-800 rounded-xl overflow-hidden'
+    >
+      {group.options.map((option, index) => (
+        <OptionItem
+          key={index}
+          option={option}
+          isLast={index === group.options.length - 1}
+        />
+      ))}
+    </View>
+  </View>
+);
+
+const BottomSheetContent: React.FC<{
+  title?: string;
+  groups: OptionGroup[];
+  onOptionSelect?: (value?: any) => void;
+}> = ({ title, groups, onOptionSelect }) => {
+  const insets = useSafeAreaInsets();
+
+  // Wrap the groups to call onOptionSelect when an option is pressed
+  const wrappedGroups = groups.map((group) => ({
+    ...group,
+    options: group.options.map((option) => {
+      if (option.type === "radio") {
+        return {
+          ...option,
+          onPress: () => {
+            option.onPress();
+            onOptionSelect?.(option.value);
+          },
+        };
+      }
+      if (option.type === "toggle") {
+        return {
+          ...option,
+          onToggle: () => {
+            option.onToggle();
+            onOptionSelect?.(option.value);
+          },
+        };
+      }
+      return option;
+    }),
+  }));
+
+  return (
+    <BottomSheetScrollView
+      className='px-4 pb-8 pt-2'
+      style={{
+        paddingLeft: Math.max(16, insets.left),
+        paddingRight: Math.max(16, insets.right),
+      }}
+    >
+      {title && <Text className='font-bold text-2xl mb-6'>{title}</Text>}
+      {wrappedGroups.map((group, index) => (
+        <OptionGroupComponent key={index} group={group} />
+      ))}
+    </BottomSheetScrollView>
+  );
+};
+
+const PlatformDropdownComponent = ({
+  trigger,
+  title,
+  groups,
+  open,
+  onOpenChange,
+  onOptionSelect,
+  expoUIConfig,
+  bottomSheetConfig,
+}: PlatformDropdownProps) => {
+  const { showModal, hideModal } = useGlobalModal();
+
+  const handlePress = () => {
+    if (Platform.OS === "android") {
+      onOpenChange?.(true);
+      showModal(
+        <BottomSheetContent
+          title={title}
+          groups={groups}
+          onOptionSelect={onOptionSelect}
+        />,
+        {
+          snapPoints: ["90%"],
+          enablePanDownToClose: bottomSheetConfig?.enablePanDownToClose ?? true,
+        },
+      );
+    }
+  };
+
+  // Close modal when open prop changes to false
+  useEffect(() => {
+    if (Platform.OS === "android" && open === false) {
+      hideModal();
+    }
+  }, [open, hideModal]);
+
+  if (Platform.OS === "ios") {
+    return (
+      <Host style={expoUIConfig?.hostStyle}>
+        <ContextMenu>
+          <ContextMenu.Trigger>
+            <View className=''>
+              {trigger || <Button variant='bordered'>Show Menu</Button>}
+            </View>
+          </ContextMenu.Trigger>
+          <ContextMenu.Items>
+            {groups.flatMap((group, groupIndex) => {
+              // Check if this group has radio options
+              const radioOptions = group.options.filter(
+                (opt) => opt.type === "radio",
+              ) as RadioOption[];
+              const toggleOptions = group.options.filter(
+                (opt) => opt.type === "toggle",
+              ) as ToggleOption[];
+
+              const items = [];
+
+              // Add Picker for radio options ONLY if there's a group title
+              // Otherwise render as individual buttons
+              if (radioOptions.length > 0) {
+                if (group.title) {
+                  // Use Picker for grouped options
+                  items.push(
+                    <Picker
+                      key={`picker-${groupIndex}`}
+                      label={group.title}
+                      options={radioOptions.map((opt) => opt.label)}
+                      variant='menu'
+                      selectedIndex={radioOptions.findIndex(
+                        (opt) => opt.selected,
+                      )}
+                      onOptionSelected={(event: any) => {
+                        const index = event.nativeEvent.index;
+                        const selectedOption = radioOptions[index];
+                        selectedOption?.onPress();
+                        onOptionSelect?.(selectedOption?.value);
+                      }}
+                    />,
+                  );
+                } else {
+                  // Render radio options as direct buttons
+                  radioOptions.forEach((option, optionIndex) => {
+                    items.push(
+                      <Button
+                        key={`radio-${groupIndex}-${optionIndex}`}
+                        systemImage={
+                          option.selected ? "checkmark.circle.fill" : "circle"
+                        }
+                        onPress={() => {
+                          option.onPress();
+                          onOptionSelect?.(option.value);
+                        }}
+                        disabled={option.disabled}
+                      >
+                        {option.label}
+                      </Button>,
+                    );
+                  });
+                }
+              }
+
+              // Add Buttons for toggle options
+              toggleOptions.forEach((option, optionIndex) => {
+                items.push(
+                  <Button
+                    key={`toggle-${groupIndex}-${optionIndex}`}
+                    systemImage={
+                      option.value ? "checkmark.circle.fill" : "circle"
+                    }
+                    onPress={() => {
+                      option.onToggle();
+                      onOptionSelect?.(option.value);
+                    }}
+                    disabled={option.disabled}
+                  >
+                    {option.label}
+                  </Button>,
+                );
+              });
+
+              return items;
+            })}
+          </ContextMenu.Items>
+        </ContextMenu>
+      </Host>
+    );
+  }
+
+  // Android: Trigger button for bottom modal
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      {trigger || <Text className='text-white'>Open Menu</Text>}
+    </TouchableOpacity>
+  );
+};
+
+// Memoize to prevent unnecessary re-renders when parent re-renders
+export const PlatformDropdown = React.memo(
+  PlatformDropdownComponent,
+  (prevProps, nextProps) => {
+    // Custom comparison - only re-render if these props actually change
+    return (
+      prevProps.title === nextProps.title &&
+      prevProps.open === nextProps.open &&
+      prevProps.groups === nextProps.groups && // Reference equality (works because we memoize groups in caller)
+      prevProps.trigger === nextProps.trigger // Reference equality
+    );
+  },
+);

components/PlayButton.tsx

@@ -1,14 +1,14 @@
 import { useActionSheet } from "@expo/react-native-action-sheet";
+import { Button, Host } from "@expo/ui/swift-ui";
 import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import type { 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, TouchableOpacity, View } from "react-native";
-import {
+import { Alert, Platform, TouchableOpacity, View } from "react-native";
+import CastContext, {
   CastButton,
-  CastContext,
   PlayServicesState,
   useMediaStatus,
   useRemoteMediaClient,
@@ -34,10 +34,9 @@ import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { chromecast } from "@/utils/profiles/chromecast";
 import { chromecasth265 } from "@/utils/profiles/chromecasth265";
 import { runtimeTicksToMinutes } from "@/utils/time";
-import type { Button } from "./Button";
 import type { SelectedOptions } from "./ItemContent";
 
-interface Props extends React.ComponentProps<typeof Button> {
+interface Props extends React.ComponentProps<typeof TouchableOpacity> {
   item: BaseItemDto;
   selectedOptions: SelectedOptions;
   isOffline?: boolean;
@@ -47,63 +46,6 @@ interface Props extends React.ComponentProps<typeof Button> {
 const ANIMATION_DURATION = 500;
 const MIN_PLAYBACK_WIDTH = 15;
 
-// Helper function to create media metadata for Chromecast
-const createMediaMetadata = (item: BaseItemDto, api: any) => {
-  if (item.Type === "Episode") {
-    return {
-      type: "tvShow" as const,
-      title: item.Name || "",
-      episodeNumber: item.IndexNumber || 0,
-      seasonNumber: item.ParentIndexNumber || 0,
-      seriesTitle: item.SeriesName || "",
-      images: [
-        {
-          url: getParentBackdropImageUrl({
-            api,
-            item,
-            quality: 90,
-            width: 2000,
-          })!,
-        },
-      ],
-    };
-  }
-
-  if (item.Type === "Movie") {
-    return {
-      type: "movie" as const,
-      title: item.Name || "",
-      subtitle: item.Overview || "",
-      images: [
-        {
-          url: getPrimaryImageUrl({
-            api,
-            item,
-            quality: 90,
-            width: 2000,
-          })!,
-        },
-      ],
-    };
-  }
-
-  return {
-    type: "generic" as const,
-    title: item.Name || "",
-    subtitle: item.Overview || "",
-    images: [
-      {
-        url: getPrimaryImageUrl({
-          api,
-          item,
-          quality: 90,
-          width: 2000,
-        })!,
-      },
-    ],
-  };
-};
-
 export const PlayButton: React.FC<Props> = ({
   item,
   selectedOptions,
@@ -144,86 +86,12 @@ export const PlayButton: React.FC<Props> = ({
     [router, isOffline],
   );
 
-  const handleChromecast = useCallback(
-    async (params: {
-      item: BaseItemDto;
-      api: any;
-      user: any;
-      selectedOptions: SelectedOptions;
-      client: any;
-      t: any;
-      settings: any;
-      isOpeningCurrentlyPlayingMedia: boolean;
-    }) => {
-      const {
-        item,
-        api,
-        user,
-        selectedOptions,
-        client,
-        t,
-        settings,
-        isOpeningCurrentlyPlayingMedia,
-      } = params;
-      const enableH265 = settings.enableH265ForChromecast;
-      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;
-      }
-      try {
-        const data = await getStreamUrl({
-          api,
-          item,
-          deviceProfile: enableH265 ? chromecasth265 : chromecast,
-          startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
-          userId: user.Id,
-          audioStreamIndex: selectedOptions.audioIndex,
-          maxStreamingBitrate: selectedOptions.bitrate?.value,
-          mediaSourceId: selectedOptions.mediaSource?.Id,
-          subtitleStreamIndex: selectedOptions.subtitleIndex,
-        });
-        if (!data?.url) {
-          console.warn("No URL returned from getStreamUrl", data);
-          Alert.alert(
-            t("player.client_error"),
-            t("player.could_not_create_stream_for_chromecast"),
-          );
-          return;
-        }
-        client
-          .loadMedia({
-            mediaInfo: {
-              contentUrl: data?.url,
-              contentType: "video/mp4",
-              metadata: createMediaMetadata(item, api),
-            },
-            startTime: 0,
-          })
-          .then(() => {
-            if (isOpeningCurrentlyPlayingMedia) return;
-            CastContext.showExpandedControls();
-          });
-      } catch (e) {
-        console.log(e);
-      }
-    },
-    [],
-  );
-
   const onPress = useCallback(async () => {
+    console.log("onPress");
     if (!item) return;
+
     lightHapticFeedback();
+
     const queryParams = new URLSearchParams({
       itemId: item.Id!,
       audioIndex: selectedOptions.audioIndex?.toString() ?? "",
@@ -233,11 +101,14 @@ export const PlayButton: React.FC<Props> = ({
       playbackPosition: item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
       offline: isOffline ? "true" : "false",
     });
+
     const queryString = queryParams.toString();
+
     if (!client) {
       goToPlayer(queryString);
       return;
     }
+
     const options = ["Chromecast", "Device", "Cancel"];
     const cancelButtonIndex = 2;
     showActionSheetWithOptions(
@@ -250,23 +121,137 @@ export const PlayButton: React.FC<Props> = ({
         const currentTitle = mediaStatus?.mediaInfo?.metadata?.title;
         const isOpeningCurrentlyPlayingMedia =
           currentTitle && currentTitle === item?.Name;
+
         switch (selectedIndex) {
           case 0:
             await CastContext.getPlayServicesState().then(async (state) => {
               if (state && state !== PlayServicesState.SUCCESS) {
                 CastContext.showPlayServicesErrorDialog(state);
               } else {
-                await handleChromecast({
-                  item,
-                  api,
-                  user,
-                  selectedOptions,
-                  client,
-                  t,
-                  settings,
-                  isOpeningCurrentlyPlayingMedia:
-                    !!isOpeningCurrentlyPlayingMedia,
-                });
+                // 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!,
+                    userId: user.Id,
+                    audioStreamIndex: selectedOptions.audioIndex,
+                    maxStreamingBitrate: selectedOptions.bitrate?.value,
+                    mediaSourceId: selectedOptions.mediaSource?.Id,
+                    subtitleStreamIndex: selectedOptions.subtitleIndex,
+                  });
+
+                  console.log("URL: ", data?.url, enableH265);
+
+                  if (!data?.url) {
+                    console.warn("No URL returned from getStreamUrl", data);
+                    Alert.alert(
+                      t("player.client_error"),
+                      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,
+                                      })!,
+                                    },
+                                  ],
+                                },
+                      },
+                      startTime: 0,
+                    })
+                    .then(() => {
+                      // state is already set when reopening current media, so skip it here.
+                      if (isOpeningCurrentlyPlayingMedia) {
+                        return;
+                      }
+                      CastContext.showExpandedControls();
+                    });
+                } catch (e) {
+                  console.log(e);
+                }
               }
             });
             break;
@@ -288,14 +273,10 @@ export const PlayButton: React.FC<Props> = ({
     showActionSheetWithOptions,
     mediaStatus,
     selectedOptions,
-    lightHapticFeedback,
-    goToPlayer,
-    isOffline,
-    handleChromecast,
   ]);
 
   const derivedTargetWidth = useDerivedValue(() => {
-    if (!item?.RunTimeTicks) return 0;
+    if (!item || !item.RunTimeTicks) return 0;
     const userData = item.UserData;
     if (userData?.PlaybackPositionTicks) {
       return userData.PlaybackPositionTicks > 0
@@ -383,6 +364,46 @@ export const PlayButton: React.FC<Props> = ({
    * *********************
    */
 
+  if (Platform.OS === "ios")
+    return (
+      <Host
+        style={{
+          height: 50,
+          flex: 1,
+        }}
+      >
+        <Button
+          variant='glassProminent'
+          onPress={onPress}
+          color={effectiveColors.primary}
+        >
+          <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)}
+            </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}

components/PlayButton.tv.tsx

@@ -76,10 +76,11 @@ export const PlayButton: React.FC<Props> = ({
 
     const queryString = queryParams.toString();
     goToPlayer(queryString);
+    return;
   };
 
   const derivedTargetWidth = useDerivedValue(() => {
-    if (!item?.RunTimeTicks) return 0;
+    if (!item || !item.RunTimeTicks) return 0;
     const userData = item.UserData;
     if (userData?.PlaybackPositionTicks) {
       return userData.PlaybackPositionTicks > 0

components/SubtitleTrackSelector.tsx

@@ -1,12 +1,10 @@
 import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { tc } from "@/utils/textTools";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import { useTranslation } from "react-i18next";
 import { Text } from "./common/Text";
+import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
 
 interface Props extends React.ComponentProps<typeof View> {
   source?: MediaSourceInfo;
@@ -21,6 +19,8 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   ...props
 }) => {
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
   const subtitleStreams = useMemo(() => {
     return source?.MediaStreams?.filter((x) => x.Type === "Subtitle");
   }, [source]);
@@ -30,64 +30,83 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
     [subtitleStreams, selected],
   );
 
+  const optionGroups: OptionGroup[] = useMemo(() => {
+    const options = [
+      {
+        type: "radio" as const,
+        label: t("item_card.none"),
+        value: -1,
+        selected: selected === -1,
+        onPress: () => onChange(-1),
+      },
+      ...(subtitleStreams?.map((subtitle, idx) => ({
+        type: "radio" as const,
+        label: subtitle.DisplayTitle || `Subtitle Stream ${idx + 1}`,
+        value: subtitle.Index,
+        selected: subtitle.Index === selected,
+        onPress: () => onChange(subtitle.Index ?? -1),
+      })) || []),
+    ];
+
+    return [
+      {
+        options,
+      },
+    ];
+  }, [subtitleStreams, selected, t, onChange]);
+
+  const handleOptionSelect = (optionId: string) => {
+    if (optionId === "none") {
+      onChange(-1);
+    } else {
+      const selectedStream = subtitleStreams?.find(
+        (subtitle, idx) => `${subtitle.Index || idx}` === optionId,
+      );
+      if (
+        selectedStream &&
+        selectedStream.Index !== undefined &&
+        selectedStream.Index !== null
+      ) {
+        onChange(selectedStream.Index);
+      }
+    }
+    setOpen(false);
+  };
+
+  const trigger = (
+    <View className='flex flex-col' {...props}>
+      <Text numberOfLines={1} className='opacity-50 mb-1 text-xs'>
+        {t("item_card.subtitles")}
+      </Text>
+      <TouchableOpacity
+        className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
+        onPress={() => setOpen(true)}
+      >
+        <Text>
+          {selectedSubtitleSteam
+            ? tc(selectedSubtitleSteam?.DisplayTitle, 7)
+            : t("item_card.none")}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+
   if (Platform.isTV || subtitleStreams?.length === 0) return null;
 
   return (
-    <View
-      className='flex col shrink justify-start place-self-start items-start'
-      style={{
-        minWidth: 60,
-        maxWidth: 200,
+    <PlatformDropdown
+      groups={optionGroups}
+      trigger={trigger}
+      title={t("item_card.subtitles")}
+      open={open}
+      onOpenChange={setOpen}
+      onOptionSelect={handleOptionSelect}
+      expoUIConfig={{
+        hostStyle: { flex: 1 },
       }}
-    >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <View className='flex flex-col ' {...props}>
-            <Text numberOfLines={1} className='opacity-50 mb-1 text-xs'>
-              {t("item_card.subtitles")}
-            </Text>
-            <TouchableOpacity className='bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-              <Text className=' '>
-                {selectedSubtitleSteam
-                  ? tc(selectedSubtitleSteam?.DisplayTitle, 7)
-                  : t("item_card.none")}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side='bottom'
-          align='start'
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Label>Subtitle tracks</DropdownMenu.Label>
-          <DropdownMenu.Item
-            key={"-1"}
-            onSelect={() => {
-              onChange(-1);
-            }}
-          >
-            <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
-          </DropdownMenu.Item>
-          {subtitleStreams?.map((subtitle, idx: number) => (
-            <DropdownMenu.Item
-              key={idx.toString()}
-              onSelect={() => {
-                if (subtitle.Index !== undefined && subtitle.Index !== null)
-                  onChange(subtitle.Index);
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {subtitle.DisplayTitle}
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </View>
+      bottomSheetConfig={{
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };

components/_template.tsx

@@ -0,0 +1,12 @@
+import { View, type ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+
+interface Props extends ViewProps {}
+
+export const TitleHeader: React.FC<Props> = ({ ...props }) => {
+  return (
+    <View {...props}>
+      <Text />
+    </View>
+  );
+};

components/apple-tv-carousel/AppleTVCarousel.tsx

@@ -21,15 +21,16 @@ import Animated, {
 } from "react-native-reanimated";
 import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useImageColorsReturn } from "@/hooks/useImageColorsReturn";
+import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { ItemImage } from "./common/ItemImage";
-import { getItemNavigation } from "./common/TouchableItemRouter";
-import type { SelectedOptions } from "./ItemContent";
-import { PlayButton } from "./PlayButton";
-import { PlayedStatus } from "./PlayedStatus";
+import { ItemImage } from "../common/ItemImage";
+import { getItemNavigation } from "../common/TouchableItemRouter";
+import type { SelectedOptions } from "../ItemContent";
+import { PlayButton } from "../PlayButton";
+import { MarkAsPlayedLargeButton } from "./MarkAsPlayedLargeButton";
 
 interface AppleTVCarouselProps {
   initialIndex?: number;
@@ -45,10 +46,11 @@ const GRADIENT_HEIGHT_BOTTOM = 150;
 const LOGO_HEIGHT = 80;
 
 // Position Constants
-const LOGO_BOTTOM_POSITION = 210;
-const GENRES_BOTTOM_POSITION = 170;
-const CONTROLS_BOTTOM_POSITION = 100;
-const DOTS_BOTTOM_POSITION = 60;
+const LOGO_BOTTOM_POSITION = 260;
+const GENRES_BOTTOM_POSITION = 220;
+const OVERVIEW_BOTTOM_POSITION = 165;
+const CONTROLS_BOTTOM_POSITION = 80;
+const DOTS_BOTTOM_POSITION = 40;
 
 // Size Constants
 const DOT_HEIGHT = 6;
@@ -58,13 +60,15 @@ const PLAY_BUTTON_SKELETON_HEIGHT = 50;
 const PLAYED_STATUS_SKELETON_SIZE = 40;
 const TEXT_SKELETON_HEIGHT = 20;
 const TEXT_SKELETON_WIDTH = 250;
+const OVERVIEW_SKELETON_HEIGHT = 16;
+const OVERVIEW_SKELETON_WIDTH = 400;
 const _EMPTY_STATE_ICON_SIZE = 64;
 
 // Spacing Constants
 const HORIZONTAL_PADDING = 40;
 const DOT_PADDING = 2;
 const DOT_GAP = 4;
-const CONTROLS_GAP = 20;
+const CONTROLS_GAP = 10;
 const _TEXT_MARGIN_TOP = 16;
 
 // Border Radius Constants
@@ -83,13 +87,16 @@ const VELOCITY_THRESHOLD = 400;
 
 // Text Constants
 const GENRES_FONT_SIZE = 16;
+const OVERVIEW_FONT_SIZE = 14;
 const _EMPTY_STATE_FONT_SIZE = 18;
 const TEXT_SHADOW_RADIUS = 2;
 const MAX_GENRES_COUNT = 2;
 const MAX_BUTTON_WIDTH = 300;
+const OVERVIEW_MAX_LINES = 2;
+const OVERVIEW_MAX_WIDTH = "80%";
 
 // Opacity Constants
-const OVERLAY_OPACITY = 0.4;
+const OVERLAY_OPACITY = 0.3;
 const DOT_INACTIVE_OPACITY = 0.6;
 const TEXT_OPACITY = 0.9;
 
@@ -168,7 +175,7 @@ export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
           userId: user.Id,
           enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
           includeItemTypes: ["Movie", "Series", "Episode"],
-          fields: ["Genres"],
+          fields: ["Genres", "Overview"],
           limit: 2,
         });
         return response.data.Items || [];
@@ -183,7 +190,7 @@ export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
       if (!api || !user?.Id) return [];
       const response = await getTvShowsApi(api).getNextUp({
         userId: user.Id,
-        fields: ["MediaSourceCount", "Genres"],
+        fields: ["MediaSourceCount", "Genres", "Overview"],
         limit: 2,
         enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
         enableResumable: false,
@@ -202,7 +209,7 @@ export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
         const response = await getUserLibraryApi(api).getLatestMedia({
           userId: user.Id,
           limit: 2,
-          fields: ["PrimaryImageAspectRatio", "Path", "Genres"],
+          fields: ["PrimaryImageAspectRatio", "Path", "Genres", "Overview"],
           imageTypeLimit: 1,
           enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
         });
@@ -307,7 +314,7 @@ export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
   const navigateToItem = useCallback(
     (item: BaseItemDto) => {
       const navigation = getItemNavigation(item, "(home)");
-      router.push(navigation as `/(auth)/(tabs)/${string}`);
+      router.push(navigation as any);
     },
     [router],
   );
@@ -348,6 +355,8 @@ export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
     };
   });
 
+  const togglePlayedStatus = useMarkAsPlayed(items);
+
   const renderDots = () => {
     if (!hasItems || items.length <= 1) return null;
 
@@ -473,6 +482,36 @@ export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
           />
         </View>
 
+        {/* Overview Skeleton */}
+        <View
+          style={{
+            position: "absolute",
+            bottom: OVERVIEW_BOTTOM_POSITION,
+            left: 0,
+            right: 0,
+            paddingHorizontal: HORIZONTAL_PADDING,
+            alignItems: "center",
+            gap: 6,
+          }}
+        >
+          <View
+            style={{
+              height: OVERVIEW_SKELETON_HEIGHT,
+              width: OVERVIEW_SKELETON_WIDTH,
+              backgroundColor: SKELETON_ELEMENT_COLOR,
+              borderRadius: TEXT_SKELETON_BORDER_RADIUS,
+            }}
+          />
+          <View
+            style={{
+              height: OVERVIEW_SKELETON_HEIGHT,
+              width: OVERVIEW_SKELETON_WIDTH * 0.7,
+              backgroundColor: SKELETON_ELEMENT_COLOR,
+              borderRadius: TEXT_SKELETON_BORDER_RADIUS,
+            }}
+          />
+        </View>
+
         {/* Controls Skeleton */}
         <View
           style={{
@@ -689,6 +728,39 @@ export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
           </TouchableOpacity>
         </View>
 
+        {/* Overview Section - for Episodes and Movies */}
+        {(item.Type === "Episode" || item.Type === "Movie") &&
+          item.Overview && (
+            <View
+              style={{
+                position: "absolute",
+                bottom: OVERVIEW_BOTTOM_POSITION,
+                left: 0,
+                right: 0,
+                paddingHorizontal: HORIZONTAL_PADDING,
+                alignItems: "center",
+              }}
+            >
+              <TouchableOpacity onPress={() => navigateToItem(item)}>
+                <Animated.Text
+                  numberOfLines={OVERVIEW_MAX_LINES}
+                  style={{
+                    color: `rgba(255, 255, 255, ${TEXT_OPACITY * 0.85})`,
+                    fontSize: OVERVIEW_FONT_SIZE,
+                    fontWeight: "400",
+                    textAlign: "center",
+                    maxWidth: OVERVIEW_MAX_WIDTH,
+                    textShadowColor: TEXT_SHADOW_COLOR,
+                    textShadowOffset: { width: 0, height: 1 },
+                    textShadowRadius: TEXT_SHADOW_RADIUS,
+                  }}
+                >
+                  {item.Overview}
+                </Animated.Text>
+              </TouchableOpacity>
+            </View>
+          )}
+
         {/* Controls Section */}
         <View
           style={{
@@ -719,7 +791,10 @@ export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
             </View>
 
             {/* Mark as Played */}
-            <PlayedStatus items={[item]} size='large' />
+            <MarkAsPlayedLargeButton
+              isPlayed={item.UserData?.Played ?? false}
+              onToggle={togglePlayedStatus}
+            />
           </View>
         </View>
       </View>

components/apple-tv-carousel/MarkAsPlayedLargeButton.tsx

@@ -0,0 +1,51 @@
+import { Button, Host } from "@expo/ui/swift-ui";
+import { Ionicons } from "@expo/vector-icons";
+import { Platform, View } from "react-native";
+import { RoundButton } from "../RoundButton";
+
+interface MarkAsPlayedLargeButtonProps {
+  isPlayed: boolean;
+  onToggle: (isPlayed: boolean) => void;
+}
+
+export const MarkAsPlayedLargeButton: React.FC<
+  MarkAsPlayedLargeButtonProps
+> = ({ isPlayed, onToggle }) => {
+  if (Platform.OS === "ios")
+    return (
+      <Host
+        style={{
+          flex: 0,
+          width: 50,
+          height: 50,
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "row",
+        }}
+      >
+        <Button onPress={() => onToggle(isPlayed)} variant='glass'>
+          <View>
+            <Ionicons
+              name='checkmark'
+              size={24}
+              color='white'
+              style={{
+                marginTop: 6,
+                marginLeft: 1,
+              }}
+            />
+          </View>
+        </Button>
+      </Host>
+    );
+
+  return (
+    <View>
+      <RoundButton
+        size='large'
+        icon={isPlayed ? "checkmark" : "checkmark"}
+        onPress={() => onToggle(isPlayed)}
+      />
+    </View>
+  );
+};

components/common/Dropdown.tsx

@@ -1,125 +0,0 @@
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import {
-  type PropsWithChildren,
-  type ReactNode,
-  useEffect,
-  useState,
-} from "react";
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
-import DisabledSetting from "@/components/settings/DisabledSetting";
-
-interface Props<T> {
-  data: T[];
-  disabled?: boolean;
-  placeholderText?: string;
-  keyExtractor: (item: T) => string;
-  titleExtractor: (item: T) => string | undefined;
-  title: string | ReactNode;
-  label: string;
-  onSelected: (...item: T[]) => void;
-  multiple?: boolean;
-}
-
-const Dropdown = <T,>({
-  data,
-  disabled,
-  placeholderText,
-  keyExtractor,
-  titleExtractor,
-  title,
-  label,
-  onSelected,
-  multiple = false,
-  ...props
-}: PropsWithChildren<Props<T> & ViewProps>) => {
-  const isTv = Platform.isTV;
-
-  const [selected, setSelected] = useState<T[]>();
-
-  useEffect(() => {
-    if (selected !== undefined) {
-      onSelected(...selected);
-    }
-  }, [selected, onSelected]);
-
-  if (isTv) return null;
-
-  return (
-    <DisabledSetting disabled={disabled === true} showText={false} {...props}>
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          {typeof title === "string" ? (
-            <View className='flex flex-col'>
-              <Text className='opacity-50 mb-1 text-xs'>{title}</Text>
-              <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-                <Text style={{}} className='' numberOfLines={1}>
-                  {selected?.length !== undefined
-                    ? selected.map(titleExtractor).join(",")
-                    : placeholderText}
-                </Text>
-              </TouchableOpacity>
-            </View>
-          ) : (
-            title
-          )}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={false}
-          side='bottom'
-          align='center'
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={0}
-          sideOffset={0}
-        >
-          <DropdownMenu.Label>{label}</DropdownMenu.Label>
-          {data.map((item, _idx) =>
-            multiple ? (
-              <DropdownMenu.CheckboxItem
-                value={
-                  selected?.some((s) => keyExtractor(s) === keyExtractor(item))
-                    ? "on"
-                    : "off"
-                }
-                key={keyExtractor(item)}
-                onValueChange={(
-                  next: "on" | "off",
-                  _previous: "on" | "off",
-                ) => {
-                  setSelected((p) => {
-                    const prev = p || [];
-                    if (next === "on") {
-                      return [...prev, item];
-                    }
-                    return [
-                      ...prev.filter(
-                        (p) => keyExtractor(p) !== keyExtractor(item),
-                      ),
-                    ];
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {titleExtractor(item)}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.CheckboxItem>
-            ) : (
-              <DropdownMenu.Item
-                key={keyExtractor(item)}
-                onSelect={() => setSelected([item])}
-              >
-                <DropdownMenu.ItemTitle>
-                  {titleExtractor(item)}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-            ),
-          )}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </DisabledSetting>
-  );
-};
-
-export default Dropdown;

components/common/InfiniteHorizontalScroll.tsx

@@ -45,7 +45,7 @@ export function InfiniteHorizontalScroll({
   loading = false,
   height = 164,
   ...props
-}: Readonly<HorizontalScrollProps>): React.ReactElement {
+}: HorizontalScrollProps): React.ReactElement {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 

components/common/JellyseerrItemRouter.tsx

@@ -1,14 +1,8 @@
 import { useRouter, useSegments } from "expo-router";
 import type React from "react";
-import { type PropsWithChildren, useCallback, useMemo } from "react";
+import { type PropsWithChildren } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
-import * as ContextMenu from "zeego/context-menu";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
-import {
-  hasPermission,
-  Permission,
-} from "@/utils/jellyseerr/server/lib/permissions";
 import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
 import type {
@@ -16,7 +10,6 @@ import type {
   TvResult,
 } from "@/utils/jellyseerr/server/models/Search";
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
-import { getCurrentTab } from "@/utils/navigation";
 
 interface Props extends TouchableOpacityProps {
   result?: MovieResult | TvResult | MovieDetails | TvDetails | PersonCreditCast;
@@ -39,90 +32,33 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const router = useRouter();
   const segments = useSegments();
-  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
 
-  // Some segment arrays may have fewer than 3 elements; fall back to home tab.
-  const from = getCurrentTab(segments as string[]);
-
-  const autoApprove = useMemo(() => {
-    return (
-      jellyseerrUser &&
-      hasPermission(Permission.AUTO_APPROVE, jellyseerrUser.permissions, {
-        type: "or",
-      })
-    );
-  }, [jellyseerrApi, jellyseerrUser]);
-
-  const request = useCallback(() => {
-    if (!result) return;
-    requestMedia(mediaTitle, {
-      mediaId: result.id,
-      mediaType,
-    });
-  }, [jellyseerrApi, result]);
+  const from = (segments as string[])[2] || "(home)";
 
   if (from === "(home)" || from === "(search)" || from === "(libraries)")
     return (
-      <ContextMenu.Root>
-        <ContextMenu.Trigger>
-          <TouchableOpacity
-            onPress={() => {
-              if (!result) return;
+      <TouchableOpacity
+        onPress={() => {
+          if (!result) return;
 
-              router.push({
-                pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
-                params: {
-                  mediaTitle,
-                  releaseYear: releaseYear.toString(),
-                  canRequest: canRequest ? "true" : "false",
-                  posterSrc,
-                  mediaType: mediaType.toString(),
-                  id: result.id?.toString?.() ?? undefined,
-                },
-              });
-            }}
-            {...props}
-          >
-            {children}
-          </TouchableOpacity>
-        </ContextMenu.Trigger>
-        <ContextMenu.Content
-          avoidCollisions
-          alignOffset={0}
-          collisionPadding={0}
-          loop={false}
-          key={"content"}
-        >
-          <ContextMenu.Label key='label-1'>Actions</ContextMenu.Label>
-          {canRequest && mediaType === MediaType.MOVIE && (
-            <ContextMenu.Item
-              key='item-1'
-              onSelect={() => {
-                if (autoApprove) {
-                  request();
-                }
-              }}
-              shouldDismissMenuOnSelect
-            >
-              <ContextMenu.ItemTitle key='item-1-title'>
-                Request
-              </ContextMenu.ItemTitle>
-              <ContextMenu.ItemIcon
-                ios={{
-                  name: "arrow.down.to.line",
-                  pointSize: 18,
-                  weight: "semibold",
-                  scale: "medium",
-                  hierarchicalColor: {
-                    dark: "purple",
-                    light: "purple",
-                  },
-                }}
-                androidIconName='download'
-              />
-            </ContextMenu.Item>
-          )}
-        </ContextMenu.Content>
-      </ContextMenu.Root>
+          router.push({
+            pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+            // @ts-expect-error
+            params: {
+              ...result,
+              mediaTitle,
+              releaseYear,
+              canRequest: canRequest.toString(),
+              posterSrc,
+              mediaType,
+            },
+          });
+        }}
+        {...props}
+      >
+        {children}
+      </TouchableOpacity>
     );
+
+  return null;
 };

components/common/Text.tsx

@@ -1,5 +1,5 @@
 import { Platform, Text as RNText, type TextProps } from "react-native";
-export function Text(props: Readonly<TextProps>) {
+export function Text(props: TextProps) {
   const { style, ...otherProps } = props;
   if (Platform.isTV)
     return (

components/common/TouchableItemRouter.tsx

@@ -5,7 +5,6 @@ import { type PropsWithChildren, useCallback } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
 import { useFavorite } from "@/hooks/useFavorite";
 import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
-import { getCurrentTab } from "@/utils/navigation";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
@@ -44,8 +43,47 @@ export const itemRouter = (item: BaseItemDto, from: string) => {
   return `/(auth)/(tabs)/${from}/items/page?id=${item.Id}`;
 };
 
-// Export alias for backward compatibility
-export const getItemNavigation = itemRouter;
+export const getItemNavigation = (item: BaseItemDto, _from: string) => {
+  if ("CollectionType" in item && item.CollectionType === "livetv") {
+    return {
+      pathname: "/livetv" as const,
+    };
+  }
+
+  if (item.Type === "Series") {
+    return {
+      pathname: "/series/[id]" as const,
+      params: { id: item.Id! },
+    };
+  }
+
+  if (item.Type === "Person") {
+    return {
+      pathname: "/persons/[personId]" as const,
+      params: { personId: item.Id! },
+    };
+  }
+
+  if (item.Type === "BoxSet" || item.Type === "UserView") {
+    return {
+      pathname: "/collections/[collectionId]" as const,
+      params: { collectionId: item.Id! },
+    };
+  }
+
+  if (item.Type === "CollectionFolder" || item.Type === "Playlist") {
+    return {
+      pathname: "/[libraryId]" as const,
+      params: { libraryId: item.Id! },
+    };
+  }
+
+  // Default case - items page
+  return {
+    pathname: "/items/page" as const,
+    params: { id: item.Id! },
+  };
+};
 
 export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   item,
@@ -59,7 +97,7 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   const markAsPlayedStatus = useMarkAsPlayed([item]);
   const { isFavorite, toggleFavorite } = useFavorite(item);
 
-  const from = getCurrentTab(segments as string[]);
+  const from = (segments as string[])[2] || "(home)";
 
   const showActionSheet = useCallback(() => {
     if (
@@ -105,11 +143,15 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
       <TouchableOpacity
         onLongPress={showActionSheet}
         onPress={() => {
-          let url = itemRouter(item, from);
           if (isOffline) {
-            url += `&offline=true`;
+            // For offline mode, we still need to use query params
+            const url = `${itemRouter(item, from)}&offline=true`;
+            router.push(url as any);
+            return;
           }
-          router.push(url as `/(auth)/(tabs)/${string}`);
+
+          const navigation = getItemNavigation(item, from);
+          router.push(navigation as any);
         }}
         {...props}
       >

components/downloads/DownloadSize.tsx

@@ -14,7 +14,10 @@ export const DownloadSize: React.FC<DownloadSizeProps> = ({
   ...props
 }) => {
   const { getDownloadedItemSize, getDownloadedItems } = useDownload();
-  const downloadedFiles = getDownloadedItems();
+  const downloadedFiles = useMemo(
+    () => getDownloadedItems(),
+    [getDownloadedItems],
+  );
   const [size, setSize] = useState<string | undefined>();
 
   const itemIds = useMemo(() => items.map((i) => i.Id), [items]);

components/home/HomeIndex.tsx

@@ -1,28 +1,7 @@
-function renderHeaderLeft(hasDownloads: boolean, onPress: () => void) {
-  return (
-    <DownloadsHeaderButton hasDownloads={hasDownloads} onPress={onPress} />
-  );
-}
-// ...imports...
-
-const DownloadsHeaderButton: React.FC<{
-  hasDownloads: boolean;
-  onPress: () => void;
-}> = ({ hasDownloads, onPress }) => (
-  <TouchableOpacity onPress={onPress} className='p-2'>
-    <Feather
-      name='download'
-      color={hasDownloads ? Colors.primary : "white"}
-      size={22}
-    />
-  </TouchableOpacity>
-);
-
 import { Feather, Ionicons } from "@expo/vector-icons";
 import type { Api } from "@jellyfin/sdk";
 import type {
   BaseItemDto,
-  BaseItemDtoQueryResult,
   BaseItemKind,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import {
@@ -58,7 +37,7 @@ import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
-import { AppleTVCarousel } from "../AppleTVCarousel";
+import { AppleTVCarousel } from "../apple-tv-carousel/AppleTVCarousel";
 
 type ScrollingCollectionListSection = {
   type: "ScrollingCollectionList";
@@ -111,6 +90,11 @@ export const HomeIndex = () => {
     prevIsConnected.current = isConnected;
   }, [isConnected, invalidateCache]);
 
+  const hasDownloads = useMemo(() => {
+    if (Platform.isTV) return false;
+    return getDownloadedItems().length > 0;
+  }, [getDownloadedItems]);
+
   useEffect(() => {
     if (Platform.isTV) {
       navigation.setOptions({
@@ -118,12 +102,23 @@ export const HomeIndex = () => {
       });
       return;
     }
-    const hasDownloads = getDownloadedItems().length > 0;
     navigation.setOptions({
-      headerLeft: () =>
-        renderHeaderLeft(hasDownloads, () => router.push("/(auth)/downloads")),
+      headerLeft: () => (
+        <TouchableOpacity
+          onPress={() => {
+            router.push("/(auth)/downloads");
+          }}
+          className='p-2'
+        >
+          <Feather
+            name='download'
+            color={hasDownloads ? Colors.primary : "white"}
+            size={22}
+          />
+        </TouchableOpacity>
+      ),
     });
-  }, [navigation, router]);
+  }, [navigation, router, hasDownloads]);
 
   useEffect(() => {
     cleanCacheDirectory().catch((_e) =>
@@ -131,7 +126,7 @@ export const HomeIndex = () => {
     );
   }, []);
 
-  const segments = useSegments() as string[];
+  const segments = useSegments();
   useEffect(() => {
     const unsubscribe = eventBus.on("scrollToTop", () => {
       if ((segments as string[])[2] === "(home)")
@@ -326,10 +321,10 @@ export const HomeIndex = () => {
     if (!api || !user?.Id || !settings?.home?.sections) return [];
     const ss: Section[] = [];
     for (const [index, section] of settings.home.sections.entries()) {
-      const id = `section-${index}`;
+      const id = section.title || `section-${index}`;
       ss.push({
         title: t(`${id}`),
-        queryKey: ["home", id],
+        queryKey: ["home", "custom", String(index), section.title ?? null],
         queryFn: async () => {
           if (section.items) {
             const response = await getItemsApi(api).getItems({
@@ -365,16 +360,6 @@ export const HomeIndex = () => {
             });
             return response.data || [];
           }
-          if (section.custom) {
-            const response = await api.get<BaseItemDtoQueryResult>(
-              section.custom.endpoint,
-              {
-                params: { ...(section.custom.query || {}), userId: user?.Id },
-                headers: section.custom.headers || {},
-              },
-            );
-            return response.data.Items || [];
-          }
           return [];
         },
         type: "ScrollingCollectionList",
@@ -387,8 +372,8 @@ export const HomeIndex = () => {
   const sections = settings?.home?.sections ? customSections : defaultSections;
 
   if (!isConnected || serverConnected !== true) {
-    let title: string = "";
-    let subtitle: string = "";
+    let title = "";
+    let subtitle = "";
 
     if (!isConnected) {
       // No network connection

components/home/LargeMovieCarousel.tsx

@@ -21,8 +21,7 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { getCurrentTab } from "@/utils/navigation";
-import { itemRouter } from "../common/TouchableItemRouter";
+import { getItemNavigation } from "../common/TouchableItemRouter";
 
 interface Props extends ViewProps {}
 
@@ -148,16 +147,16 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
     return getLogoImageUrlById({ api, item, height: 100 });
   }, [item]);
 
-  const segments = useSegments() as string[];
-  const from = getCurrentTab(segments);
+  const segments = useSegments();
+  const from = (segments as string[])[2] || "(home)";
 
   const opacity = useSharedValue(1);
 
   const handleRoute = useCallback(() => {
     if (!from) return;
-    const url = itemRouter(item, from);
     lightHapticFeedback();
-    if (url) router.push(url as any);
+    const navigation = getItemNavigation(item, from);
+    router.push(navigation as any);
   }, [item, from]);
 
   const tap = Gesture.Tap()

components/inputs/PinInput.tsx

@@ -4,16 +4,18 @@ import {
   type StyleProp,
   StyleSheet,
   Text,
+  type TextInputProps,
   View,
   type ViewStyle,
 } from "react-native";
 
-interface PinInputProps {
-  readonly length: number;
-  readonly value: string;
-  readonly onChangeText: (text: string) => void;
-  readonly style?: StyleProp<ViewStyle>;
-  readonly autoFocus?: boolean;
+interface PinInputProps
+  extends Omit<TextInputProps, "value" | "onChangeText" | "style"> {
+  value: string;
+  onChangeText: (text: string) => void;
+  length?: number;
+  autoFocus?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 export interface PinInputRef {
@@ -63,7 +65,7 @@ const PinInputComponent = React.forwardRef<PinInputRef, PinInputProps>(
             .fill(0)
             .map((_, i) => (
               <View
-                key={`pin-input-cell-${i}-${length}`}
+                key={i}
                 style={[
                   styles.cell,
                   i === activeIndex && styles.activeCell,

components/jellyseerr/ParallaxSlideShow.tsx

@@ -18,9 +18,7 @@ const BACKDROP_DURATION = 5000;
 
 type Render = React.ComponentType<any> | React.ReactElement | null | undefined;
 
-const ItemSeparator = () => <View className='h-2 w-2' />;
-
-interface ParallaxSlideShowProps<T> {
+interface Props<T> {
   data: T[];
   images: string[];
   logo?: React.ReactElement;
@@ -29,7 +27,7 @@ interface ParallaxSlideShowProps<T> {
   listHeader: string;
   renderItem: (item: T, index: number) => Render;
   keyExtractor: (item: T) => string;
-  onEndReached?: (() => void) | null;
+  onEndReached?: (() => void) | null | undefined;
 }
 
 const ParallaxSlideShow = <T,>({
@@ -42,7 +40,7 @@ const ParallaxSlideShow = <T,>({
   renderItem,
   keyExtractor,
   onEndReached,
-}: PropsWithChildren<ParallaxSlideShowProps<T> & ViewProps>) => {
+}: PropsWithChildren<Props<T> & ViewProps>) => {
   const insets = useSafeAreaInsets();
 
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -68,21 +66,15 @@ const ParallaxSlideShow = <T,>({
     [fadeAnim],
   );
 
-  const handleAnimationComplete = useCallback(() => {
-    fadeAnim.setValue(0);
-    setCurrentIndex((prevIndex) => (prevIndex + 1) % images?.length);
-  }, [fadeAnim, images?.length, setCurrentIndex]);
-
-  const createSlideSequence = useCallback(() => {
-    return Animated.sequence([enterAnimation(), exitAnimation()]);
-  }, [enterAnimation, exitAnimation]);
-
   useEffect(() => {
     if (images?.length) {
       enterAnimation().start();
 
       const intervalId = setInterval(() => {
-        createSlideSequence().start(handleAnimationComplete);
+        Animated.sequence([enterAnimation(), exitAnimation()]).start(() => {
+          fadeAnim.setValue(0);
+          setCurrentIndex((prevIndex) => (prevIndex + 1) % images?.length);
+        });
       }, BACKDROP_DURATION);
 
       return () => {
@@ -96,8 +88,6 @@ const ParallaxSlideShow = <T,>({
     exitAnimation,
     setCurrentIndex,
     currentIndex,
-    createSlideSequence,
-    handleAnimationComplete,
   ]);
 
   return (
@@ -149,20 +139,12 @@ const ParallaxSlideShow = <T,>({
               }
               nestedScrollEnabled
               showsVerticalScrollIndicator={false}
-              renderItem={({ item, index }) => {
-                const rendered = renderItem(item as any, index);
-                if (!rendered) return null;
-                // If the result is a component type, instantiate it
-                if (typeof rendered === "function") {
-                  const Comp: any = rendered;
-                  return <Comp />;
-                }
-                return rendered as React.ReactElement;
-              }}
+              //@ts-expect-error
+              renderItem={({ item, index }) => renderItem(item, index)}
               keyExtractor={keyExtractor}
               numColumns={3}
               estimatedItemSize={214}
-              ItemSeparatorComponent={ItemSeparator}
+              ItemSeparatorComponent={() => <View className='h-2 w-2' />}
             />
           </View>
         </View>

components/jellyseerr/PersonPoster.tsx

@@ -4,7 +4,6 @@ import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 import Poster from "@/components/posters/Poster";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { getCurrentTab } from "@/utils/navigation";
 
 interface Props {
   id: string;
@@ -22,8 +21,8 @@ const PersonPoster: React.FC<Props & ViewProps> = ({
 }) => {
   const { jellyseerrApi } = useJellyseerr();
   const router = useRouter();
-  const segments = useSegments() as string[];
-  const from = getCurrentTab(segments);
+  const segments = useSegments();
+  const from = (segments as string[])[2] || "(home)";
 
   if (from === "(home)" || from === "(search)" || from === "(libraries)")
     return (

components/jellyseerr/RequestModal.tsx

@@ -8,10 +8,10 @@ import type { BottomSheetModalMethods } from "@gorhom/bottom-sheet/lib/typescrip
 import { useQuery } from "@tanstack/react-query";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { View, type ViewProps } from "react-native";
+import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { Button } from "@/components/Button";
-import Dropdown from "@/components/common/Dropdown";
 import { Text } from "@/components/common/Text";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import type {
   QualityProfile,
@@ -138,6 +138,115 @@ const RequestModal = forwardRef<
       });
     }, [requestBody?.seasons]);
 
+    const pathTitleExtractor = (item: RootFolder) =>
+      `${item.path} (${item.freeSpace.bytesToReadable()})`;
+
+    const qualityProfileOptions = useMemo(
+      () => [
+        {
+          title: t("jellyseerr.quality_profile"),
+          options:
+            defaultServiceDetails?.profiles.map((profile) => ({
+              type: "radio" as const,
+              label: profile.name,
+              value: profile.id.toString(),
+              selected:
+                (requestOverrides.profileId || defaultProfile?.id) ===
+                profile.id,
+              onPress: () =>
+                setRequestOverrides((prev) => ({
+                  ...prev,
+                  profileId: profile.id,
+                })),
+            })) || [],
+        },
+      ],
+      [
+        defaultServiceDetails?.profiles,
+        defaultProfile,
+        requestOverrides.profileId,
+        t,
+      ],
+    );
+
+    const rootFolderOptions = useMemo(
+      () => [
+        {
+          title: t("jellyseerr.root_folder"),
+          options:
+            defaultServiceDetails?.rootFolders.map((folder) => ({
+              type: "radio" as const,
+              label: pathTitleExtractor(folder),
+              value: folder.id.toString(),
+              selected:
+                (requestOverrides.rootFolder || defaultFolder?.path) ===
+                folder.path,
+              onPress: () =>
+                setRequestOverrides((prev) => ({
+                  ...prev,
+                  rootFolder: folder.path,
+                })),
+            })) || [],
+        },
+      ],
+      [
+        defaultServiceDetails?.rootFolders,
+        defaultFolder,
+        requestOverrides.rootFolder,
+        t,
+      ],
+    );
+
+    const tagsOptions = useMemo(
+      () => [
+        {
+          title: t("jellyseerr.tags"),
+          options:
+            defaultServiceDetails?.tags.map((tag) => ({
+              type: "toggle" as const,
+              label: tag.label,
+              value:
+                requestOverrides.tags?.includes(tag.id) ||
+                defaultTags.some((dt) => dt.id === tag.id),
+              onToggle: () =>
+                setRequestOverrides((prev) => {
+                  const currentTags = prev.tags || defaultTags.map((t) => t.id);
+                  const hasTag = currentTags.includes(tag.id);
+                  return {
+                    ...prev,
+                    tags: hasTag
+                      ? currentTags.filter((id) => id !== tag.id)
+                      : [...currentTags, tag.id],
+                  };
+                }),
+            })) || [],
+        },
+      ],
+      [defaultServiceDetails?.tags, defaultTags, requestOverrides.tags, t],
+    );
+
+    const usersOptions = useMemo(
+      () => [
+        {
+          title: t("jellyseerr.request_as"),
+          options:
+            users?.map((user) => ({
+              type: "radio" as const,
+              label: user.displayName,
+              value: user.id.toString(),
+              selected:
+                (requestOverrides.userId || jellyseerrUser?.id) === user.id,
+              onPress: () =>
+                setRequestOverrides((prev) => ({
+                  ...prev,
+                  userId: user.id,
+                })),
+            })) || [],
+        },
+      ],
+      [users, jellyseerrUser, requestOverrides.userId, t],
+    );
+
     const request = useCallback(() => {
       const body = {
         is4k: defaultService?.is4k || defaultServiceDetails?.server.is4k,
@@ -163,9 +272,6 @@ const RequestModal = forwardRef<
       defaultTags,
     ]);
 
-    const pathTitleExtractor = (item: RootFolder) =>
-      `${item.path} (${item.freeSpace.bytesToReadable()})`;
-
     return (
       <BottomSheetModal
         ref={ref}
@@ -199,70 +305,104 @@ const RequestModal = forwardRef<
             <View className='flex flex-col space-y-2'>
               {defaultService && defaultServiceDetails && users && (
                 <>
-                  <Dropdown
-                    data={defaultServiceDetails.profiles}
-                    titleExtractor={(item) => item.name}
-                    placeholderText={
-                      requestOverrides.profileName || defaultProfile.name
-                    }
-                    keyExtractor={(item) => item.id.toString()}
-                    label={t("jellyseerr.quality_profile")}
-                    onSelected={(item) =>
-                      item &&
-                      setRequestOverrides((prev) => ({
-                        ...prev,
-                        profileId: item?.id,
-                      }))
-                    }
-                    title={t("jellyseerr.quality_profile")}
-                  />
-                  <Dropdown
-                    data={defaultServiceDetails.rootFolders}
-                    titleExtractor={pathTitleExtractor}
-                    placeholderText={
-                      defaultFolder ? pathTitleExtractor(defaultFolder) : ""
-                    }
-                    keyExtractor={(item) => item.id.toString()}
-                    label={t("jellyseerr.root_folder")}
-                    onSelected={(item) =>
-                      item &&
-                      setRequestOverrides((prev) => ({
-                        ...prev,
-                        rootFolder: item.path,
-                      }))
-                    }
-                    title={t("jellyseerr.root_folder")}
-                  />
-                  <Dropdown
-                    multiple
-                    data={defaultServiceDetails.tags}
-                    titleExtractor={(item) => item.label}
-                    placeholderText={defaultTags.map((t) => t.label).join(",")}
-                    keyExtractor={(item) => item.id.toString()}
-                    label={t("jellyseerr.tags")}
-                    onSelected={(...selected) =>
-                      setRequestOverrides((prev) => ({
-                        ...prev,
-                        tags: selected.map((i) => i.id),
-                      }))
-                    }
-                    title={t("jellyseerr.tags")}
-                  />
-                  <Dropdown
-                    data={users}
-                    titleExtractor={(item) => item.displayName}
-                    placeholderText={jellyseerrUser!.displayName}
-                    keyExtractor={(item) => item.id.toString() || ""}
-                    label={t("jellyseerr.request_as")}
-                    onSelected={(item) =>
-                      item &&
-                      setRequestOverrides((prev) => ({
-                        ...prev,
-                        userId: item?.id,
-                      }))
-                    }
-                    title={t("jellyseerr.request_as")}
-                  />
+                  <View className='flex flex-col'>
+                    <Text className='opacity-50 mb-1 text-xs'>
+                      {t("jellyseerr.quality_profile")}
+                    </Text>
+                    <PlatformDropdown
+                      groups={qualityProfileOptions}
+                      trigger={
+                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                          <Text numberOfLines={1}>
+                            {defaultServiceDetails.profiles.find(
+                              (p) =>
+                                p.id ===
+                                (requestOverrides.profileId ||
+                                  defaultProfile?.id),
+                            )?.name || defaultProfile?.name}
+                          </Text>
+                        </TouchableOpacity>
+                      }
+                      title={t("jellyseerr.quality_profile")}
+                    />
+                  </View>
+
+                  <View className='flex flex-col'>
+                    <Text className='opacity-50 mb-1 text-xs'>
+                      {t("jellyseerr.root_folder")}
+                    </Text>
+                    <PlatformDropdown
+                      groups={rootFolderOptions}
+                      trigger={
+                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                          <Text numberOfLines={1}>
+                            {defaultServiceDetails.rootFolders.find(
+                              (f) =>
+                                f.path ===
+                                (requestOverrides.rootFolder ||
+                                  defaultFolder?.path),
+                            )
+                              ? pathTitleExtractor(
+                                  defaultServiceDetails.rootFolders.find(
+                                    (f) =>
+                                      f.path ===
+                                      (requestOverrides.rootFolder ||
+                                        defaultFolder?.path),
+                                  )!,
+                                )
+                              : pathTitleExtractor(defaultFolder!)}
+                          </Text>
+                        </TouchableOpacity>
+                      }
+                      title={t("jellyseerr.root_folder")}
+                    />
+                  </View>
+
+                  <View className='flex flex-col'>
+                    <Text className='opacity-50 mb-1 text-xs'>
+                      {t("jellyseerr.tags")}
+                    </Text>
+                    <PlatformDropdown
+                      groups={tagsOptions}
+                      trigger={
+                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                          <Text numberOfLines={1}>
+                            {requestOverrides.tags
+                              ? defaultServiceDetails.tags
+                                  .filter((t) =>
+                                    requestOverrides.tags!.includes(t.id),
+                                  )
+                                  .map((t) => t.label)
+                                  .join(", ") ||
+                                defaultTags.map((t) => t.label).join(", ")
+                              : defaultTags.map((t) => t.label).join(", ")}
+                          </Text>
+                        </TouchableOpacity>
+                      }
+                      title={t("jellyseerr.tags")}
+                    />
+                  </View>
+
+                  <View className='flex flex-col'>
+                    <Text className='opacity-50 mb-1 text-xs'>
+                      {t("jellyseerr.request_as")}
+                    </Text>
+                    <PlatformDropdown
+                      groups={usersOptions}
+                      trigger={
+                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                          <Text numberOfLines={1}>
+                            {users.find(
+                              (u) =>
+                                u.id ===
+                                (requestOverrides.userId || jellyseerrUser?.id),
+                            )?.displayName || jellyseerrUser!.displayName}
+                          </Text>
+                        </TouchableOpacity>
+                      }
+                      title={t("jellyseerr.request_as")}
+                    />
+                  </View>
                 </>
               )}
             </View>

components/jellyseerr/discover/CompanySlide.tsx

@@ -10,14 +10,13 @@ import {
   type Network,
 } from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
 import type { Studio } from "@/utils/jellyseerr/src/components/Discover/StudioSlider";
-import { getCurrentTab } from "@/utils/navigation";
 
 const CompanySlide: React.FC<
   { data: Network[] | Studio[] } & SlideProps & ViewProps
 > = ({ slide, data, ...props }) => {
-  const segments = useSegments() as string[];
+  const segments = useSegments();
   const { jellyseerrApi } = useJellyseerr();
-  const from = getCurrentTab(segments);
+  const from = (segments as string[])[2] || "(home)";
 
   const navigate = useCallback(
     ({ id, image, name }: Network | Studio) =>

components/jellyseerr/discover/GenericSlideCard.tsx

@@ -34,34 +34,37 @@ const GenericSlideCard: React.FC<
   contentFit = "contain",
   ...props
 }) => (
-  <LinearGradient
-    colors={colors}
-    start={{ x: 0.5, y: 1.75 }}
-    end={{ x: 0.5, y: 0 }}
-    className='rounded-xl'
-  >
-    <View className='rounded-xl' {...props}>
-      <Image
-        key={id}
-        id={id}
-        source={url ? { uri: url } : null}
-        cachePolicy={"memory-disk"}
-        contentFit={contentFit}
-        style={{
-          aspectRatio: "4/3",
-        }}
-      />
-      {title && (
-        <View className='absolute justify-center top-0 left-0 right-0 bottom-0 items-center'>
-          <Text
-            className='text-center font-bold'
-            style={textShadowStyle.shadow}
-          >
-            {title}
-          </Text>
-        </View>
-      )}
-    </View>
-  </LinearGradient>
+  <>
+    <LinearGradient
+      colors={colors}
+      start={{ x: 0.5, y: 1.75 }}
+      end={{ x: 0.5, y: 0 }}
+      className='rounded-xl'
+    >
+      <View className='rounded-xl' {...props}>
+        <Image
+          key={id}
+          id={id}
+          source={url ? { uri: url } : null}
+          cachePolicy={"memory-disk"}
+          contentFit={contentFit}
+          style={{
+            aspectRatio: "4/3",
+          }}
+        />
+        {title && (
+          <View className='absolute justify-center top-0 left-0 right-0 bottom-0 items-center'>
+            <Text
+              className='text-center font-bold'
+              style={textShadowStyle.shadow}
+            >
+              {title}
+            </Text>
+          </View>
+        )}
+      </View>
+    </LinearGradient>
+  </>
 );
+
 export default GenericSlideCard;

components/jellyseerr/discover/GenreSlide.tsx

@@ -9,12 +9,11 @@ import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 import type { GenreSliderItem } from "@/utils/jellyseerr/server/interfaces/api/discoverInterfaces";
 import { genreColorMap } from "@/utils/jellyseerr/src/components/Discover/constants";
-import { getCurrentTab } from "@/utils/navigation";
 
 const GenreSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) => {
-  const segments = useSegments() as string[];
+  const segments = useSegments();
   const { jellyseerrApi } = useJellyseerr();
-  const from = getCurrentTab(segments);
+  const from = (segments as string[])[2] || "(home)";
 
   const navigate = useCallback(
     (genre: GenreSliderItem) =>

components/jellyseerr/discover/RecentRequestsSlide.tsx

@@ -6,8 +6,16 @@ import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 import type MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
+import type { NonFunctionProperties } from "@/utils/jellyseerr/server/interfaces/api/common";
 
-const RequestCard: React.FC<{ request: MediaRequest }> = ({ request }) => {
+type ExtendedMediaRequest = NonFunctionProperties<MediaRequest> & {
+  profileName: string;
+  canRemove: boolean;
+};
+
+const RequestCard: React.FC<{ request: ExtendedMediaRequest }> = ({
+  request,
+}) => {
   const { jellyseerrApi } = useJellyseerr();
 
   const { data: details } = useQuery({
@@ -66,9 +74,17 @@ const RecentRequestsSlide: React.FC<SlideProps & ViewProps> = ({
       <Slide
         {...props}
         slide={slide}
-        data={requests.results as MediaRequest[]}
+        data={
+          requests.results.map((item) => ({
+            ...item,
+            profileName: item.profileName ?? "Unknown",
+            canRemove: Boolean(item.canRemove),
+          })) as ExtendedMediaRequest[]
+        }
         keyExtractor={(item) => item.id.toString()}
-        renderItem={(item: MediaRequest) => <RequestCard request={item} />}
+        renderItem={(item: ExtendedMediaRequest) => (
+          <RequestCard request={item} />
+        )}
       />
     )
   );

components/jellyseerr/discover/Slide.tsx

@@ -20,7 +20,7 @@ interface Props<T> extends SlideProps {
     index: number,
   ) => React.ComponentType<any> | React.ReactElement | null | undefined;
   keyExtractor: (item: T) => string;
-  onEndReached?: (() => void) | null;
+  onEndReached?: (() => void) | null | undefined;
 }
 
 const Slide = <T,>({
@@ -41,7 +41,7 @@ const Slide = <T,>({
         horizontal
         contentContainerStyle={{
           paddingHorizontal: 16,
-          ...(contentContainerStyle ?? {}),
+          ...(contentContainerStyle ? contentContainerStyle : {}),
         }}
         showsHorizontalScrollIndicator={false}
         keyExtractor={keyExtractor}
@@ -49,16 +49,10 @@ const Slide = <T,>({
         data={data}
         onEndReachedThreshold={1}
         onEndReached={onEndReached}
-        renderItem={({ item, index }) => {
-          if (!item) return null;
-          const rendered = renderItem(item, index);
-          if (!rendered) return null;
-          if (typeof rendered === "function") {
-            const Comp: any = rendered;
-            return <Comp />;
-          }
-          return rendered;
-        }}
+        //@ts-expect-error
+        renderItem={({ item, index }) =>
+          item ? renderItem(item, index) : null
+        }
       />
     </View>
   );

components/posters/JellyseerrPoster.tsx

@@ -16,10 +16,7 @@ import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
 import { Colors } from "@/constants/Colors";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
-import {
-  MediaStatus,
-  MediaType,
-} from "@/utils/jellyseerr/server/constants/media";
+import { MediaStatus } from "@/utils/jellyseerr/server/constants/media";
 import type MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
 import type { DownloadingItem } from "@/utils/jellyseerr/server/lib/downloadtracker";
 import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
@@ -126,11 +123,11 @@ const JellyseerrPoster: React.FC<Props> = ({
   return (
     <TouchableJellyseerrRouter
       result={item}
-      mediaTitle={title || ""}
+      mediaTitle={title}
       releaseYear={releaseYear}
       canRequest={canRequest}
-      posterSrc={posterSrc || ""}
-      mediaType={mediaType || MediaType.MOVIE}
+      posterSrc={posterSrc!}
+      mediaType={mediaType}
     >
       <View className={"flex flex-col mr-2 h-auto"}>
         <View
@@ -194,7 +191,7 @@ const JellyseerrPoster: React.FC<Props> = ({
           />
           <JellyseerrMediaIcon
             className='absolute top-1 left-1'
-            mediaType={mediaType as "movie" | "tv"}
+            mediaType={mediaType}
           />
         </View>
       </View>

components/search/DiscoverFilters.tsx

@@ -0,0 +1,115 @@
+import { Button, ContextMenu, Host, Picker } from "@expo/ui/swift-ui";
+import { Platform, View } from "react-native";
+import { FilterButton } from "@/components/filters/FilterButton";
+import { JellyseerrSearchSort } from "@/components/jellyseerr/JellyseerrIndexPage";
+
+interface DiscoverFiltersProps {
+  searchFilterId: string;
+  orderFilterId: string;
+  jellyseerrOrderBy: JellyseerrSearchSort;
+  setJellyseerrOrderBy: (value: JellyseerrSearchSort) => void;
+  jellyseerrSortOrder: "asc" | "desc";
+  setJellyseerrSortOrder: (value: "asc" | "desc") => void;
+  t: (key: string) => string;
+}
+
+const sortOptions = Object.keys(JellyseerrSearchSort).filter((v) =>
+  Number.isNaN(Number(v)),
+);
+
+const orderOptions = ["asc", "desc"] as const;
+
+export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
+  searchFilterId,
+  orderFilterId,
+  jellyseerrOrderBy,
+  setJellyseerrOrderBy,
+  jellyseerrSortOrder,
+  setJellyseerrSortOrder,
+  t,
+}) => {
+  if (Platform.OS === "ios") {
+    return (
+      <Host
+        style={{
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "visible",
+          height: 40,
+          width: 50,
+          marginLeft: "auto",
+        }}
+      >
+        <ContextMenu>
+          <ContextMenu.Trigger>
+            <Button
+              variant='glass'
+              modifiers={[]}
+              systemImage='line.3.horizontal.decrease.circle'
+            ></Button>
+          </ContextMenu.Trigger>
+          <ContextMenu.Items>
+            <Picker
+              label={t("library.filters.sort_by")}
+              options={sortOptions.map((item) =>
+                t(`home.settings.plugins.jellyseerr.order_by.${item}`),
+              )}
+              variant='menu'
+              selectedIndex={sortOptions.indexOf(
+                jellyseerrOrderBy as unknown as string,
+              )}
+              onOptionSelected={(event: any) => {
+                const index = event.nativeEvent.index;
+                setJellyseerrOrderBy(
+                  sortOptions[index] as unknown as JellyseerrSearchSort,
+                );
+              }}
+            />
+            <Picker
+              label={t("library.filters.sort_order")}
+              options={orderOptions.map((item) => t(`library.filters.${item}`))}
+              variant='menu'
+              selectedIndex={orderOptions.indexOf(jellyseerrSortOrder)}
+              onOptionSelected={(event: any) => {
+                const index = event.nativeEvent.index;
+                setJellyseerrSortOrder(orderOptions[index]);
+              }}
+            />
+          </ContextMenu.Items>
+        </ContextMenu>
+      </Host>
+    );
+  }
+
+  // Android UI
+  return (
+    <View className='flex flex-row justify-end items-center space-x-1'>
+      <FilterButton
+        id={searchFilterId}
+        queryKey='jellyseerr_search'
+        queryFn={async () =>
+          Object.keys(JellyseerrSearchSort).filter((v) =>
+            Number.isNaN(Number(v)),
+          )
+        }
+        set={(value) => setJellyseerrOrderBy(value[0])}
+        values={[jellyseerrOrderBy]}
+        title={t("library.filters.sort_by")}
+        renderItemLabel={(item) =>
+          t(`home.settings.plugins.jellyseerr.order_by.${item}`)
+        }
+        disableSearch={true}
+      />
+      <FilterButton
+        id={orderFilterId}
+        queryKey='jellysearr_search'
+        queryFn={async () => ["asc", "desc"]}
+        set={(value) => setJellyseerrSortOrder(value[0])}
+        values={[jellyseerrSortOrder]}
+        title={t("library.filters.sort_order")}
+        renderItemLabel={(item) => t(`library.filters.${item}`)}
+        disableSearch={true}
+      />
+    </View>
+  );
+};

components/search/SearchTabButtons.tsx

@@ -0,0 +1,76 @@
+import { Button, Host } from "@expo/ui/swift-ui";
+import { Platform, TouchableOpacity, View } from "react-native";
+import { Tag } from "@/components/GenreTags";
+
+type SearchType = "Library" | "Discover";
+
+interface SearchTabButtonsProps {
+  searchType: SearchType;
+  setSearchType: (type: SearchType) => void;
+  t: (key: string) => string;
+}
+
+export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
+  searchType,
+  setSearchType,
+  t,
+}) => {
+  if (Platform.OS === "ios") {
+    return (
+      <>
+        <Host
+          style={{
+            height: 40,
+            width: 80,
+            flexDirection: "row",
+            gap: 10,
+            justifyContent: "space-between",
+          }}
+        >
+          <Button
+            variant={searchType === "Library" ? "glassProminent" : "glass"}
+            onPress={() => setSearchType("Library")}
+          >
+            {t("search.library")}
+          </Button>
+        </Host>
+        <Host
+          style={{
+            height: 40,
+            width: 100,
+            flexDirection: "row",
+            gap: 10,
+            justifyContent: "space-between",
+          }}
+        >
+          <Button
+            variant={searchType === "Discover" ? "glassProminent" : "glass"}
+            onPress={() => setSearchType("Discover")}
+          >
+            {t("search.discover")}
+          </Button>
+        </Host>
+      </>
+    );
+  }
+
+  // Android UI
+  return (
+    <View className='flex flex-row gap-1 mr-1'>
+      <TouchableOpacity onPress={() => setSearchType("Library")}>
+        <Tag
+          text={t("search.library")}
+          textClass='p-1'
+          className={searchType === "Library" ? "bg-purple-600" : undefined}
+        />
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => setSearchType("Discover")}>
+        <Tag
+          text={t("search.discover")}
+          textClass='p-1'
+          className={searchType === "Discover" ? "bg-purple-600" : undefined}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};

components/series/CastAndCrew.tsx

@@ -10,10 +10,8 @@ import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { getCurrentTab } from "@/utils/navigation";
 import { HorizontalScroll } from "../common/HorizontalScroll";
 import { Text } from "../common/Text";
-import { itemRouter } from "../common/TouchableItemRouter";
 import Poster from "../posters/Poster";
 
 interface Props extends ViewProps {
@@ -23,9 +21,9 @@ interface Props extends ViewProps {
 
 export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
   const [api] = useAtom(apiAtom);
-  const segments = useSegments() as string[];
+  const segments = useSegments();
   const { t } = useTranslation();
-  const from = getCurrentTab(segments);
+  const from = (segments as string[])[2];
 
   const destinctPeople = useMemo(() => {
     const people: Record<string, BaseItemPerson> = {};
@@ -57,14 +55,12 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
         renderItem={(i) => (
           <TouchableOpacity
             onPress={() => {
-              const url = itemRouter(
-                {
-                  Id: i.Id,
-                  Type: "Person",
-                },
-                from,
-              );
-              router.push(url as any);
+              if (i.Id) {
+                router.push({
+                  pathname: "/persons/[personId]",
+                  params: { personId: i.Id },
+                });
+              }
             }}
             className='flex flex-col w-28'
           >

components/series/SeasonDropdown.tsx

@@ -1,11 +1,9 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useMemo } from "react";
-import { Platform, TouchableOpacity, View } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import { t } from "i18next";
+import { useEffect, useMemo } from "react";
+import { Platform, View } from "react-native";
 import { Text } from "../common/Text";
+import { PlatformDropdown } from "../PlatformDropdown";
 
 type Props = {
   item: BaseItemDto;
@@ -55,6 +53,32 @@ export const SeasonDropdown: React.FC<Props> = ({
     [state, item, keys],
   );
 
+  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) =>
+    Number(a[keys.index]) - Number(b[keys.index]);
+
+  const optionGroups = useMemo(
+    () => [
+      {
+        title: t("item_card.seasons"),
+        options:
+          seasons?.sort(sortByIndex).map((season: any) => {
+            const title =
+              season[keys.title] ||
+              season.Name ||
+              `Season ${season.IndexNumber}`;
+            return {
+              type: "radio" as const,
+              label: title,
+              value: season.Id || season.IndexNumber,
+              selected: Number(season[keys.index]) === Number(seasonIndex),
+              onPress: () => onSelect(season),
+            };
+          }) || [],
+      },
+    ],
+    [seasons, keys, seasonIndex, onSelect],
+  );
+
   useEffect(() => {
     if (isTv) return;
     if (seasons && seasons.length > 0 && seasonIndex === undefined) {
@@ -96,45 +120,19 @@ export const SeasonDropdown: React.FC<Props> = ({
     keys,
   ]);
 
-  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) =>
-    Number(a[keys.index]) - Number(b[keys.index]);
-
   if (isTv) return null;
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <View className='flex flex-row'>
-          <TouchableOpacity className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
-            <Text>
-              {t("item_card.season")} {seasonIndex}
-            </Text>
-          </TouchableOpacity>
+    <PlatformDropdown
+      groups={optionGroups}
+      trigger={
+        <View className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
+          <Text>
+            {t("item_card.season")} {seasonIndex}
+          </Text>
         </View>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content
-        loop={true}
-        side='bottom'
-        align='start'
-        alignOffset={0}
-        avoidCollisions={true}
-        collisionPadding={8}
-        sideOffset={8}
-      >
-        <DropdownMenu.Label>{t("item_card.seasons")}</DropdownMenu.Label>
-        {seasons?.sort(sortByIndex).map((season: any) => {
-          const title =
-            season[keys.title] || season.Name || `Season ${season.IndexNumber}`;
-          return (
-            <DropdownMenu.Item
-              key={season.Id || season.IndexNumber}
-              onSelect={() => onSelect(season)}
-            >
-              <DropdownMenu.ItemTitle>{title}</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          );
-        })}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+      }
+      title={t("item_card.seasons")}
+    />
   );
 };

components/series/SeasonEpisodesCarousel.tsx

@@ -29,7 +29,10 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const { getDownloadedItems } = useDownload();
-  const downloadedFiles = getDownloadedItems();
+  const downloadedFiles = useMemo(
+    () => getDownloadedItems(),
+    [getDownloadedItems],
+  );
 
   const scrollRef = useRef<HorizontalScrollRef>(null);
 

components/series/SeasonPicker.tsx

@@ -1,14 +1,7 @@
-const MissingDownloadIconComponent = () => (
-  <Ionicons name='download' size={20} color='white' />
-);
-const DownloadedIconComponent = () => (
-  <Ionicons name='download' size={20} color='#9333ea' />
-);
-
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -77,7 +70,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
 
     if (!season?.Id) return null;
 
-    return season.Id;
+    return season.Id!;
   }, [seasons, seasonIndex]);
 
   const { data: episodes, isPending } = useQuery({
@@ -107,8 +100,6 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
     enabled: !!api && !!user?.Id && !!item.Id && !!selectedSeasonId,
   });
 
-  const _queryClient = useQueryClient();
-
   // Used for height calculation
   const [nrOfEpisodes, setNrOfEpisodes] = useState(0);
   useEffect(() => {
@@ -142,8 +133,12 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
               title={t("item_card.download.download_season")}
               className='ml-2'
               items={episodes || []}
-              MissingDownloadIconComponent={MissingDownloadIconComponent}
-              DownloadedIconComponent={DownloadedIconComponent}
+              MissingDownloadIconComponent={() => (
+                <Ionicons name='download' size={20} color='white' />
+              )}
+              DownloadedIconComponent={() => (
+                <Ionicons name='download' size={20} color='#9333ea' />
+              )}
             />
             <PlayedStatus items={episodes || []} />
           </View>

components/settings/AppLanguageSelector.tsx

@@ -1,12 +1,12 @@
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
+import { Platform, View, type ViewProps } from "react-native";
 import { APP_LANGUAGES } from "@/i18n";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
+import { PlatformDropdown } from "../PlatformDropdown";
 
 interface Props extends ViewProps {}
 
@@ -15,6 +15,31 @@ export const AppLanguageSelector: React.FC<Props> = () => {
   const { settings, updateSettings } = useSettings();
   const { t } = useTranslation();
 
+  const optionGroups = useMemo(() => {
+    const options = [
+      {
+        type: "radio" as const,
+        label: t("home.settings.languages.system"),
+        value: "system",
+        selected: !settings?.preferedLanguage,
+        onPress: () => updateSettings({ preferedLanguage: undefined }),
+      },
+      ...APP_LANGUAGES.map((lang) => ({
+        type: "radio" as const,
+        label: lang.label,
+        value: lang.value,
+        selected: lang.value === settings?.preferedLanguage,
+        onPress: () => updateSettings({ preferedLanguage: lang.value }),
+      })),
+    ];
+
+    return [
+      {
+        options,
+      },
+    ];
+  }, [settings?.preferedLanguage, t, updateSettings]);
+
   if (isTv) return null;
   if (!settings) return null;
 
@@ -22,54 +47,19 @@ export const AppLanguageSelector: React.FC<Props> = () => {
     <View>
       <ListGroup title={t("home.settings.languages.title")}>
         <ListItem title={t("home.settings.languages.app_language")}>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TouchableOpacity className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
+          <PlatformDropdown
+            groups={optionGroups}
+            trigger={
+              <View className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
                 <Text>
                   {APP_LANGUAGES.find(
                     (l) => l.value === settings?.preferedLanguage,
                   )?.label || t("home.settings.languages.system")}
                 </Text>
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side='bottom'
-              align='start'
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>
-                {t("home.settings.languages.title")}
-              </DropdownMenu.Label>
-              <DropdownMenu.Item
-                key={"unknown"}
-                onSelect={() => {
-                  updateSettings({
-                    preferedLanguage: undefined,
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {t("home.settings.languages.system")}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              {APP_LANGUAGES?.map((l) => (
-                <DropdownMenu.Item
-                  key={l?.value ?? "unknown"}
-                  onSelect={() => {
-                    updateSettings({
-                      preferedLanguage: l.value,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
+              </View>
+            }
+            title={t("home.settings.languages.title")}
+          />
         </ListItem>
       </ListGroup>
     </View>

components/settings/AudioToggles.tsx

@@ -1,14 +1,13 @@
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import { Ionicons } from "@expo/vector-icons";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, View, type ViewProps } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
+import { PlatformDropdown } from "../PlatformDropdown";
 import { useMedia } from "./MediaContext";
 
 interface Props extends ViewProps {}
@@ -22,6 +21,39 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
   const cultures = media.cultures;
   const { t } = useTranslation();
 
+  const optionGroups = useMemo(() => {
+    const options = [
+      {
+        type: "radio" as const,
+        label: t("home.settings.audio.none"),
+        value: "none",
+        selected: !settings?.defaultAudioLanguage,
+        onPress: () => updateSettings({ defaultAudioLanguage: null }),
+      },
+      ...(cultures?.map((culture) => ({
+        type: "radio" as const,
+        label:
+          culture.DisplayName ||
+          culture.ThreeLetterISOLanguageName ||
+          "Unknown",
+        value:
+          culture.ThreeLetterISOLanguageName ||
+          culture.DisplayName ||
+          "unknown",
+        selected:
+          culture.ThreeLetterISOLanguageName ===
+          settings?.defaultAudioLanguage?.ThreeLetterISOLanguageName,
+        onPress: () => updateSettings({ defaultAudioLanguage: culture }),
+      })) || []),
+    ];
+
+    return [
+      {
+        options,
+      },
+    ];
+  }, [cultures, settings?.defaultAudioLanguage, t, updateSettings]);
+
   if (isTv) return null;
   if (!settings) return null;
 
@@ -48,9 +80,10 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
           />
         </ListItem>
         <ListItem title={t("home.settings.audio.audio_language")}>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3 '>
+          <PlatformDropdown
+            groups={optionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {settings?.defaultAudioLanguage?.DisplayName ||
                     t("home.settings.audio.none")}
@@ -60,48 +93,10 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side='bottom'
-              align='start'
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>
-                {t("home.settings.audio.language")}
-              </DropdownMenu.Label>
-              <DropdownMenu.Item
-                key={"none-audio"}
-                onSelect={() => {
-                  updateSettings({
-                    defaultAudioLanguage: null,
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {t("home.settings.audio.none")}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              {cultures?.map((l) => (
-                <DropdownMenu.Item
-                  key={l?.ThreeLetterISOLanguageName ?? "unknown"}
-                  onSelect={() => {
-                    updateSettings({
-                      defaultAudioLanguage: l,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {l.DisplayName}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
+              </View>
+            }
+            title={t("home.settings.audio.language")}
+          />
         </ListItem>
       </ListGroup>
     </View>

components/settings/OtherSettings.tsx

@@ -5,10 +5,10 @@ import { TFunction } from "i18next";
 import type React from "react";
 import { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Linking, Platform, Switch, TouchableOpacity } from "react-native";
+import { Linking, Platform, Switch, View } from "react-native";
 import { toast } from "sonner-native";
 import { BITRATES } from "@/components/BitrateSelector";
-import Dropdown from "@/components/common/Dropdown";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
@@ -89,6 +89,52 @@ export const OtherSettings: React.FC = () => {
     [],
   );
 
+  const orientationOptions = useMemo(
+    () => [
+      {
+        options: orientations.map((orientation) => ({
+          type: "radio" as const,
+          label: t(ScreenOrientationEnum[orientation]),
+          value: String(orientation),
+          selected: orientation === settings?.defaultVideoOrientation,
+          onPress: () =>
+            updateSettings({ defaultVideoOrientation: orientation }),
+        })),
+      },
+    ],
+    [orientations, settings?.defaultVideoOrientation, t, updateSettings],
+  );
+
+  const bitrateOptions = useMemo(
+    () => [
+      {
+        options: BITRATES.map((bitrate) => ({
+          type: "radio" as const,
+          label: bitrate.key,
+          value: bitrate.key,
+          selected: bitrate.key === settings?.defaultBitrate?.key,
+          onPress: () => updateSettings({ defaultBitrate: bitrate }),
+        })),
+      },
+    ],
+    [settings?.defaultBitrate?.key, t, updateSettings],
+  );
+
+  const autoPlayEpisodeOptions = useMemo(
+    () => [
+      {
+        options: AUTOPLAY_EPISODES_COUNT(t).map((item) => ({
+          type: "radio" as const,
+          label: item.key,
+          value: item.key,
+          selected: item.key === settings?.maxAutoPlayEpisodeCount?.key,
+          onPress: () => updateSettings({ maxAutoPlayEpisodeCount: item }),
+        })),
+      },
+    ],
+    [settings?.maxAutoPlayEpisodeCount?.key, t, updateSettings],
+  );
+
   if (!settings) return null;
 
   return (
@@ -114,16 +160,10 @@ export const OtherSettings: React.FC = () => {
             settings.followDeviceOrientation
           }
         >
-          <Dropdown
-            data={orientations}
-            disabled={
-              pluginSettings?.defaultVideoOrientation?.locked ||
-              settings.followDeviceOrientation
-            }
-            keyExtractor={String}
-            titleExtractor={(item) => t(ScreenOrientationEnum[item])}
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
+          <PlatformDropdown
+            groups={orientationOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(
                     orientationTranslations[
@@ -136,12 +176,9 @@ export const OtherSettings: React.FC = () => {
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
-            }
-            label={t("home.settings.other.orientation")}
-            onSelected={(defaultVideoOrientation) =>
-              updateSettings({ defaultVideoOrientation })
+              </View>
             }
+            title={t("home.settings.other.orientation")}
           />
         </ListItem>
 
@@ -214,13 +251,10 @@ export const OtherSettings: React.FC = () => {
           title={t("home.settings.other.default_quality")}
           disabled={pluginSettings?.defaultBitrate?.locked}
         >
-          <Dropdown
-            data={BITRATES}
-            disabled={pluginSettings?.defaultBitrate?.locked}
-            keyExtractor={(item) => item.key}
-            titleExtractor={(item) => item.key}
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
+          <PlatformDropdown
+            groups={bitrateOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {settings.defaultBitrate?.key}
                 </Text>
@@ -229,10 +263,9 @@ export const OtherSettings: React.FC = () => {
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
+              </View>
             }
-            label={t("home.settings.other.default_quality")}
-            onSelected={(defaultBitrate) => updateSettings({ defaultBitrate })}
+            title={t("home.settings.other.default_quality")}
           />
         </ListItem>
         <ListItem
@@ -248,12 +281,10 @@ export const OtherSettings: React.FC = () => {
           />
         </ListItem>
         <ListItem title={t("home.settings.other.max_auto_play_episode_count")}>
-          <Dropdown
-            data={AUTOPLAY_EPISODES_COUNT(t)}
-            keyExtractor={(item) => item.key}
-            titleExtractor={(item) => item.key}
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
+          <PlatformDropdown
+            groups={autoPlayEpisodeOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(settings?.maxAutoPlayEpisodeCount.key)}
                 </Text>
@@ -262,12 +293,9 @@ export const OtherSettings: React.FC = () => {
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
-            }
-            label={t("home.settings.other.max_auto_play_episode_count")}
-            onSelected={(maxAutoPlayEpisodeCount) =>
-              updateSettings({ maxAutoPlayEpisodeCount })
+              </View>
             }
+            title={t("home.settings.other.max_auto_play_episode_count")}
           />
         </ListItem>
       </ListGroup>

components/settings/QuickConnect.tsx

@@ -12,7 +12,6 @@ import { useTranslation } from "react-i18next";
 import { Alert, Platform, View, type ViewProps } from "react-native";
 import { useHaptic } from "@/hooks/useHaptic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { writeErrorLog } from "@/utils/log";
 import { Button } from "../Button";
 import { Text } from "../common/Text";
 import { PinInput } from "../inputs/PinInput";
@@ -65,8 +64,7 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
             t("home.settings.quick_connect.invalid_code"),
           );
         }
-      } catch (error) {
-        writeErrorLog("quickConnect.authenticationError", error);
+      } catch (_e) {
         errorHapticFeedback();
         Alert.alert(
           t("home.settings.quick_connect.error"),
@@ -121,8 +119,6 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
                   )}
                 </Text>
                 <PinInput
-                  // Quick connect codes are typically 6 digits; ensure length prop provided
-                  length={6}
                   value={quickConnectCode || ""}
                   onChangeText={setQuickConnectCode}
                   style={{ paddingHorizontal: 16 }}

components/settings/SubtitleToggles.tsx

@@ -1,23 +1,25 @@
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
-
-const _DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import { Ionicons } from "@expo/vector-icons";
 import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, View, type ViewProps } from "react-native";
 import { Switch } from "react-native-gesture-handler";
-import Dropdown from "@/components/common/Dropdown";
 import { Stepper } from "@/components/inputs/Stepper";
+import {
+  OUTLINE_THICKNESS,
+  type OutlineThickness,
+  VLC_COLORS,
+  type VLCColor,
+} from "@/constants/SubtitleConstants";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
+import { PlatformDropdown } from "../PlatformDropdown";
 import { useMedia } from "./MediaContext";
 
 interface Props extends ViewProps {}
 
-import { OUTLINE_THICKNESS, VLC_COLORS } from "@/constants/SubtitleConstants";
-
 export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
   const isTv = Platform.isTV;
 
@@ -27,18 +29,6 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
   const cultures = media.cultures;
   const { t } = useTranslation();
 
-  // Get VLC subtitle settings from the settings system
-  const textColor = settings?.vlcTextColor ?? "White";
-  const backgroundColor = settings?.vlcBackgroundColor ?? "Black";
-  const outlineColor = settings?.vlcOutlineColor ?? "Black";
-  const outlineThickness = settings?.vlcOutlineThickness ?? "Normal";
-  const backgroundOpacity = settings?.vlcBackgroundOpacity ?? 128;
-  const outlineOpacity = settings?.vlcOutlineOpacity ?? 255;
-  const isBold = settings?.vlcIsBold ?? false;
-
-  if (isTv) return null;
-  if (!settings) return null;
-
   const subtitleModes = [
     SubtitlePlaybackMode.Default,
     SubtitlePlaybackMode.Smart,
@@ -56,6 +46,133 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
     [SubtitlePlaybackMode.None]: "home.settings.subtitles.modes.None",
   };
 
+  const subtitleLanguageOptionGroups = useMemo(() => {
+    const options = [
+      {
+        type: "radio" as const,
+        label: t("home.settings.subtitles.none"),
+        value: "none",
+        selected: !settings?.defaultSubtitleLanguage,
+        onPress: () => updateSettings({ defaultSubtitleLanguage: null }),
+      },
+      ...(cultures?.map((culture) => ({
+        type: "radio" as const,
+        label: culture.DisplayName || "Unknown",
+        value:
+          culture.ThreeLetterISOLanguageName ||
+          culture.DisplayName ||
+          "unknown",
+        selected:
+          culture.ThreeLetterISOLanguageName ===
+          settings?.defaultSubtitleLanguage?.ThreeLetterISOLanguageName,
+        onPress: () => updateSettings({ defaultSubtitleLanguage: culture }),
+      })) || []),
+    ];
+
+    return [
+      {
+        options,
+      },
+    ];
+  }, [cultures, settings?.defaultSubtitleLanguage, t, updateSettings]);
+
+  const subtitleModeOptionGroups = useMemo(() => {
+    const options = subtitleModes.map((mode) => ({
+      type: "radio" as const,
+      label: t(subtitleModeKeys[mode]) || String(mode),
+      value: String(mode),
+      selected: mode === settings?.subtitleMode,
+      onPress: () => updateSettings({ subtitleMode: mode }),
+    }));
+
+    return [
+      {
+        options,
+      },
+    ];
+  }, [settings?.subtitleMode, t, updateSettings]);
+
+  const textColorOptionGroups = useMemo(() => {
+    const colors = Object.keys(VLC_COLORS) as VLCColor[];
+    const options = colors.map((color) => ({
+      type: "radio" as const,
+      label: t(`home.settings.subtitles.colors.${color}`),
+      value: color,
+      selected: (settings?.vlcTextColor || "White") === color,
+      onPress: () => updateSettings({ vlcTextColor: color }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcTextColor, t, updateSettings]);
+
+  const backgroundColorOptionGroups = useMemo(() => {
+    const colors = Object.keys(VLC_COLORS) as VLCColor[];
+    const options = colors.map((color) => ({
+      type: "radio" as const,
+      label: t(`home.settings.subtitles.colors.${color}`),
+      value: color,
+      selected: (settings?.vlcBackgroundColor || "Black") === color,
+      onPress: () => updateSettings({ vlcBackgroundColor: color }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcBackgroundColor, t, updateSettings]);
+
+  const outlineColorOptionGroups = useMemo(() => {
+    const colors = Object.keys(VLC_COLORS) as VLCColor[];
+    const options = colors.map((color) => ({
+      type: "radio" as const,
+      label: t(`home.settings.subtitles.colors.${color}`),
+      value: color,
+      selected: (settings?.vlcOutlineColor || "Black") === color,
+      onPress: () => updateSettings({ vlcOutlineColor: color }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcOutlineColor, t, updateSettings]);
+
+  const outlineThicknessOptionGroups = useMemo(() => {
+    const thicknesses = Object.keys(OUTLINE_THICKNESS) as OutlineThickness[];
+    const options = thicknesses.map((thickness) => ({
+      type: "radio" as const,
+      label: t(`home.settings.subtitles.thickness.${thickness}`),
+      value: thickness,
+      selected: (settings?.vlcOutlineThickness || "Normal") === thickness,
+      onPress: () => updateSettings({ vlcOutlineThickness: thickness }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcOutlineThickness, t, updateSettings]);
+
+  const backgroundOpacityOptionGroups = useMemo(() => {
+    const opacities = [0, 32, 64, 96, 128, 160, 192, 224, 255];
+    const options = opacities.map((opacity) => ({
+      type: "radio" as const,
+      label: `${Math.round((opacity / 255) * 100)}%`,
+      value: opacity,
+      selected: (settings?.vlcBackgroundOpacity ?? 128) === opacity,
+      onPress: () => updateSettings({ vlcBackgroundOpacity: opacity }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcBackgroundOpacity, updateSettings]);
+
+  const outlineOpacityOptionGroups = useMemo(() => {
+    const opacities = [0, 32, 64, 96, 128, 160, 192, 224, 255];
+    const options = opacities.map((opacity) => ({
+      type: "radio" as const,
+      label: `${Math.round((opacity / 255) * 100)}%`,
+      value: opacity,
+      selected: (settings?.vlcOutlineOpacity ?? 255) === opacity,
+      onPress: () => updateSettings({ vlcOutlineOpacity: opacity }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcOutlineOpacity, updateSettings]);
+
+  if (isTv) return null;
+  if (!settings) return null;
+
   return (
     <View {...props}>
       <ListGroup
@@ -67,20 +184,10 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
         }
       >
         <ListItem title={t("home.settings.subtitles.subtitle_language")}>
-          <Dropdown
-            data={[
-              {
-                DisplayName: t("home.settings.subtitles.none"),
-                ThreeLetterISOLanguageName: "none-subs",
-              },
-              ...(cultures ?? []),
-            ]}
-            keyExtractor={(item) =>
-              item?.ThreeLetterISOLanguageName ?? "unknown"
-            }
-            titleExtractor={(item) => item?.DisplayName}
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
+          <PlatformDropdown
+            groups={subtitleLanguageOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {settings?.defaultSubtitleLanguage?.DisplayName ||
                     t("home.settings.subtitles.none")}
@@ -90,18 +197,9 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
-            }
-            label={t("home.settings.subtitles.language")}
-            onSelected={(defaultSubtitleLanguage) =>
-              updateSettings({
-                defaultSubtitleLanguage:
-                  defaultSubtitleLanguage.DisplayName ===
-                  t("home.settings.subtitles.none")
-                    ? null
-                    : defaultSubtitleLanguage,
-              })
+              </View>
             }
+            title={t("home.settings.subtitles.language")}
           />
         </ListItem>
 
@@ -109,13 +207,10 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           title={t("home.settings.subtitles.subtitle_mode")}
           disabled={pluginSettings?.subtitleMode?.locked}
         >
-          <Dropdown
-            data={subtitleModes}
-            disabled={pluginSettings?.subtitleMode?.locked}
-            keyExtractor={String}
-            titleExtractor={(item) => t(subtitleModeKeys[item]) || String(item)}
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
+          <PlatformDropdown
+            groups={subtitleModeOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(subtitleModeKeys[settings?.subtitleMode]) ||
                     t("home.settings.subtitles.loading")}
@@ -125,10 +220,9 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
+              </View>
             }
-            label={t("home.settings.subtitles.subtitle_mode")}
-            onSelected={(subtitleMode) => updateSettings({ subtitleMode })}
+            title={t("home.settings.subtitles.subtitle_mode")}
           />
         </ListItem>
 
@@ -159,144 +253,120 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.text_color")}>
-          <Dropdown
-            data={Object.keys(VLC_COLORS)}
-            keyExtractor={(item) => item}
-            titleExtractor={(item) =>
-              t(`home.settings.subtitles.colors.${item}`)
-            }
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
+          <PlatformDropdown
+            groups={textColorOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
-                  {t(`home.settings.subtitles.colors.${textColor}`)}
+                  {t(
+                    `home.settings.subtitles.colors.${settings?.vlcTextColor || "White"}`,
+                  )}
                 </Text>
                 <Ionicons
                   name='chevron-expand-sharp'
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
+              </View>
             }
-            label={t("home.settings.subtitles.text_color")}
-            onSelected={(value) => updateSettings({ vlcTextColor: value })}
+            title={t("home.settings.subtitles.text_color")}
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.background_color")}>
-          <Dropdown
-            data={Object.keys(VLC_COLORS)}
-            keyExtractor={(item) => item}
-            titleExtractor={(item) =>
-              t(`home.settings.subtitles.colors.${item}`)
-            }
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
+          <PlatformDropdown
+            groups={backgroundColorOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
-                  {t(`home.settings.subtitles.colors.${backgroundColor}`)}
+                  {t(
+                    `home.settings.subtitles.colors.${settings?.vlcBackgroundColor || "Black"}`,
+                  )}
                 </Text>
                 <Ionicons
                   name='chevron-expand-sharp'
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
-            }
-            label={t("home.settings.subtitles.background_color")}
-            onSelected={(value) =>
-              updateSettings({ vlcBackgroundColor: value })
+              </View>
             }
+            title={t("home.settings.subtitles.background_color")}
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.outline_color")}>
-          <Dropdown
-            data={Object.keys(VLC_COLORS)}
-            keyExtractor={(item) => item}
-            titleExtractor={(item) =>
-              t(`home.settings.subtitles.colors.${item}`)
-            }
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
+          <PlatformDropdown
+            groups={outlineColorOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
-                  {t(`home.settings.subtitles.colors.${outlineColor}`)}
+                  {t(
+                    `home.settings.subtitles.colors.${settings?.vlcOutlineColor || "Black"}`,
+                  )}
                 </Text>
                 <Ionicons
                   name='chevron-expand-sharp'
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
+              </View>
             }
-            label={t("home.settings.subtitles.outline_color")}
-            onSelected={(value) => updateSettings({ vlcOutlineColor: value })}
+            title={t("home.settings.subtitles.outline_color")}
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.outline_thickness")}>
-          <Dropdown
-            data={Object.keys(OUTLINE_THICKNESS)}
-            keyExtractor={(item) => item}
-            titleExtractor={(item) =>
-              t(`home.settings.subtitles.thickness.${item}`)
-            }
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
+          <PlatformDropdown
+            groups={outlineThicknessOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
-                  {t(`home.settings.subtitles.thickness.${outlineThickness}`)}
+                  {t(
+                    `home.settings.subtitles.thickness.${settings?.vlcOutlineThickness || "Normal"}`,
+                  )}
                 </Text>
                 <Ionicons
                   name='chevron-expand-sharp'
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
-            }
-            label={t("home.settings.subtitles.outline_thickness")}
-            onSelected={(value) =>
-              updateSettings({ vlcOutlineThickness: value })
+              </View>
             }
+            title={t("home.settings.subtitles.outline_thickness")}
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.background_opacity")}>
-          <Dropdown
-            data={[0, 32, 64, 96, 128, 160, 192, 224, 255]}
-            keyExtractor={String}
-            titleExtractor={(item) => `${Math.round((item / 255) * 100)}%`}
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>{`${Math.round((backgroundOpacity / 255) * 100)}%`}</Text>
+          <PlatformDropdown
+            groups={backgroundOpacityOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>{`${Math.round(((settings?.vlcBackgroundOpacity ?? 128) / 255) * 100)}%`}</Text>
                 <Ionicons
                   name='chevron-expand-sharp'
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
-            }
-            label={t("home.settings.subtitles.background_opacity")}
-            onSelected={(value) =>
-              updateSettings({ vlcBackgroundOpacity: value })
+              </View>
             }
+            title={t("home.settings.subtitles.background_opacity")}
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.outline_opacity")}>
-          <Dropdown
-            data={[0, 32, 64, 96, 128, 160, 192, 224, 255]}
-            keyExtractor={String}
-            titleExtractor={(item) => `${Math.round((item / 255) * 100)}%`}
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>{`${Math.round((outlineOpacity / 255) * 100)}%`}</Text>
+          <PlatformDropdown
+            groups={outlineOpacityOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>{`${Math.round(((settings?.vlcOutlineOpacity ?? 255) / 255) * 100)}%`}</Text>
                 <Ionicons
                   name='chevron-expand-sharp'
                   size={18}
                   color='#5A5960'
                 />
-              </TouchableOpacity>
+              </View>
             }
-            label={t("home.settings.subtitles.outline_opacity")}
-            onSelected={(value) => updateSettings({ vlcOutlineOpacity: value })}
+            title={t("home.settings.subtitles.outline_opacity")}
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.bold_text")}>
           <Switch
-            value={isBold}
+            value={settings?.vlcIsBold ?? false}
             onValueChange={(value) => updateSettings({ vlcIsBold: value })}
           />
         </ListItem>

components/stacks/NestedTabPageStack.tsx

@@ -15,7 +15,7 @@ export const commonScreenOptions: ICommonScreenOptions = {
   headerShown: true,
   headerTransparent: Platform.OS === "ios",
   headerShadowVisible: false,
-  headerBlurEffect: "none",
+  headerBlurEffect: Platform.OS === "ios" ? "none" : undefined,
   headerLeft: () => <HeaderBackButton />,
 };
 

components/video-player/controls/Controls.tsx

@@ -7,6 +7,7 @@ import { useLocalSearchParams, useRouter } from "expo-router";
 import {
   type Dispatch,
   type FC,
+  type MutableRefObject,
   type SetStateAction,
   useCallback,
   useEffect,
@@ -27,11 +28,10 @@ import { useHaptic } from "@/hooks/useHaptic";
 import { useIntroSkipper } from "@/hooks/useIntroSkipper";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
 import { useTrickplay } from "@/hooks/useTrickplay";
-import type { TrackInfo } from "@/modules/VlcPlayer.types";
+import type { TrackInfo, VlcPlayerViewRef } from "@/modules/VlcPlayer.types";
 import { DownloadedItem } from "@/providers/Downloads/types";
 import { useSettings } from "@/utils/atoms/settings";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { writeDebugLog } from "@/utils/log";
 import { ticksToMs } from "@/utils/time";
 import { BottomControls } from "./BottomControls";
 import { CenterControls } from "./CenterControls";
@@ -50,6 +50,7 @@ import { type AspectRatio } from "./VideoScalingModeSelector";
 
 interface Props {
   item: BaseItemDto;
+  videoRef: MutableRefObject<VlcPlayerViewRef | null>;
   isPlaying: boolean;
   isSeeking: SharedValue<boolean>;
   cacheProgress: SharedValue<number>;
@@ -57,6 +58,7 @@ interface Props {
   isBuffering: boolean;
   showControls: boolean;
 
+  enableTrickplay?: boolean;
   togglePlay: () => void;
   setShowControls: (shown: boolean) => void;
   offline?: boolean;
@@ -206,8 +208,8 @@ export const Controls: FC<Props> = ({
 
   // Navigation hooks
   const {
-    handleSeekBackward: asyncHandleSeekBackward,
-    handleSeekForward: asyncHandleSeekForward,
+    handleSeekBackward,
+    handleSeekForward,
     handleSkipBackward,
     handleSkipForward,
   } = useVideoNavigation({
@@ -218,21 +220,6 @@ export const Controls: FC<Props> = ({
     play,
   });
 
-  // Create sync wrappers for remote control
-  const handleSeekBackward = useCallback(
-    (seconds: number) => {
-      asyncHandleSeekBackward(seconds);
-    },
-    [asyncHandleSeekBackward],
-  );
-
-  const handleSeekForward = useCallback(
-    (seconds: number) => {
-      asyncHandleSeekForward(seconds);
-    },
-    [asyncHandleSeekForward],
-  );
-
   // Time management hook
   const { currentTime, remainingTime } = useVideoTime({
     progress,
@@ -390,7 +377,7 @@ export const Controls: FC<Props> = ({
           item.UserData?.PlaybackPositionTicks?.toString() ?? "",
       }).toString();
 
-      writeDebugLog("controls.navigate.queryParams", { queryParams });
+      console.log("queryParams", queryParams);
 
       router.replace(`player/direct-player?${queryParams}` as any);
     },

components/video-player/controls/EpisodeList.tsx

@@ -56,7 +56,10 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
   }, []);
 
   const { getDownloadedItems } = useDownload();
-  const downloadedFiles = getDownloadedItems();
+  const downloadedFiles = useMemo(
+    () => getDownloadedItems(),
+    [getDownloadedItems],
+  );
 
   const seasonIndex = seasonIndexState[item.ParentId ?? ""];
 

components/video-player/controls/HeaderControls.tsx

@@ -111,7 +111,7 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
       pointerEvents={showControls ? "auto" : "none"}
       className={"flex flex-row w-full pt-2"}
     >
-      <View className='mr-auto'>
+      <View className='mr-auto' pointerEvents='box-none'>
         {!Platform.isTV && (!offline || !mediaSource?.TranscodingUrl) && (
           <VideoProvider
             getAudioTracks={getAudioTracks}
@@ -120,7 +120,9 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
             setSubtitleTrack={setSubtitleTrack}
             setSubtitleURL={setSubtitleURL}
           >
-            <DropdownView />
+            <View pointerEvents='auto'>
+              <DropdownView />
+            </View>
           </VideoProvider>
         )}
       </View>

components/video-player/controls/ScaleFactorSelector.tsx

@@ -1,8 +1,10 @@
 import { Ionicons } from "@expo/vector-icons";
-import React, { useState } from "react";
-import { Platform, TouchableOpacity } from "react-native";
-import { Text } from "@/components/common/Text";
-import { FilterSheet } from "@/components/filters/FilterSheet";
+import React, { useMemo } from "react";
+import { Platform, View } from "react-native";
+import {
+  type OptionGroup,
+  PlatformDropdown,
+} from "@/components/PlatformDropdown";
 import { useHaptic } from "@/hooks/useHaptic";
 
 export type ScaleFactor =
@@ -94,56 +96,51 @@ export const ScaleFactorSelector: React.FC<ScaleFactorSelectorProps> = ({
   disabled = false,
 }) => {
   const lightHapticFeedback = useHaptic("light");
-  const [open, setOpen] = useState(false);
-
-  // Hide on TV platforms
-  if (Platform.isTV) return null;
 
   const handleScaleSelect = (scale: ScaleFactor) => {
     onScaleChange(scale);
     lightHapticFeedback();
   };
 
-  const currentOption = SCALE_FACTOR_OPTIONS.find(
-    (option) => option.id === currentScale,
-  );
+  const optionGroups = useMemo<OptionGroup[]>(() => {
+    return [
+      {
+        options: SCALE_FACTOR_OPTIONS.map((option) => ({
+          type: "radio" as const,
+          label: option.label,
+          value: option.id,
+          selected: option.id === currentScale,
+          onPress: () => handleScaleSelect(option.id),
+          disabled,
+        })),
+      },
+    ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentScale, disabled]);
 
-  return (
-    <>
-      <TouchableOpacity
-        disabled={disabled}
+  const trigger = useMemo(
+    () => (
+      <View
         className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
         style={{ opacity: disabled ? 0.5 : 1 }}
-        onPress={() => setOpen(true)}
       >
         <Ionicons name='search-outline' size={24} color='white' />
-      </TouchableOpacity>
+      </View>
+    ),
+    [disabled],
+  );
 
-      <FilterSheet
-        open={open}
-        setOpen={setOpen}
-        title='Scale Factor'
-        data={SCALE_FACTOR_OPTIONS}
-        values={currentOption ? [currentOption] : []}
-        multiple={false}
-        searchFilter={(item, query) => {
-          const option = item as ScaleFactorOption;
-          return (
-            option.label.toLowerCase().includes(query.toLowerCase()) ||
-            option.description.toLowerCase().includes(query.toLowerCase())
-          );
-        }}
-        renderItemLabel={(item) => {
-          const option = item as ScaleFactorOption;
-          return <Text>{option.label}</Text>;
-        }}
-        set={(vals) => {
-          const chosen = vals[0] as ScaleFactorOption | undefined;
-          if (chosen) {
-            handleScaleSelect(chosen.id);
-          }
-        }}
-      />
-    </>
+  // Hide on TV platforms
+  if (Platform.isTV) return null;
+
+  return (
+    <PlatformDropdown
+      title='Scale Factor'
+      groups={optionGroups}
+      trigger={trigger}
+      bottomSheetConfig={{
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };

components/video-player/controls/VideoScalingModeSelector.tsx

@@ -1,8 +1,10 @@
 import { Ionicons } from "@expo/vector-icons";
-import React, { useState } from "react";
-import { Platform, TouchableOpacity } from "react-native";
-import { Text } from "@/components/common/Text";
-import { FilterSheet } from "@/components/filters/FilterSheet";
+import React, { useMemo } from "react";
+import { Platform, View } from "react-native";
+import {
+  type OptionGroup,
+  PlatformDropdown,
+} from "@/components/PlatformDropdown";
 import { useHaptic } from "@/hooks/useHaptic";
 
 export type AspectRatio = "default" | "16:9" | "4:3" | "1:1" | "21:9";
@@ -53,56 +55,51 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
   disabled = false,
 }) => {
   const lightHapticFeedback = useHaptic("light");
-  const [open, setOpen] = useState(false);
-
-  // Hide on TV platforms
-  if (Platform.isTV) return null;
 
   const handleRatioSelect = (ratio: AspectRatio) => {
     onRatioChange(ratio);
     lightHapticFeedback();
   };
 
-  const currentOption = ASPECT_RATIO_OPTIONS.find(
-    (option) => option.id === currentRatio,
-  );
+  const optionGroups = useMemo<OptionGroup[]>(() => {
+    return [
+      {
+        options: ASPECT_RATIO_OPTIONS.map((option) => ({
+          type: "radio" as const,
+          label: option.label,
+          value: option.id,
+          selected: option.id === currentRatio,
+          onPress: () => handleRatioSelect(option.id),
+          disabled,
+        })),
+      },
+    ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentRatio, disabled]);
 
-  return (
-    <>
-      <TouchableOpacity
-        disabled={disabled}
+  const trigger = useMemo(
+    () => (
+      <View
         className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
         style={{ opacity: disabled ? 0.5 : 1 }}
-        onPress={() => setOpen(true)}
       >
         <Ionicons name='crop-outline' size={24} color='white' />
-      </TouchableOpacity>
+      </View>
+    ),
+    [disabled],
+  );
 
-      <FilterSheet
-        open={open}
-        setOpen={setOpen}
-        title='Aspect Ratio'
-        data={ASPECT_RATIO_OPTIONS}
-        values={currentOption ? [currentOption] : []}
-        multiple={false}
-        searchFilter={(item, query) => {
-          const option = item as AspectRatioOption;
-          return (
-            option.label.toLowerCase().includes(query.toLowerCase()) ||
-            option.description.toLowerCase().includes(query.toLowerCase())
-          );
-        }}
-        renderItemLabel={(item) => {
-          const option = item as AspectRatioOption;
-          return <Text>{option.label}</Text>;
-        }}
-        set={(vals) => {
-          const chosen = vals[0] as AspectRatioOption | undefined;
-          if (chosen) {
-            handleRatioSelect(chosen.id);
-          }
-        }}
-      />
-    </>
+  // Hide on TV platforms
+  if (Platform.isTV) return null;
+
+  return (
+    <PlatformDropdown
+      title='Aspect Ratio'
+      groups={optionGroups}
+      trigger={trigger}
+      bottomSheetConfig={{
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };

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

@@ -10,7 +10,6 @@ import {
   useState,
 } from "react";
 import type { TrackInfo } from "@/modules/VlcPlayer.types";
-import { writeDebugLog } from "@/utils/log";
 import type { Track } from "../types";
 import { useControlContext } from "./ControlContext";
 
@@ -86,7 +85,7 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
     chosenAudioIndex?: string;
     chosenSubtitleIndex?: string;
   }) => {
-    writeDebugLog("video.setPlayerParams", { chosenSubtitleIndex });
+    console.log("chosenSubtitleIndex", chosenSubtitleIndex);
     const queryParams = new URLSearchParams({
       itemId: itemId ?? "",
       audioIndex: chosenAudioIndex,
@@ -115,7 +114,7 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
       mediaSource?.TranscodingUrl &&
       !onTextBasedSubtitle;
 
-    writeDebugLog("video.setTrackParams", { type, index, serverIndex });
+    console.log("Set player params", index, serverIndex);
     if (shouldChangePlayerParams) {
       setPlayerParams({
         chosenSubtitleIndex: serverIndex.toString(),
@@ -128,57 +127,6 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
     });
   };
 
-  // Extract subtitle track creation to reduce nesting
-  const createSubtitleTrack = (
-    sub: any,
-    subtitleData: TrackInfo[] | null,
-    embedSubIndex: { current: number },
-  ): Track => {
-    const shouldIncrement =
-      sub.DeliveryMethod === SubtitleDeliveryMethod.Embed ||
-      sub.DeliveryMethod === SubtitleDeliveryMethod.Hls ||
-      sub.DeliveryMethod === SubtitleDeliveryMethod.External;
-
-    const vlcIndex = subtitleData?.at(embedSubIndex.current)?.index ?? -1;
-    if (shouldIncrement) embedSubIndex.current++;
-
-    const handleSetTrack = () => {
-      if (shouldIncrement) {
-        setTrackParams("subtitle", vlcIndex, sub.Index ?? -1);
-      } else {
-        setPlayerParams({ chosenSubtitleIndex: sub.Index?.toString() });
-      }
-    };
-
-    return {
-      name: sub.DisplayTitle || "Undefined Subtitle",
-      index: sub.Index ?? -1,
-      setTrack: handleSetTrack,
-    };
-  };
-
-  // Extract audio track creation to reduce nesting
-  const createAudioTrack = (
-    audio: any,
-    idx: number,
-    audioData: TrackInfo[] | null,
-  ): Track => {
-    const handleSetTrack = () => {
-      if (!mediaSource?.TranscodingUrl) {
-        const vlcIndex = audioData?.at(idx + 1)?.index ?? -1;
-        setTrackParams("audio", vlcIndex, audio.Index ?? -1);
-      } else {
-        setPlayerParams({ chosenAudioIndex: audio.Index?.toString() });
-      }
-    };
-
-    return {
-      name: audio.DisplayTitle ?? "Undefined Audio",
-      index: audio.Index ?? -1,
-      setTrack: handleSetTrack,
-    };
-  };
-
   useEffect(() => {
     const fetchTracks = async () => {
       if (getSubtitleTracks) {
@@ -192,47 +140,73 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
           subtitleData = [subtitleData[0], ...subtitleData.slice(1).reverse()];
         }
 
-        const embedSubIndex = { current: 1 };
-        const processedSubs: Track[] = allSubs?.map((sub) =>
-          createSubtitleTrack(sub, subtitleData, embedSubIndex),
-        );
+        let embedSubIndex = 1;
+        const processedSubs: Track[] = allSubs?.map((sub) => {
+          /** A boolean value determining if we should increment the embedSubIndex, currently only Embed and Hls subtitles are automatically added into VLC Player */
+          const shouldIncrement =
+            sub.DeliveryMethod === SubtitleDeliveryMethod.Embed ||
+            sub.DeliveryMethod === SubtitleDeliveryMethod.Hls ||
+            sub.DeliveryMethod === SubtitleDeliveryMethod.External;
+          /** The index of subtitle inside VLC Player Itself */
+          const vlcIndex = subtitleData?.at(embedSubIndex)?.index ?? -1;
+          if (shouldIncrement) embedSubIndex++;
+          return {
+            name: sub.DisplayTitle || "Undefined Subtitle",
+            index: sub.Index ?? -1,
+            setTrack: () =>
+              shouldIncrement
+                ? setTrackParams("subtitle", vlcIndex, sub.Index ?? -1)
+                : setPlayerParams({
+                    chosenSubtitleIndex: sub.Index?.toString(),
+                  }),
+          };
+        });
 
         // Step 3: Restore the original order
-        const subtitles: Track[] = processedSubs.toSorted(
+        const subtitles: Track[] = processedSubs.sort(
           (a, b) => a.index - b.index,
         );
 
         // Add a "Disable Subtitles" option
-        const disableSubtitleTrack = {
+        subtitles.unshift({
           name: "Disable",
           index: -1,
-          setTrack: () => {
-            if (!mediaSource?.TranscodingUrl || onTextBasedSubtitle) {
-              setTrackParams("subtitle", -1, -1);
-            } else {
-              setPlayerParams({ chosenSubtitleIndex: "-1" });
-            }
-          },
-        };
-        subtitles.unshift(disableSubtitleTrack);
+          setTrack: () =>
+            !mediaSource?.TranscodingUrl || onTextBasedSubtitle
+              ? setTrackParams("subtitle", -1, -1)
+              : setPlayerParams({ chosenSubtitleIndex: "-1" }),
+        });
         setSubtitleTracks(subtitles);
       }
       if (getAudioTracks) {
         const audioData = await getAudioTracks();
         const allAudio =
           mediaSource?.MediaStreams?.filter((s) => s.Type === "Audio") || [];
-        const audioTracks: Track[] = allAudio?.map((audio, idx) =>
-          createAudioTrack(audio, idx, audioData),
-        );
+        const audioTracks: Track[] = allAudio?.map((audio, idx) => {
+          if (!mediaSource?.TranscodingUrl) {
+            const vlcIndex = audioData?.at(idx + 1)?.index ?? -1;
+            return {
+              name: audio.DisplayTitle ?? "Undefined Audio",
+              index: audio.Index ?? -1,
+              setTrack: () =>
+                setTrackParams("audio", vlcIndex, audio.Index ?? -1),
+            };
+          }
+          return {
+            name: audio.DisplayTitle ?? "Undefined Audio",
+            index: audio.Index ?? -1,
+            setTrack: () =>
+              setPlayerParams({ chosenAudioIndex: audio.Index?.toString() }),
+          };
+        });
 
         // Add a "Disable Audio" option if its not transcoding.
         if (!mediaSource?.TranscodingUrl) {
-          const disableAudioTrack = {
+          audioTracks.unshift({
             name: "Disable",
             index: -1,
             setTrack: () => setTrackParams("audio", -1, -1),
-          };
-          audioTracks.unshift(disableAudioTrack);
+          });
         }
         setAudioTracks(audioTracks);
       }
@@ -240,25 +214,16 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
     fetchTracks();
   }, [isVideoLoaded, getAudioTracks, getSubtitleTracks]);
 
-  const contextValue = useMemo(
-    () => ({
-      audioTracks,
-      subtitleTracks,
-      setSubtitleTrack,
-      setSubtitleURL,
-      setAudioTrack,
-    }),
-    [
-      audioTracks,
-      subtitleTracks,
-      setSubtitleTrack,
-      setSubtitleURL,
-      setAudioTrack,
-    ],
-  );
-
   return (
-    <VideoContext.Provider value={contextValue}>
+    <VideoContext.Provider
+      value={{
+        audioTracks,
+        subtitleTracks,
+        setSubtitleTrack,
+        setSubtitleURL,
+        setAudioTrack,
+      }}
+    >
       {children}
     </VideoContext.Provider>
   );

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

@@ -1,16 +1,12 @@
 import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
 import { useLocalSearchParams, useRouter } from "expo-router";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useCallback, useMemo, useRef } from "react";
+import { Platform, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
-import { Text } from "@/components/common/Text";
+import {
+  type OptionGroup,
+  PlatformDropdown,
+} from "@/components/PlatformDropdown";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
 
@@ -23,10 +19,6 @@ const DropdownView = () => {
     ControlContext?.mediaSource,
   ];
   const router = useRouter();
-  const insets = useSafeAreaInsets();
-  const [open, setOpen] = useState(false);
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-  const snapPoints = useMemo(() => ["75%"], []);
 
   const { subtitleIndex, audioIndex, bitrateValue, playbackPosition, offline } =
     useLocalSearchParams<{
@@ -39,255 +31,127 @@ const DropdownView = () => {
       offline: string;
     }>();
 
+  // Use ref to track playbackPosition without causing re-renders
+  const playbackPositionRef = useRef(playbackPosition);
+  playbackPositionRef.current = playbackPosition;
+
   const isOffline = offline === "true";
 
+  // Stabilize IDs to prevent unnecessary recalculations
+  const itemIdRef = useRef(item.Id);
+  const mediaSourceIdRef = useRef(mediaSource?.Id);
+  itemIdRef.current = item.Id;
+  mediaSourceIdRef.current = mediaSource?.Id;
+
   const changeBitrate = useCallback(
     (bitrate: string) => {
       const queryParams = new URLSearchParams({
-        itemId: item.Id ?? "",
+        itemId: itemIdRef.current ?? "",
         audioIndex: audioIndex?.toString() ?? "",
-        subtitleIndex: subtitleIndex.toString() ?? "",
-        mediaSourceId: mediaSource?.Id ?? "",
+        subtitleIndex: subtitleIndex?.toString() ?? "",
+        mediaSourceId: mediaSourceIdRef.current ?? "",
         bitrateValue: bitrate.toString(),
-        playbackPosition: playbackPosition,
+        playbackPosition: playbackPositionRef.current,
       }).toString();
       router.replace(`player/direct-player?${queryParams}` as any);
     },
-    [item, mediaSource, subtitleIndex, audioIndex, playbackPosition],
+    [audioIndex, subtitleIndex, router],
   );
 
-  const handleSheetChanges = useCallback((index: number) => {
-    if (index === -1) {
-      setOpen(false);
-    }
-  }, []);
+  // Create stable identifiers for tracks
+  const subtitleTracksKey = useMemo(
+    () => subtitleTracks?.map((t) => `${t.index}-${t.name}`).join(",") ?? "",
+    [subtitleTracks],
+  );
 
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
+  const audioTracksKey = useMemo(
+    () => audioTracks?.map((t) => `${t.index}-${t.name}`).join(",") ?? "",
+    [audioTracks],
+  );
+
+  // Transform sections into OptionGroup format
+  const optionGroups = useMemo<OptionGroup[]>(() => {
+    const groups: OptionGroup[] = [];
+
+    // Quality Section
+    if (!isOffline) {
+      groups.push({
+        title: "Quality",
+        options:
+          BITRATES?.map((bitrate) => ({
+            type: "radio" as const,
+            label: bitrate.key,
+            value: bitrate.value?.toString() ?? "",
+            selected: bitrateValue === (bitrate.value?.toString() ?? ""),
+            onPress: () => changeBitrate(bitrate.value?.toString() ?? ""),
+          })) || [],
+      });
+    }
+
+    // Subtitle Section
+    if (subtitleTracks && subtitleTracks.length > 0) {
+      groups.push({
+        title: "Subtitles",
+        options: subtitleTracks.map((sub) => ({
+          type: "radio" as const,
+          label: sub.name,
+          value: sub.index.toString(),
+          selected: subtitleIndex === sub.index.toString(),
+          onPress: () => sub.setTrack(),
+        })),
+      });
+    }
+
+    // Audio Section
+    if (audioTracks && audioTracks.length > 0) {
+      groups.push({
+        title: "Audio",
+        options: audioTracks.map((track) => ({
+          type: "radio" as const,
+          label: track.name,
+          value: track.index.toString(),
+          selected: audioIndex === track.index.toString(),
+          onPress: () => track.setTrack(),
+        })),
+      });
+    }
+
+    return groups;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    isOffline,
+    bitrateValue,
+    changeBitrate,
+    subtitleTracksKey,
+    audioTracksKey,
+    subtitleIndex,
+    audioIndex,
+    // Note: subtitleTracks and audioTracks are intentionally excluded
+    // because we use subtitleTracksKey and audioTracksKey for stability
+  ]);
+
+  // Memoize the trigger to prevent re-renders
+  const trigger = useMemo(
+    () => (
+      <View className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'>
+        <Ionicons name='ellipsis-horizontal' size={24} color={"white"} />
+      </View>
     ),
     [],
   );
 
-  const handleOpen = () => {
-    setOpen(true);
-    bottomSheetModalRef.current?.present();
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-    bottomSheetModalRef.current?.dismiss();
-  };
-
-  useEffect(() => {
-    if (open) bottomSheetModalRef.current?.present();
-    else bottomSheetModalRef.current?.dismiss();
-  }, [open]);
-
   // Hide on TV platforms
   if (Platform.isTV) return null;
 
   return (
-    <>
-      <TouchableOpacity
-        className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-        onPress={handleOpen}
-      >
-        <Ionicons name='ellipsis-horizontal' size={24} color={"white"} />
-      </TouchableOpacity>
-
-      <BottomSheetModal
-        ref={bottomSheetModalRef}
-        index={0}
-        snapPoints={snapPoints}
-        onChange={handleSheetChanges}
-        backdropComponent={renderBackdrop}
-        handleIndicatorStyle={{
-          backgroundColor: "white",
-        }}
-        backgroundStyle={{
-          backgroundColor: "#171717",
-        }}
-      >
-        <BottomSheetScrollView
-          style={{
-            flex: 1,
-          }}
-        >
-          <View
-            className='mt-2 mb-8'
-            style={{
-              paddingLeft: Math.max(16, insets.left),
-              paddingRight: Math.max(16, insets.right),
-            }}
-          >
-            <Text className='font-bold text-2xl mb-6'>Playback Options</Text>
-
-            {/* Quality Section */}
-            {!isOffline && (
-              <View className='mb-6'>
-                <Text className='font-semibold text-lg mb-3 text-neutral-300'>
-                  Quality
-                </Text>
-                <View
-                  style={{
-                    borderRadius: 20,
-                    overflow: "hidden",
-                  }}
-                  className='flex flex-col rounded-xl overflow-hidden'
-                >
-                  {BITRATES?.map((bitrate) => (
-                    <View key={`quality-item-${bitrate.value}`}>
-                      <TouchableOpacity
-                        onPress={() => {
-                          changeBitrate(bitrate.value?.toString() ?? "");
-                          setTimeout(() => handleClose(), 250);
-                        }}
-                        className='bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
-                      >
-                        <Text className='flex shrink'>{bitrate.key}</Text>
-                        {bitrateValue === (bitrate.value?.toString() ?? "") ? (
-                          <Ionicons
-                            name='radio-button-on'
-                            size={24}
-                            color='white'
-                          />
-                        ) : (
-                          <Ionicons
-                            name='radio-button-off'
-                            size={24}
-                            color='white'
-                          />
-                        )}
-                      </TouchableOpacity>
-                      {BITRATES.findIndex((b) => b.value === bitrate.value) <
-                        BITRATES.length - 1 && (
-                        <View
-                          style={{
-                            height: StyleSheet.hairlineWidth,
-                          }}
-                          className='bg-neutral-700'
-                        />
-                      )}
-                    </View>
-                  ))}
-                </View>
-              </View>
-            )}
-
-            {/* Subtitle Section */}
-            <View className='mb-6'>
-              <Text className='font-semibold text-lg mb-3 text-neutral-300'>
-                Subtitles
-              </Text>
-              <View
-                style={{
-                  borderRadius: 20,
-                  overflow: "hidden",
-                }}
-                className='flex flex-col rounded-xl overflow-hidden'
-              >
-                {subtitleTracks?.map((subtitle) => (
-                  <View key={`subtitle-item-${subtitle.index}`}>
-                    <TouchableOpacity
-                      onPress={() => {
-                        subtitle.setTrack();
-                        setTimeout(() => handleClose(), 250);
-                      }}
-                      className='bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
-                    >
-                      <Text className='flex shrink'>{subtitle.name}</Text>
-                      {subtitleIndex === subtitle.index.toString() ? (
-                        <Ionicons
-                          name='radio-button-on'
-                          size={24}
-                          color='white'
-                        />
-                      ) : (
-                        <Ionicons
-                          name='radio-button-off'
-                          size={24}
-                          color='white'
-                        />
-                      )}
-                    </TouchableOpacity>
-                    {(subtitleTracks?.findIndex(
-                      (s) => s.index === subtitle.index,
-                    ) ?? 0) <
-                      (subtitleTracks?.length ?? 0) - 1 && (
-                      <View
-                        style={{
-                          height: StyleSheet.hairlineWidth,
-                        }}
-                        className='bg-neutral-700'
-                      />
-                    )}
-                  </View>
-                ))}
-              </View>
-            </View>
-
-            {/* Audio Section */}
-            {(audioTracks?.length ?? 0) > 0 && (
-              <View className='mb-6'>
-                <Text className='font-semibold text-lg mb-3 text-neutral-300'>
-                  Audio
-                </Text>
-                <View
-                  style={{
-                    borderRadius: 20,
-                    overflow: "hidden",
-                  }}
-                  className='flex flex-col rounded-xl overflow-hidden'
-                >
-                  {audioTracks?.map((audio) => (
-                    <View key={`audio-item-${audio.index}`}>
-                      <TouchableOpacity
-                        onPress={() => {
-                          audio.setTrack();
-                          setTimeout(() => handleClose(), 250);
-                        }}
-                        className='bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
-                      >
-                        <Text className='flex shrink'>{audio.name}</Text>
-                        {audioIndex === audio.index.toString() ? (
-                          <Ionicons
-                            name='radio-button-on'
-                            size={24}
-                            color='white'
-                          />
-                        ) : (
-                          <Ionicons
-                            name='radio-button-off'
-                            size={24}
-                            color='white'
-                          />
-                        )}
-                      </TouchableOpacity>
-                      {(audioTracks?.findIndex(
-                        (a) => a.index === audio.index,
-                      ) ?? 0) <
-                        (audioTracks?.length ?? 0) - 1 && (
-                        <View
-                          style={{
-                            height: StyleSheet.hairlineWidth,
-                          }}
-                          className='bg-neutral-700'
-                        />
-                      )}
-                    </View>
-                  ))}
-                </View>
-              </View>
-            )}
-          </View>
-        </BottomSheetScrollView>
-      </BottomSheetModal>
-    </>
+    <PlatformDropdown
+      title='Playback Options'
+      groups={optionGroups}
+      trigger={trigger}
+      bottomSheetConfig={{
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };
 

components/video-player/controls/useControlsTimeout.ts

@@ -13,7 +13,7 @@ export const useControlsTimeout = ({
   isSliding,
   episodeView,
   onHideControls,
-  timeout = 4000,
+  timeout = 10000,
 }: UseControlsTimeoutProps) => {
   const controlsTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 

hooks/useJellyseerr.ts

@@ -1,11 +1,10 @@
 import axios, { type AxiosError, type AxiosInstance } from "axios";
-import { atom, useAtom } from "jotai";
+import { atom } from "jotai";
+import { useAtom } from "jotai/index";
 import { inRange } from "lodash";
 import type { User as JellyseerrUser } from "@/utils/jellyseerr/server/entity/User";
 import type {
-  CollectionResult,
   MovieResult,
-  PersonResult,
   Results,
   TvResult,
 } from "@/utils/jellyseerr/server/models/Search";
@@ -67,8 +66,8 @@ const JELLYSEERR_USER = "JELLYSEERR_USER";
 const JELLYSEERR_COOKIES = "JELLYSEERR_COOKIES";
 
 export const clearJellyseerrStorageData = () => {
-  storage.delete(JELLYSEERR_USER);
-  storage.delete(JELLYSEERR_COOKIES);
+  storage.remove(JELLYSEERR_USER);
+  storage.remove(JELLYSEERR_COOKIES);
 };
 
 export enum Endpoints {
@@ -89,11 +88,11 @@ export enum Endpoints {
   STUDIO = "/studio",
   GENRE_SLIDER = "/genreslider",
   DISCOVER = "/discover",
-  DISCOVER_TRENDING = "/discover/trending",
-  DISCOVER_MOVIES = "/discover/movies",
-  DISCOVER_TV = "/discover/tv",
-  DISCOVER_TV_NETWORK = "/discover/tv/network",
-  DISCOVER_MOVIES_STUDIO = "/discover/movies/studio",
+  DISCOVER_TRENDING = `${DISCOVER}/trending`,
+  DISCOVER_MOVIES = `${DISCOVER}/movies`,
+  DISCOVER_TV = DISCOVER + TV,
+  DISCOVER_TV_NETWORK = DISCOVER + TV + NETWORK,
+  DISCOVER_MOVIES_STUDIO = `${DISCOVER}${MOVIE}s${STUDIO}`,
   AUTH_JELLYFIN = "/auth/jellyfin",
 }
 
@@ -385,10 +384,10 @@ export class JellyseerrApi {
       },
       (error: AxiosError) => {
         writeErrorLog(
-          `Jellyseerr response error\nerror: ${String(error)}\nurl: ${error?.config?.url}`,
+          `Jellyseerr response error\nerror: ${error.toString()}\nurl: ${error?.config?.url}`,
           error.response?.data,
         );
-        if (error.status === 403) {
+        if (error.response?.status === 403) {
           clearJellyseerrStorageData();
         }
         return Promise.reject(error);
@@ -469,77 +468,49 @@ export const useJellyseerr = () => {
   );
 
   const isJellyseerrMovieOrTvResult = (
-    items: MediaItem | null | undefined,
+    items: any | null | undefined,
   ): items is MovieResult | TvResult => {
-    return Boolean(
+    return (
       items &&
-        Object.hasOwn(items, "mediaType") &&
-        ((items as MovieResult | TvResult).mediaType === MediaType.MOVIE ||
-          (items as MovieResult | TvResult).mediaType === MediaType.TV),
+      Object.hasOwn(items, "mediaType") &&
+      (items.mediaType === MediaType.MOVIE || items.mediaType === MediaType.TV)
     );
   };
 
-  type MediaItem =
-    | TvResult
-    | TvDetails
-    | MovieResult
-    | MovieDetails
-    | PersonCreditCast
-    | CollectionResult
-    | PersonResult;
-
-  const getTitle = (item?: MediaItem) => {
-    if (isJellyseerrMovieOrTvResult(item)) {
-      return item.mediaType === MediaType.MOVIE ? item?.title : item?.name;
-    }
-
-    // Handle CollectionResult
-    if (item && "title" in item) {
-      return item.title;
-    }
-
-    if (item && "mediaInfo" in item) {
-      if (item.mediaInfo?.mediaType === MediaType.MOVIE) {
-        return (item as unknown as MovieDetails)?.title;
-      }
-      return (item as unknown as TvDetails)?.name;
-    }
-
-    return undefined;
+  const getTitle = (
+    item?: TvResult | TvDetails | MovieResult | MovieDetails | PersonCreditCast,
+  ) => {
+    return isJellyseerrMovieOrTvResult(item)
+      ? item.mediaType === MediaType.MOVIE
+        ? item?.title
+        : item?.name
+      : item?.mediaInfo?.mediaType === MediaType.MOVIE
+        ? (item as MovieDetails)?.title
+        : (item as TvDetails)?.name;
   };
 
-  const getYear = (item?: MediaItem) => {
-    let dateString = "";
-
-    if (isJellyseerrMovieOrTvResult(item)) {
-      dateString =
-        (item.mediaType === MediaType.MOVIE
+  const getYear = (
+    item?: TvResult | TvDetails | MovieResult | MovieDetails | PersonCreditCast,
+  ) => {
+    return new Date(
+      (isJellyseerrMovieOrTvResult(item)
+        ? item.mediaType === MediaType.MOVIE
           ? item?.releaseDate
-          : item?.firstAirDate) || "";
-    } else if (item && "mediaInfo" in item) {
-      if (item.mediaInfo?.mediaType === MediaType.MOVIE) {
-        dateString = (item as unknown as MovieDetails)?.releaseDate || "";
-      } else {
-        dateString = (item as unknown as TvDetails)?.firstAirDate || "";
-      }
-    }
-
-    return new Date(dateString)?.getFullYear?.();
+          : item?.firstAirDate
+        : item?.mediaInfo?.mediaType === MediaType.MOVIE
+          ? (item as MovieDetails)?.releaseDate
+          : (item as TvDetails)?.firstAirDate) || "",
+    )?.getFullYear?.();
   };
 
-  const getMediaType = (item?: MediaItem): MediaType | undefined => {
-    if (isJellyseerrMovieOrTvResult(item)) {
-      return item.mediaType as MediaType;
-    }
-
-    if (item && "mediaInfo" in item) {
-      return item.mediaInfo?.mediaType;
-    }
-
-    return undefined;
+  const getMediaType = (
+    item?: TvResult | TvDetails | MovieResult | MovieDetails | PersonCreditCast,
+  ): MediaType => {
+    return isJellyseerrMovieOrTvResult(item)
+      ? (item.mediaType as MediaType)
+      : item?.mediaInfo?.mediaType;
   };
 
-  // Adjusted to match current UserSettings field name (discoverRegion)
   const jellyseerrRegion = useMemo(
     () => jellyseerrUser?.settings?.discoverRegion || "US",
     [jellyseerrUser],

i18n.ts

@@ -1,7 +1,6 @@
 import { getLocales } from "expo-localization";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import ar from "./translations/ar.json";
 import ca from "./translations/ca.json";
 import da from "./translations/da.json";
 import de from "./translations/de.json";
@@ -10,7 +9,6 @@ import eo from "./translations/eo.json";
 import es from "./translations/es.json";
 import fi from "./translations/fi.json";
 import fr from "./translations/fr.json";
-import hu from "./translations/hu.json";
 import it from "./translations/it.json";
 import ja from "./translations/ja.json";
 import nb from "./translations/nb.json";
@@ -31,7 +29,6 @@ import zhTW from "./translations/zh-TW.json";
 
 export const APP_LANGUAGES = [
   { label: "Catalan", value: "ca" },
-  { label: "العربية", value: "ar" },
   { label: "Dansk", value: "da" },
   { label: "Deutsch", value: "de" },
   { label: "English", value: "en" },
@@ -42,7 +39,6 @@ export const APP_LANGUAGES = [
   { label: "日本語", value: "ja" },
   { label: "Klingon", value: "tlh" },
   { label: "Türkçe", value: "tr" },
-  { label: "Magyar", value: "hu" },
   { label: "Nederlands", value: "nl" },
   { label: "Polski", value: "pl" },
   { label: "Português (Brasil)", value: "pt-BR" },
@@ -63,14 +59,12 @@ i18n.use(initReactI18next).init({
   compatibilityJSON: "v4",
   resources: {
     ca: { translation: ca },
-    ar: { translation: ar },
     da: { translation: da },
     de: { translation: de },
     en: { translation: en },
     es: { translation: es },
     eo: { translation: eo },
     fr: { translation: fr },
-    hu: { translation: hu },
     it: { translation: it },
     ja: { translation: ja },
     nl: { translation: nl },

login.yaml

@@ -0,0 +1,6 @@
+# login.yaml
+
+appId: your.app.id
+---
+- launchApp
+- tapOn: "Text on the screen"

metro.config.js

@@ -2,7 +2,7 @@
 const { getDefaultConfig } = require("expo/metro-config");
 
 /** @type {import('expo/metro-config').MetroConfig} */
-const config = getDefaultConfig(__dirname); // eslint-disable-line no-undef
+const config = getDefaultConfig(__dirname);
 
 // Add Hermes parser
 config.transformer.hermesParser = true;

modules/index.ts

@@ -1,4 +1,4 @@
-import type {
+import {
   ChapterInfo,
   PlaybackStatePayload,
   ProgressUpdatePayload,
@@ -12,20 +12,16 @@ import type {
 } from "./VlcPlayer.types";
 import VlcPlayerView from "./VlcPlayerView";
 
-// Component
-export { VlcPlayerView };
-
-// Component Types
-export type { VlcPlayerViewProps, VlcPlayerViewRef };
-
-// Media Types
-export type { ChapterInfo, TrackInfo, VlcPlayerSource };
-
-// Playback Events (alphabetically sorted)
-export type {
+export {
+  VlcPlayerView,
+  VlcPlayerViewProps,
+  VlcPlayerViewRef,
   PlaybackStatePayload,
   ProgressUpdatePayload,
   VideoLoadStartPayload,
-  VideoProgressPayload,
   VideoStateChangePayload,
+  VideoProgressPayload,
+  VlcPlayerSource,
+  TrackInfo,
+  ChapterInfo,
 };

package.json

@@ -22,107 +22,108 @@
     "test": "bun run typecheck && bun run lint && bun run format && bun run doctor"
   },
   "dependencies": {
-    "@bottom-tabs/react-navigation": "^0.11.2",
-    "@expo/metro-runtime": "~5.0.5",
+    "@bottom-tabs/react-navigation": "^0.12.2",
+    "@expo/metro-runtime": "~6.1.1",
     "@expo/react-native-action-sheet": "^4.1.1",
-    "@expo/vector-icons": "^14.1.0",
+    "@expo/ui": "^0.2.0-beta.4",
+    "@expo/vector-icons": "^15.0.2",
     "@gorhom/bottom-sheet": "^5.1.0",
     "@jellyfin/sdk": "^0.11.0",
-    "@kesha-antonov/react-native-background-downloader": "^3.2.6",
+    "@kesha-antonov/react-native-background-downloader": "github:fredrikburmester/react-native-background-downloader#d78699b60866062f6d95887412cee3649a548bf2",
     "@react-native-community/netinfo": "^11.4.1",
-    "@react-native-menu/menu": "1.2.3",
     "@react-navigation/material-top-tabs": "^7.2.14",
     "@react-navigation/native": "^7.0.14",
-    "@shopify/flash-list": "^1.8.3",
+    "@shopify/flash-list": "2.0.2",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.7.9",
-    "expo": "^53.0.23",
-    "expo-application": "~6.1.4",
-    "expo-asset": "~11.1.7",
-    "expo-background-task": "~0.2.8",
-    "expo-blur": "~14.1.4",
-    "expo-brightness": "~13.1.4",
-    "expo-build-properties": "~0.14.6",
-    "expo-constants": "~17.1.5",
-    "expo-device": "~7.1.4",
-    "expo-font": "~13.3.1",
-    "expo-haptics": "~14.1.4",
-    "expo-image": "~2.4.0",
-    "expo-linear-gradient": "~14.1.4",
-    "expo-linking": "~7.1.4",
-    "expo-localization": "~16.1.5",
-    "expo-notifications": "~0.31.2",
-    "expo-router": "~5.1.7",
-    "expo-screen-orientation": "~8.1.6",
-    "expo-sensors": "~14.1.4",
-    "expo-sharing": "~13.1.5",
-    "expo-splash-screen": "~0.30.8",
-    "expo-status-bar": "~2.2.3",
-    "expo-system-ui": "~5.0.11",
-    "expo-task-manager": "~13.1.6",
-    "expo-web-browser": "~14.2.0",
+    "expo": "^54.0.10",
+    "expo-application": "~7.0.5",
+    "expo-asset": "~12.0.6",
+    "expo-background-task": "~1.0.5",
+    "expo-blur": "~15.0.5",
+    "expo-brightness": "~14.0.5",
+    "expo-build-properties": "~1.0.6",
+    "expo-constants": "~18.0.6",
+    "expo-dev-client": "~6.0.7",
+    "expo-device": "~8.0.5",
+    "expo-font": "~14.0.6",
+    "expo-haptics": "~15.0.5",
+    "expo-image": "~3.0.5",
+    "expo-linear-gradient": "~15.0.5",
+    "expo-linking": "~8.0.6",
+    "expo-localization": "~17.0.5",
+    "expo-notifications": "~0.32.7",
+    "expo-router": "~6.0.0-preview.12",
+    "expo-screen-orientation": "~9.0.5",
+    "expo-sensors": "~15.0.5",
+    "expo-sharing": "~14.0.5",
+    "expo-splash-screen": "~31.0.7",
+    "expo-status-bar": "~3.0.6",
+    "expo-system-ui": "~6.0.5",
+    "expo-task-manager": "~14.0.5",
+    "expo-web-browser": "~15.0.5",
     "i18next": "^25.0.0",
     "jotai": "^2.12.5",
     "lodash": "^4.17.21",
     "nativewind": "^2.0.11",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "patch-package": "^8.0.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-i18next": "^15.4.0",
-    "react-native": "npm:react-native-tvos@0.79.5-0",
+    "react-native": "npm:react-native-tvos@0.81.4-0",
     "react-native-awesome-slider": "^2.9.0",
-    "react-native-bottom-tabs": "^0.11.2",
+    "react-native-bottom-tabs": "^0.12.2",
     "react-native-circular-progress": "^1.4.1",
     "react-native-collapsible": "^1.6.2",
     "react-native-country-flag": "^2.0.2",
     "react-native-device-info": "^14.0.4",
-    "react-native-gesture-handler": "~2.24.0",
+    "react-native-edge-to-edge": "^1.7.0",
+    "react-native-gesture-handler": "~2.28.0",
     "react-native-google-cast": "^4.9.0",
     "react-native-image-colors": "^2.4.0",
-    "react-native-ios-context-menu": "^3.1.0",
-    "react-native-ios-utilities": "5.1.8",
-    "react-native-mmkv": "2.12.2",
+    "react-native-ios-context-menu": "^3.2.1",
+    "react-native-ios-utilities": "5.2.0",
+    "react-native-mmkv": "4.0.0-beta.12",
+    "react-native-nitro-modules": "^0.29.1",
     "react-native-pager-view": "^6.9.1",
-    "react-native-reanimated": "~3.19.1",
+    "react-native-reanimated": "~4.1.0",
     "react-native-reanimated-carousel": "4.0.2",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "~4.11.1",
-    "react-native-svg": "15.11.2",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "15.12.1",
     "react-native-udp": "^4.1.7",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-uuid": "^2.0.3",
-    "react-native-video": "6.14.1",
+    "react-native-video": "6.16.1",
     "react-native-volume-manager": "^2.0.8",
-    "react-native-web": "^0.20.0",
+    "react-native-web": "^0.21.0",
+    "react-native-worklets": "0.5.1",
     "sonner-native": "^0.21.0",
     "tailwindcss": "3.3.2",
     "use-debounce": "^10.0.4",
-    "zeego": "^3.0.6",
     "zod": "^4.1.3"
   },
   "devDependencies": {
-    "@babel/core": "7.28.5",
-    "@biomejs/biome": "2.2.6",
-    "@react-native-community/cli": "20.0.2",
-    "@react-native-tvos/config-tv": "0.1.4",
-    "@types/jest": "30.0.0",
-    "@types/lodash": "4.17.20",
-    "@types/react": "~19.0.10",
-    "@types/react-test-renderer": "19.1.0",
-    "cross-env": "10.1.0",
-    "expo-dev-client": "5.2.4",
-    "expo-doctor": "1.17.11",
-    "husky": "9.1.7",
-    "lint-staged": "16.2.6",
+    "@babel/core": "^7.20.0",
+    "@biomejs/biome": "^2.2.4",
+    "@react-native-community/cli": "^20.0.0",
+    "@react-native-tvos/config-tv": "^0.1.1",
+    "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "~19.1.10",
+    "@types/react-test-renderer": "^19.0.0",
+    "cross-env": "^10.0.0",
+    "expo-doctor": "^1.17.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.5",
+    "postinstall-postinstall": "^2.1.0",
     "react-test-renderer": "19.1.1",
-    "typescript": "5.8.3"
+    "typescript": "~5.9.2"
   },
   "expo": {
     "install": {
       "exclude": [
-        "react-native",
-        "@shopify/flash-list",
-        "react-native-reanimated",
-        "react-native-pager-view"
+        "react-native"
       ]
     },
     "doctor": {
@@ -139,6 +140,9 @@
     }
   },
   "private": true,
+  "disabledDependencies": {
+    "@kesha-antonov/react-native-background-downloader": "^3.2.6"
+  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "biome check --write --unsafe --no-errors-on-unmatched"
@@ -148,6 +152,7 @@
     ]
   },
   "trustedDependencies": [
+    "postinstall-postinstall",
     "unrs-resolver"
   ]
 }