Merge branch 'develop' into view-password

2026-03-04 16:56:16 +00:00 · 2025-09-04 00:19:17 +02:00 · 2025-09-03 15:47:18 +02:00 · 2025-09-02 15:34:47 +02:00 · 2025-09-01 23:40:46 +02:00 · 2025-09-01 23:40:01 +02:00
124 changed files with 3103 additions and 7927 deletions
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -1,60 +0,0 @@
 # Copilot Instructions for Streamyfin
 ## Project Overview
 Streamyfin is a cross-platform Jellyfin video streaming client built with Expo (React Native).  
 It supports mobile (iOS/Android) and TV platforms, and integrates with Jellyfin and Jellyseerr APIs.
 ## Main Technologies
 - 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 atoms
 - `assets/` – Images and static assets
 - `scripts/` – Automation scripts (Node.js, Bash)
 - `plugins/` – Expo/Metro plugins
 - `README.md` – Project documentation
 ## Coding Conventions
 - 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 Usage
 - 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/en/v1.0.0/) (e.g., `feat:`, `fix:`, `chore:`).
 - Example: `feat(player): add Chromecast support`
 ## Special Instructions
 - 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.**
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -5,8 +5,6 @@
  and to ensure all necessary checks are completed before merging.
 -->
 # 📦 Pull Request
 ## 🔖 Summary
 <!--
 A concise description of the changes introduced by this PR.
@@ -36,12 +34,6 @@ Spec: https://www.conventionalcommits.org/ -->
 - Short summary: what changed and why (1–2 lines)
 -->
 ## 📋 Details
 <!--
 Provide more context or background. Explain any non-obvious decisions.
 Include screenshots or GIFs for UI changes if applicable.
 -->
 ### ⚠️ Breaking Changes
 <!-- List any breaking API/contract changes and migration guidance. If none, write “None”. -->
@@ -52,7 +44,10 @@ Include screenshots or GIFs for UI changes if applicable.
 <!-- Hot paths, memory/CPU/latency implications, benchmarks if available. -->
 ### 🖼️ Screenshots / GIFs (if UI)
-<!-- Before/After, dark mode, responsive states. -->
+<!-- 
 Provide more context or background. Explain any non-obvious decisions.
 Before/After, dark mode, responsive states. 
 -->
 ## ✅ Checklist
 <!--
--- a/.github/workflows/artifact-comment.yml
+++ b/.github/workflows/artifact-comment.yml
@@ -1,478 +0,0 @@
 name: 📝 Artifact Comment on PR
 concurrency:
  group: artifact-comment-${{ github.event.workflow_run.head_sha || github.sha }}
  cancel-in-progress: true
 on:
  workflow_dispatch: # Allow manual testing
  pull_request: # Show in PR checks and provide status updates
    types: [opened, synchronize, reopened]
  workflow_run: # Triggered when build workflows complete
    workflows:
      - "🏗️ Build Apps"
    types:
      - completed
 jobs:
  comment-artifacts:
    if: github.event_name == 'workflow_dispatch' || github.event_name == 'pull_request' || (github.event_name == 'workflow_run' && github.event.workflow_run.event == 'pull_request')
    name: 📦 Post Build Artifacts
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
      actions: read
    steps:
      - name: 🔍 Get PR and Artifacts
        uses: actions/github-script@v8
        with:
          script: |
            // Check if we're running from a fork (more precise detection)
            const targetRepo = context.repo.owner + '/' + context.repo.repo;
            const prHeadRepo = context.payload.pull_request?.head?.repo?.full_name;
            const workflowHeadRepo = context.payload.workflow_run?.head_repository?.full_name;
            // For debugging
            console.log('🔍 Repository detection:');
            console.log('- Target repository:', targetRepo);
            console.log('- PR head repository:', prHeadRepo || 'N/A');
            console.log('- Workflow head repository:', workflowHeadRepo || 'N/A');
            console.log('- Event name:', context.eventName);
            // Only skip if it's actually a different repository (fork)
            const isFromFork = prHeadRepo && prHeadRepo !== targetRepo;
            const workflowFromFork = workflowHeadRepo && workflowHeadRepo !== targetRepo;
            if (isFromFork || workflowFromFork) {
              console.log('🚫 Workflow running from fork - skipping comment creation to avoid permission errors');
              console.log('Fork repository:', prHeadRepo || workflowHeadRepo);
              console.log('Target repository:', targetRepo);
              return;
            }
            console.log('✅ Same repository - proceeding with comment creation');            // Handle repository_dispatch, pull_request, and manual dispatch events
            let pr;
            let targetCommitSha;
            if (context.eventName === 'workflow_run') {
              // Find PR associated with this workflow run commit
              console.log('Workflow run event:', context.payload.workflow_run.name);
              const { data: pullRequests } = await github.rest.repos.listPullRequestsAssociatedWithCommit({
                owner: context.repo.owner,
                repo: context.repo.repo,
                commit_sha: context.payload.workflow_run.head_sha
              });
              if (pullRequests.length === 0) {
                console.log('No pull request found for commit:', context.payload.workflow_run.head_sha);
                return;
              }
              pr = pullRequests[0];
              targetCommitSha = context.payload.workflow_run.head_sha;
            } else if (context.eventName === 'pull_request') {
              // Direct PR event
              pr = context.payload.pull_request;
              targetCommitSha = pr.head.sha;
            } else if (context.eventName === 'workflow_dispatch') {
              // For manual testing, try to find PR for current branch/commit
              console.log('Manual workflow dispatch triggered');
              // First, try to find PRs associated with current commit
              try {
                const { data: pullRequests } = await github.rest.repos.listPullRequestsAssociatedWithCommit({
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  commit_sha: context.sha
                });
                if (pullRequests.length > 0) {
                  pr = pullRequests[0];
                  targetCommitSha = pr.head.sha;
                  console.log(`Found PR #${pr.number} for commit ${context.sha.substring(0, 7)}`);
                } else {
                  // Fallback: get latest open PR
                  const { data: openPRs } = await github.rest.pulls.list({
                    owner: context.repo.owner,
                    repo: context.repo.repo,
                    state: 'open',
                    sort: 'updated',
                    direction: 'desc',
                    per_page: 1
                  });
                  if (openPRs.length > 0) {
                    pr = openPRs[0];
                    targetCommitSha = pr.head.sha;
                    console.log(`Using latest open PR #${pr.number} for manual testing`);
                  } else {
                    console.log('No open PRs found for manual testing');
                    return;
                  }
                }
              } catch (error) {
                console.log('Error finding PR for manual testing:', error.message);
                return;
              }
            } else {
              console.log('Unsupported event type:', context.eventName);
              return;
            }
            console.log(`Processing PR #${pr.number} for commit ${targetCommitSha.substring(0, 7)}`);
            // Get all recent workflow runs for this PR to collect artifacts from multiple builds
            const { data: workflowRuns } = await github.rest.actions.listWorkflowRunsForRepo({
              owner: context.repo.owner,
              repo: context.repo.repo,
              head_sha: targetCommitSha,
              per_page: 30
            });
            // Filter for build workflows only, include active runs even if marked as cancelled
            const buildRuns = workflowRuns.workflow_runs
              .filter(run => 
                (run.name.includes('Build Apps') ||
                run.name.includes('Android APK Build') || 
                run.name.includes('iOS IPA Build'))
              )
              .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
            console.log(`Found ${buildRuns.length} non-cancelled build workflow runs for this commit`);
            // Log current status of each build for debugging
            buildRuns.forEach(run => {
              console.log(`- ${run.name}: ${run.status} (${run.conclusion || 'no conclusion yet'}) - Created: ${run.created_at}`);
            });
            // Collect artifacts and statuses from builds - prioritize active runs over completed ones
            let allArtifacts = [];
            let buildStatuses = {};
            // Get the most relevant run for each workflow type (prioritize active over cancelled)
            const findBestRun = (nameFilter) => {
              const matchingRuns = buildRuns.filter(run => run.name.includes(nameFilter));
              // First try to find an in-progress run
              const inProgressRun = matchingRuns.find(run => run.status === 'in_progress');
              if (inProgressRun) return inProgressRun;
              // Then try to find a queued run
              const queuedRun = matchingRuns.find(run => run.status === 'queued');
              if (queuedRun) return queuedRun;
              // Check if the workflow is completed but has non-cancelled jobs
              const completedRuns = matchingRuns.filter(run => run.status === 'completed');
              for (const run of completedRuns) {
                // We'll check individual jobs later to see if they're actually running
                if (run.conclusion !== 'cancelled') {
                  return run;
                }
              }
              // Finally fall back to most recent run (even if cancelled at workflow level)
              return matchingRuns[0]; // Already sorted by most recent first
            };
            const latestAppsRun = findBestRun('Build Apps');
            const latestAndroidRun = findBestRun('Android APK Build');
            const latestIOSRun = findBestRun('iOS IPA Build');
            // For the consolidated workflow, get individual job statuses
            if (latestAppsRun) {
              console.log(`Getting individual job statuses for run ${latestAppsRun.id} (status: ${latestAppsRun.status}, conclusion: ${latestAppsRun.conclusion || 'none'})`);
              try {
                // Get all jobs for this workflow run
                const { data: jobs } = await github.rest.actions.listJobsForWorkflowRun({
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  run_id: latestAppsRun.id
                });
                console.log(`Found ${jobs.jobs.length} jobs in workflow run`);
                jobs.jobs.forEach(job => {
                  console.log(`- Job: ${job.name} | Status: ${job.status} | Conclusion: ${job.conclusion || 'none'}`);
                });
                // Check if we have any actually running jobs (not cancelled)
                const activeJobs = jobs.jobs.filter(job => 
                  job.status === 'in_progress' || 
                  job.status === 'queued' ||
                  (job.status === 'completed' && job.conclusion !== 'cancelled')
                );
                console.log(`Found ${activeJobs.length} active (non-cancelled) jobs out of ${jobs.jobs.length} total jobs`);
                // If no jobs are actually running, skip this workflow
                if (activeJobs.length === 0 && latestAppsRun.conclusion === 'cancelled') {
                  console.log('All jobs are cancelled, skipping this workflow run');
                  return; // Exit early
                }
                // Map job names to our build targets
                const jobMappings = {
                  'Android Phone': ['🤖 Build Android APK (Phone)', 'build-android-phone'],
                  'Android TV': ['🤖 Build Android APK (TV)', 'build-android-tv'],  
                  'iOS Phone': ['🍎 Build iOS IPA (Phone)', 'build-ios-phone']
                };
                // Create individual status for each job
                for (const [platform, jobNames] of Object.entries(jobMappings)) {
                  const job = jobs.jobs.find(j => 
                    jobNames.some(name => j.name.includes(name) || j.name === name)
                  );
                  if (job) {
                    buildStatuses[platform] = {
                      name: job.name,
                      status: job.status,
                      conclusion: job.conclusion,
                      url: job.html_url,
                      runId: latestAppsRun.id,
                      created_at: job.started_at || latestAppsRun.created_at
                    };
                    console.log(`Mapped ${platform} to job: ${job.name} (${job.status}/${job.conclusion || 'none'})`);
                  } else {
                    console.log(`No job found for ${platform}, using workflow status as fallback`);
                    buildStatuses[platform] = {
                      name: latestAppsRun.name,
                      status: latestAppsRun.status,
                      conclusion: latestAppsRun.conclusion,
                      url: latestAppsRun.html_url,
                      runId: latestAppsRun.id,
                      created_at: latestAppsRun.created_at
                    };
                  }
                }
              } catch (error) {
                console.log(`Failed to get jobs for run ${latestAppsRun.id}:`, error.message);
                // Fallback to workflow-level status
                buildStatuses['Android Phone'] = buildStatuses['Android TV'] = buildStatuses['iOS Phone'] = {
                  name: latestAppsRun.name,
                  status: latestAppsRun.status,
                  conclusion: latestAppsRun.conclusion,
                  url: latestAppsRun.html_url,
                  runId: latestAppsRun.id,
                  created_at: latestAppsRun.created_at
                };
              }
              // Collect artifacts if any job has completed successfully
              if (latestAppsRun.status === 'completed' || 
                  Object.values(buildStatuses).some(status => status.conclusion === 'success')) {
                try {
                  const { data: artifacts } = await github.rest.actions.listWorkflowRunArtifacts({
                    owner: context.repo.owner,
                    repo: context.repo.repo,
                    run_id: latestAppsRun.id
                  });
                  allArtifacts.push(...artifacts.artifacts);
                } catch (error) {
                  console.log(`Failed to get apps artifacts for run ${latestAppsRun.id}:`, error.message);
                }
              }
            } else {
              // Fallback to separate workflows (for backward compatibility)
              if (latestAndroidRun) {
                buildStatuses['Android'] = {
                  name: latestAndroidRun.name,
                  status: latestAndroidRun.status,
                  conclusion: latestAndroidRun.conclusion,
                  url: latestAndroidRun.html_url,
                  runId: latestAndroidRun.id,
                  created_at: latestAndroidRun.created_at
                };
                if (latestAndroidRun.conclusion === 'success') {
                  try {
                    const { data: artifacts } = await github.rest.actions.listWorkflowRunArtifacts({
                      owner: context.repo.owner,
                      repo: context.repo.repo,
                      run_id: latestAndroidRun.id
                    });
                    allArtifacts.push(...artifacts.artifacts);
                  } catch (error) {
                    console.log(`Failed to get Android artifacts for run ${latestAndroidRun.id}:`, error.message);
                  }
                }
              }
              if (latestIOSRun) {
                buildStatuses['iOS'] = {
                  name: latestIOSRun.name,
                  status: latestIOSRun.status,
                  conclusion: latestIOSRun.conclusion,
                  url: latestIOSRun.html_url,
                  runId: latestIOSRun.id,
                  created_at: latestIOSRun.created_at
                };
                if (latestIOSRun.conclusion === 'success') {
                  try {
                    const { data: artifacts } = await github.rest.actions.listWorkflowRunArtifacts({
                      owner: context.repo.owner,
                      repo: context.repo.repo,
                      run_id: latestIOSRun.id
                    });
                    allArtifacts.push(...artifacts.artifacts);
                  } catch (error) {
                    console.log(`Failed to get iOS artifacts for run ${latestIOSRun.id}:`, error.message);
                  }
                }
              }
            }
            console.log(`Collected ${allArtifacts.length} total artifacts from all builds`);
            // Debug: Show which workflow we're using and its status
            if (latestAppsRun) {
              console.log(`Using consolidated workflow: ${latestAppsRun.name} (${latestAppsRun.status}/${latestAppsRun.conclusion})`);
            } else {
              console.log(`Using separate workflows - Android: ${latestAndroidRun?.name || 'none'}, iOS: ${latestIOSRun?.name || 'none'}`);
            }
            // Debug: List all artifacts found
            allArtifacts.forEach(artifact => {
              console.log(`- Artifact: ${artifact.name} (from run ${artifact.workflow_run.id})`);
            });
            // Build comment body with progressive status for individual builds
            let commentBody = `## 🔧 Build Status for PR #${pr.number}\n\n`;
            commentBody += `🔗 **Commit**: [\`${targetCommitSha.substring(0, 7)}\`](https://github.com/${context.repo.owner}/${context.repo.repo}/commit/${targetCommitSha})\n\n`;            // Progressive build status and downloads table
            commentBody += `### 📦 Build Artifacts\n\n`;
            commentBody += `| Platform | Device | Status | Download |\n`;
            commentBody += `|----------|--------|--------|---------|\n`;
            // Process each expected build target individually
            const buildTargets = [
              { name: 'Android Phone', platform: '🤖', device: '📱', statusKey: 'Android Phone', artifactPattern: /android.*phone/i },
              { name: 'Android TV', platform: '🤖', device: '📺', statusKey: 'Android TV', artifactPattern: /android.*tv/i },
              { name: 'iOS Phone', platform: '🍎', device: '📱', statusKey: 'iOS Phone', artifactPattern: /ios.*phone/i },
              { name: 'iOS TV', platform: '🍎', device: '📺', statusKey: 'iOS TV', artifactPattern: /ios.*tv/i }
            ];
            for (const target of buildTargets) {
              // Find matching job status directly
              const matchingStatus = buildStatuses[target.statusKey];
              // Find matching artifact
              const matchingArtifact = allArtifacts.find(artifact => 
                target.artifactPattern.test(artifact.name)
              );
              let status = '⏳ Pending';
              let downloadLink = '*Waiting for build...*';
              // Special case for iOS TV - show as disabled
              if (target.name === 'iOS TV') {
                status = '💤 Disabled';
                downloadLink = '*Disabled for now*';
              } else if (matchingStatus) {
                if (matchingStatus.conclusion === 'success' && matchingArtifact) {
                  status = '✅ Complete';
                  const directLink = `https://github.com/${context.repo.owner}/${context.repo.repo}/actions/runs/${matchingArtifact.workflow_run.id}/artifacts/${matchingArtifact.id}`;
                  const fileType = target.name.includes('Android') ? 'APK' : 'IPA';
                  downloadLink = `[📥 Download ${fileType}](${directLink})`;
                } else if (matchingStatus.conclusion === 'failure') {
                  status = `❌ [Failed](${matchingStatus.url})`;
                  downloadLink = '*Build failed*';
                } else if (matchingStatus.conclusion === 'cancelled') {
                  status = `⚪ [Cancelled](${matchingStatus.url})`;
                  downloadLink = '*Build cancelled*';
                } else if (matchingStatus.status === 'in_progress') {
                  status = `🔄 [Building...](${matchingStatus.url})`;
                  downloadLink = '*Build in progress...*';
                } else if (matchingStatus.status === 'queued') {
                  status = `⏳ [Queued](${matchingStatus.url})`;
                  downloadLink = '*Waiting to start...*';
                } else if (matchingStatus.status === 'completed' && !matchingStatus.conclusion) {
                  // Workflow completed but conclusion not yet available (rare edge case)
                  status = `🔄 [Finishing...](${matchingStatus.url})`;
                  downloadLink = '*Finalizing build...*';
                } else if (matchingStatus.status === 'completed' && matchingStatus.conclusion === 'success' && !matchingArtifact) {
                  // Build succeeded but artifacts not yet available
                  status = `⏳ [Processing artifacts...](${matchingStatus.url})`;
                  downloadLink = '*Preparing download...*';
                } else {
                  // Fallback for any unexpected states
                  status = `❓ [${matchingStatus.status}/${matchingStatus.conclusion || 'pending'}](${matchingStatus.url})`;
                  downloadLink = `*Status: ${matchingStatus.status}, Conclusion: ${matchingStatus.conclusion || 'pending'}*`;
                }
              }
              commentBody += `| ${target.platform} ${target.name.split(' ')[0]} | ${target.device} ${target.name.split(' ')[1]} | ${status} | ${downloadLink} |\n`;
            }
            commentBody += `\n`;
            // Show installation instructions if we have any artifacts
            if (allArtifacts.length > 0) {
              commentBody += `### 🔧 Installation Instructions\n\n`;
              commentBody += `- **Android APK**: Download and install directly on your device (enable "Install from unknown sources")\n`;
              commentBody += `- **iOS IPA**: Install using [AltStore](https://altstore.io/), [Sideloadly](https://sideloadly.io/), or Xcode\n\n`;
              commentBody += `> ⚠️ **Note**: Artifacts expire in 7 days from build date\n\n`;
            } else {
              commentBody += `⏳ **Builds are starting up...** This comment will update automatically as each build completes.\n\n`;
            }
            commentBody += `<sub>*Auto-generated by [GitHub Actions](https://github.com/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId})*</sub>`;
            commentBody += `\n<!-- streamyfin-artifact-comment -->`;
            // Try to find existing bot comment to update (with permission check)
            try {
              const { data: comments } = await github.rest.issues.listComments({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: pr.number
              });
              const botComment = comments.find(comment => 
                comment.user.type === 'Bot' && 
                comment.body.includes('<!-- streamyfin-artifact-comment -->')
              );
              if (botComment) {
                // Update existing comment
                await github.rest.issues.updateComment({
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  comment_id: botComment.id,
                  body: commentBody
                });
                console.log(`✅ Updated comment ${botComment.id} on PR #${pr.number}`);
              } else {
                // Create new comment
                await github.rest.issues.createComment({
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  issue_number: pr.number,
                  body: commentBody
                });
                console.log(`✅ Created new comment on PR #${pr.number}`);
              }
            } catch (error) {
              if (error.status === 403) {
                console.log('🚫 Permission denied - likely running from a fork. Skipping comment creation.');
                console.log('Error details:', error.message);
                // Log the build status instead of commenting
                console.log('📊 Build Status Summary:');
                for (const target of buildTargets) {
                  const matchingStatus = buildStatuses[target.statusKey];
                  if (matchingStatus) {
                    console.log(`- ${target.name}: ${matchingStatus.status}/${matchingStatus.conclusion || 'none'}`);
                  }
                }
              } else {
                // Re-throw other errors
                throw error;
              }
            }
--- a/.github/workflows/build-android.yml
+++ b/.github/workflows/build-android.yml
@@ -0,0 +1,93 @@
 name: 🤖 Android APK Build (Phone + TV)
 concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
 on:
  workflow_dispatch:
  pull_request:
    branches: [develop, master]
  push:
    branches: [develop, master]
 jobs:
  build-android:
    if: (!contains(github.event.head_commit.message, '[skip ci]'))
    runs-on: ubuntu-24.04
    name: 🏗️ Build Android APK
    permissions:
      contents: read
    strategy:
      fail-fast: false
      matrix:
        target: [phone, tv]
    steps:
      - name: 📥 Checkout code
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          ref: ${{ github.event.pull_request.head.sha || github.sha }}
          fetch-depth: 0
          submodules: recursive
          show-progress: false
      - name: 🍞 Setup Bun
        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
        with:
          bun-version: latest
      - name: 💾 Cache Bun dependencies
        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
        with:
          path: ~/.bun/install/cache
          key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
          restore-keys: |
            ${{ runner.os }}-${{ runner.arch }}-bun-develop
            ${{ runner.os }}-bun-develop
      - name: 📦 Install dependencies and reload submodules
        run: |
          bun install --frozen-lockfile
          bun run submodule-reload
      - name: 💾 Cache Gradle global
        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
        with:
          path: |
            ~/.gradle/caches
            ~/.gradle/wrapper
          key: ${{ runner.os }}-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
          restore-keys: ${{ runner.os }}-gradle-develop
      - name: 🛠️ Generate project files
        run: |
          if [ "${{ matrix.target }}" = "tv" ]; then
            bun run prebuild:tv
          else
            bun run prebuild
          fi
      - name: 💾 Cache project Gradle (.gradle)
        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
        with:
          path: android/.gradle
          key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
          restore-keys: ${{ runner.os }}-android-gradle-develop
      - name: 🚀 Build APK
        env:
          EXPO_TV: ${{ matrix.target == 'tv' && 1 || 0 }}
        run: bun run build:android:local
      - name: 📅 Set date tag
        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
      - name: 📤 Upload APK artifact
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: streamyfin-android-${{ matrix.target }}-apk-${{ env.DATE_TAG }}
          path: |
            android/app/build/outputs/apk/release/*.apk
          retention-days: 7
--- a/.github/workflows/build-apps.yml
+++ b/.github/workflows/build-apps.yml
@@ -1,280 +0,0 @@
 name: 🏗️ Build Apps
 concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
 on:
  workflow_dispatch:
  pull_request:
    branches: [develop, master]
  push:
    branches: [develop, master]
 jobs:
  build-android-phone:
    if: (!contains(github.event.head_commit.message, '[skip ci]'))
    runs-on: ubuntu-24.04
    name: 🤖 Build Android APK (Phone)
    permissions:
      contents: read
    steps:
      - name: 📥 Checkout code
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          ref: ${{ github.event.pull_request.head.sha || github.sha }}
          fetch-depth: 0
          submodules: recursive
          show-progress: false
      - name: 🍞 Setup Bun
        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
        with:
          bun-version: latest
      - name: 💾 Cache Bun dependencies
        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: ~/.bun/install/cache
          key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
          restore-keys: |
            ${{ runner.os }}-${{ runner.arch }}-bun-develop
            ${{ runner.os }}-bun-develop
      - name: 📦 Install dependencies and reload submodules
        run: |
          bun install --frozen-lockfile
          bun run submodule-reload
      - name: 💾 Cache Gradle global
        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: |
            ~/.gradle/caches
            ~/.gradle/wrapper
          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
          restore-keys: |
            ${{ runner.os }}-gradle-
      - name: 🛠️ Generate project files
        run: bun run prebuild
      - name: 💾 Cache project Gradle (.gradle)
        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: android/.gradle
          key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
          restore-keys: ${{ runner.os }}-android-gradle-develop
      - name: 🚀 Build APK
        env:
          EXPO_TV: 0
        run: bun run build:android:local
      - name: 📅 Set date tag
        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
      - name: 📤 Upload APK artifact
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: streamyfin-android-phone-apk-${{ env.DATE_TAG }}
          path: |
            android/app/build/outputs/apk/release/*.apk
          retention-days: 7
  build-android-tv:
    if: (!contains(github.event.head_commit.message, '[skip ci]'))
    runs-on: ubuntu-24.04
    name: 🤖 Build Android APK (TV)
    permissions:
      contents: read
    steps:
      - name: 📥 Checkout code
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          ref: ${{ github.event.pull_request.head.sha || github.sha }}
          fetch-depth: 0
          submodules: recursive
          show-progress: false
      - name: 🍞 Setup Bun
        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
        with:
          bun-version: latest
      - name: 💾 Cache Bun dependencies
        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: ~/.bun/install/cache
          key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
          restore-keys: |
            ${{ runner.os }}-${{ runner.arch }}-bun-develop
            ${{ runner.os }}-bun-develop
      - name: 📦 Install dependencies and reload submodules
        run: |
          bun install --frozen-lockfile
          bun run submodule-reload
      - name: 💾 Cache Gradle global
        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: |
            ~/.gradle/caches
            ~/.gradle/wrapper
          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
          restore-keys: |
            ${{ runner.os }}-gradle-
      - name: 🛠️ Generate project files
        run: bun run prebuild:tv
      - name: 💾 Cache project Gradle (.gradle)
        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: android/.gradle
          key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
          restore-keys: ${{ runner.os }}-android-gradle-develop
      - name: 🚀 Build APK
        env:
          EXPO_TV: 1
        run: bun run build:android:local
      - name: 📅 Set date tag
        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
      - name: 📤 Upload APK artifact
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: streamyfin-android-tv-apk-${{ env.DATE_TAG }}
          path: |
            android/app/build/outputs/apk/release/*.apk
          retention-days: 7
  build-ios-phone:
    if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
    runs-on: macos-15
    name: 🍎 Build iOS IPA (Phone)
    permissions:
      contents: read
    steps:
      - name: 📥 Checkout code
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          ref: ${{ github.event.pull_request.head.sha || github.sha }}
          fetch-depth: 0
          submodules: recursive
          show-progress: false
      - name: 🍞 Setup Bun
        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
        with:
          bun-version: latest
      - name: 💾 Cache Bun dependencies
        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: ~/.bun/install/cache
          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
          restore-keys: |
            ${{ runner.os }}-bun-cache
      - name: 📦 Install dependencies and reload submodules
        run: |
          bun install --frozen-lockfile
          bun run submodule-reload
      - name: 🛠️ Generate project files
        run: bun run prebuild
      - name: 🏗️ Setup EAS
        uses: expo/expo-github-action@main
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
          eas-cache: true
      - name: ⚙️ Ensure iOS SDKs installed
        run: xcodebuild -downloadPlatform iOS
      - name: 🚀 Build iOS app
        env:
          EXPO_TV: 0
        run: eas build -p ios --local --non-interactive
      - name: 📅 Set date tag
        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
      - name: 📤 Upload IPA artifact
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: streamyfin-ios-phone-ipa-${{ env.DATE_TAG }}
          path: build-*.ipa
          retention-days: 7
  # Disabled for now - uncomment when ready to build iOS TV
  # build-ios-tv:
  #   if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
  #   runs-on: macos-15
  #   name: 🍎 Build iOS IPA (TV)
  #   permissions:
  #     contents: read
  #
  #   steps:
  #     - name: 📥 Checkout code
  #       uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
  #       with:
  #         ref: ${{ github.event.pull_request.head.sha || github.sha }}
  #         fetch-depth: 0
  #         submodules: recursive
  #         show-progress: false
  #
  #     - name: 🍞 Setup Bun
  #       uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
  #       with:
  #         bun-version: latest
  #
  #     - name: 💾 Cache Bun dependencies
  #       uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
  #       with:
  #         path: ~/.bun/install/cache
  #         key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
  #         restore-keys: |
  #           ${{ runner.os }}-bun-cache
  #
  #     - name: 📦 Install dependencies and reload submodules
  #       run: |
  #         bun install --frozen-lockfile
  #         bun run submodule-reload
  #
  #     - name: 🛠️ Generate project files
  #       run: bun run prebuild:tv
  #
  #     - name: 🏗️ Setup EAS
  #       uses: expo/expo-github-action@main
  #       with:
  #         eas-version: latest
  #         token: ${{ secrets.EXPO_TOKEN }}
  #         eas-cache: true
  #
  #     - name: ⚙️ Ensure tvOS SDKs installed
  #       run: xcodebuild -downloadPlatform tvOS
  #
  #     - name: 🚀 Build iOS app
  #       env:
  #         EXPO_TV: 1
  #       run: eas build -p ios --local --non-interactive
  #
  #     - name: 📅 Set date tag
  #       run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
  #
  #     - name: 📤 Upload IPA artifact
  #       uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
  #       with:
  #         name: streamyfin-ios-tv-ipa-${{ env.DATE_TAG }}
  #         path: build-*.ipa
  #         retention-days: 7
--- a/.github/workflows/build-ios.yml
+++ b/.github/workflows/build-ios.yml
@@ -0,0 +1,95 @@
 name: 🤖 iOS IPA Build (Phone + TV)
 concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
 on:
  workflow_dispatch:
  pull_request:
    branches: [develop, master]
    paths-ignore:
      - '*.md'
  push:
    branches: [develop, master]
    paths-ignore:
      - '*.md'
 jobs:
  build-ios:
    if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
    runs-on: macos-15
    name: 🏗️ Build iOS IPA
    permissions:
      contents: read
    strategy:
      fail-fast: false
      matrix:
        target: [phone]
 #        target: [phone, tv]
    steps:
      - name: 📥 Checkout code
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
        with:
          ref: ${{ github.event.pull_request.head.sha || github.sha }}
          fetch-depth: 0
          submodules: recursive
          show-progress: false
      - name: 🍞 Setup Bun
        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
        with:
          bun-version: latest
      - name: 💾 Cache Bun dependencies
        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
        with:
          path: ~/.bun/install/cache
          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
          restore-keys: |
            ${{ runner.os }}-bun-cache
      - name: 📦 Install dependencies and reload submodules
        run: |
          bun install --frozen-lockfile
          bun run submodule-reload
      - name: 🛠️ Generate project files
        run: |
          if [ "${{ matrix.target }}" = "tv" ]; then
            bun run prebuild:tv
          else
            bun run prebuild
          fi
      - name: 🏗️ Setup EAS
        uses: expo/expo-github-action@main
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
          eas-cache: true
      - name: ⚙️ Ensure iOS/tvOS SDKs installed
        run: |
          if [ "${{ matrix.target }}" = "tv" ]; then
            xcodebuild -downloadPlatform tvOS
          else
            xcodebuild -downloadPlatform iOS
          fi
      - name: 🚀 Build iOS app
        env:
          EXPO_TV: ${{ matrix.target == 'tv' && 1 || 0 }}
        run: eas build -p ios --local --non-interactive
      - name: 📅 Set date tag
        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
      - name: 📤 Upload IPA artifact
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: streamyfin-ios-${{ matrix.target }}-ipa-${{ env.DATE_TAG }}
          path: build-*.ipa
          retention-days: 7
--- a/.github/workflows/check-lockfile.yml
+++ b/.github/workflows/check-lockfile.yml
@@ -32,7 +32,7 @@ jobs:
          bun-version: latest
      - name: 💾 Cache Bun dependencies
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
        with:
          path: |
            ~/.bun/install/cache
--- a/.github/workflows/ci-codeql.yml
+++ b/.github/workflows/ci-codeql.yml
@@ -31,13 +31,13 @@ jobs:
          fetch-depth: 0
      - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/init@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0
        with:
          languages: ${{ matrix.language }}
          queries: +security-extended,security-and-quality
      - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/autobuild@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0
      - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/analyze@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0
--- a/.github/workflows/crowdin.yml
+++ b/.github/workflows/crowdin.yml
@@ -1,34 +0,0 @@
 name: Crowdin Action
 on:
  push:
    branches: [ main ]
 jobs:
  synchronize-with-crowdin:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: crowdin action
        uses: crowdin/github-action@v2
        with:
          upload_sources: true
          upload_translations: true
          download_translations: true
          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'
        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 }}
          # Visit https://crowdin.com/settings#api-key to create this token
          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
--- a/.github/workflows/linting.yml
+++ b/.github/workflows/linting.yml
@@ -57,7 +57,7 @@ jobs:
          fetch-depth: 0
      - name: Dependency Review
-        uses: actions/dependency-review-action@56339e523c0409420f6c2c9a2f4292bbb3c07dd3 # v4.8.0
+        uses: actions/dependency-review-action@595b5aeba73380359d98a5e087f648dbb0edce1b # v4.7.3
        with:
          fail-on-severity: high
          base-ref: ${{ github.event.pull_request.base.sha || 'develop' }}
@@ -65,7 +65,6 @@ jobs:
  expo-doctor:
    name: 🚑 Expo Doctor Check
    if: false
    runs-on: ubuntu-24.04
    steps:
      - name: 🛒 Checkout repository
@@ -107,7 +106,7 @@ jobs:
          fetch-depth: 0
      - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version: '24.x'
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -15,7 +15,7 @@ jobs:
    steps:
      - name: 🔄 Mark/Close Stale Issues
-        uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10.0.0
+        uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9.1.0
        with:
          # Global settings
          repo-token: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/update-issue-form.yml
+++ b/.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version: '24.x'
          cache: 'npm'
--- a/GLOBAL_MODAL_GUIDE.md
+++ b/GLOBAL_MODAL_GUIDE.md
@@ -1,232 +0,0 @@
 # 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
--- a/app.json
+++ b/app.json
@@ -2,13 +2,12 @@
  "expo": {
    "name": "Streamyfin",
    "slug": "streamyfin",
-    "version": "0.39.0",
+    "version": "0.35.1",
    "orientation": "default",
    "icon": "./assets/images/icon.png",
    "scheme": "streamyfin",
    "userInterfaceStyle": "dark",
    "jsEngine": "hermes",
    "newArchEnabled": true,
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "requireFullScreen": true,
@@ -38,7 +37,7 @@
    },
    "android": {
      "jsEngine": "hermes",
-      "versionCode": 71,
+      "versionCode": 67,
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/icon-android-plain.png",
        "monochromeImage": "./assets/images/icon-android-themed.png",
@@ -50,7 +49,6 @@
        "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK",
        "android.permission.WRITE_SETTINGS"
      ],
      "blockedPermissions": ["android.permission.ACTIVITY_RECOGNITION"],
      "googleServicesFile": "./google-services.json"
    },
    "plugins": [
@@ -78,7 +76,6 @@
            "useFrameworks": "static"
          },
          "android": {
            "buildArchs": ["arm64-v8a", "x86_64"],
            "compileSdkVersion": 35,
            "targetSdkVersion": 35,
            "buildToolsVersion": "35.0.0",
@@ -124,7 +121,7 @@
      [
        "expo-splash-screen",
        {
-          "backgroundColor": "#010101",
+          "backgroundColor": "#2e2e2e",
          "image": "./assets/images/icon-ios-plain.png",
          "imageWidth": 100
        }
@@ -156,6 +153,7 @@
    },
    "updates": {
      "url": "https://u.expo.dev/e79219d1-797f-4fbe-9fa1-cfd360690a68"
-    }
+    },
    "newArchEnabled": false
  }
 }
--- a/app/(auth)/(tabs)/(custom-links)/_layout.tsx
+++ b/app/(auth)/(tabs)/(custom-links)/_layout.tsx
@@ -9,10 +9,10 @@ export default function CustomMenuLayout() {
      <Stack.Screen
        name='index'
        options={{
-          headerShown: Platform.OS !== "ios",
+          headerShown: true,
          headerLargeTitle: true,
          headerTitle: t("tabs.custom_links"),
-          headerBlurEffect: "none",
+          headerBlurEffect: "prominent",
          headerTransparent: Platform.OS === "ios",
          headerShadowVisible: false,
        }}
--- a/app/(auth)/(tabs)/(favorites)/_layout.tsx
+++ b/app/(auth)/(tabs)/(favorites)/_layout.tsx
@@ -11,8 +11,12 @@ export default function SearchLayout() {
        name='index'
        options={{
          headerShown: !Platform.isTV,
          headerLargeTitle: true,
          headerTitle: t("tabs.favorites"),
-          headerBlurEffect: "none",
+          headerLargeStyle: {
            backgroundColor: "black",
          },
          headerBlurEffect: "prominent",
          headerTransparent: Platform.OS === "ios",
          headerShadowVisible: false,
        }}
--- a/app/(auth)/(tabs)/(home)/_layout.tsx
+++ b/app/(auth)/(tabs)/(home)/_layout.tsx
@@ -21,21 +21,19 @@ export default function IndexLayout() {
        name='index'
        options={{
          headerShown: !Platform.isTV,
          headerLargeTitle: true,
          headerTitle: t("tabs.home"),
-          headerLeft: () => (
+          headerBlurEffect: "prominent",
-            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+          headerLargeStyle: {
-              <Feather name='chevron-left' size={28} color='white' />
+            backgroundColor: "black",
-            </TouchableOpacity>
+          },
          ),
          headerBlurEffect: "none",
          headerTransparent: Platform.OS === "ios",
          headerShadowVisible: false,
          headerRight: () => (
-            <View className='flex flex-row items-center px-2'>
+            <View className='flex flex-row items-center space-x-2'>
              {!Platform.isTV && (
                <>
-                  <Chromecast.Chromecast background='transparent' />
+                  <Chromecast.Chromecast />
                  {user?.Policy?.IsAdministrator && <SessionsButton />}
                  <SettingsButton />
                </>
@@ -48,88 +46,48 @@ 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
@@ -137,11 +95,6 @@ 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",
        }}
      />
@@ -152,11 +105,6 @@ 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",
@@ -190,13 +138,14 @@ const SessionsButton = () => {
      onPress={() => {
        router.push("/(auth)/sessions");
      }}
      className='mr-4'
    >
-      <Ionicons
+      <View className='mr-4'>
-        name='play-circle'
+        <Ionicons
-        color={sessions.length === 0 ? "white" : "#9333ea"}
+          name='play-circle'
-        size={28}
+          color={sessions.length === 0 ? "white" : "#9333ea"}
-      />
+          size={25}
        />
      </View>
    </TouchableOpacity>
  );
 };
--- a/app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx
+++ b/app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx
@@ -91,7 +91,7 @@ export default function page() {
        title: series[0].item.SeriesName,
      });
    } else {
-      storage.remove(seriesId);
+      storage.delete(seriesId);
      router.back();
    }
  }, [series]);
--- a/app/(auth)/(tabs)/(home)/downloads/index.tsx
+++ b/app/(auth)/(tabs)/(home)/downloads/index.tsx
@@ -62,10 +62,7 @@ export default function page() {
    );
  };
-  const downloadedFiles = useMemo(
+  const downloadedFiles = getDownloadedItems();
    () => getDownloadedItems(),
    [getDownloadedItems],
  );
  const movies = useMemo(() => {
    try {
@@ -93,19 +90,6 @@ export default function page() {
    }
  }, [downloadedFiles]);
  const otherMedia = useMemo(() => {
    try {
      return (
        downloadedFiles?.filter(
          (f) => f.item.Type !== "Movie" && f.item.Type !== "Episode",
        ) || []
      );
    } catch {
      setShowMigration(true);
      return [];
    }
  }, [downloadedFiles]);
  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
@@ -144,30 +128,8 @@ export default function page() {
        writeToLog("ERROR", reason);
        toast.error(t("home.downloads.toasts.failed_to_delete_all_tvseries"));
      });
  const deleteOtherMedia = () =>
    Promise.all(
      otherMedia.map((item) =>
        deleteFileByType(item.item.Type)
          .then(() =>
            toast.success(
              t("home.downloads.toasts.deleted_media_successfully", {
                type: item.item.Type,
              }),
            ),
          )
          .catch((reason) => {
            writeToLog("ERROR", reason);
            toast.error(
              t("home.downloads.toasts.failed_to_delete_media", {
                type: item.item.Type,
              }),
            );
          }),
      ),
    );
  const deleteAllMedia = async () =>
-    await Promise.all([deleteMovies(), deleteShows(), deleteOtherMedia()]);
+    await Promise.all([deleteMovies(), deleteShows()]);
  return (
    <>
@@ -276,34 +238,6 @@ export default function page() {
                </ScrollView>
              </View>
            )}
            {otherMedia.length > 0 && (
              <View className='mb-4'>
                <View className='flex flex-row items-center justify-between mb-2 px-4'>
                  <Text className='text-lg font-bold'>
                    {t("home.downloads.other_media")}
                  </Text>
                  <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
                    <Text className='text-xs font-bold'>
                      {otherMedia?.length}
                    </Text>
                  </View>
                </View>
                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                  <View className='px-4 flex flex-row'>
                    {otherMedia?.map((item) => (
                      <TouchableItemRouter
                        item={item.item}
                        isOffline
                        key={item.item.Id}
                      >
                        <MovieCard item={item.item} />
                      </TouchableItemRouter>
                    ))}
                  </View>
                </ScrollView>
              </View>
            )}
            {downloadedFiles?.length === 0 && (
              <View className='flex px-4'>
                <Text className='opacity-50'>
@@ -339,11 +273,6 @@ export default function page() {
            <Button color='purple' onPress={deleteShows}>
              {t("home.downloads.delete_all_tvseries_button")}
            </Button>
            {otherMedia.length > 0 && (
              <Button color='purple' onPress={deleteOtherMedia}>
                {t("home.downloads.delete_all_other_media_button")}
              </Button>
            )}
            <Button color='red' onPress={deleteAllMedia}>
              {t("home.downloads.delete_all_button")}
            </Button>
--- a/app/(auth)/(tabs)/(home)/index.tsx
+++ b/app/(auth)/(tabs)/(home)/index.tsx
@@ -1,4 +1,4 @@
-import { HomeIndex } from "@/components/home/HomeIndex";
+import { HomeIndex } from "@/components/settings/HomeIndex";
 export default function page() {
  return <HomeIndex />;
--- a/app/(auth)/(tabs)/(home)/sessions/index.tsx
+++ b/app/(auth)/(tabs)/(home)/sessions/index.tsx
@@ -468,7 +468,6 @@ const TranscodingStreamView = ({
 };
 const TranscodingView = ({ session }: SessionCardProps) => {
  const { t } = useTranslation();
  const videoStream = useMemo(() => {
    return session.NowPlayingItem?.MediaStreams?.filter(
      (s) => s.Type === "Video",
@@ -502,7 +501,7 @@ const TranscodingView = ({ session }: SessionCardProps) => {
  return (
    <View className='flex flex-col bg-neutral-800 rounded-b-2xl p-4 pt-2'>
      <TranscodingStreamView
-        title={t("common.video")}
+        title='Video'
        properties={{
          resolution: videoStreamTitle(),
          bitrate: videoStream?.BitRate,
@@ -519,7 +518,7 @@ const TranscodingView = ({ session }: SessionCardProps) => {
      />
      <TranscodingStreamView
-        title={t("common.audio")}
+        title='Audio'
        properties={{
          language: audioStream?.Language,
          bitrate: audioStream?.BitRate,
@@ -537,7 +536,7 @@ const TranscodingView = ({ session }: SessionCardProps) => {
      {subtitleStream && (
        <TranscodingStreamView
-          title={t("common.subtitle")}
+          title='Subtitle'
          isTranscoding={false}
          properties={{
            language: subtitleStream?.Language,
--- a/app/(auth)/(tabs)/(home)/settings.tsx
+++ b/app/(auth)/(tabs)/(home)/settings.tsx
@@ -46,7 +46,7 @@ export default function settings() {
            logout();
          }}
        >
-          <Text className='text-red-600 px-2'>
+          <Text className='text-red-600'>
            {t("home.settings.log_out_button")}
          </Text>
        </TouchableOpacity>
--- a/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
@@ -1,3 +1,4 @@
 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";
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
@@ -393,6 +393,7 @@ const page: React.FC = () => {
      data={flatData}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      estimatedItemSize={255}
      numColumns={
        orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5
      }
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
@@ -19,29 +19,31 @@ 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";
 import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 const Page: React.FC = () => {
  const insets = useSafeAreaInsets();
  const params = useLocalSearchParams();
@@ -137,15 +139,7 @@ const Page: React.FC = () => {
    }
    requestMedia(mediaTitle, body, refetch);
-  }, [
+  }, [details, result, requestMedia, hasAdvancedRequestPermission]);
    details,
    result,
    requestMedia,
    hasAdvancedRequestPermission,
    mediaTitle,
    refetch,
    mediaType,
  ]);
  const isAnime = useMemo(
    () =>
@@ -154,24 +148,6 @@ const Page: React.FC = () => {
    [details],
  );
  const issueTypeOptionGroups = useMemo(
    () => [
      {
        title: t("jellyseerr.types"),
        options: Object.entries(IssueTypeName)
          .reverse()
          .map(([key, value]) => ({
            type: "radio" as const,
            label: value,
            value: key,
            selected: key === String(issueType),
            onPress: () => setIssueType(key as unknown as IssueType),
          })),
      },
    ],
    [issueType, t],
  );
  useEffect(() => {
    if (details) {
      navigation.setOptions({
@@ -301,16 +277,12 @@ const Page: React.FC = () => {
                    <Button
                      className='flex-1 bg-purple-600/50 border-purple-400 ring-purple-400 text-purple-100'
                      onPress={() => {
-                        router.push({
+                        const url =
-                          pathname:
+                          mediaType === MediaType.MOVIE
-                            mediaType === MediaType.MOVIE
+                            ? `/(auth)/(tabs)/(search)/items/page?id=${details?.mediaInfo.jellyfinMediaId}`
-                              ? "/(auth)/(tabs)/(search)/items/page"
+                            : `/(auth)/(tabs)/(search)/series/${details?.mediaInfo.jellyfinMediaId}`;
-                              : "/(auth)/(tabs)/(search)/series/[id]",
+                        // @ts-expect-error
-                          params:
+                        router.push(url);
                            mediaType === MediaType.MOVIE
                              ? { id: details?.mediaInfo.jellyfinMediaId }
                              : { id: details?.mediaInfo.jellyfinMediaId },
                        });
                      }}
                      iconLeft={
                        <Ionicons name='play-outline' size={20} color='white' />
@@ -320,7 +292,7 @@ const Page: React.FC = () => {
                        borderStyle: "solid",
                      }}
                    >
-                      <Text className='text-sm'>{t("common.play")}</Text>
+                      <Text className='text-sm'>Play</Text>
                    </Button>
                  </View>
                )
@@ -380,23 +352,50 @@ const Page: React.FC = () => {
                </Text>
              </View>
              <View className='flex flex-col space-y-2 items-start'>
-                <View className='flex flex-col w-full'>
+                <View className='flex flex-col'>
-                  <Text className='opacity-50 mb-1 text-xs'>
+                  <DropdownMenu.Root>
-                    {t("jellyseerr.issue_type")}
+                    <DropdownMenu.Trigger>
-                  </Text>
+                      <View className='flex flex-col'>
-                  <PlatformDropdown
+                        <Text className='opacity-50 mb-1 text-xs'>
-                    groups={issueTypeOptionGroups}
+                          {t("jellyseerr.issue_type")}
                    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>
-                    title={t("jellyseerr.types")}
+                    <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>
                </View>
                <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full'>
--- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
+++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
@@ -77,13 +77,7 @@ const Page = () => {
    } else {
      _setSortBy([SortByOption.SortName]);
    }
-  }, [
+  }, []);
    libraryId,
    sortOrderPreference,
    sortByPreference,
    _setSortOrder,
    _setSortBy,
  ]);
  const setSortBy = useCallback(
    (sortBy: SortByOption[]) => {
@@ -93,7 +87,7 @@ const Page = () => {
      }
      _setSortBy(sortBy);
    },
-    [libraryId, sortByPreference, setSortByPreference, _setSortBy],
+    [libraryId, sortByPreference],
  );
  const setSortOrder = useCallback(
@@ -107,7 +101,7 @@ const Page = () => {
      }
      _setSortOrder(sortOrder);
    },
-    [libraryId, sortOrderPreference, setOderByPreference, _setSortOrder],
+    [libraryId, sortOrderPreference],
  );
  const nrOfCols = useMemo(() => {
--- a/app/(auth)/(tabs)/(libraries)/_layout.tsx
+++ b/app/(auth)/(tabs)/(libraries)/_layout.tsx
@@ -1,11 +1,13 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform } from "react-native";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { useSettings } from "@/utils/atoms/settings";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
 import { useTranslation } from "react-i18next";
 export default function IndexLayout() {
  const { settings, updateSettings, pluginSettings } = useSettings();
@@ -19,120 +21,178 @@ export default function IndexLayout() {
        name='index'
        options={{
          headerShown: !Platform.isTV,
          headerLargeTitle: true,
          headerTitle: t("tabs.library"),
-          headerBlurEffect: "none",
+          headerBlurEffect: "prominent",
          headerLargeStyle: {
            backgroundColor: "black",
          },
          headerTransparent: Platform.OS === "ios",
          headerShadowVisible: false,
          headerRight: () =>
            !pluginSettings?.libraryOptions?.locked &&
            !Platform.isTV && (
-              <PlatformDropdown
+              <DropdownMenu.Root>
-                trigger={
+                <DropdownMenu.Trigger>
                  <Ionicons
                    name='ellipsis-horizontal-outline'
                    size={24}
                    color='white'
                  />
-                }
+                </DropdownMenu.Trigger>
-                title={t("library.options.display")}
+                <DropdownMenu.Content
-                groups={[
+                  align={"end"}
-                  {
+                  alignOffset={-10}
-                    title: t("library.options.display"),
+                  avoidCollisions={false}
-                    options: [
+                  collisionPadding={0}
-                      {
+                  loop={false}
-                        type: "radio",
+                  side={"bottom"}
-                        label: t("library.options.row"),
+                  sideOffset={10}
-                        value: "row",
+                >
-                        selected: settings.libraryOptions.display === "row",
+                  <DropdownMenu.Label>
-                        onPress: () =>
+                    {t("library.options.display")}
-                          updateSettings({
+                  </DropdownMenu.Label>
-                            libraryOptions: {
+                  <DropdownMenu.Group key='display-group'>
-                              ...settings.libraryOptions,
+                    <DropdownMenu.Sub>
-                              display: "row",
+                      <DropdownMenu.SubTrigger key='image-style-trigger'>
-                            },
+                        {t("library.options.display")}
-                          }),
+                      </DropdownMenu.SubTrigger>
-                      },
+                      <DropdownMenu.SubContent
-                      {
+                        alignOffset={-10}
-                        type: "radio",
+                        avoidCollisions={true}
-                        label: t("library.options.list"),
+                        collisionPadding={0}
-                        value: "list",
+                        loop={true}
-                        selected: settings.libraryOptions.display === "list",
+                        sideOffset={10}
-                        onPress: () =>
+                      >
-                          updateSettings({
+                        <DropdownMenu.CheckboxItem
-                            libraryOptions: {
+                          key='display-option-1'
-                              ...settings.libraryOptions,
+                          value={settings.libraryOptions.display === "row"}
-                              display: "list",
+                          onValueChange={() =>
-                            },
+                            updateSettings({
-                          }),
+                              libraryOptions: {
-                      },
+                                ...settings.libraryOptions,
-                    ],
+                                display: "row",
-                  },
+                              },
-                  {
+                            })
-                    title: t("library.options.image_style"),
+                          }
-                    options: [
+                        >
-                      {
+                          <DropdownMenu.ItemIndicator />
-                        type: "radio",
+                          <DropdownMenu.ItemTitle key='display-title-1'>
-                        label: t("library.options.poster"),
+                            {t("library.options.row")}
-                        value: "poster",
+                          </DropdownMenu.ItemTitle>
-                        selected:
+                        </DropdownMenu.CheckboxItem>
-                          settings.libraryOptions.imageStyle === "poster",
+                        <DropdownMenu.CheckboxItem
-                        onPress: () =>
+                          key='display-option-2'
-                          updateSettings({
+                          value={settings.libraryOptions.display === "list"}
-                            libraryOptions: {
+                          onValueChange={() =>
-                              ...settings.libraryOptions,
+                            updateSettings({
-                              imageStyle: "poster",
+                              libraryOptions: {
-                            },
+                                ...settings.libraryOptions,
-                          }),
+                                display: "list",
-                      },
+                              },
-                      {
+                            })
-                        type: "radio",
+                          }
-                        label: t("library.options.cover"),
+                        >
-                        value: "cover",
+                          <DropdownMenu.ItemIndicator />
-                        selected:
+                          <DropdownMenu.ItemTitle key='display-title-2'>
-                          settings.libraryOptions.imageStyle === "cover",
+                            {t("library.options.list")}
-                        onPress: () =>
+                          </DropdownMenu.ItemTitle>
-                          updateSettings({
+                        </DropdownMenu.CheckboxItem>
-                            libraryOptions: {
+                      </DropdownMenu.SubContent>
-                              ...settings.libraryOptions,
+                    </DropdownMenu.Sub>
-                              imageStyle: "cover",
+                    <DropdownMenu.Sub>
-                            },
+                      <DropdownMenu.SubTrigger key='image-style-trigger'>
-                          }),
+                        {t("library.options.image_style")}
-                      },
+                      </DropdownMenu.SubTrigger>
-                    ],
+                      <DropdownMenu.SubContent
-                  },
+                        alignOffset={-10}
-                  {
+                        avoidCollisions={true}
-                    title: "Options",
+                        collisionPadding={0}
-                    options: [
+                        loop={true}
-                      {
+                        sideOffset={10}
-                        type: "toggle",
+                      >
-                        label: t("library.options.show_titles"),
+                        <DropdownMenu.CheckboxItem
-                        value: settings.libraryOptions.showTitles,
+                          key='poster-option'
-                        onToggle: () =>
+                          value={
-                          updateSettings({
+                            settings.libraryOptions.imageStyle === "poster"
-                            libraryOptions: {
+                          }
-                              ...settings.libraryOptions,
+                          onValueChange={() =>
-                              showTitles: !settings.libraryOptions.showTitles,
+                            updateSettings({
-                            },
+                              libraryOptions: {
-                          }),
+                                ...settings.libraryOptions,
-                        disabled:
+                                imageStyle: "poster",
-                          settings.libraryOptions.imageStyle === "poster",
+                              },
-                      },
+                            })
-                      {
+                          }
-                        type: "toggle",
+                        >
-                        label: t("library.options.show_stats"),
+                          <DropdownMenu.ItemIndicator />
-                        value: settings.libraryOptions.showStats,
+                          <DropdownMenu.ItemTitle key='poster-title'>
-                        onToggle: () =>
+                            {t("library.options.poster")}
-                          updateSettings({
+                          </DropdownMenu.ItemTitle>
-                            libraryOptions: {
+                        </DropdownMenu.CheckboxItem>
-                              ...settings.libraryOptions,
+                        <DropdownMenu.CheckboxItem
-                              showStats: !settings.libraryOptions.showStats,
+                          key='cover-option'
-                            },
+                          value={settings.libraryOptions.imageStyle === "cover"}
-                          }),
+                          onValueChange={() =>
-                      },
+                            updateSettings({
-                    ],
+                              libraryOptions: {
-                  },
+                                ...settings.libraryOptions,
-                ]}
+                                imageStyle: "cover",
-              />
+                              },
                            })
                          }
                        >
                          <DropdownMenu.ItemIndicator />
                          <DropdownMenu.ItemTitle key='cover-title'>
                            {t("library.options.cover")}
                          </DropdownMenu.ItemTitle>
                        </DropdownMenu.CheckboxItem>
                      </DropdownMenu.SubContent>
                    </DropdownMenu.Sub>
                  </DropdownMenu.Group>
                  <DropdownMenu.Group key='show-titles-group'>
                    <DropdownMenu.CheckboxItem
                      disabled={settings.libraryOptions.imageStyle === "poster"}
                      key='show-titles-option'
                      value={settings.libraryOptions.showTitles}
                      onValueChange={(newValue: string) => {
                        if (settings.libraryOptions.imageStyle === "poster")
                          return;
                        updateSettings({
                          libraryOptions: {
                            ...settings.libraryOptions,
                            showTitles: newValue === "on",
                          },
                        });
                      }}
                    >
                      <DropdownMenu.ItemIndicator />
                      <DropdownMenu.ItemTitle key='show-titles-title'>
                        {t("library.options.show_titles")}
                      </DropdownMenu.ItemTitle>
                    </DropdownMenu.CheckboxItem>
                    <DropdownMenu.CheckboxItem
                      key='show-stats-option'
                      value={settings.libraryOptions.showStats}
                      onValueChange={(newValue: string) => {
                        updateSettings({
                          libraryOptions: {
                            ...settings.libraryOptions,
                            showStats: newValue === "on",
                          },
                        });
                      }}
                    >
                      <DropdownMenu.ItemIndicator />
                      <DropdownMenu.ItemTitle key='show-stats-title'>
                        {t("library.options.show_stats")}
                      </DropdownMenu.ItemTitle>
                    </DropdownMenu.CheckboxItem>
                  </DropdownMenu.Group>
                  <DropdownMenu.Separator />
                </DropdownMenu.Content>
              </DropdownMenu.Root>
            ),
        }}
      />
@@ -141,7 +201,7 @@ export default function IndexLayout() {
        options={{
          title: "",
          headerShown: !Platform.isTV,
-          headerBlurEffect: "none",
+          headerBlurEffect: "prominent",
          headerTransparent: Platform.OS === "ios",
          headerShadowVisible: false,
        }}
@@ -154,7 +214,7 @@ export default function IndexLayout() {
        options={{
          title: "",
          headerShown: !Platform.isTV,
-          headerBlurEffect: "none",
+          headerBlurEffect: "prominent",
          headerTransparent: Platform.OS === "ios",
          headerShadowVisible: false,
        }}
--- a/app/(auth)/(tabs)/(libraries)/index.tsx
+++ b/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 + 17,
+        paddingLeft: insets.left,
-        paddingRight: insets.right + 17,
+        paddingRight: insets.right,
      }}
      data={libraries}
      renderItem={({ item }) => <LibraryItemCard library={item} />}
@@ -105,6 +105,7 @@ export default function index() {
          <View className='h-4' />
        )
      }
      estimatedItemSize={200}
    />
  );
 }
--- a/app/(auth)/(tabs)/(search)/_layout.tsx
+++ b/app/(auth)/(tabs)/(search)/_layout.tsx
@@ -14,8 +14,12 @@ export default function SearchLayout() {
        name='index'
        options={{
          headerShown: !Platform.isTV,
          headerLargeTitle: true,
          headerTitle: t("tabs.search"),
-          headerBlurEffect: "none",
+          headerLargeStyle: {
            backgroundColor: "black",
          },
          headerBlurEffect: "prominent",
          headerTransparent: Platform.OS === "ios",
          headerShadowVisible: false,
        }}
--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/app/(auth)/(tabs)/(search)/index.tsx
@@ -24,6 +24,8 @@ 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,
@@ -31,10 +33,8 @@ 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,29 +282,69 @@ export default function search() {
          maxLength={500}
        />
      )}
-      <View className='flex flex-col'>
+      <View
        className='flex flex-col'
        style={{
          marginTop: Platform.OS === "android" ? 16 : 0,
        }}
      >
        {jellyseerrApi && (
-          <View className='pl-4 pr-4 pt-2 flex flex-row'>
+          <ScrollView
-            <SearchTabButtons
+            horizontal
-              searchType={searchType}
+            className='flex flex-row flex-wrap space-x-2 px-4 mb-2'
-              setSearchType={setSearchType}
+          >
-              t={t}
+            <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>
            {searchType === "Discover" &&
              !loading &&
              noResults &&
              debouncedSearch.length > 0 && (
-                <DiscoverFilters
+                <View className='flex flex-row justify-end items-center space-x-1'>
-                  searchFilterId={searchFilterId}
+                  <FilterButton
-                  orderFilterId={orderFilterId}
+                    id={searchFilterId}
-                  jellyseerrOrderBy={jellyseerrOrderBy}
+                    queryKey='jellyseerr_search'
-                  setJellyseerrOrderBy={setJellyseerrOrderBy}
+                    queryFn={async () =>
-                  jellyseerrSortOrder={jellyseerrSortOrder}
+                      Object.keys(JellyseerrSearchSort).filter((v) =>
-                  setJellyseerrSortOrder={setJellyseerrSortOrder}
+                        Number.isNaN(Number(v)),
-                  t={t}
+                      )
-                />
+                    }
                    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>
              )}
-          </View>
+          </ScrollView>
        )}
        <View className='mt-2'>
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -2,7 +2,6 @@ import {
  type BaseItemDto,
  type MediaSourceInfo,
  PlaybackOrder,
  PlaybackProgressInfo,
  PlaybackStartInfo,
  RepeatMode,
 } from "@jellyfin/sdk/lib/generated-client";
@@ -22,12 +21,6 @@ import { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { Controls } from "@/components/video-player/controls/Controls";
 import {
  OUTLINE_THICKNESS,
  OutlineThickness,
  VLC_COLORS,
  VLCColor,
 } from "@/constants/SubtitleConstants";
 import { useHaptic } from "@/hooks/useHaptic";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
@@ -75,10 +68,7 @@ export default function page() {
    : require("react-native-volume-manager");
  const downloadUtils = useDownload();
-  const downloadedFiles = useMemo(
+  const downloadedFiles = downloadUtils.getDownloadedItems();
    () => downloadUtils.getDownloadedItems(),
    [downloadUtils.getDownloadedItems],
  );
  const revalidateProgressCache = useInvalidatePlaybackProgressCache();
@@ -107,7 +97,7 @@ export default function page() {
    /** Playback position in ticks. */
    playbackPosition?: string;
  }>();
-  const { settings } = useSettings();
+  useSettings();
  const offline = offlineStr === "true";
  const playbackManager = usePlaybackManager();
@@ -274,7 +264,12 @@ export default function page() {
    if (isPlaying) {
      await videoRef.current?.pause();
      playbackManager.reportPlaybackProgress(
-        currentPlayStateInfo() as PlaybackProgressInfo,
+        item?.Id!,
        msToTicks(progress.get()),
        {
          AudioStreamIndex: audioIndex ?? -1,
          SubtitleStreamIndex: subtitleIndex ?? -1,
        },
      );
    } else {
      videoRef.current?.play();
@@ -392,7 +387,12 @@ export default function page() {
      if (!item?.Id) return;
      playbackManager.reportPlaybackProgress(
-        currentPlayStateInfo() as PlaybackProgressInfo,
+        item.Id,
        msToTicks(progress.get()),
        {
          AudioStreamIndex: audioIndex ?? -1,
          SubtitleStreamIndex: subtitleIndex ?? -1,
        },
      );
    },
    [
@@ -499,7 +499,12 @@ export default function page() {
        setIsPlaying(true);
        if (item?.Id) {
          playbackManager.reportPlaybackProgress(
-            currentPlayStateInfo() as PlaybackProgressInfo,
+            item.Id,
            msToTicks(progress.get()),
            {
              AudioStreamIndex: audioIndex ?? -1,
              SubtitleStreamIndex: subtitleIndex ?? -1,
            },
          );
        }
        if (!Platform.isTV) await activateKeepAwakeAsync();
@@ -510,7 +515,12 @@ export default function page() {
        setIsPlaying(false);
        if (item?.Id) {
          playbackManager.reportPlaybackProgress(
-            currentPlayStateInfo() as PlaybackProgressInfo,
+            item.Id,
            msToTicks(progress.get()),
            {
              AudioStreamIndex: audioIndex ?? -1,
              SubtitleStreamIndex: subtitleIndex ?? -1,
            },
          );
        }
        if (!Platform.isTV) await deactivateKeepAwake();
@@ -566,34 +576,8 @@ export default function page() {
      ? allSubs.indexOf(chosenSubtitleTrack)
      : [...textSubs].reverse().indexOf(chosenSubtitleTrack);
    initOptions.push(`--sub-track=${finalIndex}`);
    // Add VLC subtitle styling options from settings
    const textColor = (settings.vlcTextColor ?? "White") as VLCColor;
    const backgroundColor = (settings.vlcBackgroundColor ??
      "Black") as VLCColor;
    const outlineColor = (settings.vlcOutlineColor ?? "Black") as VLCColor;
    const outlineThickness = (settings.vlcOutlineThickness ??
      "Normal") as OutlineThickness;
    const backgroundOpacity = settings.vlcBackgroundOpacity ?? 128;
    const outlineOpacity = settings.vlcOutlineOpacity ?? 255;
    const isBold = settings.vlcIsBold ?? false;
    // Add subtitle styling options
    initOptions.push(`--freetype-color=${VLC_COLORS[textColor]}`);
    initOptions.push(`--freetype-background-opacity=${backgroundOpacity}`);
    initOptions.push(
      `--freetype-background-color=${VLC_COLORS[backgroundColor]}`,
    );
    initOptions.push(`--freetype-outline-opacity=${outlineOpacity}`);
    initOptions.push(`--freetype-outline-color=${VLC_COLORS[outlineColor]}`);
    initOptions.push(
      `--freetype-outline-thickness=${OUTLINE_THICKNESS[outlineThickness]}`,
    );
    initOptions.push(`--sub-text-scale=${settings.subtitleSize}`);
    initOptions.push("--sub-margin=40");
    if (isBold) {
      initOptions.push("--freetype-bold");
    }
  }
  if (notTranscoding && chosenAudioTrack) {
    initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
  }
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -2,10 +2,8 @@ import "@/augmentations";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 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,
@@ -22,8 +20,8 @@ import {
 } from "@/utils/background-tasks";
 import {
  LogProvider,
  writeDebugLog,
  writeErrorLog,
  writeInfoLog,
  writeToLog,
 } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
@@ -38,7 +36,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import * as BackgroundTask from "expo-background-task";
 import * as Device from "expo-device";
-import { Paths } from "expo-file-system";
+import * as FileSystem from "expo-file-system";
 const Notifications = !Platform.isTV ? require("expo-notifications") : null;
@@ -86,19 +84,19 @@ SplashScreen.setOptions({
  fade: true,
 });
 function redirect(notification: typeof Notifications.Notification) {
  const url = notification.request.content.data?.url;
  if (url) {
    router.push(url);
  }
 }
 function useNotificationObserver() {
  useEffect(() => {
    if (Platform.isTV) return;
    let isMounted = true;
    function redirect(notification: typeof Notifications.Notification) {
      const url = notification.request.content.data?.url;
      if (url) {
        router.push(url);
      }
    }
    Notifications.getLastNotificationResponseAsync().then(
      (response: { notification: any }) => {
        if (!isMounted || !response?.notification) {
@@ -108,8 +106,15 @@ function useNotificationObserver() {
      },
    );
    const subscription = Notifications.addNotificationResponseReceivedListener(
      (response: { notification: any }) => {
        redirect(response.notification);
      },
    );
    return () => {
      isMounted = false;
      subscription.remove();
    };
  }, []);
 }
@@ -145,7 +150,7 @@ if (!Platform.isTV) {
    const token = getTokenFromStorage();
    const deviceId = getOrSetDeviceId();
-    const baseDirectory = Paths.document.uri;
+    const baseDirectory = FileSystem.documentDirectory;
    if (!token || !deviceId || !baseDirectory)
      return BackgroundTask.BackgroundTaskResult.Failed;
@@ -312,42 +317,38 @@ function Layout() {
      responseListener.current =
        Notifications?.addNotificationResponseReceivedListener(
          (response: NotificationResponse) => {
            // redirect if internal notification
            redirect(response?.notification);
            // Currently the notifications supported by the plugin will send data for deep links.
            const { title, data } = response.notification.request.content;
-            writeInfoLog(`Notification ${title} opened`, data);
+            writeDebugLog(
              `Notification ${title} opened`,
              response.notification.request.content,
            );
            if (data && Object.keys(data).length > 0) {
              const type = (data?.type ?? "").toString().toLowerCase();
              const itemId = data?.id;
-            let url: any;
+              switch (type) {
-            const type = (data?.type ?? "").toString().toLowerCase();
+                case "movie":
-            const itemId = data?.id;
+                  router.push(`/(auth)/(tabs)/home/items/page?id=${itemId}`);
-
+                  break;
-            switch (type) {
+                case "episode":
-              case "movie":
+                  // We just clicked a notification for an individual episode.
-                url = `/(auth)/(tabs)/home/items/page?id=${itemId}`;
+                  if (itemId) {
-                break;
+                    router.push(`/(auth)/(tabs)/home/items/page?id=${itemId}`);
-              case "episode":
+                    // summarized season notification for multiple episodes. Bring them to series season
                // `/(auth)/(tabs)/${from}/items/page?id=${item.Id}`;
                // We just clicked a notification for an individual episode.
                if (itemId) {
                  url = `/(auth)/(tabs)/home/items/page?id=${itemId}`;
                  // summarized season notification for multiple episodes. Bring them to series season
                } else {
                  const seriesId = data.seriesId;
                  const seasonIndex = data.seasonIndex;
                  if (seasonIndex) {
                    url = `/(auth)/(tabs)/home/series/${seriesId}?seasonIndex=${seasonIndex}`;
                  } else {
-                    url = `/(auth)/(tabs)/home/series/${seriesId}`;
+                    const seriesId = data.seriesId;
                    const seasonIndex = data.seasonIndex;
                    if (seasonIndex) {
                      router.push(
                        `/(auth)/(tabs)/home/series/${seriesId}?seasonIndex=${seasonIndex}`,
                      );
                    } else {
                      router.push(`/(auth)/(tabs)/home/series/${seriesId}`);
                    }
                  }
-                }
+                  break;
-                break;
+              }
            }
            writeInfoLog(`Notification attempting to redirect to ${url}`);
            if (url) {
              router.push(url);
            }
          },
        );
@@ -388,7 +389,7 @@ function Layout() {
  ]);
  useEffect(() => {
-    if (Platform.isTV || !BackGroundDownloader) {
+    if (Platform.isTV) {
      return;
    }
@@ -397,19 +398,12 @@ function Layout() {
        appState.current.match(/inactive|background/) &&
        nextAppState === "active"
      ) {
-        BackGroundDownloader?.checkForExistingDownloads().catch(
+        BackGroundDownloader.checkForExistingDownloads();
          (error: unknown) => {
            writeErrorLog("Failed to resume background downloads", error);
          },
        );
      }
    });
-    BackGroundDownloader?.checkForExistingDownloads().catch(
+    BackGroundDownloader.checkForExistingDownloads();
-      (error: unknown) => {
+
        writeErrorLog("Failed to resume background downloads", error);
      },
    );
    return () => {
      subscription.remove();
    };
@@ -422,55 +416,52 @@ function Layout() {
          <LogProvider>
            <WebSocketProvider>
              <DownloadProvider>
-                <GlobalModalProvider>
+                <BottomSheetModalProvider>
-                  <BottomSheetModalProvider>
+                  <SystemBars style='light' hidden={false} />
-                    <ThemeProvider value={DarkTheme}>
+                  <ThemeProvider value={DarkTheme}>
-                      <SystemBars style='light' hidden={false} />
+                    <Stack initialRouteName='(auth)/(tabs)'>
-                      <Stack initialRouteName='(auth)/(tabs)'>
+                      <Stack.Screen
-                        <Stack.Screen
+                        name='(auth)/(tabs)'
-                          name='(auth)/(tabs)'
+                        options={{
-                          options={{
+                          headerShown: false,
-                            headerShown: false,
+                          title: "",
-                            title: "",
+                          header: () => null,
                            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
                      />
-                      <GlobalModal />
+                      <Stack.Screen
-                    </ThemeProvider>
+                        name='(auth)/player'
-                  </BottomSheetModalProvider>
+                        options={{
-                </GlobalModalProvider>
+                          headerShown: false,
                          title: "",
                          header: () => null,
                        }}
                      />
                      <Stack.Screen
                        name='login'
                        options={{
                          headerShown: true,
                          title: "",
                          headerTransparent: true,
                        }}
                      />
                      <Stack.Screen name='+not-found' />
                    </Stack>
                    <Toaster
                      duration={4000}
                      toastOptions={{
                        style: {
                          backgroundColor: "#262626",
                          borderColor: "#363639",
                          borderWidth: 1,
                        },
                        titleStyle: {
                          color: "white",
                        },
                      }}
                      closeButton
                    />
                  </ThemeProvider>
                </BottomSheetModalProvider>
              </DownloadProvider>
            </WebSocketProvider>
          </LogProvider>
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -4,6 +4,7 @@ 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,
@@ -19,6 +20,7 @@ import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
 import { PasswordInput } from "@/components/PasswordInput";
 import { PreviousServersList } from "@/components/PreviousServersList";
 import { Colors } from "@/constants/Colors";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
@@ -51,6 +53,7 @@ const Login: React.FC = () => {
    username: _username,
    password: _password,
  });
  const [showPassword, setShowPassword] = useState<boolean>(false);
  /**
   * A way to auto login based on a link
@@ -81,10 +84,10 @@ const Login: React.FC = () => {
            onPress={() => {
              removeServer();
            }}
-            className='flex flex-row items-center pr-2 pl-1'
+            className='flex flex-row items-center'
          >
            <Ionicons name='chevron-back' size={18} color={Colors.primary} />
-            <Text className=' ml-1 text-purple-600'>
+            <Text className='ml-2 text-purple-600'>
              {t("login.change_server")}
            </Text>
          </TouchableOpacity>
@@ -270,30 +273,27 @@ const Login: React.FC = () => {
                textContentType='oneTimeCode'
                clearButtonMode='while-editing'
                maxLength={500}
-                extraClassName='mb-4'
+                extraClassName='mb-2'
              />
              {/* Password */}
-              <Input
+              <View className='relative mb-2'>
-                placeholder={t("login.password_placeholder")}
+                <PasswordInput
-                onChangeText={(text: string) =>
+                  value={credentials.password}
-                  setCredentials({ ...credentials, password: text })
+                  onChangeText={(text: string) =>
-                }
+                    setCredentials({ ...credentials, password: text })
-                value={credentials.password}
+                  }
-                secureTextEntry
+                  placeholder={t("login.password_placeholder")}
-                keyboardType='default'
+                  showPassword={showPassword}
-                returnKeyType='done'
+                  onShowPasswordChange={setShowPassword}
-                autoCapitalize='none'
+                  topOffset={16}
-                textContentType='password'
+                  layout='tv'
-                clearButtonMode='while-editing'
+                />
                maxLength={500}
                extraClassName='mb-4'
              />
              <View className='mt-4'>
                <Button onPress={handleLogin}>{t("login.login_button")}</Button>
              </View>
              <View className='mt-3'>
                <Button onPress={handleLogin}>{t("login.login_button")}</Button>
              </View>
              <View className='mt-2'>
                <Button
                  onPress={handleQuickConnect}
                  className='bg-neutral-800 border border-neutral-700'
@@ -347,7 +347,7 @@ const Login: React.FC = () => {
              </View>
              {/* Lists stay full width but inside max width container */}
-              <View className='mt-2'>
+              <View className='mt-4'>
                <JellyfinServerDiscovery
                  onServerSelect={async (server: any) => {
                    setServerURL(server.address);
@@ -401,22 +401,22 @@ const Login: React.FC = () => {
                  textContentType='oneTimeCode'
                  clearButtonMode='while-editing'
                  maxLength={500}
                  extraClassName=''
                />
-                <Input
+                <View className='relative'>
-                  placeholder={t("login.password_placeholder")}
+                  <PasswordInput
-                  onChangeText={(text) =>
+                    value={credentials.password}
-                    setCredentials({ ...credentials, password: text })
+                    onChangeText={(text) =>
-                  }
+                      setCredentials({ ...credentials, password: text })
-                  value={credentials.password}
+                    }
-                  secureTextEntry
+                    placeholder={t("login.password_placeholder")}
-                  keyboardType='default'
+                    showPassword={showPassword}
-                  returnKeyType='done'
+                    onShowPasswordChange={setShowPassword}
-                  autoCapitalize='none'
+                    topOffset={12}
-                  textContentType='password'
+                    layout='mobile'
-                  clearButtonMode='while-editing'
+                  />
-                  maxLength={500}
+                </View>
                />
                <View className='flex flex-row items-center justify-between'>
                  <Button
                    onPress={handleLogin}
@@ -427,7 +427,7 @@ const Login: React.FC = () => {
                  </Button>
                  <TouchableOpacity
                    onPress={handleQuickConnect}
-                    className='p-2 bg-neutral-900 rounded-xl h-12 w-12 flex items-center justify-center'
+                    className='p-3 bg-neutral-900 rounded-xl h-13 w-13 flex items-center justify-center'
                  >
                    <MaterialCommunityIcons
                      name='cellphone-lock'
--- a/augmentations/mmkv.ts
+++ b/augmentations/mmkv.ts
@@ -1,4 +1,4 @@
-import { storage } from "@/utils/mmkv";
+import { MMKV } from "react-native-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
-(storage as any).get = function <T>(key: string): T | undefined {
+MMKV.prototype.get = function <T>(key: string): T | undefined {
  try {
    const serializedItem = this.getString(key);
    if (!serializedItem) return undefined;
@@ -20,10 +20,10 @@ declare module "react-native-mmkv" {
  }
 };
-(storage as any).setAny = function (key: string, value: any | undefined): void {
+MMKV.prototype.setAny = function (key: string, value: any | undefined): void {
  try {
    if (value === undefined) {
-      this.remove(key);
+      this.delete(key);
    } else {
      this.set(key, JSON.stringify(value));
    }
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,6 +2,6 @@ module.exports = (api) => {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel", "react-native-worklets/plugin"],
+    plugins: ["nativewind/babel", "react-native-reanimated/plugin"],
  };
 };
--- a/biome.json
+++ b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",
  "files": {
    "includes": [
      "**/*",
--- a/bun.lock
+++ b/bun.lock
--- a/components/AddToFavorites.tsx
+++ b/components/AddToFavorites.tsx
@@ -1,6 +1,6 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import type { FC } from "react";
-import { Platform, View, type ViewProps } from "react-native";
+import { View, type ViewProps } from "react-native";
 import { RoundButton } from "@/components/RoundButton";
 import { useFavorite } from "@/hooks/useFavorite";
@@ -11,18 +11,6 @@ interface Props extends ViewProps {
 export const AddToFavorites: FC<Props> = ({ item, ...props }) => {
  const { isFavorite, toggleFavorite } = useFavorite(item);
  if (Platform.OS === "ios") {
    return (
      <View {...props}>
        <RoundButton
          size='large'
          icon={isFavorite ? "heart" : "heart-outline"}
          onPress={toggleFavorite}
        />
      </View>
    );
  }
  return (
    <View {...props}>
      <RoundButton
--- a/components/AudioTrackSelector.tsx
+++ b/components/AudioTrackSelector.tsx
@@ -1,9 +1,11 @@
 import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 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;
@@ -18,8 +20,6 @@ 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,58 +31,55 @@ export const AudioTrackSelector: React.FC<Props> = ({
    [audioStreams, selected],
  );
-  const optionGroups: OptionGroup[] = useMemo(
+  const { t } = useTranslation();
    () => [
      {
        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 (
-    <PlatformDropdown
+    <View
-      groups={optionGroups}
+      className='flex shrink'
-      trigger={trigger}
+      style={{
-      title={t("item_card.audio")}
+        minWidth: 50,
      open={open}
      onOpenChange={setOpen}
      onOptionSelect={handleOptionSelect}
      expoUIConfig={{
        hostStyle: { flex: 1 },
      }}
-      bottomSheetConfig={{
+    >
-        enablePanDownToClose: true,
+      <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>
  );
 };
--- a/components/BitrateSelector.tsx
+++ b/components/BitrateSelector.tsx
@@ -1,8 +1,10 @@
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Text } from "./common/Text";
 import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
 export type Bitrate = {
  key: string;
@@ -59,8 +61,6 @@ 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,59 +76,53 @@ export const BitrateSelector: React.FC<Props> = ({
    );
  }, [inverted]);
-  const optionGroups: OptionGroup[] = useMemo(
+  const { t } = useTranslation();
    () => [
      {
        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 (
-    <PlatformDropdown
+    <View
-      groups={optionGroups}
+      className='flex shrink'
-      trigger={trigger}
+      style={{
-      title={t("item_card.quality")}
+        minWidth: 60,
-      open={open}
+        maxWidth: 200,
      onOpenChange={setOpen}
      onOptionSelect={handleOptionSelect}
      expoUIConfig={{
        hostStyle: { flex: 1 },
      }}
-      bottomSheetConfig={{
+    >
-        enablePanDownToClose: true,
+      <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>
  );
 };
--- a/components/Chromecast.tsx
+++ b/components/Chromecast.tsx
@@ -1,6 +1,6 @@
 import { Feather } from "@expo/vector-icons";
 import { useCallback, useEffect } from "react";
-import { Platform, TouchableOpacity } from "react-native";
+import { Platform } from "react-native";
 import GoogleCast, {
  CastButton,
  CastContext,
@@ -42,22 +42,6 @@ export function Chromecast({
    [Platform.OS],
  );
  if (Platform.OS === "ios") {
    return (
      <TouchableOpacity
        className='mr-4'
        onPress={() => {
          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
          else CastContext.showCastDialog();
        }}
        {...props}
      >
        <AndroidCastButton />
        <Feather name='cast' size={22} color={"white"} />
      </TouchableOpacity>
    );
  }
  if (background === "transparent")
    return (
      <RoundButton
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -66,10 +66,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
  const { processes, startBackgroundDownload, getDownloadedItems } =
    useDownload();
-  const downloadedFiles = useMemo(
+  const downloadedFiles = getDownloadedItems();
    () => getDownloadedItems(),
    [getDownloadedItems],
  );
  const [selectedOptions, setSelectedOptions] = useState<
    SelectedOptions | undefined
@@ -228,7 +225,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
        if (!mediaSource) {
          console.error(`Could not get download URL for ${item.Name}`);
          toast.error(
-            t("home.downloads.toasts.could_not_get_download_url_for_item", {
+            t("Could not get download URL for {{itemName}}", {
              itemName: item.Name,
            }),
          );
@@ -362,18 +359,16 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                  })}
              </Text>
            </View>
-            <View className='flex flex-col space-y-2 w-full'>
+            <View className='flex flex-col space-y-2 w-full items-start'>
-              <View className='items-start'>
+              <BitrateSelector
-                <BitrateSelector
+                inverted
-                  inverted
+                onChange={(val) =>
-                  onChange={(val) =>
+                  setSelectedOptions(
-                    setSelectedOptions(
+                    (prev) => prev && { ...prev, bitrate: val },
-                      (prev) => prev && { ...prev, bitrate: val },
+                  )
-                    )
+                }
-                  }
+                selected={selectedOptions?.bitrate}
-                  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>
@@ -385,23 +380,21 @@ export const DownloadItems: React.FC<DownloadProps> = ({
              )}
              {itemsNotDownloaded.length === 1 && (
                <View>
-                  <View className='items-start'>
+                  <MediaSourceSelector
-                    <MediaSourceSelector
+                    item={items[0]}
-                      item={items[0]}
+                    onChange={(val) =>
-                      onChange={(val) =>
+                      setSelectedOptions(
-                        setSelectedOptions(
+                        (prev) =>
-                          (prev) =>
+                          prev && {
-                            prev && {
+                            ...prev,
-                              ...prev,
+                            mediaSource: val,
-                              mediaSource: val,
+                          },
-                            },
+                      )
-                        )
+                    }
-                      }
+                    selected={selectedOptions?.mediaSource}
-                      selected={selectedOptions?.mediaSource}
+                  />
                    />
                  </View>
                  {selectedOptions?.mediaSource && (
-                    <View className='flex flex-col space-y-2 items-start'>
+                    <View className='flex flex-col space-y-2'>
                      <AudioTrackSelector
                        source={selectedOptions.mediaSource}
                        onChange={(val) => {
@@ -434,7 +427,11 @@ export const DownloadItems: React.FC<DownloadProps> = ({
              )}
            </View>
-            <Button onPress={acceptDownloadOptions} color='purple'>
+            <Button
              className='mt-auto'
              onPress={acceptDownloadOptions}
              color='purple'
            >
              {t("item_card.download.download_button")}
            </Button>
          </View>
--- a/components/ExampleGlobalModalUsage.tsx
+++ b/components/ExampleGlobalModalUsage.tsx
@@ -1,203 +0,0 @@
 /**
 * 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>
  );
 };
--- a/components/GlobalModal.tsx
+++ b/components/GlobalModal.tsx
@@ -1,71 +0,0 @@
 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>
  );
 };
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -22,7 +22,7 @@ import { CastAndCrew } from "@/components/series/CastAndCrew";
 import { CurrentSeries } from "@/components/series/CurrentSeries";
 import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
 import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
-import { useImageColorsReturn } from "@/hooks/useImageColorsReturn";
+import { useImageColors } from "@/hooks/useImageColors";
 import { useOrientation } from "@/hooks/useOrientation";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -61,7 +61,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
    const [user] = useAtom(userAtom);
    const { t } = useTranslation();
-    const itemColors = useImageColorsReturn({ item });
+    useImageColors({ item });
    const [loadingLogo, setLoadingLogo] = useState(true);
    const [headerHeight, setHeaderHeight] = useState(350);
@@ -105,27 +105,13 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
      if (!Platform.isTV) {
        navigation.setOptions({
          headerRight: () =>
-            item &&
+            item && (
            (Platform.OS === "ios" ? (
              <View className='flex flex-row items-center pl-2'>
                <Chromecast.Chromecast width={22} height={22} />
                {item.Type !== "Program" && (
                  <View className='flex flex-row items-center'>
                    {!Platform.isTV && (
                      <DownloadSingleItem item={item} size='large' />
                    )}
                    {user?.Policy?.IsAdministrator && (
                      <PlayInRemoteSessionButton item={item} size='large' />
                    )}
                    <PlayedStatus items={[item]} size='large' />
                    <AddToFavorites item={item} />
                  </View>
                )}
              </View>
            ) : (
              <View className='flex flex-row items-center space-x-2'>
-                <Chromecast.Chromecast width={22} height={22} />
+                <Chromecast.Chromecast
                  background='blur'
                  width={22}
                  height={22}
                />
                {item.Type !== "Program" && (
                  <View className='flex flex-row items-center space-x-2'>
                    {!Platform.isTV && (
@@ -140,7 +126,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                  </View>
                )}
              </View>
-            )),
+            ),
        });
      }
    }, [item, navigation, user]);
@@ -267,7 +253,6 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                selectedOptions={selectedOptions}
                item={item}
                isOffline={isOffline}
                colors={itemColors}
              />
            </View>
--- a/components/MediaSourceSelector.tsx
+++ b/components/MediaSourceSelector.tsx
@@ -2,11 +2,13 @@ import type {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 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> {
  item: BaseItemDto;
@@ -21,7 +23,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) => {
@@ -44,60 +46,50 @@ 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 (
-    <PlatformDropdown
+    <View
-      groups={optionGroups}
+      className='flex shrink'
-      trigger={trigger}
+      style={{
-      title={t("item_card.video")}
+        minWidth: 50,
      open={open}
      onOpenChange={setOpen}
      onOptionSelect={handleOptionSelect}
      expoUIConfig={{
        hostStyle: { flex: 1 },
      }}
-      bottomSheetConfig={{
+    >
-        enablePanDownToClose: true,
+      <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>
  );
 };
--- a/components/MediaSourceSheet.tsx
+++ b/components/MediaSourceSheet.tsx
@@ -36,7 +36,7 @@ export const MediaSourceSheet: React.FC<Props> = ({
    return getDisplayName(selected);
  }, [selected, getDisplayName]);
-  if (isTv || (item.MediaSources && item.MediaSources.length <= 1)) return null;
+  if (isTv || (item.MediaStreams && item.MediaStreams.length <= 1)) return null;
  return (
    <View className='flex shrink' style={{ minWidth: 75 }}>
--- a/components/PasswordInput.tsx
+++ b/components/PasswordInput.tsx
@@ -0,0 +1,111 @@
 import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TouchableOpacity } from "react-native";
 import { Input } from "./common/Input";
 // Discriminated union for password visibility control
 type PasswordVisibilityControlled = {
  value?: string;
  onChangeText: (text: string) => void;
  placeholder: string;
  showPassword: boolean;
  onShowPasswordChange: (show: boolean) => void;
  topOffset?: number;
  layout?: "tv" | "mobile";
 };
 type PasswordVisibilityUncontrolled = {
  value?: string;
  onChangeText: (text: string) => void;
  placeholder: string;
  showPassword?: never;
  onShowPasswordChange?: never;
  topOffset?: number;
  layout?: "tv" | "mobile";
  defaultShowPassword?: boolean;
 };
 type PasswordInputProps =
  | PasswordVisibilityControlled
  | PasswordVisibilityUncontrolled;
 export const PasswordInput: React.FC<PasswordInputProps> = (props) => {
  const { t } = useTranslation();
  const {
    value = "",
    onChangeText,
    placeholder,
    topOffset = 14, // Default 14px for mobile
    layout = "mobile",
  } = props;
  // Type guard to check if we're in controlled mode
  const isControlled =
    "showPassword" in props && "onShowPasswordChange" in props;
  // Internal state for uncontrolled mode
  const [internalShowPassword, setInternalShowPassword] = useState(() =>
    !isControlled && "defaultShowPassword" in props
      ? ((props as PasswordVisibilityUncontrolled).defaultShowPassword ?? false)
      : false,
  );
  // Use controlled value if available, otherwise use internal state
  const showPassword = isControlled
    ? (props as PasswordVisibilityControlled).showPassword
    : internalShowPassword;
  const handleTogglePassword = () => {
    if (isControlled) {
      (props as PasswordVisibilityControlled).onShowPasswordChange(
        !showPassword,
      );
    } else {
      // For uncontrolled mode, toggle internal state
      setInternalShowPassword(!showPassword);
    }
  };
  // Generate top position style with validation
  const getTopStyle = () => {
    if (typeof topOffset !== "number" || Number.isNaN(topOffset)) {
      console.warn(`Invalid topOffset value: ${topOffset}`);
      return { top: 14 }; // Default fallback (14px for mobile)
    }
    return { top: topOffset };
  };
  return (
    <>
      <Input
        placeholder={placeholder}
        onChangeText={onChangeText}
        value={value}
        secureTextEntry={!showPassword}
        extraClassName='pr-4'
      />
      <TouchableOpacity
        onPress={handleTogglePassword}
        className={`absolute right-3 p-1 ${
          layout === "tv" ? "h-10 justify-center" : ""
        }`}
        style={getTopStyle()}
        accessible={true}
        accessibilityRole='button'
        accessibilityLabel={
          showPassword ? t("login.hide_password") : t("login.show_password")
        }
        accessibilityHint={t("login.toggle_password_visibility")}
        accessibilityState={{ checked: showPassword }}
      >
        <Ionicons
          name={showPassword ? "eye-off" : "eye"}
          size={24}
          color='white'
        />
      </TouchableOpacity>
    </>
  );
 };
--- a/components/PlatformDropdown.tsx
+++ b/components/PlatformDropdown.tsx
@@ -1,323 +0,0 @@
 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
    );
  },
 );
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -1,12 +1,11 @@
 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, Platform, TouchableOpacity, View } from "react-native";
+import { Alert, TouchableOpacity, View } from "react-native";
 import CastContext, {
  CastButton,
  PlayServicesState,
@@ -24,7 +23,6 @@ import Animated, {
  withTiming,
 } from "react-native-reanimated";
 import { useHaptic } from "@/hooks/useHaptic";
 import type { ThemeColors } from "@/hooks/useImageColorsReturn";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { useSettings } from "@/utils/atoms/settings";
@@ -34,13 +32,13 @@ 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 TouchableOpacity> {
+interface Props extends React.ComponentProps<typeof Button> {
  item: BaseItemDto;
  selectedOptions: SelectedOptions;
  isOffline?: boolean;
  colors?: ThemeColors;
 }
 const ANIMATION_DURATION = 500;
@@ -50,7 +48,6 @@ export const PlayButton: React.FC<Props> = ({
  item,
  selectedOptions,
  isOffline,
  colors,
  ...props
 }: Props) => {
  const { showActionSheetWithOptions } = useActionSheet();
@@ -58,19 +55,16 @@ export const PlayButton: React.FC<Props> = ({
  const mediaStatus = useMediaStatus();
  const { t } = useTranslation();
-  const [globalColorAtom] = useAtom(itemThemeColorAtom);
+  const [colorAtom] = useAtom(itemThemeColorAtom);
  const api = useAtomValue(apiAtom);
  const user = useAtomValue(userAtom);
  // Use colors prop if provided, otherwise fallback to global atom
  const effectiveColors = colors || globalColorAtom;
  const router = useRouter();
  const startWidth = useSharedValue(0);
  const targetWidth = useSharedValue(0);
-  const endColor = useSharedValue(effectiveColors);
+  const endColor = useSharedValue(colorAtom);
-  const startColor = useSharedValue(effectiveColors);
+  const startColor = useSharedValue(colorAtom);
  const widthProgress = useSharedValue(0);
  const colorChangeProgress = useSharedValue(0);
  const { settings, updateSettings } = useSettings();
@@ -303,7 +297,7 @@ export const PlayButton: React.FC<Props> = ({
  );
  useAnimatedReaction(
-    () => effectiveColors,
+    () => colorAtom,
    (newColor) => {
      endColor.value = newColor;
      colorChangeProgress.value = 0;
@@ -312,19 +306,19 @@ export const PlayButton: React.FC<Props> = ({
        easing: Easing.bezier(0.9, 0, 0.31, 0.99),
      });
    },
-    [effectiveColors],
+    [colorAtom],
  );
  useEffect(() => {
    const timeout_2 = setTimeout(() => {
-      startColor.value = effectiveColors;
+      startColor.value = colorAtom;
      startWidth.value = targetWidth.value;
    }, ANIMATION_DURATION);
    return () => {
      clearTimeout(timeout_2);
    };
-  }, [effectiveColors, item]);
+  }, [colorAtom, item]);
  /**
   * ANIMATED STYLES
@@ -364,46 +358,6 @@ 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}
@@ -413,7 +367,7 @@ export const PlayButton: React.FC<Props> = ({
      className={"relative"}
      {...props}
    >
-      <View className='absolute w-full h-full top-0 left-0 rounded-full z-10 overflow-hidden'>
+      <View className='absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden'>
        <Animated.View
          style={[
            animatedPrimaryStyle,
@@ -427,15 +381,15 @@ export const PlayButton: React.FC<Props> = ({
      <Animated.View
        style={[animatedAverageStyle, { opacity: 0.5 }]}
-        className='absolute w-full h-full top-0 left-0 rounded-full'
+        className='absolute w-full h-full top-0 left-0 rounded-xl'
      />
      <View
        style={{
          borderWidth: 1,
-          borderColor: effectiveColors.primary,
+          borderColor: colorAtom.primary,
          borderStyle: "solid",
        }}
-        className='flex flex-row items-center justify-center bg-transparent rounded-full z-20 h-12 w-full '
+        className='flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full '
      >
        <View className='flex flex-row items-center space-x-2'>
          <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
--- a/components/PlayButton.tv.tsx
+++ b/components/PlayButton.tv.tsx
@@ -15,7 +15,6 @@ import Animated, {
  withTiming,
 } from "react-native-reanimated";
 import { useHaptic } from "@/hooks/useHaptic";
 import type { ThemeColors } from "@/hooks/useImageColorsReturn";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { useSettings } from "@/utils/atoms/settings";
 import { runtimeTicksToMinutes } from "@/utils/time";
@@ -25,7 +24,6 @@ import type { SelectedOptions } from "./ItemContent";
 interface Props extends React.ComponentProps<typeof Button> {
  item: BaseItemDto;
  selectedOptions: SelectedOptions;
  colors?: ThemeColors;
 }
 const ANIMATION_DURATION = 500;
@@ -34,20 +32,16 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({
  item,
  selectedOptions,
  colors,
  ...props
 }: Props) => {
-  const [globalColorAtom] = useAtom(itemThemeColorAtom);
+  const [colorAtom] = useAtom(itemThemeColorAtom);
  // Use colors prop if provided, otherwise fallback to global atom
  const effectiveColors = colors || globalColorAtom;
  const router = useRouter();
  const startWidth = useSharedValue(0);
  const targetWidth = useSharedValue(0);
-  const endColor = useSharedValue(effectiveColors);
+  const endColor = useSharedValue(colorAtom);
-  const startColor = useSharedValue(effectiveColors);
+  const startColor = useSharedValue(colorAtom);
  const widthProgress = useSharedValue(0);
  const colorChangeProgress = useSharedValue(0);
  const { settings } = useSettings();
@@ -107,7 +101,7 @@ export const PlayButton: React.FC<Props> = ({
  );
  useAnimatedReaction(
-    () => effectiveColors,
+    () => colorAtom,
    (newColor) => {
      endColor.value = newColor;
      colorChangeProgress.value = 0;
@@ -116,19 +110,19 @@ export const PlayButton: React.FC<Props> = ({
        easing: Easing.bezier(0.9, 0, 0.31, 0.99),
      });
    },
-    [effectiveColors],
+    [colorAtom],
  );
  useEffect(() => {
    const timeout_2 = setTimeout(() => {
-      startColor.value = effectiveColors;
+      startColor.value = colorAtom;
      startWidth.value = targetWidth.value;
    }, ANIMATION_DURATION);
    return () => {
      clearTimeout(timeout_2);
    };
-  }, [effectiveColors, item]);
+  }, [colorAtom, item]);
  /**
   * ANIMATED STYLES
@@ -195,7 +189,7 @@ export const PlayButton: React.FC<Props> = ({
      <View
        style={{
          borderWidth: 1,
-          borderColor: effectiveColors.primary,
+          borderColor: colorAtom.primary,
          borderStyle: "solid",
        }}
        className='flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full '
--- a/components/PlayedStatus.tsx
+++ b/components/PlayedStatus.tsx
@@ -1,6 +1,6 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import type React from "react";
-import { Platform, View, type ViewProps } from "react-native";
+import { View, type ViewProps } from "react-native";
 import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import { RoundButton } from "./RoundButton";
@@ -14,21 +14,6 @@ export const PlayedStatus: React.FC<Props> = ({ items, ...props }) => {
  const allPlayed = items.every((item) => item.UserData?.Played);
  const toggle = useMarkAsPlayed(items);
  if (Platform.OS === "ios") {
    return (
      <View {...props}>
        <RoundButton
          color={allPlayed ? "purple" : "white"}
          icon={allPlayed ? "checkmark" : "checkmark"}
          onPress={async () => {
            await toggle(!allPlayed);
          }}
          size={props.size}
        />
      </View>
    );
  }
  return (
    <View {...props}>
      <RoundButton
--- a/components/PreviousServersList.tsx
+++ b/components/PreviousServersList.tsx
@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { useMMKVString } from "react-native-mmkv";
 import { storage } from "@/utils/mmkv";
 import { ListGroup } from "./list/ListGroup";
 import { ListItem } from "./list/ListItem";
@@ -17,8 +18,7 @@ interface PreviousServersListProps {
 export const PreviousServersList: React.FC<PreviousServersListProps> = ({
  onServerSelect,
 }) => {
-  const [_previousServers, setPreviousServers] =
+  const [_previousServers] = useMMKVString("previousServers");
    useMMKVString("previousServers");
  const previousServers = useMemo(() => {
    return JSON.parse(_previousServers || "[]") as Server[];
@@ -37,14 +37,16 @@ export const PreviousServersList: React.FC<PreviousServersListProps> = ({
            onPress={() => onServerSelect(s)}
            title={s.address}
            showArrow
            className='min-h-[48px] py-2'
          />
        ))}
        <ListItem
          onPress={() => {
-            setPreviousServers("[]");
+            storage.delete("previousServers");
          }}
          title={t("server.clear_button")}
          textColor='red'
          className='min-h-[48px] py-2'
        />
      </ListGroup>
    </View>
--- a/components/RoundButton.tsx
+++ b/components/RoundButton.tsx
@@ -10,7 +10,6 @@ interface Props extends ViewProps {
  background?: boolean;
  size?: "default" | "large";
  fillColor?: "primary";
  color?: "white" | "purple";
  hapticFeedback?: boolean;
 }
@@ -21,7 +20,6 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
  children,
  size = "default",
  fillColor,
  color = "white",
  hapticFeedback = true,
  ...viewProps
 }) => {
@@ -36,25 +34,6 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
    onPress?.();
  };
  if (Platform.OS === "ios") {
    return (
      <TouchableOpacity
        onPress={handlePress}
        className={`rounded-full ${buttonSize} flex items-center justify-center ${fillColorClass}`}
        {...(viewProps as any)}
      >
        {icon ? (
          <Ionicons
            name={icon}
            size={size === "large" ? 22 : 18}
            color={color === "white" ? "white" : "#9334E9"}
          />
        ) : null}
        {children ? children : null}
      </TouchableOpacity>
    );
  }
  if (fillColor)
    return (
      <TouchableOpacity
--- a/components/SubtitleTrackSelector.tsx
+++ b/components/SubtitleTrackSelector.tsx
@@ -1,10 +1,12 @@
 import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo, useState } from "react";
+import { useMemo } 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;
@@ -19,8 +21,6 @@ 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,83 +30,64 @@ 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 (
-    <PlatformDropdown
+    <View
-      groups={optionGroups}
+      className='flex col shrink justify-start place-self-start items-start'
-      trigger={trigger}
+      style={{
-      title={t("item_card.subtitles")}
+        minWidth: 60,
-      open={open}
+        maxWidth: 200,
      onOpenChange={setOpen}
      onOptionSelect={handleOptionSelect}
      expoUIConfig={{
        hostStyle: { flex: 1 },
      }}
-      bottomSheetConfig={{
+    >
-        enablePanDownToClose: true,
+      <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>
  );
 };
--- a/components/apple-tv-carousel/AppleTVCarousel.tsx
+++ b/components/apple-tv-carousel/AppleTVCarousel.tsx
@@ -1,851 +0,0 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import {
  getItemsApi,
  getTvShowsApi,
  getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { LinearGradient } from "expo-linear-gradient";
 import { useRouter } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Dimensions, Pressable, TouchableOpacity, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
  Easing,
  runOnJS,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
 } 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 { MarkAsPlayedLargeButton } from "./MarkAsPlayedLargeButton";
 interface AppleTVCarouselProps {
  initialIndex?: number;
  onItemChange?: (index: number) => void;
 }
 const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
 // Layout Constants
 const CAROUSEL_HEIGHT = screenHeight / 1.45;
 const GRADIENT_HEIGHT_TOP = 150;
 const GRADIENT_HEIGHT_BOTTOM = 150;
 const LOGO_HEIGHT = 80;
 // Position Constants
 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;
 const DOT_ACTIVE_WIDTH = 20;
 const DOT_INACTIVE_WIDTH = 12;
 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 = 10;
 const _TEXT_MARGIN_TOP = 16;
 // Border Radius Constants
 const DOT_BORDER_RADIUS = 3;
 const LOGO_SKELETON_BORDER_RADIUS = 8;
 const TEXT_SKELETON_BORDER_RADIUS = 4;
 const PLAY_BUTTON_BORDER_RADIUS = 25;
 const PLAYED_STATUS_BORDER_RADIUS = 20;
 // Animation Constants
 const DOT_ANIMATION_DURATION = 300;
 const CAROUSEL_TRANSITION_DURATION = 250;
 const PAN_ACTIVE_OFFSET = 10;
 const TRANSLATION_THRESHOLD = 0.2;
 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.3;
 const DOT_INACTIVE_OPACITY = 0.6;
 const TEXT_OPACITY = 0.9;
 // Color Constants
 const SKELETON_BACKGROUND_COLOR = "#1a1a1a";
 const SKELETON_ELEMENT_COLOR = "#333";
 const SKELETON_ACTIVE_DOT_COLOR = "#666";
 const _EMPTY_STATE_COLOR = "#666";
 const TEXT_SHADOW_COLOR = "rgba(0, 0, 0, 0.8)";
 const LOGO_WIDTH_PERCENTAGE = "80%";
 const DotIndicator = ({
  index,
  currentIndex,
  onPress,
 }: {
  index: number;
  currentIndex: number;
  onPress: (index: number) => void;
 }) => {
  const isActive = index === currentIndex;
  const animatedStyle = useAnimatedStyle(() => ({
    width: withTiming(isActive ? DOT_ACTIVE_WIDTH : DOT_INACTIVE_WIDTH, {
      duration: DOT_ANIMATION_DURATION,
      easing: Easing.out(Easing.quad),
    }),
    opacity: withTiming(isActive ? 1 : DOT_INACTIVE_OPACITY, {
      duration: DOT_ANIMATION_DURATION,
      easing: Easing.out(Easing.quad),
    }),
  }));
  return (
    <Pressable
      onPress={() => onPress(index)}
      style={{
        padding: DOT_PADDING, // Increase touch area
      }}
    >
      <Animated.View
        style={[
          {
            height: DOT_HEIGHT,
            backgroundColor: isActive ? "white" : "rgba(255, 255, 255, 0.4)",
            borderRadius: DOT_BORDER_RADIUS,
          },
          animatedStyle,
        ]}
      />
    </Pressable>
  );
 };
 export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
  initialIndex = 0,
  onItemChange,
 }) => {
  const { settings } = useSettings();
  const api = useAtomValue(apiAtom);
  const user = useAtomValue(userAtom);
  const { isConnected, serverConnected } = useNetworkStatus();
  const router = useRouter();
  const [currentIndex, setCurrentIndex] = useState(initialIndex);
  const translateX = useSharedValue(-currentIndex * screenWidth);
  const isQueryEnabled =
    !!api && !!user?.Id && isConnected && serverConnected === true;
  const { data: continueWatchingData, isLoading: continueWatchingLoading } =
    useQuery({
      queryKey: ["appleTVCarousel", "continueWatching", user?.Id],
      queryFn: async () => {
        if (!api || !user?.Id) return [];
        const response = await getItemsApi(api).getResumeItems({
          userId: user.Id,
          enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
          includeItemTypes: ["Movie", "Series", "Episode"],
          fields: ["Genres", "Overview"],
          limit: 2,
        });
        return response.data.Items || [];
      },
      enabled: isQueryEnabled,
      staleTime: 60 * 1000,
    });
  const { data: nextUpData, isLoading: nextUpLoading } = useQuery({
    queryKey: ["appleTVCarousel", "nextUp", user?.Id],
    queryFn: async () => {
      if (!api || !user?.Id) return [];
      const response = await getTvShowsApi(api).getNextUp({
        userId: user.Id,
        fields: ["MediaSourceCount", "Genres", "Overview"],
        limit: 2,
        enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
        enableResumable: false,
      });
      return response.data.Items || [];
    },
    enabled: isQueryEnabled,
    staleTime: 60 * 1000,
  });
  const { data: recentlyAddedData, isLoading: recentlyAddedLoading } = useQuery(
    {
      queryKey: ["appleTVCarousel", "recentlyAdded", user?.Id],
      queryFn: async () => {
        if (!api || !user?.Id) return [];
        const response = await getUserLibraryApi(api).getLatestMedia({
          userId: user.Id,
          limit: 2,
          fields: ["PrimaryImageAspectRatio", "Path", "Genres", "Overview"],
          imageTypeLimit: 1,
          enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
        });
        return response.data || [];
      },
      enabled: isQueryEnabled,
      staleTime: 60 * 1000,
    },
  );
  const items = useMemo(() => {
    const continueItems = continueWatchingData ?? [];
    const nextItems = nextUpData ?? [];
    const recentItems = recentlyAddedData ?? [];
    return [
      ...continueItems.slice(0, 2),
      ...nextItems.slice(0, 2),
      ...recentItems.slice(0, 2),
    ];
  }, [continueWatchingData, nextUpData, recentlyAddedData]);
  const isLoading =
    continueWatchingLoading || nextUpLoading || recentlyAddedLoading;
  const hasItems = items.length > 0;
  // Only get play settings if we have valid items
  const currentItem = hasItems ? items[currentIndex] : null;
  // Extract colors for the current item only (for performance)
  const currentItemColors = useImageColorsReturn({ item: currentItem });
  // Create a fallback empty item for useDefaultPlaySettings when no item is available
  const itemForPlaySettings = currentItem || { MediaSources: [] };
  const {
    defaultAudioIndex,
    defaultBitrate,
    defaultMediaSource,
    defaultSubtitleIndex,
  } = useDefaultPlaySettings(itemForPlaySettings as BaseItemDto, settings);
  const [selectedOptions, setSelectedOptions] = useState<
    SelectedOptions | undefined
  >(undefined);
  useEffect(() => {
    // Only set options if we have valid current item
    if (currentItem) {
      setSelectedOptions({
        bitrate: defaultBitrate,
        mediaSource: defaultMediaSource,
        subtitleIndex: defaultSubtitleIndex ?? -1,
        audioIndex: defaultAudioIndex,
      });
    } else {
      setSelectedOptions(undefined);
    }
  }, [
    defaultAudioIndex,
    defaultBitrate,
    defaultSubtitleIndex,
    defaultMediaSource,
    currentIndex,
    currentItem,
  ]);
  useEffect(() => {
    if (!hasItems) {
      setCurrentIndex(initialIndex);
      translateX.value = -initialIndex * screenWidth;
      return;
    }
    setCurrentIndex((prev) => {
      const newIndex = Math.min(prev, items.length - 1);
      translateX.value = -newIndex * screenWidth;
      return newIndex;
    });
  }, [hasItems, items, initialIndex, translateX]);
  useEffect(() => {
    if (hasItems) {
      onItemChange?.(currentIndex);
    }
  }, [hasItems, currentIndex, onItemChange]);
  const goToIndex = useCallback(
    (index: number) => {
      if (!hasItems || index < 0 || index >= items.length) return;
      translateX.value = withTiming(-index * screenWidth, {
        duration: CAROUSEL_TRANSITION_DURATION, // Slightly longer for smoother feel
        easing: Easing.bezier(0.25, 0.46, 0.45, 0.94), // iOS-like smooth deceleration curve
      });
      setCurrentIndex(index);
      onItemChange?.(index);
    },
    [hasItems, items, onItemChange, translateX],
  );
  const navigateToItem = useCallback(
    (item: BaseItemDto) => {
      const navigation = getItemNavigation(item, "(home)");
      router.push(navigation as any);
    },
    [router],
  );
  const panGesture = Gesture.Pan()
    .activeOffsetX([-PAN_ACTIVE_OFFSET, PAN_ACTIVE_OFFSET])
    .onUpdate((event) => {
      translateX.value = -currentIndex * screenWidth + event.translationX;
    })
    .onEnd((event) => {
      const velocity = event.velocityX;
      const translation = event.translationX;
      let newIndex = currentIndex;
      // Improved thresholds for more responsive navigation
      if (
        Math.abs(translation) > screenWidth * TRANSLATION_THRESHOLD ||
        Math.abs(velocity) > VELOCITY_THRESHOLD
      ) {
        if (translation > 0 && currentIndex > 0) {
          newIndex = currentIndex - 1;
        } else if (
          translation < 0 &&
          items &&
          currentIndex < items.length - 1
        ) {
          newIndex = currentIndex + 1;
        }
      }
      runOnJS(goToIndex)(newIndex);
    });
  const containerAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value }],
    };
  });
  const togglePlayedStatus = useMarkAsPlayed(items);
  const renderDots = () => {
    if (!hasItems || items.length <= 1) return null;
    return (
      <View
        style={{
          position: "absolute",
          bottom: DOTS_BOTTOM_POSITION,
          left: 0,
          right: 0,
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "center",
          gap: DOT_GAP,
        }}
      >
        {items.map((_, index) => (
          <DotIndicator
            key={index}
            index={index}
            currentIndex={currentIndex}
            onPress={goToIndex}
          />
        ))}
      </View>
    );
  };
  const renderSkeletonLoader = () => {
    return (
      <View
        style={{
          width: screenWidth,
          height: CAROUSEL_HEIGHT,
          backgroundColor: "#000",
        }}
      >
        {/* Background Skeleton */}
        <View
          style={{
            width: "100%",
            height: "100%",
            backgroundColor: SKELETON_BACKGROUND_COLOR,
            position: "absolute",
          }}
        />
        {/* Dark Overlay Skeleton */}
        <View
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: `rgba(0, 0, 0, ${OVERLAY_OPACITY})`,
          }}
        />
        {/* Gradient Fade to Black Top Skeleton */}
        <LinearGradient
          colors={["rgba(0,0,0,1)", "rgba(0,0,0,0.8)", "transparent"]}
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            height: GRADIENT_HEIGHT_TOP,
          }}
        />
        {/* Gradient Fade to Black Bottom Skeleton */}
        <LinearGradient
          colors={["transparent", "rgba(0,0,0,0.8)", "rgba(0,0,0,1)"]}
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            bottom: 0,
            height: GRADIENT_HEIGHT_BOTTOM,
          }}
        />
        {/* Logo Skeleton */}
        <View
          style={{
            position: "absolute",
            bottom: LOGO_BOTTOM_POSITION,
            left: 0,
            right: 0,
            paddingHorizontal: HORIZONTAL_PADDING,
            alignItems: "center",
          }}
        >
          <View
            style={{
              height: LOGO_HEIGHT,
              width: LOGO_WIDTH_PERCENTAGE,
              backgroundColor: SKELETON_ELEMENT_COLOR,
              borderRadius: LOGO_SKELETON_BORDER_RADIUS,
            }}
          />
        </View>
        {/* Type and Genres Skeleton */}
        <View
          style={{
            position: "absolute",
            bottom: GENRES_BOTTOM_POSITION,
            left: 0,
            right: 0,
            paddingHorizontal: HORIZONTAL_PADDING,
            alignItems: "center",
          }}
        >
          <View
            style={{
              height: TEXT_SKELETON_HEIGHT,
              width: TEXT_SKELETON_WIDTH,
              backgroundColor: SKELETON_ELEMENT_COLOR,
              borderRadius: TEXT_SKELETON_BORDER_RADIUS,
            }}
          />
        </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={{
            position: "absolute",
            bottom: CONTROLS_BOTTOM_POSITION,
            left: 0,
            right: 0,
            paddingHorizontal: HORIZONTAL_PADDING,
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            gap: CONTROLS_GAP,
          }}
        >
          {/* Play Button Skeleton */}
          <View
            style={{
              height: PLAY_BUTTON_SKELETON_HEIGHT,
              flex: 1,
              maxWidth: MAX_BUTTON_WIDTH,
              backgroundColor: SKELETON_ELEMENT_COLOR,
              borderRadius: PLAY_BUTTON_BORDER_RADIUS,
            }}
          />
          {/* Played Status Skeleton */}
          <View
            style={{
              width: PLAYED_STATUS_SKELETON_SIZE,
              height: PLAYED_STATUS_SKELETON_SIZE,
              backgroundColor: SKELETON_ELEMENT_COLOR,
              borderRadius: PLAYED_STATUS_BORDER_RADIUS,
            }}
          />
        </View>
        {/* Dots Skeleton */}
        <View
          style={{
            position: "absolute",
            bottom: DOTS_BOTTOM_POSITION,
            left: 0,
            right: 0,
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            gap: DOT_GAP,
          }}
        >
          {[1, 2, 3].map((_, index) => (
            <View
              key={index}
              style={{
                width: index === 0 ? DOT_ACTIVE_WIDTH : DOT_INACTIVE_WIDTH,
                height: DOT_HEIGHT,
                backgroundColor:
                  index === 0
                    ? SKELETON_ACTIVE_DOT_COLOR
                    : SKELETON_ELEMENT_COLOR,
                borderRadius: DOT_BORDER_RADIUS,
              }}
            />
          ))}
        </View>
      </View>
    );
  };
  const renderItem = (item: BaseItemDto, _index: number) => {
    const itemLogoUrl = api ? getLogoImageUrlById({ api, item }) : null;
    return (
      <View
        key={item.Id}
        style={{
          width: screenWidth,
          height: CAROUSEL_HEIGHT,
          position: "relative",
        }}
      >
        {/* Background Backdrop */}
        <ItemImage
          item={item}
          variant='Backdrop'
          style={{
            width: "100%",
            height: "100%",
            position: "absolute",
          }}
        />
        {/* Dark Overlay */}
        <View
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: `rgba(0, 0, 0, ${OVERLAY_OPACITY})`,
          }}
        />
        {/* Gradient Fade to Black at Top */}
        <LinearGradient
          colors={["rgba(0,0,0,1)", "rgba(0,0,0,0.2)", "transparent"]}
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            height: GRADIENT_HEIGHT_TOP,
          }}
        />
        {/* Gradient Fade to Black at Bottom */}
        <LinearGradient
          colors={["transparent", "rgba(0,0,0,0.8)", "rgba(0,0,0,1)"]}
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            bottom: 0,
            height: GRADIENT_HEIGHT_BOTTOM,
          }}
        />
        {/* Logo Section */}
        {itemLogoUrl && (
          <TouchableOpacity
            onPress={() => navigateToItem(item)}
            style={{
              position: "absolute",
              bottom: LOGO_BOTTOM_POSITION,
              left: 0,
              right: 0,
              paddingHorizontal: HORIZONTAL_PADDING,
              alignItems: "center",
            }}
          >
            <Image
              source={{
                uri: itemLogoUrl,
              }}
              style={{
                height: LOGO_HEIGHT,
                width: LOGO_WIDTH_PERCENTAGE,
              }}
              contentFit='contain'
            />
          </TouchableOpacity>
        )}
        {/* Type and Genres Section */}
        <View
          style={{
            position: "absolute",
            bottom: GENRES_BOTTOM_POSITION,
            left: 0,
            right: 0,
            paddingHorizontal: HORIZONTAL_PADDING,
            alignItems: "center",
          }}
        >
          <TouchableOpacity onPress={() => navigateToItem(item)}>
            <Animated.Text
              style={{
                color: `rgba(255, 255, 255, ${TEXT_OPACITY})`,
                fontSize: GENRES_FONT_SIZE,
                fontWeight: "500",
                textAlign: "center",
                textShadowColor: TEXT_SHADOW_COLOR,
                textShadowOffset: { width: 0, height: 1 },
                textShadowRadius: TEXT_SHADOW_RADIUS,
              }}
            >
              {(() => {
                let typeLabel = "";
                if (item.Type === "Episode") {
                  // For episodes, show season and episode number
                  const season = item.ParentIndexNumber;
                  const episode = item.IndexNumber;
                  if (season && episode) {
                    typeLabel = `S${season} • E${episode}`;
                  } else {
                    typeLabel = "Episode";
                  }
                } else {
                  typeLabel =
                    item.Type === "Series"
                      ? "TV Show"
                      : item.Type === "Movie"
                        ? "Movie"
                        : item.Type || "";
                }
                const genres =
                  item.Genres && item.Genres.length > 0
                    ? item.Genres.slice(0, MAX_GENRES_COUNT).join(" • ")
                    : "";
                if (typeLabel && genres) {
                  return `${typeLabel} • ${genres}`;
                } else if (typeLabel) {
                  return typeLabel;
                } else if (genres) {
                  return genres;
                } else {
                  return "";
                }
              })()}
            </Animated.Text>
          </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={{
            position: "absolute",
            bottom: CONTROLS_BOTTOM_POSITION,
            left: 0,
            right: 0,
            paddingHorizontal: HORIZONTAL_PADDING,
          }}
        >
          <View
            style={{
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              gap: CONTROLS_GAP,
            }}
          >
            {/* Play Button */}
            <View style={{ flex: 1, maxWidth: MAX_BUTTON_WIDTH }}>
              {selectedOptions && (
                <PlayButton
                  item={item}
                  selectedOptions={selectedOptions}
                  colors={currentItemColors}
                />
              )}
            </View>
            {/* Mark as Played */}
            <MarkAsPlayedLargeButton
              isPlayed={item.UserData?.Played ?? false}
              onToggle={togglePlayedStatus}
            />
          </View>
        </View>
      </View>
    );
  };
  // Handle loading state
  if (isLoading) {
    return (
      <View
        style={{
          height: CAROUSEL_HEIGHT,
          backgroundColor: "#000",
          overflow: "hidden",
        }}
      >
        {renderSkeletonLoader()}
      </View>
    );
  }
  // Handle empty items
  if (!hasItems) {
    return null;
  }
  return (
    <View
      style={{
        height: CAROUSEL_HEIGHT, // Fixed height instead of flex: 1
        backgroundColor: "#000",
        overflow: "hidden",
      }}
    >
      <GestureDetector gesture={panGesture}>
        <Animated.View
          style={[
            {
              height: CAROUSEL_HEIGHT, // Fixed height instead of flex: 1
              flexDirection: "row",
              width: screenWidth * items.length,
            },
            containerAnimatedStyle,
          ]}
        >
          {items.map((item, index) => renderItem(item, index))}
        </Animated.View>
      </GestureDetector>
      {/* Animated Dots Indicator */}
      {renderDots()}
    </View>
  );
 };
--- a/components/apple-tv-carousel/MarkAsPlayedLargeButton.tsx
+++ b/components/apple-tv-carousel/MarkAsPlayedLargeButton.tsx
@@ -1,51 +0,0 @@
 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>
  );
 };
--- a/components/common/Dropdown.tsx
+++ b/components/common/Dropdown.tsx
@@ -0,0 +1,125 @@
 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;
--- a/components/common/HeaderBackButton.tsx
+++ b/components/common/HeaderBackButton.tsx
@@ -19,18 +19,6 @@ export const HeaderBackButton: React.FC<Props> = ({
 }) => {
  const router = useRouter();
  if (Platform.OS === "ios") {
    return (
      <TouchableOpacity
        onPress={() => router.back()}
        className='flex items-center justify-center w-9 h-9'
        {...touchableOpacityProps}
      >
        <Ionicons name='arrow-back' size={24} color='white' />
      </TouchableOpacity>
    );
  }
  if (background === "transparent" && Platform.OS !== "android")
    return (
      <TouchableOpacity
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -20,8 +20,8 @@ export function Input(props: InputProps) {
      <TextInput
        ref={inputRef}
        className={`
-          w-full text-lg px-5 py-4 rounded-2xl
+          w-full text-lg px-5 py-5 rounded-2xl
-          ${isFocused ? "bg-neutral-700 border-2 border-white" : "bg-neutral-900 border-2 border-transparent"}
+          ${isFocused ? "bg-neutral-700 border-2 border-white" : "bg-neutral-900 border-2 border-neutral-800"}
          text-white ${extraClassName}
        `}
        allowFontScaling={false}
@@ -41,11 +41,15 @@ export function Input(props: InputProps) {
  ) : (
    <TextInput
      ref={inputRef}
-      className='p-4  rounded-xl bg-neutral-900'
+      className={`p-3 rounded-xl bg-neutral-900 ${
        isFocused ? "border-2 border-white" : "border-2 border-neutral-800"
      } ${extraClassName}`}
      allowFontScaling={false}
      style={[{ color: "white" }, style]}
      placeholderTextColor={"#9CA3AF"}
      clearButtonMode='while-editing'
      onFocus={() => setIsFocused(true)}
      onBlur={() => setIsFocused(false)}
      {...otherProps}
    />
  );
--- a/components/common/JellyseerrItemRouter.tsx
+++ b/components/common/JellyseerrItemRouter.tsx
@@ -1,8 +1,14 @@
 import { useRouter, useSegments } from "expo-router";
 import type React from "react";
-import { type PropsWithChildren } from "react";
+import { type PropsWithChildren, useCallback, useMemo } 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 {
@@ -32,33 +38,90 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
 }) => {
  const router = useRouter();
  const segments = useSegments();
  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
-  const from = (segments as string[])[2] || "(home)";
+  const from = segments[2] || "(home)";
  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]);
  if (from === "(home)" || from === "(search)" || from === "(libraries)")
    return (
-      <TouchableOpacity
+      <ContextMenu.Root>
-        onPress={() => {
+        <ContextMenu.Trigger>
-          if (!result) return;
+          <TouchableOpacity
            onPress={() => {
              if (!result) return;
-          router.push({
+              router.push({
-            pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+                pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
-            // @ts-expect-error
+                // @ts-expect-error
-            params: {
+                params: {
-              ...result,
+                  ...result,
-              mediaTitle,
+                  mediaTitle,
-              releaseYear,
+                  releaseYear,
-              canRequest: canRequest.toString(),
+                  canRequest: canRequest.toString(),
-              posterSrc,
+                  posterSrc,
-              mediaType,
+                  mediaType,
-            },
+                },
-          });
+              });
-        }}
+            }}
-        {...props}
+            {...props}
-      >
+          >
-        {children}
+            {children}
-      </TouchableOpacity>
+          </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>
    );
  return null;
 };
--- a/components/common/TouchableItemRouter.tsx
+++ b/components/common/TouchableItemRouter.tsx
@@ -43,48 +43,6 @@ export const itemRouter = (item: BaseItemDto, from: string) => {
  return `/(auth)/(tabs)/${from}/items/page?id=${item.Id}`;
 };
 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,
  isOffline = false,
@@ -97,7 +55,7 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
  const markAsPlayedStatus = useMarkAsPlayed([item]);
  const { isFavorite, toggleFavorite } = useFavorite(item);
-  const from = (segments as string[])[2] || "(home)";
+  const from = segments[2] || "(home)";
  const showActionSheet = useCallback(() => {
    if (
@@ -143,15 +101,12 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
      <TouchableOpacity
        onLongPress={showActionSheet}
        onPress={() => {
          let url = itemRouter(item, from);
          if (isOffline) {
-            // For offline mode, we still need to use query params
+            url += `&offline=true`;
            const url = `${itemRouter(item, from)}&offline=true`;
            router.push(url as any);
            return;
          }
-
+          // @ts-expect-error
-          const navigation = getItemNavigation(item, from);
+          router.push(url);
          router.push(navigation as any);
        }}
        {...props}
      >
--- a/components/downloads/DownloadCard.tsx
+++ b/components/downloads/DownloadCard.tsx
@@ -6,7 +6,6 @@ import { t } from "i18next";
 import { useMemo } from "react";
 import {
  ActivityIndicator,
  Platform,
  TouchableOpacity,
  type TouchableOpacityProps,
  View,
@@ -110,9 +109,9 @@ export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
        />
      )}
-      {/* Action buttons in bottom right corner */}
+      {/* Action buttons in top right corner */}
-      <View className='absolute bottom-2 right-2 flex flex-row items-center space-x-2 z-10'>
+      <View className='absolute top-2 right-2 flex flex-row items-center space-x-2 z-10'>
-        {process.status === "downloading" && Platform.OS !== "ios" && (
+        {process.status === "downloading" && (
          <TouchableOpacity
            onPress={() => handlePause(process.id)}
            className='p-1'
@@ -120,7 +119,7 @@ export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
            <Ionicons name='pause' size={20} color='white' />
          </TouchableOpacity>
        )}
-        {process.status === "paused" && Platform.OS !== "ios" && (
+        {process.status === "paused" && (
          <TouchableOpacity
            onPress={() => handleResume(process.id)}
            className='p-1'
--- a/components/downloads/DownloadSize.tsx
+++ b/components/downloads/DownloadSize.tsx
@@ -14,10 +14,7 @@ export const DownloadSize: React.FC<DownloadSizeProps> = ({
  ...props
 }) => {
  const { getDownloadedItemSize, getDownloadedItems } = useDownload();
-  const downloadedFiles = useMemo(
+  const downloadedFiles = getDownloadedItems();
    () => getDownloadedItems(),
    [getDownloadedItems],
  );
  const [size, setSize] = useState<string | undefined>();
  const itemIds = useMemo(() => items.map((i) => i.Id), [items]);
--- a/components/downloads/MovieCard.tsx
+++ b/components/downloads/MovieCard.tsx
@@ -37,7 +37,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
   */
  const handleDeleteFile = useCallback(() => {
    if (item.Id) {
-      deleteFile(item.Id, item.Type);
+      deleteFile(item.Id, "Movie");
    }
  }, [deleteFile, item.Id]);
--- a/components/filters/FilterSheet.tsx
+++ b/components/filters/FilterSheet.tsx
@@ -177,7 +177,7 @@ export const FilterSheet = <T,>({
          {showSearch && (
            <Input
              placeholder={t("search.search")}
-              className='my-2 border-neutral-800 border'
+              extraClassName='my-2 border-neutral-800 border'
              value={search}
              onChangeText={(text) => {
                setSearch(text);
--- a/components/home/LargeMovieCarousel.tsx
+++ b/components/home/LargeMovieCarousel.tsx
@@ -21,7 +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 { getItemNavigation } from "../common/TouchableItemRouter";
+import { itemRouter } from "../common/TouchableItemRouter";
 interface Props extends ViewProps {}
@@ -88,24 +88,22 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
  if (!popularItems) return null;
  return (
-    <View className='flex flex-col items-center' {...props}>
+    <View className='flex flex-col items-center mt-2' {...props}>
      <Carousel
        ref={ref}
        autoPlay={false}
        loop={true}
        snapEnabled={true}
        vertical={false}
        mode='parallax'
        modeConfig={{
-          parallaxScrollingScale: 1,
+          parallaxScrollingScale: 0.86,
-          parallaxScrollingOffset: 0,
+          parallaxScrollingOffset: 100,
        }}
        width={width}
-        height={500}
+        height={204}
        data={popularItems}
        onProgressChange={progress}
        renderItem={({ item, index }) => <RenderItem key={index} item={item} />}
        scrollAnimationDuration={1000}
      />
      <Pagination.Basic
        progress={progress}
@@ -148,20 +146,20 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
  }, [item]);
  const segments = useSegments();
-  const from = (segments as string[])[2] || "(home)";
+  const from = segments[2] || "(home)";
  const opacity = useSharedValue(1);
  const handleRoute = useCallback(() => {
    if (!from) return;
    const url = itemRouter(item, from);
    lightHapticFeedback();
-    const navigation = getItemNavigation(item, from);
+    // @ts-expect-error
-    router.push(navigation as any);
+    if (url) router.push(url);
  }, [item, from]);
  const tap = Gesture.Tap()
    .maxDuration(2000)
    .shouldCancelWhenOutside(true)
    .onBegin(() => {
      opacity.value = withTiming(0.8, { duration: 100 });
    })
@@ -176,19 +174,25 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
  return (
    <GestureDetector gesture={tap}>
-      <Animated.View style={{ opacity }}>
+      <Animated.View
-        <View className='relative flex justify-center overflow-hidden border border-neutral-800'>
+        style={{
          opacity: opacity,
        }}
        className='px-4'
      >
        <View className='relative flex justify-center rounded-2xl overflow-hidden border border-neutral-800'>
          <Image
            source={{
              uri,
            }}
            style={{
              width: "100%",
-              height: 500,
+              height: 200,
              borderRadius: 16,
              overflow: "hidden",
            }}
          />
-          <View className='absolute bottom-0 left-0 w-full flex items-center'>
+          <View className='absolute bottom-0 left-0 w-full h-24 p-4 flex items-center'>
            <Image
              source={{
                uri: logoUri,
--- a/components/inputs/PinInput.tsx
+++ b/components/inputs/PinInput.tsx
@@ -1,131 +0,0 @@
 import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import React, { useCallback, useImperativeHandle, useRef } from "react";
 import {
  type StyleProp,
  StyleSheet,
  Text,
  type TextInputProps,
  View,
  type ViewStyle,
 } from "react-native";
 interface PinInputProps
  extends Omit<TextInputProps, "value" | "onChangeText" | "style"> {
  value: string;
  onChangeText: (text: string) => void;
  length?: number;
  autoFocus?: boolean;
  style?: StyleProp<ViewStyle>;
 }
 export interface PinInputRef {
  focus: () => void;
 }
 const PinInputComponent = React.forwardRef<PinInputRef, PinInputProps>(
  (props, ref) => {
    const {
      value,
      onChangeText,
      length = 6,
      style,
      autoFocus,
      ...rest
    } = props;
    const inputRef = useRef<any>(null);
    const activeIndex = value.length;
    const handlePress = useCallback(() => {
      inputRef.current?.focus();
    }, []);
    useImperativeHandle(
      ref,
      () => ({
        focus: () => inputRef.current?.focus(),
      }),
      [],
    );
    return (
      <View style={[styles.container, style]}>
        <BottomSheetTextInput
          ref={inputRef}
          value={value}
          onChangeText={onChangeText}
          keyboardType='number-pad'
          maxLength={length}
          style={styles.hiddenInput}
          autoFocus={autoFocus}
          {...rest}
        />
        <View style={styles.cells} onTouchStart={handlePress}>
          {Array(length)
            .fill(0)
            .map((_, i) => (
              <View
                key={i}
                style={[
                  styles.cell,
                  i === activeIndex && styles.activeCell,
                  i === activeIndex - 1 && styles.filledCell,
                ]}
              >
                <Text style={styles.digit}>{value[i]}</Text>
                {i === activeIndex && <View style={styles.cursor} />}
              </View>
            ))}
        </View>
      </View>
    );
  },
 );
 PinInputComponent.displayName = "PinInput";
 export const PinInput = PinInputComponent;
 const styles = StyleSheet.create({
  container: {
    width: "100%",
  },
  hiddenInput: {
    position: "absolute",
    width: 1,
    height: 1,
    opacity: 0,
  },
  cells: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
  },
  cell: {
    width: 40,
    height: 48,
    borderWidth: 1,
    borderColor: "#374151",
    borderRadius: 8,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#1F2937",
  },
  activeCell: {
    borderColor: "#6366F1",
  },
  filledCell: {
    borderColor: "#4B5563",
  },
  digit: {
    fontSize: 24,
    color: "white",
    fontWeight: "500",
  },
  cursor: {
    position: "absolute",
    width: 2,
    height: 24,
    backgroundColor: "#6366F1",
  },
 });
--- a/components/jellyseerr/PersonPoster.tsx
+++ b/components/jellyseerr/PersonPoster.tsx
@@ -22,7 +22,7 @@ const PersonPoster: React.FC<Props & ViewProps> = ({
  const { jellyseerrApi } = useJellyseerr();
  const router = useRouter();
  const segments = useSegments();
-  const from = (segments as string[])[2] || "(home)";
+  const from = segments[2] || "(home)";
  if (from === "(home)" || from === "(search)" || from === "(libraries)")
    return (
--- a/components/jellyseerr/RequestModal.tsx
+++ b/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 { TouchableOpacity, View, type ViewProps } from "react-native";
+import { 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,115 +138,6 @@ 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,
@@ -272,6 +163,9 @@ const RequestModal = forwardRef<
      defaultTags,
    ]);
    const pathTitleExtractor = (item: RootFolder) =>
      `${item.path} (${item.freeSpace.bytesToReadable()})`;
    return (
      <BottomSheetModal
        ref={ref}
@@ -305,104 +199,70 @@ const RequestModal = forwardRef<
            <View className='flex flex-col space-y-2'>
              {defaultService && defaultServiceDetails && users && (
                <>
-                  <View className='flex flex-col'>
+                  <Dropdown
-                    <Text className='opacity-50 mb-1 text-xs'>
+                    data={defaultServiceDetails.profiles}
-                      {t("jellyseerr.quality_profile")}
+                    titleExtractor={(item) => item.name}
-                    </Text>
+                    placeholderText={
-                    <PlatformDropdown
+                      requestOverrides.profileName || defaultProfile.name
-                      groups={qualityProfileOptions}
+                    }
-                      trigger={
+                    keyExtractor={(item) => item.id.toString()}
-                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                    label={t("jellyseerr.quality_profile")}
-                          <Text numberOfLines={1}>
+                    onSelected={(item) =>
-                            {defaultServiceDetails.profiles.find(
+                      item &&
-                              (p) =>
+                      setRequestOverrides((prev) => ({
-                                p.id ===
+                        ...prev,
-                                (requestOverrides.profileId ||
+                        profileId: item?.id,
-                                  defaultProfile?.id),
+                      }))
-                            )?.name || defaultProfile?.name}
+                    }
-                          </Text>
+                    title={t("jellyseerr.quality_profile")}
-                        </TouchableOpacity>
+                  />
-                      }
+                  <Dropdown
-                      title={t("jellyseerr.quality_profile")}
+                    data={defaultServiceDetails.rootFolders}
-                    />
+                    titleExtractor={pathTitleExtractor}
-                  </View>
+                    placeholderText={
-
+                      defaultFolder ? pathTitleExtractor(defaultFolder) : ""
-                  <View className='flex flex-col'>
+                    }
-                    <Text className='opacity-50 mb-1 text-xs'>
+                    keyExtractor={(item) => item.id.toString()}
-                      {t("jellyseerr.root_folder")}
+                    label={t("jellyseerr.root_folder")}
-                    </Text>
+                    onSelected={(item) =>
-                    <PlatformDropdown
+                      item &&
-                      groups={rootFolderOptions}
+                      setRequestOverrides((prev) => ({
-                      trigger={
+                        ...prev,
-                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                        rootFolder: item.path,
-                          <Text numberOfLines={1}>
+                      }))
-                            {defaultServiceDetails.rootFolders.find(
+                    }
-                              (f) =>
+                    title={t("jellyseerr.root_folder")}
-                                f.path ===
+                  />
-                                (requestOverrides.rootFolder ||
+                  <Dropdown
-                                  defaultFolder?.path),
+                    multiple
-                            )
+                    data={defaultServiceDetails.tags}
-                              ? pathTitleExtractor(
+                    titleExtractor={(item) => item.label}
-                                  defaultServiceDetails.rootFolders.find(
+                    placeholderText={defaultTags.map((t) => t.label).join(",")}
-                                    (f) =>
+                    keyExtractor={(item) => item.id.toString()}
-                                      f.path ===
+                    label={t("jellyseerr.tags")}
-                                      (requestOverrides.rootFolder ||
+                    onSelected={(...selected) =>
-                                        defaultFolder?.path),
+                      setRequestOverrides((prev) => ({
-                                  )!,
+                        ...prev,
-                                )
+                        tags: selected.map((i) => i.id),
-                              : pathTitleExtractor(defaultFolder!)}
+                      }))
-                          </Text>
+                    }
-                        </TouchableOpacity>
+                    title={t("jellyseerr.tags")}
-                      }
+                  />
-                      title={t("jellyseerr.root_folder")}
+                  <Dropdown
-                    />
+                    data={users}
-                  </View>
+                    titleExtractor={(item) => item.displayName}
-
+                    placeholderText={jellyseerrUser!.displayName}
-                  <View className='flex flex-col'>
+                    keyExtractor={(item) => item.id.toString() || ""}
-                    <Text className='opacity-50 mb-1 text-xs'>
+                    label={t("jellyseerr.request_as")}
-                      {t("jellyseerr.tags")}
+                    onSelected={(item) =>
-                    </Text>
+                      item &&
-                    <PlatformDropdown
+                      setRequestOverrides((prev) => ({
-                      groups={tagsOptions}
+                        ...prev,
-                      trigger={
+                        userId: item?.id,
-                        <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
+                    title={t("jellyseerr.request_as")}
-                              ? 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>
--- a/components/jellyseerr/discover/CompanySlide.tsx
+++ b/components/jellyseerr/discover/CompanySlide.tsx
@@ -16,12 +16,13 @@ const CompanySlide: React.FC<
 > = ({ slide, data, ...props }) => {
  const segments = useSegments();
  const { jellyseerrApi } = useJellyseerr();
-  const from = (segments as string[])[2] || "(home)";
+  const from = segments[2] || "(home)";
  const navigate = useCallback(
    ({ id, image, name }: Network | Studio) =>
      router.push({
-        pathname: `/(auth)/(tabs)/${from}/jellyseerr/company/${id}` as any,
+        // @ts-expect-error - Dynamic pathname for jellyseerr routing
        pathname: `/(auth)/(tabs)/${from}/jellyseerr/company/${id}`,
        params: { id, image, name, type: slide.type },
      }),
    [slide],
--- a/components/jellyseerr/discover/GenreSlide.tsx
+++ b/components/jellyseerr/discover/GenreSlide.tsx
@@ -13,12 +13,13 @@ import { genreColorMap } from "@/utils/jellyseerr/src/components/Discover/consta
 const GenreSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) => {
  const segments = useSegments();
  const { jellyseerrApi } = useJellyseerr();
-  const from = (segments as string[])[2] || "(home)";
+  const from = segments[2] || "(home)";
  const navigate = useCallback(
    (genre: GenreSliderItem) =>
      router.push({
-        pathname: `/(auth)/(tabs)/${from}/jellyseerr/genre/${genre.id}` as any,
+        // @ts-expect-error - Dynamic pathname for jellyseerr routing
        pathname: `/(auth)/(tabs)/${from}/jellyseerr/genre/${genre.id}`,
        params: { type: slide.type, name: genre.name },
      }),
    [slide],
--- a/components/jellyseerr/discover/RecentRequestsSlide.tsx
+++ b/components/jellyseerr/discover/RecentRequestsSlide.tsx
@@ -8,14 +8,7 @@ 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";
-type ExtendedMediaRequest = NonFunctionProperties<MediaRequest> & {
+const RequestCard: React.FC<{ request: MediaRequest }> = ({ request }) => {
  profileName: string;
  canRemove: boolean;
 };
 const RequestCard: React.FC<{ request: ExtendedMediaRequest }> = ({
  request,
 }) => {
  const { jellyseerrApi } = useJellyseerr();
  const { data: details } = useQuery({
@@ -74,15 +67,9 @@ const RecentRequestsSlide: React.FC<SlideProps & ViewProps> = ({
      <Slide
        {...props}
        slide={slide}
-        data={
+        data={requests.results}
          requests.results.map((item) => ({
            ...item,
            profileName: item.profileName ?? "Unknown",
            canRemove: Boolean(item.canRemove),
          })) as ExtendedMediaRequest[]
        }
        keyExtractor={(item) => item.id.toString()}
-        renderItem={(item: ExtendedMediaRequest) => (
+        renderItem={(item: NonFunctionProperties<MediaRequest>) => (
          <RequestCard request={item} />
        )}
      />
--- a/components/list/ListItem.tsx
+++ b/components/list/ListItem.tsx
@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { PropsWithChildren, ReactNode } from "react";
-import { TouchableOpacity, View, type ViewProps } from "react-native";
+import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "../common/Text";
 interface Props extends ViewProps {
--- a/components/search/DiscoverFilters.tsx
+++ b/components/search/DiscoverFilters.tsx
@@ -1,115 +0,0 @@
 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>
  );
 };
--- a/components/search/SearchTabButtons.tsx
+++ b/components/search/SearchTabButtons.tsx
@@ -1,76 +0,0 @@
 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>
  );
 };
--- a/components/series/CastAndCrew.tsx
+++ b/components/series/CastAndCrew.tsx
@@ -12,6 +12,7 @@ import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 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,7 +24,7 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
  const [api] = useAtom(apiAtom);
  const segments = useSegments();
  const { t } = useTranslation();
-  const from = (segments as string[])[2];
+  const from = segments[2];
  const destinctPeople = useMemo(() => {
    const people: Record<string, BaseItemPerson> = {};
@@ -55,12 +56,15 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
        renderItem={(i) => (
          <TouchableOpacity
            onPress={() => {
-              if (i.Id) {
+              const url = itemRouter(
-                router.push({
+                {
-                  pathname: "/persons/[personId]",
+                  Id: i.Id,
-                  params: { personId: i.Id },
+                  Type: "Person",
-                });
+                },
-              }
+                from,
              );
              // @ts-expect-error
              router.push(url);
            }}
            className='flex flex-col w-28'
          >
--- a/components/series/SeasonDropdown.tsx
+++ b/components/series/SeasonDropdown.tsx
@@ -1,9 +1,11 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { t } from "i18next";
 import { useEffect, useMemo } from "react";
-import { Platform, View } from "react-native";
+import { Platform, TouchableOpacity, View } from "react-native";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
 import { t } from "i18next";
 import { Text } from "../common/Text";
 import { PlatformDropdown } from "../PlatformDropdown";
 type Props = {
  item: BaseItemDto;
@@ -53,32 +55,6 @@ 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) {
@@ -120,19 +96,45 @@ 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 (
-    <PlatformDropdown
+    <DropdownMenu.Root>
-      groups={optionGroups}
+      <DropdownMenu.Trigger>
-      trigger={
+        <View className='flex flex-row'>
-        <View className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
+          <TouchableOpacity className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
-          <Text>
+            <Text>
-            {t("item_card.season")} {seasonIndex}
+              {t("item_card.season")} {seasonIndex}
-          </Text>
+            </Text>
          </TouchableOpacity>
        </View>
-      }
+      </DropdownMenu.Trigger>
-      title={t("item_card.seasons")}
+      <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>
  );
 };
--- a/components/series/SeasonEpisodesCarousel.tsx
+++ b/components/series/SeasonEpisodesCarousel.tsx
@@ -1,12 +1,13 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef } from "react";
 import { TouchableOpacity, type ViewProps } from "react-native";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import {
  HorizontalScroll,
@@ -29,10 +30,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const { getDownloadedItems } = useDownload();
-  const downloadedFiles = useMemo(
+  const downloadedFiles = getDownloadedItems();
    () => getDownloadedItems(),
    [getDownloadedItems],
  );
  const scrollRef = useRef<HorizontalScrollRef>(null);
@@ -59,7 +57,6 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
        userId: user.Id,
        seasonId: seasonId || undefined,
        seriesId: item.SeriesId,
        enableUserData: true,
        fields: [
          "ItemCounts",
          "PrimaryImageAspectRatio",
@@ -73,6 +70,48 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
    enabled: !!api && !!user?.Id && !!seasonId,
  });
  /**
   * Prefetch previous and next episode
   */
  const queryClient = useQueryClient();
  useEffect(() => {
    if (!item?.Id || !item.IndexNumber || !episodes || episodes.length === 0) {
      return;
    }
    const previousId = episodes?.find(
      (ep) => ep.IndexNumber === item.IndexNumber! - 1,
    )?.Id;
    if (previousId) {
      queryClient.prefetchQuery({
        queryKey: ["item", previousId],
        queryFn: async () =>
          await getUserItemData({
            api,
            userId: user?.Id,
            itemId: previousId,
          }),
        staleTime: 60 * 1000 * 5,
      });
    }
    const nextId = episodes?.find(
      (ep) => ep.IndexNumber === item.IndexNumber! + 1,
    )?.Id;
    if (nextId) {
      queryClient.prefetchQuery({
        queryKey: ["item", nextId],
        queryFn: async () =>
          await getUserItemData({
            api,
            userId: user?.Id,
            itemId: nextId,
          }),
        staleTime: 60 * 1000 * 5,
      });
    }
  }, [episodes, api, user?.Id, item]);
  useEffect(() => {
    if (item?.Type === "Episode" && item.Id) {
      const index = episodes?.findIndex((ep) => ep.Id === item.Id);
--- a/components/series/SeasonPicker.tsx
+++ b/components/series/SeasonPicker.tsx
@@ -1,7 +1,7 @@
 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 } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,6 +11,7 @@ import {
  type SeasonIndexState,
 } from "@/components/series/SeasonDropdown";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { runtimeTicksToSeconds } from "@/utils/time";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { Text } from "../common/Text";
@@ -86,7 +87,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
        seasonId: selectedSeasonId,
        enableUserData: true,
        // Note: Including trick play is necessary to enable trick play downloads
-        fields: ["Overview", "Trickplay"],
+        fields: ["MediaSources", "MediaStreams", "Overview", "Trickplay"],
      });
      if (res.data.TotalRecordCount === 0)
@@ -100,6 +101,25 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
    enabled: !!api && !!user?.Id && !!item.Id && !!selectedSeasonId,
  });
  const queryClient = useQueryClient();
  useEffect(() => {
    for (const e of episodes || []) {
      queryClient.prefetchQuery({
        queryKey: ["item", e.Id],
        queryFn: async () => {
          if (!e.Id) return;
          const res = await getUserItemData({
            api,
            userId: user?.Id,
            itemId: e.Id,
          });
          return res;
        },
        staleTime: 60 * 5 * 1000,
      });
    }
  }, [episodes]);
  // Used for height calculation
  const [nrOfEpisodes, setNrOfEpisodes] = useState(0);
  useEffect(() => {
--- a/components/series/SeriesActions.tsx
+++ b/components/series/SeriesActions.tsx
@@ -1,7 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
  Alert,
  Linking,
@@ -17,7 +16,6 @@ interface Props extends ViewProps {
 }
 export const ItemActions = ({ item, ...props }: Props) => {
  const { t } = useTranslation();
  const trailerLink = useMemo(() => {
    if ("RemoteTrailers" in item && item.RemoteTrailers?.[0]?.Url) {
      return item.RemoteTrailers[0].Url;
@@ -32,7 +30,7 @@ export const ItemActions = ({ item, ...props }: Props) => {
  const openTrailer = useCallback(async () => {
    if (!trailerLink) {
-      Alert.alert(t("common.no_trailer_available"));
+      Alert.alert("No trailer available");
      return;
    }
@@ -41,7 +39,7 @@ export const ItemActions = ({ item, ...props }: Props) => {
    } catch (err) {
      console.error("Failed to open trailer link:", err);
    }
-  }, [trailerLink, t]);
+  }, [trailerLink]);
  return (
    <View className='' {...props}>
--- a/components/settings/AppLanguageSelector.tsx
+++ b/components/settings/AppLanguageSelector.tsx
@@ -1,12 +1,12 @@
-import { useMemo } from "react";
+const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
 import { useTranslation } from "react-i18next";
-import { Platform, View, type ViewProps } from "react-native";
+import { Platform, TouchableOpacity, 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,31 +15,6 @@ 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;
@@ -47,19 +22,54 @@ export const AppLanguageSelector: React.FC<Props> = () => {
    <View>
      <ListGroup title={t("home.settings.languages.title")}>
        <ListItem title={t("home.settings.languages.app_language")}>
-          <PlatformDropdown
+          <DropdownMenu.Root>
-            groups={optionGroups}
+            <DropdownMenu.Trigger>
-            trigger={
+              <TouchableOpacity className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
              <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>
-              </View>
+              </TouchableOpacity>
-            }
+            </DropdownMenu.Trigger>
-            title={t("home.settings.languages.title")}
+            <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>
        </ListItem>
      </ListGroup>
    </View>
--- a/components/settings/AudioToggles.tsx
+++ b/components/settings/AudioToggles.tsx
@@ -1,13 +1,14 @@
 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 {}
@@ -21,39 +22,6 @@ 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;
@@ -80,10 +48,9 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
          />
        </ListItem>
        <ListItem title={t("home.settings.audio.audio_language")}>
-          <PlatformDropdown
+          <DropdownMenu.Root>
-            groups={optionGroups}
+            <DropdownMenu.Trigger>
-            trigger={
+              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3 '>
              <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")}
@@ -93,10 +60,48 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
                  size={18}
                  color='#5A5960'
                />
-              </View>
+              </TouchableOpacity>
-            }
+            </DropdownMenu.Trigger>
-            title={t("home.settings.audio.language")}
+            <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>
        </ListItem>
      </ListGroup>
    </View>
--- a/components/settings/DownloadSettings.tsx
+++ b/components/settings/DownloadSettings.tsx
@@ -13,7 +13,7 @@ export default function DownloadSettings({ ...props }) {
  const allDisabled = useMemo(
    () =>
      pluginSettings?.remuxConcurrentLimit?.locked === true &&
-      pluginSettings?.autoDownload?.locked === true,
+      pluginSettings?.autoDownload.locked === true,
    [pluginSettings],
  );
--- a/components/settings/GestureControls.tsx
+++ b/components/settings/GestureControls.tsx
@@ -36,6 +36,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
            "home.settings.gesture_controls.horizontal_swipe_skip_description",
          )}
          disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
          style={{ minHeight: 72, paddingTop: 12, paddingBottom: 12 }}
        >
          <Switch
            value={settings.enableHorizontalSwipeSkip}
@@ -52,6 +53,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
            "home.settings.gesture_controls.left_side_brightness_description",
          )}
          disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
          style={{ minHeight: 72, paddingTop: 12, paddingBottom: 12 }}
        >
          <Switch
            value={settings.enableLeftSideBrightnessSwipe}
@@ -68,6 +70,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
            "home.settings.gesture_controls.right_side_volume_description",
          )}
          disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
          style={{ minHeight: 72, paddingTop: 12, paddingBottom: 12 }}
        >
          <Switch
            value={settings.enableRightSideVolumeSwipe}
--- a/components/settings/HomeIndex.tsx
+++ b/components/settings/HomeIndex.tsx
@@ -27,6 +27,7 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
@@ -37,7 +38,6 @@ 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 "../apple-tv-carousel/AppleTVCarousel";
 type ScrollingCollectionListSection = {
  type: "ScrollingCollectionList";
@@ -74,12 +74,7 @@ export const HomeIndex = () => {
  const { getDownloadedItems, cleanCacheDirectory } = useDownload();
  const prevIsConnected = useRef<boolean | null>(false);
-  const {
+  const { isConnected, loading: retryLoading, retryCheck } = useNetworkStatus();
    isConnected,
    serverConnected,
    loading: retryLoading,
    retryCheck,
  } = useNetworkStatus();
  const invalidateCache = useInvalidatePlaybackProgressCache();
  useEffect(() => {
    // Only invalidate cache when transitioning from offline to online
@@ -90,11 +85,6 @@ 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({
@@ -102,6 +92,7 @@ export const HomeIndex = () => {
      });
      return;
    }
    const hasDownloads = getDownloadedItems().length > 0;
    navigation.setOptions({
      headerLeft: () => (
        <TouchableOpacity
@@ -118,7 +109,7 @@ export const HomeIndex = () => {
        </TouchableOpacity>
      ),
    });
-  }, [navigation, router, hasDownloads]);
+  }, [navigation, router]);
  useEffect(() => {
    cleanCacheDirectory().catch((_e) =>
@@ -129,11 +120,8 @@ export const HomeIndex = () => {
  const segments = useSegments();
  useEffect(() => {
    const unsubscribe = eventBus.on("scrollToTop", () => {
-      if ((segments as string[])[2] === "(home)")
+      if (segments[2] === "(home)")
-        scrollViewRef.current?.scrollTo({
+        scrollViewRef.current?.scrollTo({ y: -152, animated: true });
          y: Platform.isTV ? -152 : -100,
          animated: true,
        });
    });
    return () => {
@@ -199,9 +187,9 @@ export const HomeIndex = () => {
            await getUserLibraryApi(api).getLatestMedia({
              userId: user?.Id,
              limit: 20,
-              fields: ["PrimaryImageAspectRatio", "Path", "Genres"],
+              fields: ["PrimaryImageAspectRatio", "Path"],
              imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
              includeItemTypes,
              parentId,
            })
@@ -243,9 +231,8 @@ export const HomeIndex = () => {
          (
            await getItemsApi(api).getResumeItems({
              userId: user.Id,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
              includeItemTypes: ["Movie", "Series", "Episode"],
              fields: ["Genres"],
            })
          ).data.Items || [],
        type: "ScrollingCollectionList",
@@ -258,9 +245,9 @@ export const HomeIndex = () => {
          (
            await getTvShowsApi(api).getNextUp({
              userId: user?.Id,
-              fields: ["MediaSourceCount", "Genres"],
+              fields: ["MediaSourceCount"],
              limit: 20,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
              enableResumable: false,
            })
          ).data.Items || [],
@@ -321,10 +308,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.title || `section-${index}`;
+      const id = section.items?.title || `section-${index}`;
      ss.push({
        title: t(`${id}`),
-        queryKey: ["home", "custom", String(index), section.title ?? null],
+        queryKey: ["home", id],
        queryFn: async () => {
          if (section.items) {
            const response = await getItemsApi(api).getItems({
@@ -342,9 +329,9 @@ export const HomeIndex = () => {
          if (section.nextUp) {
            const response = await getTvShowsApi(api).getNextUp({
              userId: user?.Id,
-              fields: ["MediaSourceCount", "Genres"],
+              fields: ["MediaSourceCount"],
              limit: section.nextUp?.limit || 25,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
              enableResumable: section.nextUp?.enableResumable,
              enableRewatching: section.nextUp?.enableRewatching,
            });
@@ -371,28 +358,13 @@ export const HomeIndex = () => {
  const sections = settings?.home?.sections ? customSections : defaultSections;
-  if (!isConnected || serverConnected !== true) {
+  if (isConnected === false) {
    let title = "";
    let subtitle = "";
    if (!isConnected) {
      // No network connection
      title = t("home.no_internet");
      subtitle = t("home.no_internet_message");
    } else if (serverConnected === null) {
      // Network is up, but server is being checked
      title = t("home.checking_server_connection");
      subtitle = t("home.checking_server_connection_message");
    } else if (!serverConnected) {
      // Network is up, but server is unreachable
      title = t("home.server_unreachable");
      subtitle = t("home.server_unreachable_message");
    }
    return (
      <View className='flex flex-col items-center justify-center h-full -mt-6 px-8'>
-        <Text className='text-3xl font-bold mb-2'>{title}</Text>
+        <Text className='text-3xl font-bold mb-2'>{t("home.no_internet")}</Text>
-        <Text className='text-center opacity-70'>{subtitle}</Text>
+        <Text className='text-center opacity-70'>
-
+          {t("home.no_internet_message")}
        </Text>
        <View className='mt-4'>
          {!Platform.isTV && (
            <Button
@@ -406,7 +378,6 @@ export const HomeIndex = () => {
              {t("home.go_to_downloads")}
            </Button>
          )}
          <Button
            color='black'
            onPress={retryCheck}
@@ -419,9 +390,9 @@ export const HomeIndex = () => {
            }
          >
            {retryLoading ? (
-              <ActivityIndicator size='small' color='white' />
+              <ActivityIndicator size={"small"} color={"white"} />
            ) : (
-              t("home.retry")
+              "Retry"
            )}
          </Button>
        </View>
@@ -451,55 +422,44 @@ export const HomeIndex = () => {
      scrollToOverflowEnabled={true}
      ref={scrollViewRef}
      nestedScrollEnabled
-      contentInsetAdjustmentBehavior='never'
+      contentInsetAdjustmentBehavior='automatic'
      refreshControl={
-        <RefreshControl
+        <RefreshControl refreshing={loading} onRefresh={refetch} />
          refreshing={loading}
          onRefresh={refetch}
          tintColor='white' // For iOS
          colors={["white"]} // For Android
          progressViewOffset={200} // This offsets the refresh indicator to appear over the carousel
        />
      }
-      style={{ marginTop: Platform.isTV ? 0 : -100 }}
+      contentContainerStyle={{
-      contentContainerStyle={{ paddingTop: Platform.isTV ? 0 : 100 }}
+        paddingLeft: insets.left,
        paddingRight: insets.right,
        paddingBottom: 16,
      }}
    >
-      <AppleTVCarousel initialIndex={0} />
+      <View className='flex flex-col space-y-4'>
-      <View
+        <LargeMovieCarousel />
-        style={{
+
-          paddingLeft: insets.left,
+        {sections.map((section, index) => {
-          paddingRight: insets.right,
+          if (section.type === "ScrollingCollectionList") {
-          paddingBottom: 16,
+            return (
-        }}
+              <ScrollingCollectionList
-      >
+                key={index}
-        <View className='flex flex-col space-y-4'>
+                title={section.title}
-          {sections.map((section, index) => {
+                queryKey={section.queryKey}
-            if (section.type === "ScrollingCollectionList") {
+                queryFn={section.queryFn}
-              return (
+                orientation={section.orientation}
-                <ScrollingCollectionList
+                hideIfEmpty
-                  key={index}
+              />
-                  title={section.title}
+            );
-                  queryKey={section.queryKey}
+          }
-                  queryFn={section.queryFn}
+          if (section.type === "MediaListSection") {
-                  orientation={section.orientation}
+            return (
-                  hideIfEmpty
+              <MediaListSection
-                />
+                key={index}
-              );
+                queryKey={section.queryKey}
-            }
+                queryFn={section.queryFn}
-            if (section.type === "MediaListSection") {
+              />
-              return (
+            );
-                <MediaListSection
+          }
-                  key={index}
+          return null;
-                  queryKey={section.queryKey}
+        })}
                  queryFn={section.queryFn}
                />
              );
            }
            return null;
          })}
        </View>
      </View>
      <View className='h-24' />
    </ScrollView>
  );
 };
--- a/components/settings/Jellyseerr.tsx
+++ b/components/settings/Jellyseerr.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { toast } from "sonner-native";
 import { PasswordInput } from "@/components/PasswordInput";
 import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
 import { userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -30,6 +31,9 @@ export const JellyseerrSettings = () => {
    string | undefined
  >(settings?.jellyseerrServerUrl || undefined);
  const [showJellyseerrPassword, setShowJellyseerrPassword] =
    useState<boolean>(false);
  const loginToJellyseerrMutation = useMutation({
    mutationFn: async () => {
      if (!jellyseerrServerUrl && !settings?.jellyseerrServerUrl)
@@ -127,7 +131,7 @@ export const JellyseerrSettings = () => {
              </Text>
            </View>
            <Input
-              className='border border-neutral-800 mb-2'
+              extraClassName='border border-neutral-800 mb-2'
              placeholder={t(
                "home.settings.plugins.jellyseerr.server_url_placeholder",
              )}
@@ -146,23 +150,20 @@ export const JellyseerrSettings = () => {
              <Text className='font-bold mb-2'>
                {t("home.settings.plugins.jellyseerr.password")}
              </Text>
-              <Input
+              <View className='relative'>
-                className='border border-neutral-800'
+                <PasswordInput
-                autoFocus={true}
+                  value={jellyseerrPassword}
-                focusable={true}
+                  onChangeText={setJellyseerrPassword}
-                placeholder={t(
+                  placeholder={t(
-                  "home.settings.plugins.jellyseerr.password_placeholder",
+                    "home.settings.plugins.jellyseerr.password_placeholder",
-                  { username: user?.Name },
+                    { username: user?.Name },
-                )}
+                  )}
-                value={jellyseerrPassword}
+                  showPassword={showJellyseerrPassword}
-                keyboardType='default'
+                  onShowPasswordChange={setShowJellyseerrPassword}
-                secureTextEntry={true}
+                  layout='mobile'
-                returnKeyType='done'
+                  topOffset={11}
-                autoCapitalize='none'
+                />
-                textContentType='password'
+              </View>
                onChangeText={setJellyseerrPassword}
                editable={!loginToJellyseerrMutation.isPending}
              />
              <Button
                loading={loginToJellyseerrMutation.isPending}
                disabled={loginToJellyseerrMutation.isPending}
--- a/components/settings/LibraryOptionsSheet.tsx
+++ b/components/settings/LibraryOptionsSheet.tsx
@@ -1,254 +0,0 @@
 import { Ionicons } from "@expo/vector-icons";
 import {
  BottomSheetBackdrop,
  type BottomSheetBackdropProps,
  BottomSheetModal,
  BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import type React from "react";
 import { useCallback, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import {
  StyleSheet,
  TouchableOpacity,
  View,
  type ViewProps,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 interface LibraryOptions {
  display: "row" | "list";
  imageStyle: "poster" | "cover";
  showTitles: boolean;
  showStats: boolean;
 }
 interface Props extends ViewProps {
  open: boolean;
  setOpen: (open: boolean) => void;
  settings: LibraryOptions;
  updateSettings: (options: Partial<LibraryOptions>) => void;
  disabled?: boolean;
 }
 const OptionGroup: React.FC<{ title: string; children: React.ReactNode }> = ({
  title,
  children,
 }) => (
  <View className='mb-6'>
    <Text className='text-lg font-semibold mb-3 text-neutral-300'>{title}</Text>
    <View
      style={{
        borderRadius: 12,
        overflow: "hidden",
      }}
      className='bg-neutral-800 rounded-xl overflow-hidden'
    >
      {children}
    </View>
  </View>
 );
 const OptionItem: React.FC<{
  label: string;
  selected: boolean;
  onPress: () => void;
  disabled?: boolean;
  isLast?: boolean;
 }> = ({ label, selected, onPress, disabled: itemDisabled, isLast }) => (
  <>
    <TouchableOpacity
      onPress={onPress}
      disabled={itemDisabled}
      className={`px-4 py-3 flex flex-row items-center justify-between ${
        itemDisabled ? "opacity-50" : ""
      }`}
    >
      <Text className='flex-1 text-white'>{label}</Text>
      {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 ToggleItem: React.FC<{
  label: string;
  value: boolean;
  onToggle: () => void;
  disabled?: boolean;
  isLast?: boolean;
 }> = ({ label, value, onToggle, disabled: itemDisabled, isLast }) => (
  <>
    <TouchableOpacity
      onPress={onToggle}
      disabled={itemDisabled}
      className={`px-4 py-3 flex flex-row items-center justify-between ${
        itemDisabled ? "opacity-50" : ""
      }`}
    >
      <Text className='flex-1 text-white'>{label}</Text>
      <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>
    </TouchableOpacity>
    {!isLast && (
      <View
        style={{
          height: StyleSheet.hairlineWidth,
        }}
        className='bg-neutral-700 mx-4'
      />
    )}
  </>
 );
 /**
 * LibraryOptionsSheet Component
 *
 * This component creates a bottom sheet modal for managing library display options.
 */
 export const LibraryOptionsSheet: React.FC<Props> = ({
  open,
  setOpen,
  settings,
  updateSettings,
  disabled = false,
 }) => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
  const handlePresentModal = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);
  const handleDismissModal = useCallback(() => {
    bottomSheetModalRef.current?.dismiss();
  }, []);
  useEffect(() => {
    if (open) {
      handlePresentModal();
    } else {
      handleDismissModal();
    }
  }, [open, handlePresentModal, handleDismissModal]);
  const handleSheetChanges = useCallback(
    (index: number) => {
      if (index === -1) {
        setOpen(false);
      }
    },
    [setOpen],
  );
  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
      />
    ),
    [],
  );
  if (disabled) return null;
  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
      enableDynamicSizing
      onChange={handleSheetChanges}
      backdropComponent={renderBackdrop}
      handleIndicatorStyle={{
        backgroundColor: "white",
      }}
      backgroundStyle={{
        backgroundColor: "#171717",
      }}
      enablePanDownToClose
      enableDismissOnClose
    >
      <BottomSheetView>
        <View
          className='px-4 pb-8 pt-2'
          style={{
            paddingLeft: Math.max(16, insets.left),
            paddingRight: Math.max(16, insets.right),
          }}
        >
          <Text className='font-bold text-2xl mb-6'>
            {t("library.options.display")}
          </Text>
          <OptionGroup title={t("library.options.display")}>
            <OptionItem
              label={t("library.options.row")}
              selected={settings.display === "row"}
              onPress={() => updateSettings({ display: "row" })}
            />
            <OptionItem
              label={t("library.options.list")}
              selected={settings.display === "list"}
              onPress={() => updateSettings({ display: "list" })}
              isLast
            />
          </OptionGroup>
          <OptionGroup title={t("library.options.image_style")}>
            <OptionItem
              label={t("library.options.poster")}
              selected={settings.imageStyle === "poster"}
              onPress={() => updateSettings({ imageStyle: "poster" })}
            />
            <OptionItem
              label={t("library.options.cover")}
              selected={settings.imageStyle === "cover"}
              onPress={() => updateSettings({ imageStyle: "cover" })}
              isLast
            />
          </OptionGroup>
          <OptionGroup title='Options'>
            <ToggleItem
              label={t("library.options.show_titles")}
              value={settings.showTitles}
              onToggle={() =>
                updateSettings({ showTitles: !settings.showTitles })
              }
              disabled={settings.imageStyle === "poster"}
            />
            <ToggleItem
              label={t("library.options.show_stats")}
              value={settings.showStats}
              onToggle={() =>
                updateSettings({ showStats: !settings.showStats })
              }
              isLast
            />
          </OptionGroup>
        </View>
      </BottomSheetView>
    </BottomSheetModal>
  );
 };
--- a/components/settings/OtherSettings.tsx
+++ b/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, View } from "react-native";
+import { Linking, Platform, Switch, TouchableOpacity } from "react-native";
 import { toast } from "sonner-native";
 import { BITRATES } from "@/components/BitrateSelector";
-import { PlatformDropdown } from "@/components/PlatformDropdown";
+import Dropdown from "@/components/common/Dropdown";
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
@@ -41,10 +41,10 @@ export const OtherSettings: React.FC = () => {
      if (settings?.autoDownload === true && !registered) {
        registerBackgroundFetchAsync();
-        toast.success(t("home.settings.toasts.background_downloads_enabled"));
+        toast.success("Background downloads enabled");
      } else if (settings?.autoDownload === false && registered) {
        unregisterBackgroundFetchAsync();
-        toast.info(t("home.settings.toasts.background_downloads_disabled"));
+        toast.info("Background downloads disabled");
      } else if (settings?.autoDownload === true && registered) {
        // Don't to anything
      } else if (settings?.autoDownload === false && !registered) {
@@ -89,52 +89,6 @@ 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 (
@@ -160,10 +114,16 @@ export const OtherSettings: React.FC = () => {
            settings.followDeviceOrientation
          }
        >
-          <PlatformDropdown
+          <Dropdown
-            groups={orientationOptions}
+            data={orientations}
-            trigger={
+            disabled={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              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'>
                <Text className='mr-1 text-[#8E8D91]'>
                  {t(
                    orientationTranslations[
@@ -176,9 +136,12 @@ export const OtherSettings: React.FC = () => {
                  size={18}
                  color='#5A5960'
                />
-              </View>
+              </TouchableOpacity>
            }
            label={t("home.settings.other.orientation")}
            onSelected={(defaultVideoOrientation) =>
              updateSettings({ defaultVideoOrientation })
            }
            title={t("home.settings.other.orientation")}
          />
        </ListItem>
@@ -251,10 +214,13 @@ export const OtherSettings: React.FC = () => {
          title={t("home.settings.other.default_quality")}
          disabled={pluginSettings?.defaultBitrate?.locked}
        >
-          <PlatformDropdown
+          <Dropdown
-            groups={bitrateOptions}
+            data={BITRATES}
-            trigger={
+            disabled={pluginSettings?.defaultBitrate?.locked}
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+            keyExtractor={(item) => item.key}
            titleExtractor={(item) => item.key}
            title={
              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
                <Text className='mr-1 text-[#8E8D91]'>
                  {settings.defaultBitrate?.key}
                </Text>
@@ -263,9 +229,10 @@ export const OtherSettings: React.FC = () => {
                  size={18}
                  color='#5A5960'
                />
-              </View>
+              </TouchableOpacity>
            }
-            title={t("home.settings.other.default_quality")}
+            label={t("home.settings.other.default_quality")}
            onSelected={(defaultBitrate) => updateSettings({ defaultBitrate })}
          />
        </ListItem>
        <ListItem
@@ -281,10 +248,12 @@ export const OtherSettings: React.FC = () => {
          />
        </ListItem>
        <ListItem title={t("home.settings.other.max_auto_play_episode_count")}>
-          <PlatformDropdown
+          <Dropdown
-            groups={autoPlayEpisodeOptions}
+            data={AUTOPLAY_EPISODES_COUNT(t)}
-            trigger={
+            keyExtractor={(item) => item.key}
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+            titleExtractor={(item) => item.key}
            title={
              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
                <Text className='mr-1 text-[#8E8D91]'>
                  {t(settings?.maxAutoPlayEpisodeCount.key)}
                </Text>
@@ -293,9 +262,12 @@ export const OtherSettings: React.FC = () => {
                  size={18}
                  color='#5A5960'
                />
-              </View>
+              </TouchableOpacity>
            }
            label={t("home.settings.other.max_auto_play_episode_count")}
            onSelected={(maxAutoPlayEpisodeCount) =>
              updateSettings({ maxAutoPlayEpisodeCount })
            }
            title={t("home.settings.other.max_auto_play_episode_count")}
          />
        </ListItem>
      </ListGroup>
--- a/components/settings/QuickConnect.tsx
+++ b/components/settings/QuickConnect.tsx
@@ -2,6 +2,7 @@ import {
  BottomSheetBackdrop,
  type BottomSheetBackdropProps,
  BottomSheetModal,
  BottomSheetTextInput,
  BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
@@ -9,19 +10,17 @@ import { useAtom } from "jotai";
 import type React from "react";
 import { useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, Platform, View, type ViewProps } from "react-native";
+import { Alert, View, type ViewProps } from "react-native";
 import { useHaptic } from "@/hooks/useHaptic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { Button } from "../Button";
 import { Text } from "../common/Text";
 import { PinInput } from "../inputs/PinInput";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 interface Props extends ViewProps {}
 export const QuickConnect: React.FC<Props> = ({ ...props }) => {
  const isTv = Platform.isTV;
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const [quickConnectCode, setQuickConnectCode] = useState<string>();
@@ -74,17 +73,11 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
    }
  }, [api, user, quickConnectCode]);
  if (isTv) return null;
  return (
    <View {...props}>
      <ListGroup title={t("home.settings.quick_connect.quick_connect_title")}>
        <ListItem
-          onPress={() => {
+          onPress={() => bottomSheetModalRef?.current?.present()}
            // Reset the code when opening the sheet
            setQuickConnectCode("");
            bottomSheetModalRef?.current?.present();
          }}
          title={t("home.settings.quick_connect.authorize_button")}
          textColor='blue'
        />
@@ -100,9 +93,6 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
          backgroundColor: "#171717",
        }}
        backdropComponent={renderBackdrop}
        keyboardBehavior='interactive'
        keyboardBlurBehavior='restore'
        android_keyboardInputMode='adjustResize'
      >
        <BottomSheetView>
          <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
@@ -112,17 +102,16 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
              </Text>
            </View>
            <View className='flex flex-col space-y-2'>
-              <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full space-y-4'>
+              <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full'>
-                <Text className='text-neutral-400 text-center'>
+                <BottomSheetTextInput
-                  {t(
+                  style={{ color: "white" }}
                  clearButtonMode='always'
                  placeholder={t(
                    "home.settings.quick_connect.enter_the_quick_connect_code",
                  )}
-                </Text>
+                  placeholderTextColor='#9CA3AF'
-                <PinInput
+                  value={quickConnectCode}
                  value={quickConnectCode || ""}
                  onChangeText={setQuickConnectCode}
                  style={{ paddingHorizontal: 16 }}
                  autoFocus
                />
              </View>
            </View>
--- a/components/settings/StorageSettings.tsx
+++ b/components/settings/StorageSettings.tsx
@@ -40,6 +40,7 @@ export const StorageSettings = () => {
  };
  const calculatePercentage = (value: number, total: number) => {
    console.log("usage", value, total);
    return ((value / total) * 100).toFixed(2);
  };
--- a/components/settings/SubtitleToggles.tsx
+++ b/components/settings/SubtitleToggles.tsx
@@ -1,21 +1,17 @@
 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 {}
@@ -29,6 +25,9 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
  const cultures = media.cultures;
  const { t } = useTranslation();
  if (isTv) return null;
  if (!settings) return null;
  const subtitleModes = [
    SubtitlePlaybackMode.Default,
    SubtitlePlaybackMode.Smart,
@@ -46,133 +45,6 @@ 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
@@ -184,10 +56,20 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
        }
      >
        <ListItem title={t("home.settings.subtitles.subtitle_language")}>
-          <PlatformDropdown
+          <Dropdown
-            groups={subtitleLanguageOptionGroups}
+            data={[
-            trigger={
+              {
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+                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'>
                <Text className='mr-1 text-[#8E8D91]'>
                  {settings?.defaultSubtitleLanguage?.DisplayName ||
                    t("home.settings.subtitles.none")}
@@ -197,9 +79,18 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
                  size={18}
                  color='#5A5960'
                />
-              </View>
+              </TouchableOpacity>
            }
            label={t("home.settings.subtitles.language")}
            onSelected={(defaultSubtitleLanguage) =>
              updateSettings({
                defaultSubtitleLanguage:
                  defaultSubtitleLanguage.DisplayName ===
                  t("home.settings.subtitles.none")
                    ? null
                    : defaultSubtitleLanguage,
              })
            }
            title={t("home.settings.subtitles.language")}
          />
        </ListItem>
@@ -207,10 +98,13 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
          title={t("home.settings.subtitles.subtitle_mode")}
          disabled={pluginSettings?.subtitleMode?.locked}
        >
-          <PlatformDropdown
+          <Dropdown
-            groups={subtitleModeOptionGroups}
+            data={subtitleModes}
-            trigger={
+            disabled={pluginSettings?.subtitleMode?.locked}
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+            keyExtractor={String}
            titleExtractor={(item) => t(subtitleModeKeys[item]) || String(item)}
            title={
              <TouchableOpacity 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")}
@@ -220,9 +114,10 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
                  size={18}
                  color='#5A5960'
                />
-              </View>
+              </TouchableOpacity>
            }
-            title={t("home.settings.subtitles.subtitle_mode")}
+            label={t("home.settings.subtitles.subtitle_mode")}
            onSelected={(subtitleMode) => updateSettings({ subtitleMode })}
          />
        </ListItem>
@@ -252,124 +147,6 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
            onUpdate={(subtitleSize) => updateSettings({ subtitleSize })}
          />
        </ListItem>
        <ListItem title={t("home.settings.subtitles.text_color")}>
          <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.${settings?.vlcTextColor || "White"}`,
                  )}
                </Text>
                <Ionicons
                  name='chevron-expand-sharp'
                  size={18}
                  color='#5A5960'
                />
              </View>
            }
            title={t("home.settings.subtitles.text_color")}
          />
        </ListItem>
        <ListItem title={t("home.settings.subtitles.background_color")}>
          <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.${settings?.vlcBackgroundColor || "Black"}`,
                  )}
                </Text>
                <Ionicons
                  name='chevron-expand-sharp'
                  size={18}
                  color='#5A5960'
                />
              </View>
            }
            title={t("home.settings.subtitles.background_color")}
          />
        </ListItem>
        <ListItem title={t("home.settings.subtitles.outline_color")}>
          <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.${settings?.vlcOutlineColor || "Black"}`,
                  )}
                </Text>
                <Ionicons
                  name='chevron-expand-sharp'
                  size={18}
                  color='#5A5960'
                />
              </View>
            }
            title={t("home.settings.subtitles.outline_color")}
          />
        </ListItem>
        <ListItem title={t("home.settings.subtitles.outline_thickness")}>
          <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.${settings?.vlcOutlineThickness || "Normal"}`,
                  )}
                </Text>
                <Ionicons
                  name='chevron-expand-sharp'
                  size={18}
                  color='#5A5960'
                />
              </View>
            }
            title={t("home.settings.subtitles.outline_thickness")}
          />
        </ListItem>
        <ListItem title={t("home.settings.subtitles.background_opacity")}>
          <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'
                />
              </View>
            }
            title={t("home.settings.subtitles.background_opacity")}
          />
        </ListItem>
        <ListItem title={t("home.settings.subtitles.outline_opacity")}>
          <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'
                />
              </View>
            }
            title={t("home.settings.subtitles.outline_opacity")}
          />
        </ListItem>
        <ListItem title={t("home.settings.subtitles.bold_text")}>
          <Switch
            value={settings?.vlcIsBold ?? false}
            onValueChange={(value) => updateSettings({ vlcIsBold: value })}
          />
        </ListItem>
      </ListGroup>
    </View>
  );
--- a/components/stacks/NestedTabPageStack.tsx
+++ b/components/stacks/NestedTabPageStack.tsx
@@ -1,6 +1,5 @@
 import type { ParamListBase, RouteProp } from "@react-navigation/native";
 import type { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 import { Platform } from "react-native";
 import { HeaderBackButton } from "../common/HeaderBackButton";
 type ICommonScreenOptions =
@@ -13,9 +12,8 @@ type ICommonScreenOptions =
 export const commonScreenOptions: ICommonScreenOptions = {
  title: "",
  headerShown: true,
-  headerTransparent: Platform.OS === "ios",
+  headerTransparent: true,
  headerShadowVisible: false,
  headerBlurEffect: Platform.OS === "ios" ? "none" : undefined,
  headerLeft: () => <HeaderBackButton />,
 };
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -379,7 +379,8 @@ export const Controls: FC<Props> = ({
      console.log("queryParams", queryParams);
-      router.replace(`player/direct-player?${queryParams}` as any);
+      // @ts-expect-error
      router.replace(`player/direct-player?${queryParams}`);
    },
    [settings, subtitleIndex, audioIndex, mediaSource, bitrateValue, router],
  );
--- a/components/video-player/controls/EpisodeList.tsx
+++ b/components/video-player/controls/EpisodeList.tsx
@@ -56,10 +56,7 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
  }, []);
  const { getDownloadedItems } = useDownload();
-  const downloadedFiles = useMemo(
+  const downloadedFiles = getDownloadedItems();
    () => getDownloadedItems(),
    [getDownloadedItems],
  );
  const seasonIndex = seasonIndexState[item.ParentId ?? ""];
--- a/components/video-player/controls/HeaderControls.tsx
+++ b/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' pointerEvents='box-none'>
+      <View className='mr-auto'>
        {!Platform.isTV && (!offline || !mediaSource?.TranscodingUrl) && (
          <VideoProvider
            getAudioTracks={getAudioTracks}
@@ -120,9 +120,7 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
            setSubtitleTrack={setSubtitleTrack}
            setSubtitleURL={setSubtitleURL}
          >
-            <View pointerEvents='auto'>
+            <DropdownView />
              <DropdownView />
            </View>
          </VideoProvider>
        )}
      </View>
--- a/components/video-player/controls/ScaleFactorSelector.tsx
+++ b/components/video-player/controls/ScaleFactorSelector.tsx
@@ -1,10 +1,8 @@
 import { Ionicons } from "@expo/vector-icons";
-import React, { useMemo } from "react";
+import React, { useState } from "react";
-import { Platform, View } from "react-native";
+import { Platform, TouchableOpacity } from "react-native";
-import {
+import { Text } from "@/components/common/Text";
-  type OptionGroup,
+import { FilterSheet } from "@/components/filters/FilterSheet";
  PlatformDropdown,
 } from "@/components/PlatformDropdown";
 import { useHaptic } from "@/hooks/useHaptic";
 export type ScaleFactor =
@@ -96,51 +94,56 @@ 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 optionGroups = useMemo<OptionGroup[]>(() => {
+  const currentOption = SCALE_FACTOR_OPTIONS.find(
-    return [
+    (option) => option.id === currentScale,
      {
        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]);
  const trigger = useMemo(
    () => (
      <View
        className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
        style={{ opacity: disabled ? 0.5 : 1 }}
      >
        <Ionicons name='search-outline' size={24} color='white' />
      </View>
    ),
    [disabled],
  );
  // Hide on TV platforms
  if (Platform.isTV) return null;
  return (
-    <PlatformDropdown
+    <>
-      title='Scale Factor'
+      <TouchableOpacity
-      groups={optionGroups}
+        disabled={disabled}
-      trigger={trigger}
+        className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-      bottomSheetConfig={{
+        style={{ opacity: disabled ? 0.5 : 1 }}
-        enablePanDownToClose: true,
+        onPress={() => setOpen(true)}
-      }}
+      >
-    />
+        <Ionicons name='search-outline' size={24} color='white' />
      </TouchableOpacity>
      <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);
          }
        }}
      />
    </>
  );
 };
--- a/components/video-player/controls/VideoScalingModeSelector.tsx
+++ b/components/video-player/controls/VideoScalingModeSelector.tsx
@@ -1,10 +1,8 @@
 import { Ionicons } from "@expo/vector-icons";
-import React, { useMemo } from "react";
+import React, { useState } from "react";
-import { Platform, View } from "react-native";
+import { Platform, TouchableOpacity } from "react-native";
-import {
+import { Text } from "@/components/common/Text";
-  type OptionGroup,
+import { FilterSheet } from "@/components/filters/FilterSheet";
  PlatformDropdown,
 } from "@/components/PlatformDropdown";
 import { useHaptic } from "@/hooks/useHaptic";
 export type AspectRatio = "default" | "16:9" | "4:3" | "1:1" | "21:9";
@@ -55,51 +53,56 @@ 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 optionGroups = useMemo<OptionGroup[]>(() => {
+  const currentOption = ASPECT_RATIO_OPTIONS.find(
-    return [
+    (option) => option.id === currentRatio,
      {
        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]);
  const trigger = useMemo(
    () => (
      <View
        className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
        style={{ opacity: disabled ? 0.5 : 1 }}
      >
        <Ionicons name='crop-outline' size={24} color='white' />
      </View>
    ),
    [disabled],
  );
  // Hide on TV platforms
  if (Platform.isTV) return null;
  return (
-    <PlatformDropdown
+    <>
-      title='Aspect Ratio'
+      <TouchableOpacity
-      groups={optionGroups}
+        disabled={disabled}
-      trigger={trigger}
+        className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-      bottomSheetConfig={{
+        style={{ opacity: disabled ? 0.5 : 1 }}
-        enablePanDownToClose: true,
+        onPress={() => setOpen(true)}
-      }}
+      >
-    />
+        <Ionicons name='crop-outline' size={24} color='white' />
      </TouchableOpacity>
      <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);
          }
        }}
      />
    </>
  );
 };
--- a/components/video-player/controls/contexts/VideoContext.tsx
+++ b/components/video-player/controls/contexts/VideoContext.tsx
@@ -95,7 +95,8 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
      playbackPosition: playbackPosition,
    }).toString();
-    router.replace(`player/direct-player?${queryParams}` as any);
+    //@ts-expect-error
    router.replace(`player/direct-player?${queryParams}`);
  };
  const setTrackParams = (
--- a/components/video-player/controls/dropdown/DropdownView.tsx
+++ b/components/video-player/controls/dropdown/DropdownView.tsx
@@ -1,12 +1,16 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { useCallback, useMemo, useRef } from "react";
 import { Platform, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
 import {
-  type OptionGroup,
+  BottomSheetBackdrop,
-  PlatformDropdown,
+  type BottomSheetBackdropProps,
-} from "@/components/PlatformDropdown";
+  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 { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
@@ -19,6 +23,10 @@ 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<{
@@ -31,127 +39,249 @@ 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: itemIdRef.current ?? "",
+        itemId: item.Id ?? "",
        audioIndex: audioIndex?.toString() ?? "",
-        subtitleIndex: subtitleIndex?.toString() ?? "",
+        subtitleIndex: subtitleIndex.toString() ?? "",
-        mediaSourceId: mediaSourceIdRef.current ?? "",
+        mediaSourceId: mediaSource?.Id ?? "",
        bitrateValue: bitrate.toString(),
-        playbackPosition: playbackPositionRef.current,
+        playbackPosition: playbackPosition,
      }).toString();
-      router.replace(`player/direct-player?${queryParams}` as any);
+      // @ts-expect-error
      router.replace(`player/direct-player?${queryParams}`);
    },
-    [audioIndex, subtitleIndex, router],
+    [item, mediaSource, subtitleIndex, audioIndex, playbackPosition],
  );
-  // Create stable identifiers for tracks
+  const handleSheetChanges = useCallback((index: number) => {
-  const subtitleTracksKey = useMemo(
+    if (index === -1) {
-    () => subtitleTracks?.map((t) => `${t.index}-${t.name}`).join(",") ?? "",
+      setOpen(false);
    [subtitleTracks],
  );
  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
+  const renderBackdrop = useCallback(
-    if (subtitleTracks && subtitleTracks.length > 0) {
+    (props: BottomSheetBackdropProps) => (
-      groups.push({
+      <BottomSheetBackdrop
-        title: "Subtitles",
+        {...props}
-        options: subtitleTracks.map((sub) => ({
+        disappearsOnIndex={-1}
-          type: "radio" as const,
+        appearsOnIndex={0}
-          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 (
-    <PlatformDropdown
+    <>
-      title='Playback Options'
+      <TouchableOpacity
-      groups={optionGroups}
+        className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-      trigger={trigger}
+        onPress={handleOpen}
-      bottomSheetConfig={{
+      >
-        enablePanDownToClose: true,
+        <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, idx: number) => (
                    <View key={`quality-item-${idx}`}>
                      <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>
                      {idx < 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((sub, idx: number) => (
                  <View key={`subtitle-item-${idx}`}>
                    <TouchableOpacity
                      onPress={() => {
                        sub.setTrack();
                        setTimeout(() => handleClose(), 250);
                      }}
                      className='bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
                    >
                      <Text className='flex shrink'>{sub.name}</Text>
                      {subtitleIndex === sub.index.toString() ? (
                        <Ionicons
                          name='radio-button-on'
                          size={24}
                          color='white'
                        />
                      ) : (
                        <Ionicons
                          name='radio-button-off'
                          size={24}
                          color='white'
                        />
                      )}
                    </TouchableOpacity>
                    {idx < (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((track, idx: number) => (
                    <View key={`audio-item-${idx}`}>
                      <TouchableOpacity
                        onPress={() => {
                          track.setTrack();
                          setTimeout(() => handleClose(), 250);
                        }}
                        className='bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between'
                      >
                        <Text className='flex shrink'>{track.name}</Text>
                        {audioIndex === track.index.toString() ? (
                          <Ionicons
                            name='radio-button-on'
                            size={24}
                            color='white'
                          />
                        ) : (
                          <Ionicons
                            name='radio-button-off'
                            size={24}
                            color='white'
                          />
                        )}
                      </TouchableOpacity>
                      {idx < (audioTracks?.length ?? 0) - 1 && (
                        <View
                          style={{
                            height: StyleSheet.hairlineWidth,
                          }}
                          className='bg-neutral-700'
                        />
                      )}
                    </View>
                  ))}
                </View>
              </View>
            )}
          </View>
        </BottomSheetScrollView>
      </BottomSheetModal>
    </>
  );
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Gauvain	8e91eba5c4	Merge branch 'develop' into view-password	2025-09-04 00:19:17 +02:00
Gauvain	d563577c8f	Merge branch 'develop' into view-password	2025-09-03 15:47:18 +02:00
Gauvain	5676359138	Merge branch 'develop' into view-password	2025-09-02 15:34:47 +02:00
Uruk	6ea93ef8f0	fix: correct wording for password visibility toggle in translations	2025-09-01 23:40:46 +02:00
Uruk	d5aa812e04	chore: replace postinstall-postinstall with postinstall package Updates dependency from postinstall-postinstall v2.1.0 to postinstall v0.11.2 Also includes dependency version updates for glob, minimatch, jackspeak, and path-scurry packages with their associated nested dependencies Adds @expo/vector-icons to trusted dependencies list for improved build reliability	2025-09-01 23:40:01 +02:00
Uruk	79a785a615	chore: update sonner-native to v0.21.1 Incorporates latest bug fixes and improvements from the sonner-native library to enhance toast notification functionality and stability.	2025-09-01 23:34:11 +02:00
Uruk	4b2fcee460	feat: add accessibility support for password toggle Enhances password input component with proper accessibility attributes including role, label, hint, and state to improve screen reader experience. Adjusts minimum height handling for Android platform compatibility in list items and replaces Tailwind classes with inline styles for gesture control settings to ensure consistent styling across platforms. Adds translation keys for password visibility toggle functionality.	2025-09-01 23:19:12 +02:00
Uruk	a93b935df3	style: improve login form spacing and alignment Adjusts margin classes and offsets to create better visual hierarchy and spacing between form elements. Adds bottom margins to input fields and containers, increases top offset for password input, and adds top margins to button containers for improved layout consistency.	2025-09-01 22:57:17 +02:00
Uruk	29d3360a10	refactor: standardize Input component prop naming Replaces `className` prop with `extraClassName` across Input and PasswordInput components for consistency. Updates PasswordInput to use numeric `topOffset` instead of string `topPosition` for better type safety and clearer intent. Adds uncontrolled mode support to PasswordInput with internal state management and optional `defaultShowPassword` prop. Removes unnecessary margin classes from various View components to clean up spacing.	2025-09-01 22:54:11 +02:00
Uruk	be884ce6e6	fix: improve list item height consistency and accessibility Replaces fixed height with minimum height to ensure proper content display and accessibility compliance. Changes list items from fixed 44px height to minimum height, allowing content to expand naturally while maintaining the minimum touch target size. Adds specific styling to gesture control settings items to accommodate longer descriptions and improve readability.	2025-09-01 22:49:30 +02:00
Uruk	a88e13b14f	refactor: streamline pull request template by removing unnecessary sections	2025-09-01 21:27:14 +02:00
Uruk	ff6b1112b6	feat: add consistent focus state styling to input component Improves visual feedback by adding focus state borders to all input variants. Changes the unfocused border from transparent to neutral-800 for better visual consistency and adds focus/blur handlers to ensure proper state management across different input types.	2025-09-01 21:20:40 +02:00
Uruk	1156942e33	fix: adjust password field top position for better layout Updates the top position value from 4 to 15 to improve the visual spacing and alignment of the password input field in the TV layout mode.	2025-09-01 21:05:26 +02:00
Uruk	e9effb46f6	chore: pin devDependency versions to exact releases Removes caret ranges from development dependencies to ensure consistent builds across environments and prevent unexpected version drift during installation. Updates multiple packages including Babel, Biome, React Native CLI, TypeScript tooling, and testing utilities to their exact versions.	2025-09-01 20:57:49 +02:00
Uruk	4dce87dfd3	refactor: simplify PasswordInput component and standardize usage Removes unnecessary props and internal state management from PasswordInput component to make it more focused and reusable. Wraps all PasswordInput instances in relative positioned Views for consistent layout behavior. Updates package.json to use caret version for @expo/vector-icons dependency for better version flexibility.	2025-09-01 19:18:54 +02:00
Uruk	2f2e5a2730	feat: add customizable icon color to PasswordInput Adds iconColor prop with white default to allow customization of the eye/eye-off toggle icon color. Also simplifies top position class construction by using template literal instead of conditional logic.	2025-09-01 16:00:04 +02:00
Uruk	614736ad4a	feat: upgrade @expo/vector-icons to v15.0.2 Updates the vector icons package to the latest major version, which includes improved peer dependency constraints for expo-font (>=14.0.4) and enhanced icon support for the application.	2025-09-01 15:59:12 +02:00
Uruk	3919bb346f	refactor: replace inline password inputs with reusable PasswordInput component Consolidates duplicate password input implementations across login and settings screens into a single reusable component. Improves code maintainability by eliminating redundant password visibility toggle logic and standardizing password input behavior throughout the application. Adds consistent accessibility support and test identifiers across all password input instances.	2025-09-01 15:48:55 +02:00
Uruk	87eff6f80c	fix: adjust password toggle button vertical alignment for TV Improves visual positioning of the show/hide password toggle button by slightly adjusting the top margin from 3.5 to 4, ensuring better alignment with the password input field.	2025-09-01 15:30:21 +02:00
Uruk	15d0de806b	feat: add password visibility toggle to login forms Improves user experience by allowing users to show/hide password text in both main login form and Jellyseerr settings. Adds eye icon button that toggles between masked and visible password input, making it easier for users to verify their password entries.	2025-09-01 15:05:40 +02:00