Fix subtitle dropdown UI defacement by improving text handling

Co-authored-by: lostb1t <168401+lostb1t@users.noreply.github.com>

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

.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;
-              }
-            }

.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

.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

.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

.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

.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@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
         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@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/analyze@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11

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

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

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

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

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

app.json

@@ -2,13 +2,12 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.39.0",
+    "version": "0.35.0",
     "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": 66,
       "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
   }
 }

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,
         }}

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,
         }}

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: () => (
-            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
-              <Feather name='chevron-left' size={28} color='white' />
-            </TouchableOpacity>
-          ),
-          headerBlurEffect: "none",
+          headerBlurEffect: "prominent",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           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
-        name='play-circle'
-        color={sessions.length === 0 ? "white" : "#9333ea"}
-        size={28}
-      />
+      <View className='mr-4'>
+        <Ionicons
+          name='play-circle'
+          color={sessions.length === 0 ? "white" : "#9333ea"}
+          size={25}
+        />
+      </View>
     </TouchableOpacity>
   );
 };

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

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

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

@@ -62,10 +62,7 @@ export default function page() {
     );
   };
 
-  const downloadedFiles = useMemo(
-    () => getDownloadedItems(),
-    [getDownloadedItems],
-  );
+  const downloadedFiles = 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>

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

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,

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>

app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx

@@ -12,7 +12,7 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 
 export default function page() {
-  const { settings, updateSettings, pluginSettings } = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings(null);
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);
 

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

@@ -3,7 +3,7 @@ import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
 import { useSettings } from "@/utils/atoms/settings";
 
 export default function page() {
-  const { pluginSettings } = useSettings();
+  const [_settings, _updateSettings, pluginSettings] = useSettings(null);
 
   return (
     <DisabledSetting

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";

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

@@ -21,7 +21,7 @@ export default function page() {
 
   const { t } = useTranslation();
 
-  const { settings, updateSettings, pluginSettings } = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings(null);
   const queryClient = useQueryClient();
 
   const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");

app/(auth)/(tabs)/(home,libraries,search,favorites)/actors/[actorId].tsx

@@ -7,7 +7,7 @@ import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
-import { InfiniteHorizontalScroll } from "@/components/common/InfiniteHorizontalScroll";
+import { InfiniteHorizontalScroll } from "@/components/common/InfiniteHorrizontalScroll";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
@@ -22,21 +22,21 @@ import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 
 const page: React.FC = () => {
   const local = useLocalSearchParams();
-  const { personId } = local as { personId: string };
+  const { actorId } = local as { actorId: string };
   const { t } = useTranslation();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
   const { data: item, isLoading: l1 } = useQuery({
-    queryKey: ["item", personId],
+    queryKey: ["item", actorId],
     queryFn: async () =>
       await getUserItemData({
         api,
         userId: user?.Id,
-        itemId: personId,
+        itemId: actorId,
       }),
-    enabled: !!personId && !!api,
+    enabled: !!actorId && !!api,
     staleTime: 60,
   });
 
@@ -50,7 +50,7 @@ const page: React.FC = () => {
 
       const response = await getItemsApi(api).getItems({
         userId: user.Id,
-        personIds: [personId],
+        personIds: [actorId],
         startIndex: pageParam,
         limit: 16,
         sortOrder: ["Descending", "Descending", "Ascending"],
@@ -68,7 +68,7 @@ const page: React.FC = () => {
 
       return response.data;
     },
-    [api, user?.Id, personId],
+    [api, user?.Id, actorId],
   );
 
   const backdropUrl = useMemo(
@@ -131,7 +131,7 @@ const page: React.FC = () => {
             </TouchableItemRouter>
           )}
           queryFn={fetchItems}
-          queryKey={["actor", "movies", personId]}
+          queryKey={["actor", "movies", actorId]}
         />
         <View className='h-12' />
       </View>

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
       }

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

@@ -15,7 +15,7 @@ import { COMPANY_LOGO_IMAGE_FILTER } from "@/utils/jellyseerr/src/components/Dis
 
 export default function page() {
   const local = useLocalSearchParams();
-  const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
+  const { jellyseerrApi } = useJellyseerr();
 
   const { companyId, image, type } = local as unknown as {
     companyId: string;
@@ -53,10 +53,7 @@ export default function page() {
       uniqBy(
         data?.pages
           ?.filter((p) => p?.results.length)
-          .flatMap(
-            (p) =>
-              p?.results.filter((r) => isJellyseerrMovieOrTvResult(r)) ?? [],
-          ),
+          .flatMap((p) => p?.results ?? []),
         "id",
       ) ?? [],
     [data],
@@ -101,7 +98,9 @@ export default function page() {
           }}
         />
       }
-      renderItem={(item, _index) => <JellyseerrPoster item={item} />}
+      renderItem={(item, _index) => (
+        <JellyseerrPoster item={item as MovieResult | TvResult} />
+      )}
     />
   );
 }

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

@@ -8,10 +8,14 @@ import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
 import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
+import {
+  type MovieResult,
+  type TvResult,
+} from "@/utils/jellyseerr/server/models/Search";
 
 export default function page() {
   const local = useLocalSearchParams();
-  const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
+  const { jellyseerrApi } = useJellyseerr();
 
   const { genreId, name, type } = local as unknown as {
     genreId: string;
@@ -47,10 +51,7 @@ export default function page() {
       uniqBy(
         data?.pages
           ?.filter((p) => p?.results.length)
-          .flatMap(
-            (p) =>
-              p?.results.filter((r) => isJellyseerrMovieOrTvResult(r)) ?? [],
-          ),
+          .flatMap((p) => p?.results ?? []),
         "id",
       ) ?? [],
     [data],
@@ -61,7 +62,7 @@ export default function page() {
       jellyseerrApi
         ? flatData.map((r) =>
             jellyseerrApi.imageProxy(
-              r.backdropPath,
+              (r as TvResult | MovieResult).backdropPath,
               "w1920_and_h800_multi_faces",
             ),
           )
@@ -91,7 +92,9 @@ export default function page() {
           {name}
         </Text>
       }
-      renderItem={(item, _index) => <JellyseerrPoster item={item} />}
+      renderItem={(item, _index) => (
+        <JellyseerrPoster item={item as MovieResult | TvResult} />
+      )}
     />
   );
 }

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,
-    mediaTitle,
-    refetch,
-    mediaType,
-  ]);
+  }, [details, result, requestMedia, hasAdvancedRequestPermission]);
 
   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({
-                          pathname:
-                            mediaType === MediaType.MOVIE
-                              ? "/(auth)/(tabs)/(search)/items/page"
-                              : "/(auth)/(tabs)/(search)/series/[id]",
-                          params:
-                            mediaType === MediaType.MOVIE
-                              ? { id: details?.mediaInfo.jellyfinMediaId }
-                              : { id: details?.mediaInfo.jellyfinMediaId },
-                        });
+                        const url =
+                          mediaType === MediaType.MOVIE
+                            ? `/(auth)/(tabs)/(search)/items/page?id=${details?.mediaInfo.jellyfinMediaId}`
+                            : `/(auth)/(tabs)/(search)/series/${details?.mediaInfo.jellyfinMediaId}`;
+                        // @ts-expect-error
+                        router.push(url);
                       }}
                       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'>
-                  <Text className='opacity-50 mb-1 text-xs'>
-                    {t("jellyseerr.issue_type")}
-                  </Text>
-                  <PlatformDropdown
-                    groups={issueTypeOptionGroups}
-                    trigger={
-                      <View className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-                        <Text numberOfLines={1}>
-                          {issueType
-                            ? IssueTypeName[issueType]
-                            : t("jellyseerr.select_an_issue")}
+                <View className='flex flex-col'>
+                  <DropdownMenu.Root>
+                    <DropdownMenu.Trigger>
+                      <View className='flex flex-col'>
+                        <Text className='opacity-50 mb-1 text-xs'>
+                          {t("jellyseerr.issue_type")}
                         </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>
-                    }
-                    title={t("jellyseerr.types")}
-                  />
+                    </DropdownMenu.Trigger>
+                    <DropdownMenu.Content
+                      loop={false}
+                      side='bottom'
+                      align='center'
+                      alignOffset={0}
+                      avoidCollisions={true}
+                      collisionPadding={0}
+                      sideOffset={0}
+                    >
+                      <DropdownMenu.Label>
+                        {t("jellyseerr.types")}
+                      </DropdownMenu.Label>
+                      {Object.entries(IssueTypeName)
+                        .reverse()
+                        .map(([key, value], _idx) => (
+                          <DropdownMenu.Item
+                            key={value}
+                            onSelect={() =>
+                              setIssueType(key as unknown as IssueType)
+                            }
+                          >
+                            <DropdownMenu.ItemTitle>
+                              {value}
+                            </DropdownMenu.ItemTitle>
+                          </DropdownMenu.Item>
+                        ))}
+                    </DropdownMenu.Content>
+                  </DropdownMenu.Root>
                 </View>
 
                 <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full'>

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

@@ -10,6 +10,10 @@ import { OverviewText } from "@/components/OverviewText";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import type { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
+import type {
+  MovieResult,
+  TvResult,
+} from "@/utils/jellyseerr/server/models/Search";
 
 export default function page() {
   const local = useLocalSearchParams();
@@ -102,7 +106,9 @@ export default function page() {
       MainContent={() => (
         <OverviewText text={data?.details?.biography} className='mt-4' />
       )}
-      renderItem={(item, _index) => <JellyseerrPoster item={item} />}
+      renderItem={(item, _index) => (
+        <JellyseerrPoster item={item as MovieResult | TvResult} />
+      )}
     />
   );
 }

app/(auth)/(tabs)/(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(() => {

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

@@ -1,13 +1,15 @@
 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();
+  const [settings, updateSettings, pluginSettings] = useSettings(null);
 
   const { t } = useTranslation();
 
@@ -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
-                trigger={
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger>
                   <Ionicons
                     name='ellipsis-horizontal-outline'
                     size={24}
                     color='white'
                   />
-                }
-                title={t("library.options.display")}
-                groups={[
-                  {
-                    title: t("library.options.display"),
-                    options: [
-                      {
-                        type: "radio",
-                        label: t("library.options.row"),
-                        value: "row",
-                        selected: settings.libraryOptions.display === "row",
-                        onPress: () =>
-                          updateSettings({
-                            libraryOptions: {
-                              ...settings.libraryOptions,
-                              display: "row",
-                            },
-                          }),
-                      },
-                      {
-                        type: "radio",
-                        label: t("library.options.list"),
-                        value: "list",
-                        selected: settings.libraryOptions.display === "list",
-                        onPress: () =>
-                          updateSettings({
-                            libraryOptions: {
-                              ...settings.libraryOptions,
-                              display: "list",
-                            },
-                          }),
-                      },
-                    ],
-                  },
-                  {
-                    title: t("library.options.image_style"),
-                    options: [
-                      {
-                        type: "radio",
-                        label: t("library.options.poster"),
-                        value: "poster",
-                        selected:
-                          settings.libraryOptions.imageStyle === "poster",
-                        onPress: () =>
-                          updateSettings({
-                            libraryOptions: {
-                              ...settings.libraryOptions,
-                              imageStyle: "poster",
-                            },
-                          }),
-                      },
-                      {
-                        type: "radio",
-                        label: t("library.options.cover"),
-                        value: "cover",
-                        selected:
-                          settings.libraryOptions.imageStyle === "cover",
-                        onPress: () =>
-                          updateSettings({
-                            libraryOptions: {
-                              ...settings.libraryOptions,
-                              imageStyle: "cover",
-                            },
-                          }),
-                      },
-                    ],
-                  },
-                  {
-                    title: "Options",
-                    options: [
-                      {
-                        type: "toggle",
-                        label: t("library.options.show_titles"),
-                        value: settings.libraryOptions.showTitles,
-                        onToggle: () =>
-                          updateSettings({
-                            libraryOptions: {
-                              ...settings.libraryOptions,
-                              showTitles: !settings.libraryOptions.showTitles,
-                            },
-                          }),
-                        disabled:
-                          settings.libraryOptions.imageStyle === "poster",
-                      },
-                      {
-                        type: "toggle",
-                        label: t("library.options.show_stats"),
-                        value: settings.libraryOptions.showStats,
-                        onToggle: () =>
-                          updateSettings({
-                            libraryOptions: {
-                              ...settings.libraryOptions,
-                              showStats: !settings.libraryOptions.showStats,
-                            },
-                          }),
-                      },
-                    ],
-                  },
-                ]}
-              />
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content
+                  align={"end"}
+                  alignOffset={-10}
+                  avoidCollisions={false}
+                  collisionPadding={0}
+                  loop={false}
+                  side={"bottom"}
+                  sideOffset={10}
+                >
+                  <DropdownMenu.Label>
+                    {t("library.options.display")}
+                  </DropdownMenu.Label>
+                  <DropdownMenu.Group key='display-group'>
+                    <DropdownMenu.Sub>
+                      <DropdownMenu.SubTrigger key='image-style-trigger'>
+                        {t("library.options.display")}
+                      </DropdownMenu.SubTrigger>
+                      <DropdownMenu.SubContent
+                        alignOffset={-10}
+                        avoidCollisions={true}
+                        collisionPadding={0}
+                        loop={true}
+                        sideOffset={10}
+                      >
+                        <DropdownMenu.CheckboxItem
+                          key='display-option-1'
+                          value={settings.libraryOptions.display === "row"}
+                          onValueChange={() =>
+                            updateSettings({
+                              libraryOptions: {
+                                ...settings.libraryOptions,
+                                display: "row",
+                              },
+                            })
+                          }
+                        >
+                          <DropdownMenu.ItemIndicator />
+                          <DropdownMenu.ItemTitle key='display-title-1'>
+                            {t("library.options.row")}
+                          </DropdownMenu.ItemTitle>
+                        </DropdownMenu.CheckboxItem>
+                        <DropdownMenu.CheckboxItem
+                          key='display-option-2'
+                          value={settings.libraryOptions.display === "list"}
+                          onValueChange={() =>
+                            updateSettings({
+                              libraryOptions: {
+                                ...settings.libraryOptions,
+                                display: "list",
+                              },
+                            })
+                          }
+                        >
+                          <DropdownMenu.ItemIndicator />
+                          <DropdownMenu.ItemTitle key='display-title-2'>
+                            {t("library.options.list")}
+                          </DropdownMenu.ItemTitle>
+                        </DropdownMenu.CheckboxItem>
+                      </DropdownMenu.SubContent>
+                    </DropdownMenu.Sub>
+                    <DropdownMenu.Sub>
+                      <DropdownMenu.SubTrigger key='image-style-trigger'>
+                        {t("library.options.image_style")}
+                      </DropdownMenu.SubTrigger>
+                      <DropdownMenu.SubContent
+                        alignOffset={-10}
+                        avoidCollisions={true}
+                        collisionPadding={0}
+                        loop={true}
+                        sideOffset={10}
+                      >
+                        <DropdownMenu.CheckboxItem
+                          key='poster-option'
+                          value={
+                            settings.libraryOptions.imageStyle === "poster"
+                          }
+                          onValueChange={() =>
+                            updateSettings({
+                              libraryOptions: {
+                                ...settings.libraryOptions,
+                                imageStyle: "poster",
+                              },
+                            })
+                          }
+                        >
+                          <DropdownMenu.ItemIndicator />
+                          <DropdownMenu.ItemTitle key='poster-title'>
+                            {t("library.options.poster")}
+                          </DropdownMenu.ItemTitle>
+                        </DropdownMenu.CheckboxItem>
+                        <DropdownMenu.CheckboxItem
+                          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,
         }}

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

@@ -19,7 +19,7 @@ export default function index() {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const queryClient = useQueryClient();
-  const { settings } = useSettings();
+  const [settings] = useSettings(null);
 
   const { t } = useTranslation();
 
@@ -87,8 +87,8 @@ export default function index() {
         paddingTop: 17,
         paddingHorizontal: settings?.libraryOptions?.display === "row" ? 0 : 17,
         paddingBottom: 150,
-        paddingLeft: insets.left + 17,
-        paddingRight: insets.right + 17,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
       }}
       data={libraries}
       renderItem={({ item }) => <LibraryItemCard library={item} />}
@@ -105,6 +105,7 @@ export default function index() {
           <View className='h-4' />
         )
       }
+      estimatedItemSize={200}
     />
   );
 }

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,
         }}

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";
@@ -71,7 +71,7 @@ export default function search() {
 
   const [api] = useAtom(apiAtom);
 
-  const { settings } = useSettings();
+  const [settings] = useSettings(null);
   const { jellyseerrApi } = useJellyseerr();
   const [jellyseerrOrderBy, setJellyseerrOrderBy] =
     useState<JellyseerrSearchSort>(
@@ -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'>
-            <SearchTabButtons
-              searchType={searchType}
-              setSearchType={setSearchType}
-              t={t}
-            />
+          <ScrollView
+            horizontal
+            className='flex flex-row flex-wrap space-x-2 px-4 mb-2'
+          >
+            <TouchableOpacity onPress={() => setSearchType("Library")}>
+              <Tag
+                text={t("search.library")}
+                textClass='p-1'
+                className={
+                  searchType === "Library" ? "bg-purple-600" : undefined
+                }
+              />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => setSearchType("Discover")}>
+              <Tag
+                text={t("search.discover")}
+                textClass='p-1'
+                className={
+                  searchType === "Discover" ? "bg-purple-600" : undefined
+                }
+              />
+            </TouchableOpacity>
             {searchType === "Discover" &&
               !loading &&
               noResults &&
               debouncedSearch.length > 0 && (
-                <DiscoverFilters
-                  searchFilterId={searchFilterId}
-                  orderFilterId={orderFilterId}
-                  jellyseerrOrderBy={jellyseerrOrderBy}
-                  setJellyseerrOrderBy={setJellyseerrOrderBy}
-                  jellyseerrSortOrder={jellyseerrSortOrder}
-                  setJellyseerrSortOrder={setJellyseerrSortOrder}
-                  t={t}
-                />
+                <View className='flex flex-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>
               )}
-          </View>
+          </ScrollView>
         )}
 
         <View className='mt-2'>

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

@@ -27,7 +27,7 @@ export const NativeTabs = withLayoutContext<
 >(Navigator);
 
 export default function TabLayout() {
-  const { settings } = useSettings();
+  const [settings] = useSettings(null);
   const { t } = useTranslation();
   const router = useRouter();
 

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(
-    () => downloadUtils.getDownloadedItems(),
-    [downloadUtils.getDownloadedItems],
-  );
+  const downloadedFiles = downloadUtils.getDownloadedItems();
 
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
@@ -107,7 +97,7 @@ export default function page() {
     /** Playback position in ticks. */
     playbackPosition?: string;
   }>();
-  const { settings } = useSettings();
+  const [_settings] = useSettings(null);
 
   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)}`);
   }
@@ -764,6 +748,7 @@ export default function page() {
           setAspectRatio={setAspectRatio}
           setScaleFactor={setScaleFactor}
           isVlc
+          api={api}
           downloadedFiles={downloadedFiles}
         />
       )}

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;
@@ -225,7 +230,7 @@ const queryClient = new QueryClient({
 });
 
 function Layout() {
-  const { settings } = useSettings();
+  const [settings] = useSettings(null);
   const [user] = useAtom(userAtom);
   const [api] = useAtom(apiAtom);
   const appState = useRef(AppState.currentState);
@@ -264,15 +269,6 @@ function Layout() {
       await Notifications?.setNotificationChannelAsync("default", {
         name: "default",
       });
-
-      // Create dedicated channel for download notifications
-      console.log("Setting android notification channel 'downloads'");
-      await Notifications?.setNotificationChannelAsync("downloads", {
-        name: "Downloads",
-        importance: Notifications.AndroidImportance.DEFAULT,
-        vibrationPattern: [0, 250, 250, 250],
-        lightColor: "#FF231F7C",
-      });
     }
 
     const granted = await checkAndRequestPermissions();
@@ -312,42 +308,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;
-            const type = (data?.type ?? "").toString().toLowerCase();
-            const itemId = data?.id;
-
-            switch (type) {
-              case "movie":
-                url = `/(auth)/(tabs)/home/items/page?id=${itemId}`;
-                break;
-              case "episode":
-                // `/(auth)/(tabs)/${from}/items/page?id=${item.Id}`;
-                // We just clicked a notification for an individual episode.
-                if (itemId) {
-                  url = `/(auth)/(tabs)/home/items/page?id=${itemId}`;
-                  // summarized season notification for multiple episodes. Bring them to series season
-                } else {
-                  const seriesId = data.seriesId;
-                  const seasonIndex = data.seasonIndex;
-                  if (seasonIndex) {
-                    url = `/(auth)/(tabs)/home/series/${seriesId}?seasonIndex=${seasonIndex}`;
+              switch (type) {
+                case "movie":
+                  router.push(`/(auth)/(tabs)/home/items/page?id=${itemId}`);
+                  break;
+                case "episode":
+                  // We just clicked a notification for an individual episode.
+                  if (itemId) {
+                    router.push(`/(auth)/(tabs)/home/items/page?id=${itemId}`);
+                    // summarized season notification for multiple episodes. Bring them to series season
                   } 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;
-            }
-
-            writeInfoLog(`Notification attempting to redirect to ${url}`);
-            if (url) {
-              router.push(url);
+                  break;
+              }
             }
           },
         );
@@ -388,7 +380,7 @@ function Layout() {
   ]);
 
   useEffect(() => {
-    if (Platform.isTV || !BackGroundDownloader) {
+    if (Platform.isTV) {
       return;
     }
 
@@ -397,19 +389,12 @@ function Layout() {
         appState.current.match(/inactive|background/) &&
         nextAppState === "active"
       ) {
-        BackGroundDownloader?.checkForExistingDownloads().catch(
-          (error: unknown) => {
-            writeErrorLog("Failed to resume background downloads", error);
-          },
-        );
+        BackGroundDownloader.checkForExistingDownloads();
       }
     });
 
-    BackGroundDownloader?.checkForExistingDownloads().catch(
-      (error: unknown) => {
-        writeErrorLog("Failed to resume background downloads", error);
-      },
-    );
+    BackGroundDownloader.checkForExistingDownloads();
+
     return () => {
       subscription.remove();
     };
@@ -422,55 +407,52 @@ function Layout() {
           <LogProvider>
             <WebSocketProvider>
               <DownloadProvider>
-                <GlobalModalProvider>
-                  <BottomSheetModalProvider>
-                    <ThemeProvider value={DarkTheme}>
-                      <SystemBars style='light' hidden={false} />
-                      <Stack initialRouteName='(auth)/(tabs)'>
-                        <Stack.Screen
-                          name='(auth)/(tabs)'
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name='(auth)/player'
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name='login'
-                          options={{
-                            headerShown: true,
-                            title: "",
-                            headerTransparent: true,
-                          }}
-                        />
-                        <Stack.Screen name='+not-found' />
-                      </Stack>
-                      <Toaster
-                        duration={4000}
-                        toastOptions={{
-                          style: {
-                            backgroundColor: "#262626",
-                            borderColor: "#363639",
-                            borderWidth: 1,
-                          },
-                          titleStyle: {
-                            color: "white",
-                          },
+                <BottomSheetModalProvider>
+                  <SystemBars style='light' hidden={false} />
+                  <ThemeProvider value={DarkTheme}>
+                    <Stack initialRouteName='(auth)/(tabs)'>
+                      <Stack.Screen
+                        name='(auth)/(tabs)'
+                        options={{
+                          headerShown: false,
+                          title: "",
+                          header: () => null,
                         }}
-                        closeButton
                       />
-                      <GlobalModal />
-                    </ThemeProvider>
-                  </BottomSheetModalProvider>
-                </GlobalModalProvider>
+                      <Stack.Screen
+                        name='(auth)/player'
+                        options={{
+                          headerShown: false,
+                          title: "",
+                          header: () => null,
+                        }}
+                      />
+                      <Stack.Screen
+                        name='login'
+                        options={{
+                          headerShown: true,
+                          title: "",
+                          headerTransparent: true,
+                        }}
+                      />
+                      <Stack.Screen name='+not-found' />
+                    </Stack>
+                    <Toaster
+                      duration={4000}
+                      toastOptions={{
+                        style: {
+                          backgroundColor: "#262626",
+                          borderColor: "#363639",
+                          borderWidth: 1,
+                        },
+                        titleStyle: {
+                          color: "white",
+                        },
+                      }}
+                      closeButton
+                    />
+                  </ThemeProvider>
+                </BottomSheetModalProvider>
               </DownloadProvider>
             </WebSocketProvider>
           </LogProvider>

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,
@@ -81,10 +82,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>

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));
     }

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"],
   };
 };

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": [
       "**/*",

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

components/AudioTrackSelector.tsx

@@ -1,9 +1,11 @@
 import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
 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(
-    () => [
-      {
-        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>
-  );
+  const { t } = useTranslation();
 
   if (isTv) return null;
 
   return (
-    <PlatformDropdown
-      groups={optionGroups}
-      trigger={trigger}
-      title={t("item_card.audio")}
-      open={open}
-      onOpenChange={setOpen}
-      onOptionSelect={handleOptionSelect}
-      expoUIConfig={{
-        hostStyle: { flex: 1 },
+    <View
+      className='flex shrink'
+      style={{
+        minWidth: 50,
       }}
-      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>
   );
 };

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(
-    () => [
-      {
-        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>
-  );
+  const { t } = useTranslation();
 
   if (isTv) return null;
 
   return (
-    <PlatformDropdown
-      groups={optionGroups}
-      trigger={trigger}
-      title={t("item_card.quality")}
-      open={open}
-      onOpenChange={setOpen}
-      onOptionSelect={handleOptionSelect}
-      expoUIConfig={{
-        hostStyle: { flex: 1 },
+    <View
+      className='flex shrink'
+      style={{
+        minWidth: 60,
+        maxWidth: 200,
       }}
-      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>
   );
 };

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

components/DownloadItem.tsx

@@ -61,15 +61,12 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const [queue, _setQueue] = useAtom(queueAtom);
-  const { settings } = useSettings();
+  const [settings] = useSettings(null);
   const [downloadUnwatchedOnly, setDownloadUnwatchedOnly] = useState(false);
 
   const { processes, startBackgroundDownload, getDownloadedItems } =
     useDownload();
-  const downloadedFiles = useMemo(
-    () => getDownloadedItems(),
-    [getDownloadedItems],
-  );
+  const downloadedFiles = 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='items-start'>
-                <BitrateSelector
-                  inverted
-                  onChange={(val) =>
-                    setSelectedOptions(
-                      (prev) => prev && { ...prev, bitrate: val },
-                    )
-                  }
-                  selected={selectedOptions?.bitrate}
-                />
-              </View>
+            <View className='flex flex-col space-y-2 w-full items-start'>
+              <BitrateSelector
+                inverted
+                onChange={(val) =>
+                  setSelectedOptions(
+                    (prev) => prev && { ...prev, bitrate: val },
+                  )
+                }
+                selected={selectedOptions?.bitrate}
+              />
               {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
-                      item={items[0]}
-                      onChange={(val) =>
-                        setSelectedOptions(
-                          (prev) =>
-                            prev && {
-                              ...prev,
-                              mediaSource: val,
-                            },
-                        )
-                      }
-                      selected={selectedOptions?.mediaSource}
-                    />
-                  </View>
+                  <MediaSourceSelector
+                    item={items[0]}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            mediaSource: val,
+                          },
+                      )
+                    }
+                    selected={selectedOptions?.mediaSource}
+                  />
                   {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>

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>
-  );
-};

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>
-  );
-};

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";
@@ -54,14 +54,14 @@ interface ItemContentProps {
 export const ItemContent: React.FC<ItemContentProps> = React.memo(
   ({ item, isOffline }) => {
     const [api] = useAtom(apiAtom);
-    const { settings } = useSettings();
+    const [settings] = useSettings(null);
     const { orientation } = useOrientation();
     const navigation = useNavigation();
     const insets = useSafeAreaInsets();
     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 &&
-            (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>
-            ) : (
+            item && (
               <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>
 

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 { useTranslation } from "react-i18next";
+import { useCallback, useMemo } from "react";
 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
-      groups={optionGroups}
-      trigger={trigger}
-      title={t("item_card.video")}
-      open={open}
-      onOpenChange={setOpen}
-      onOptionSelect={handleOptionSelect}
-      expoUIConfig={{
-        hostStyle: { flex: 1 },
+    <View
+      className='flex shrink'
+      style={{
+        minWidth: 50,
       }}
-      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>
   );
 };

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 }}>

components/MoreMoviesWithActor.tsx

@@ -5,7 +5,7 @@ import { useAtom } from "jotai";
 import type React from "react";
 import { useTranslation } from "react-i18next";
 import { View, type ViewProps } from "react-native";
-import { HorizontalScroll } from "@/components/common/HorizontalScroll";
+import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";

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
-    );
-  },
-);

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,22 +55,19 @@ 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 startColor = useSharedValue(effectiveColors);
+  const endColor = useSharedValue(colorAtom);
+  const startColor = useSharedValue(colorAtom);
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
-  const { settings, updateSettings } = useSettings();
+  const [settings, updateSettings] = useSettings(null);
   const lightHapticFeedback = useHaptic("light");
 
   const goToPlayer = useCallback(
@@ -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" }]}>

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,23 +32,19 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({
   item,
   selectedOptions,
-  colors,
   ...props
 }: Props) => {
-  const [globalColorAtom] = useAtom(itemThemeColorAtom);
-
-  // Use colors prop if provided, otherwise fallback to global atom
-  const effectiveColors = colors || globalColorAtom;
+  const [colorAtom] = useAtom(itemThemeColorAtom);
 
   const router = useRouter();
 
   const startWidth = useSharedValue(0);
   const targetWidth = useSharedValue(0);
-  const endColor = useSharedValue(effectiveColors);
-  const startColor = useSharedValue(effectiveColors);
+  const endColor = useSharedValue(colorAtom);
+  const startColor = useSharedValue(colorAtom);
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
-  const { settings } = useSettings();
+  const [settings] = useSettings(null);
   const lightHapticFeedback = useHaptic("light");
 
   const goToPlayer = useCallback(
@@ -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 '

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

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

components/SimilarItems.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { View, type ViewProps } from "react-native";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { HorizontalScroll } from "./common/HorizontalScroll";
+import { HorizontalScroll } from "./common/HorrizontalScroll";
 import { Text } from "./common/Text";
 import { TouchableItemRouter } from "./common/TouchableItemRouter";
 import { ItemCardText } from "./ItemCardText";

components/SubtitleTrackSelector.tsx

@@ -1,10 +1,11 @@
 import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
 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 +20,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 +29,62 @@ 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
-      groups={optionGroups}
-      trigger={trigger}
-      title={t("item_card.subtitles")}
-      open={open}
-      onOpenChange={setOpen}
-      onOptionSelect={handleOptionSelect}
-      expoUIConfig={{
-        hostStyle: { flex: 1 },
+    <View
+      className='flex col shrink justify-start place-self-start items-start'
+      style={{
+        minWidth: 60,
+        maxWidth: 220,
       }}
-      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=' ' numberOfLines={1}>
+                {selectedSubtitleSteam?.DisplayTitle || 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>
   );
 };

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>
-  );
-};

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>
-  );
-};

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;

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

components/common/JellyseerrItemRouter.tsx

@@ -1,10 +1,15 @@
 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 {
   MovieResult,
   TvResult,
@@ -12,7 +17,7 @@ import type {
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 
 interface Props extends TouchableOpacityProps {
-  result?: MovieResult | TvResult | MovieDetails | TvDetails | PersonCreditCast;
+  result?: MovieResult | TvResult | MovieDetails | TvDetails;
   mediaTitle: string;
   releaseYear: number;
   canRequest: boolean;
@@ -32,33 +37,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
-        onPress={() => {
-          if (!result) return;
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>
+          <TouchableOpacity
+            onPress={() => {
+              if (!result) return;
 
-          router.push({
-            pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
-            // @ts-expect-error
-            params: {
-              ...result,
-              mediaTitle,
-              releaseYear,
-              canRequest: canRequest.toString(),
-              posterSrc,
-              mediaType,
-            },
-          });
-        }}
-        {...props}
-      >
-        {children}
-      </TouchableOpacity>
+              router.push({
+                pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+                // @ts-expect-error
+                params: {
+                  ...result,
+                  mediaTitle,
+                  releaseYear,
+                  canRequest: canRequest.toString(),
+                  posterSrc,
+                  mediaType,
+                },
+              });
+            }}
+            {...props}
+          >
+            {children}
+          </TouchableOpacity>
+        </ContextMenu.Trigger>
+        <ContextMenu.Content
+          avoidCollisions
+          alignOffset={0}
+          collisionPadding={0}
+          loop={false}
+          key={"content"}
+        >
+          <ContextMenu.Label key='label-1'>Actions</ContextMenu.Label>
+          {canRequest && mediaType === MediaType.MOVIE && (
+            <ContextMenu.Item
+              key='item-1'
+              onSelect={() => {
+                if (autoApprove) {
+                  request();
+                }
+              }}
+              shouldDismissMenuOnSelect
+            >
+              <ContextMenu.ItemTitle key='item-1-title'>
+                Request
+              </ContextMenu.ItemTitle>
+              <ContextMenu.ItemIcon
+                ios={{
+                  name: "arrow.down.to.line",
+                  pointSize: 18,
+                  weight: "semibold",
+                  scale: "medium",
+                  hierarchicalColor: {
+                    dark: "purple",
+                    light: "purple",
+                  },
+                }}
+                androidIconName='download'
+              />
+            </ContextMenu.Item>
+          )}
+        </ContextMenu.Content>
+      </ContextMenu.Root>
     );
-
-  return null;
 };

components/common/TouchableItemRouter.tsx

@@ -1,5 +1,8 @@
 import { useActionSheet } from "@expo/react-native-action-sheet";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import type {
+  BaseItemDto,
+  BaseItemPerson,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import { useRouter, useSegments } from "expo-router";
 import { type PropsWithChildren, useCallback } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
@@ -11,7 +14,10 @@ interface Props extends TouchableOpacityProps {
   isOffline?: boolean;
 }
 
-export const itemRouter = (item: BaseItemDto, from: string) => {
+export const itemRouter = (
+  item: BaseItemDto | BaseItemPerson,
+  from: string,
+) => {
   if ("CollectionType" in item && item.CollectionType === "livetv") {
     return `/(auth)/(tabs)/${from}/livetv`;
   }
@@ -20,8 +26,8 @@ export const itemRouter = (item: BaseItemDto, from: string) => {
     return `/(auth)/(tabs)/${from}/series/${item.Id}`;
   }
 
-  if (item.Type === "Person") {
-    return `/(auth)/(tabs)/${from}/persons/${item.Id}`;
+  if (item.Type === "Person" || item.Type === "Actor") {
+    return `/(auth)/(tabs)/${from}/actors/${item.Id}`;
   }
 
   if (item.Type === "BoxSet") {
@@ -43,48 +49,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 +61,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 +107,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
-            const url = `${itemRouter(item, from)}&offline=true`;
-            router.push(url as any);
-            return;
+            url += `&offline=true`;
           }
-
-          const navigation = getItemNavigation(item, from);
-          router.push(navigation as any);
+          // @ts-expect-error
+          router.push(url);
         }}
         {...props}
       >

components/downloads/ActiveDownloads.tsx

@@ -1,9 +1,27 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useQueryClient } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { useRouter } from "expo-router";
 import { t } from "i18next";
-import { View, type ViewProps } from "react-native";
+import { useMemo } from "react";
+import {
+  ActivityIndicator,
+  TouchableOpacity,
+  type TouchableOpacityProps,
+  View,
+  type ViewProps,
+} from "react-native";
+import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { useDownload } from "@/providers/DownloadProvider";
 import { JobStatus } from "@/providers/Downloads/types";
-import { DownloadCard } from "./DownloadCard";
+import { storage } from "@/utils/mmkv";
+import { formatTimeString } from "@/utils/time";
+import { Button } from "../Button";
+
+const bytesToMB = (bytes: number) => {
+  return bytes / 1024 / 1024;
+};
 
 interface ActiveDownloadsProps extends ViewProps {}
 
@@ -34,3 +52,163 @@ export default function ActiveDownloads({ ...props }: ActiveDownloadsProps) {
     </View>
   );
 }
+
+interface DownloadCardProps extends TouchableOpacityProps {
+  process: JobStatus;
+}
+
+const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
+  const { startDownload, pauseDownload, resumeDownload, removeProcess } =
+    useDownload();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const handlePause = async (id: string) => {
+    try {
+      await pauseDownload(id);
+      toast.success(t("home.downloads.toasts.download_paused"));
+    } catch (error) {
+      console.error("Error pausing download:", error);
+      toast.error(t("home.downloads.toasts.could_not_pause_download"));
+    }
+  };
+
+  const handleResume = async (id: string) => {
+    try {
+      await resumeDownload(id);
+      toast.success(t("home.downloads.toasts.download_resumed"));
+    } catch (error) {
+      console.error("Error resuming download:", error);
+      toast.error(t("home.downloads.toasts.could_not_resume_download"));
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await removeProcess(id);
+      toast.success(t("home.downloads.toasts.download_deleted"));
+      queryClient.invalidateQueries({ queryKey: ["downloads"] });
+    } catch (error) {
+      console.error("Error deleting download:", error);
+      toast.error(t("home.downloads.toasts.could_not_delete_download"));
+    }
+  };
+
+  const eta = (p: JobStatus) => {
+    if (!p.speed || p.speed <= 0 || !p.estimatedTotalSizeBytes) return null;
+
+    const bytesRemaining = p.estimatedTotalSizeBytes - (p.bytesDownloaded || 0);
+    if (bytesRemaining <= 0) return null;
+
+    const secondsRemaining = bytesRemaining / p.speed;
+
+    return formatTimeString(secondsRemaining, "s");
+  };
+
+  const base64Image = useMemo(() => {
+    return storage.getString(process.item.Id!);
+  }, []);
+
+  return (
+    <TouchableOpacity
+      onPress={() => router.push(`/(auth)/items/page?id=${process.item.Id}`)}
+      className='relative bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden'
+      {...props}
+    >
+      {process.status === "downloading" && (
+        <View
+          className={`
+        bg-purple-600 h-1 absolute bottom-0 left-0
+        `}
+          style={{
+            width: process.progress
+              ? `${Math.max(5, process.progress)}%`
+              : "5%",
+          }}
+        />
+      )}
+      <View className='px-3 py-1.5 flex flex-col w-full'>
+        <View className='flex flex-row items-center w-full'>
+          {base64Image && (
+            <View className='w-14 aspect-[10/15] rounded-lg overflow-hidden mr-4'>
+              <Image
+                source={{
+                  uri: `data:image/jpeg;base64,${base64Image}`,
+                }}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                }}
+                contentFit='cover'
+              />
+            </View>
+          )}
+          <View className='shrink mb-1'>
+            <Text className='text-xs opacity-50'>{process.item.Type}</Text>
+            <Text className='font-semibold shrink'>{process.item.Name}</Text>
+            <Text className='text-xs opacity-50'>
+              {process.item.ProductionYear}
+            </Text>
+            <View className='flex flex-row items-center space-x-2 mt-1 text-purple-600'>
+              {process.progress === 0 ? (
+                <ActivityIndicator size={"small"} color={"white"} />
+              ) : (
+                <Text className='text-xs'>{process.progress.toFixed(0)}%</Text>
+              )}
+              {process.speed && process.speed > 0 && (
+                <Text className='text-xs'>
+                  {bytesToMB(process.speed).toFixed(2)} MB/s
+                </Text>
+              )}
+              {eta(process) && (
+                <Text className='text-xs'>
+                  {t("home.downloads.eta", { eta: eta(process) })}
+                </Text>
+              )}
+            </View>
+
+            <View className='flex flex-row items-center space-x-2 mt-1 text-purple-600'>
+              <Text className='text-xs capitalize'>{process.status}</Text>
+            </View>
+          </View>
+          <View className='ml-auto flex flex-row items-center space-x-2'>
+            {process.status === "downloading" && (
+              <TouchableOpacity
+                onPress={() => handlePause(process.id)}
+                className='p-2 rounded-full bg-yellow-600'
+              >
+                <Ionicons name='pause' size={20} color='white' />
+              </TouchableOpacity>
+            )}
+            {process.status === "paused" && (
+              <TouchableOpacity
+                onPress={() => handleResume(process.id)}
+                className='p-2 rounded-full bg-green-600'
+              >
+                <Ionicons name='play' size={20} color='white' />
+              </TouchableOpacity>
+            )}
+            <TouchableOpacity
+              onPress={() => handleDelete(process.id)}
+              className='p-2 rounded-full bg-red-600'
+            >
+              <Ionicons name='close' size={20} color='white' />
+            </TouchableOpacity>
+          </View>
+        </View>
+        {process.status === "completed" && (
+          <View className='flex flex-row mt-4 space-x-4'>
+            <Button
+              onPress={() => {
+                startDownload(process);
+              }}
+              className='w-full'
+            >
+              Download now
+            </Button>
+          </View>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};

components/downloads/DownloadCard.tsx

@@ -1,199 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { useQueryClient } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { useRouter } from "expo-router";
-import { t } from "i18next";
-import { useMemo } from "react";
-import {
-  ActivityIndicator,
-  Platform,
-  TouchableOpacity,
-  type TouchableOpacityProps,
-  View,
-} from "react-native";
-import { toast } from "sonner-native";
-import { Text } from "@/components/common/Text";
-import { useDownload } from "@/providers/DownloadProvider";
-import { JobStatus } from "@/providers/Downloads/types";
-import { storage } from "@/utils/mmkv";
-import { formatTimeString } from "@/utils/time";
-import { Button } from "../Button";
-
-const bytesToMB = (bytes: number) => {
-  return bytes / 1024 / 1024;
-};
-
-interface DownloadCardProps extends TouchableOpacityProps {
-  process: JobStatus;
-}
-
-export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
-  const { startDownload, pauseDownload, resumeDownload, removeProcess } =
-    useDownload();
-  const router = useRouter();
-  const queryClient = useQueryClient();
-
-  const handlePause = async (id: string) => {
-    try {
-      await pauseDownload(id);
-      toast.success(t("home.downloads.toasts.download_paused"));
-    } catch (error) {
-      console.error("Error pausing download:", error);
-      toast.error(t("home.downloads.toasts.could_not_pause_download"));
-    }
-  };
-
-  const handleResume = async (id: string) => {
-    try {
-      await resumeDownload(id);
-      toast.success(t("home.downloads.toasts.download_resumed"));
-    } catch (error) {
-      console.error("Error resuming download:", error);
-      toast.error(t("home.downloads.toasts.could_not_resume_download"));
-    }
-  };
-
-  const handleDelete = async (id: string) => {
-    try {
-      await removeProcess(id);
-      toast.success(t("home.downloads.toasts.download_deleted"));
-      queryClient.invalidateQueries({ queryKey: ["downloads"] });
-    } catch (error) {
-      console.error("Error deleting download:", error);
-      toast.error(t("home.downloads.toasts.could_not_delete_download"));
-    }
-  };
-
-  const eta = (p: JobStatus) => {
-    if (!p.speed || p.speed <= 0 || !p.estimatedTotalSizeBytes) return null;
-
-    const bytesRemaining = p.estimatedTotalSizeBytes - (p.bytesDownloaded || 0);
-    if (bytesRemaining <= 0) return null;
-
-    const secondsRemaining = bytesRemaining / p.speed;
-
-    return formatTimeString(secondsRemaining, "s");
-  };
-
-  const base64Image = useMemo(() => {
-    return storage.getString(process.item.Id!);
-  }, []);
-
-  // Sanitize progress to ensure it's within valid bounds
-  const sanitizedProgress = useMemo(() => {
-    if (
-      typeof process.progress !== "number" ||
-      Number.isNaN(process.progress)
-    ) {
-      return 0;
-    }
-    return Math.max(0, Math.min(100, process.progress));
-  }, [process.progress]);
-
-  return (
-    <TouchableOpacity
-      onPress={() => router.push(`/(auth)/items/page?id=${process.item.Id}`)}
-      className='relative bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden'
-      {...props}
-    >
-      {process.status === "downloading" && (
-        <View
-          className={`
-        bg-purple-600 h-1 absolute bottom-0 left-0
-        `}
-          style={{
-            width:
-              sanitizedProgress > 0
-                ? `${Math.max(5, sanitizedProgress)}%`
-                : "5%",
-          }}
-        />
-      )}
-
-      {/* Action buttons in bottom right corner */}
-      <View className='absolute bottom-2 right-2 flex flex-row items-center space-x-2 z-10'>
-        {process.status === "downloading" && Platform.OS !== "ios" && (
-          <TouchableOpacity
-            onPress={() => handlePause(process.id)}
-            className='p-1'
-          >
-            <Ionicons name='pause' size={20} color='white' />
-          </TouchableOpacity>
-        )}
-        {process.status === "paused" && Platform.OS !== "ios" && (
-          <TouchableOpacity
-            onPress={() => handleResume(process.id)}
-            className='p-1'
-          >
-            <Ionicons name='play' size={20} color='white' />
-          </TouchableOpacity>
-        )}
-        <TouchableOpacity
-          onPress={() => handleDelete(process.id)}
-          className='p-1'
-        >
-          <Ionicons name='close' size={20} color='red' />
-        </TouchableOpacity>
-      </View>
-
-      <View className='px-3 py-1.5 flex flex-col w-full'>
-        <View className='flex flex-row items-center w-full'>
-          {base64Image && (
-            <View className='w-14 aspect-[10/15] rounded-lg overflow-hidden mr-4'>
-              <Image
-                source={{
-                  uri: `data:image/jpeg;base64,${base64Image}`,
-                }}
-                style={{
-                  width: "100%",
-                  height: "100%",
-                }}
-                contentFit='cover'
-              />
-            </View>
-          )}
-          <View className='shrink mb-1 flex-1'>
-            <Text className='text-xs opacity-50'>{process.item.Type}</Text>
-            <Text className='font-semibold shrink'>{process.item.Name}</Text>
-            <Text className='text-xs opacity-50'>
-              {process.item.ProductionYear}
-            </Text>
-            <View className='flex flex-row items-center space-x-2 mt-1 text-purple-600'>
-              {sanitizedProgress === 0 ? (
-                <ActivityIndicator size={"small"} color={"white"} />
-              ) : (
-                <Text className='text-xs'>{sanitizedProgress.toFixed(0)}%</Text>
-              )}
-              {process.speed && process.speed > 0 && (
-                <Text className='text-xs'>
-                  {bytesToMB(process.speed).toFixed(2)} MB/s
-                </Text>
-              )}
-              {eta(process) && (
-                <Text className='text-xs'>
-                  {t("home.downloads.eta", { eta: eta(process) })}
-                </Text>
-              )}
-            </View>
-
-            <View className='flex flex-row items-center space-x-2 mt-1 text-purple-600'>
-              <Text className='text-xs capitalize'>{process.status}</Text>
-            </View>
-          </View>
-        </View>
-        {process.status === "completed" && (
-          <View className='flex flex-row mt-4 space-x-4'>
-            <Button
-              onPress={() => {
-                startDownload(process);
-              }}
-              className='w-full'
-            >
-              Download now
-            </Button>
-          </View>
-        )}
-      </View>
-    </TouchableOpacity>
-  );
-};

components/downloads/DownloadSize.tsx

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

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]);
 

components/home/LargeMovieCarousel.tsx

@@ -21,12 +21,12 @@ 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 {}
 
 export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
-  const { settings } = useSettings();
+  const [settings] = useSettings(null);
 
   const ref = React.useRef<ICarouselInstance>(null);
   const progress = useSharedValue<number>(0);
@@ -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,
-          parallaxScrollingOffset: 0,
+          parallaxScrollingScale: 0.86,
+          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);
-    router.push(navigation as any);
+    // @ts-expect-error
+    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 }}>
-        <View className='relative flex justify-center overflow-hidden border border-neutral-800'>
+      <Animated.View
+        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,

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",
-  },
-});

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 (

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'>
-                    <Text className='opacity-50 mb-1 text-xs'>
-                      {t("jellyseerr.quality_profile")}
-                    </Text>
-                    <PlatformDropdown
-                      groups={qualityProfileOptions}
-                      trigger={
-                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-                          <Text numberOfLines={1}>
-                            {defaultServiceDetails.profiles.find(
-                              (p) =>
-                                p.id ===
-                                (requestOverrides.profileId ||
-                                  defaultProfile?.id),
-                            )?.name || defaultProfile?.name}
-                          </Text>
-                        </TouchableOpacity>
-                      }
-                      title={t("jellyseerr.quality_profile")}
-                    />
-                  </View>
-
-                  <View className='flex flex-col'>
-                    <Text className='opacity-50 mb-1 text-xs'>
-                      {t("jellyseerr.root_folder")}
-                    </Text>
-                    <PlatformDropdown
-                      groups={rootFolderOptions}
-                      trigger={
-                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-                          <Text numberOfLines={1}>
-                            {defaultServiceDetails.rootFolders.find(
-                              (f) =>
-                                f.path ===
-                                (requestOverrides.rootFolder ||
-                                  defaultFolder?.path),
-                            )
-                              ? pathTitleExtractor(
-                                  defaultServiceDetails.rootFolders.find(
-                                    (f) =>
-                                      f.path ===
-                                      (requestOverrides.rootFolder ||
-                                        defaultFolder?.path),
-                                  )!,
-                                )
-                              : pathTitleExtractor(defaultFolder!)}
-                          </Text>
-                        </TouchableOpacity>
-                      }
-                      title={t("jellyseerr.root_folder")}
-                    />
-                  </View>
-
-                  <View className='flex flex-col'>
-                    <Text className='opacity-50 mb-1 text-xs'>
-                      {t("jellyseerr.tags")}
-                    </Text>
-                    <PlatformDropdown
-                      groups={tagsOptions}
-                      trigger={
-                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-                          <Text numberOfLines={1}>
-                            {requestOverrides.tags
-                              ? defaultServiceDetails.tags
-                                  .filter((t) =>
-                                    requestOverrides.tags!.includes(t.id),
-                                  )
-                                  .map((t) => t.label)
-                                  .join(", ") ||
-                                defaultTags.map((t) => t.label).join(", ")
-                              : defaultTags.map((t) => t.label).join(", ")}
-                          </Text>
-                        </TouchableOpacity>
-                      }
-                      title={t("jellyseerr.tags")}
-                    />
-                  </View>
-
-                  <View className='flex flex-col'>
-                    <Text className='opacity-50 mb-1 text-xs'>
-                      {t("jellyseerr.request_as")}
-                    </Text>
-                    <PlatformDropdown
-                      groups={usersOptions}
-                      trigger={
-                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-                          <Text numberOfLines={1}>
-                            {users.find(
-                              (u) =>
-                                u.id ===
-                                (requestOverrides.userId || jellyseerrUser?.id),
-                            )?.displayName || jellyseerrUser!.displayName}
-                          </Text>
-                        </TouchableOpacity>
-                      }
-                      title={t("jellyseerr.request_as")}
-                    />
-                  </View>
+                  <Dropdown
+                    data={defaultServiceDetails.profiles}
+                    titleExtractor={(item) => item.name}
+                    placeholderText={
+                      requestOverrides.profileName || defaultProfile.name
+                    }
+                    keyExtractor={(item) => item.id.toString()}
+                    label={t("jellyseerr.quality_profile")}
+                    onSelected={(item) =>
+                      item &&
+                      setRequestOverrides((prev) => ({
+                        ...prev,
+                        profileId: item?.id,
+                      }))
+                    }
+                    title={t("jellyseerr.quality_profile")}
+                  />
+                  <Dropdown
+                    data={defaultServiceDetails.rootFolders}
+                    titleExtractor={pathTitleExtractor}
+                    placeholderText={
+                      defaultFolder ? pathTitleExtractor(defaultFolder) : ""
+                    }
+                    keyExtractor={(item) => item.id.toString()}
+                    label={t("jellyseerr.root_folder")}
+                    onSelected={(item) =>
+                      item &&
+                      setRequestOverrides((prev) => ({
+                        ...prev,
+                        rootFolder: item.path,
+                      }))
+                    }
+                    title={t("jellyseerr.root_folder")}
+                  />
+                  <Dropdown
+                    multiple
+                    data={defaultServiceDetails.tags}
+                    titleExtractor={(item) => item.label}
+                    placeholderText={defaultTags.map((t) => t.label).join(",")}
+                    keyExtractor={(item) => item.id.toString()}
+                    label={t("jellyseerr.tags")}
+                    onSelected={(...selected) =>
+                      setRequestOverrides((prev) => ({
+                        ...prev,
+                        tags: selected.map((i) => i.id),
+                      }))
+                    }
+                    title={t("jellyseerr.tags")}
+                  />
+                  <Dropdown
+                    data={users}
+                    titleExtractor={(item) => item.displayName}
+                    placeholderText={jellyseerrUser!.displayName}
+                    keyExtractor={(item) => item.id.toString() || ""}
+                    label={t("jellyseerr.request_as")}
+                    onSelected={(item) =>
+                      item &&
+                      setRequestOverrides((prev) => ({
+                        ...prev,
+                        userId: item?.id,
+                      }))
+                    }
+                    title={t("jellyseerr.request_as")}
+                  />
                 </>
               )}
             </View>

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],

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],

components/jellyseerr/discover/MovieTvSlide.tsx

@@ -11,12 +11,16 @@ import {
   useJellyseerr,
 } from "@/hooks/useJellyseerr";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
+import type {
+  MovieResult,
+  TvResult,
+} from "@/utils/jellyseerr/server/models/Search";
 
 const MovieTvSlide: React.FC<SlideProps & ViewProps> = ({
   slide,
   ...props
 }) => {
-  const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
+  const { jellyseerrApi } = useJellyseerr();
 
   const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
     queryKey: ["jellyseerr", "discover", slide.id],
@@ -65,9 +69,7 @@ const MovieTvSlide: React.FC<SlideProps & ViewProps> = ({
       uniqBy(
         data?.pages
           ?.filter((p) => p?.results.length)
-          .flatMap((p) =>
-            p?.results.filter((r) => isJellyseerrMovieOrTvResult(r)),
-          ),
+          .flatMap((p) => p?.results),
         "id",
       ),
     [data],
@@ -84,7 +86,12 @@ const MovieTvSlide: React.FC<SlideProps & ViewProps> = ({
         onEndReached={() => {
           if (hasNextPage) fetchNextPage();
         }}
-        renderItem={(item) => <JellyseerrPoster item={item} key={item?.id} />}
+        renderItem={(item) => (
+          <JellyseerrPoster
+            item={item as MovieResult | TvResult}
+            key={item?.id}
+          />
+        )}
       />
     )
   );

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> & {
-  profileName: string;
-  canRemove: boolean;
-};
-
-const RequestCard: React.FC<{ request: ExtendedMediaRequest }> = ({
-  request,
-}) => {
+const RequestCard: React.FC<{ request: MediaRequest }> = ({ request }) => {
   const { jellyseerrApi } = useJellyseerr();
 
   const { data: details } = useQuery({
@@ -74,15 +67,9 @@ const RecentRequestsSlide: React.FC<SlideProps & ViewProps> = ({
       <Slide
         {...props}
         slide={slide}
-        data={
-          requests.results.map((item) => ({
-            ...item,
-            profileName: item.profileName ?? "Unknown",
-            canRemove: Boolean(item.canRemove),
-          })) as ExtendedMediaRequest[]
-        }
+        data={requests.results}
         keyExtractor={(item) => item.id.toString()}
-        renderItem={(item: ExtendedMediaRequest) => (
+        renderItem={(item: NonFunctionProperties<MediaRequest>) => (
           <RequestCard request={item} />
         )}
       />

components/library/LibraryItemCard.tsx

@@ -41,7 +41,7 @@ const icons: Record<CollectionType, IconName> = {
 export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const { settings } = useSettings();
+  const [settings] = useSettings(null);
 
   const { t } = useTranslation();
 

components/list/ListItem.tsx

@@ -34,7 +34,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
       <TouchableOpacity
         disabled={disabled}
         onPress={onPress}
-        className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${
+        className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 pl-4 ${
           disabled ? "opacity-50" : ""
         }`}
         {...(viewProps as any)}
@@ -54,7 +54,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
     );
   return (
     <View
-      className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${
+      className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 pl-4 ${
         disabled ? "opacity-50" : ""
       }`}
       {...viewProps}
@@ -106,10 +106,7 @@ const ListItemContent = ({
             {title}
           </Text>
           {subtitle && (
-            <Text
-              className='text-[#9899A1] text-[12px] mt-0.5'
-              numberOfLines={2}
-            >
+            <Text className='text-[#9899A1] text-sm mt-0.5' numberOfLines={2}>
               {subtitle}
             </Text>
           )}

components/medialists/MediaListSection.tsx

@@ -12,7 +12,7 @@ import { useAtom } from "jotai";
 import { useCallback } from "react";
 import { View, type ViewProps } from "react-native";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { InfiniteHorizontalScroll } from "../common/InfiniteHorizontalScroll";
+import { InfiniteHorizontalScroll } from "../common/InfiniteHorrizontalScroll";
 import { Text } from "../common/Text";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { ItemCardText } from "../ItemCardText";

components/posters/JellyseerrPoster.tsx

@@ -20,7 +20,6 @@ import { MediaStatus } from "@/utils/jellyseerr/server/constants/media";
 import type MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
 import type { DownloadingItem } from "@/utils/jellyseerr/server/lib/downloadtracker";
 import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
-import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
 import type {
   MovieResult,
   TvResult,
@@ -28,7 +27,7 @@ import type {
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 
 interface Props extends ViewProps {
-  item?: MovieResult | TvResult | MovieDetails | TvDetails | PersonCreditCast;
+  item?: MovieResult | TvResult | MovieDetails | TvDetails;
   horizontal?: boolean;
   showDownloadInfo?: boolean;
   mediaRequest?: MediaRequest;

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>
-  );
-};

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>
-  );
-};

components/series/CastAndCrew.tsx

@@ -10,8 +10,9 @@ import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { HorizontalScroll } from "../common/HorizontalScroll";
+import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
+import { itemRouter } from "../common/TouchableItemRouter";
 import Poster from "../posters/Poster";
 
 interface Props extends ViewProps {
@@ -23,21 +24,19 @@ 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> = {};
+    const people: BaseItemPerson[] = [];
     item?.People?.forEach((person) => {
-      if (!person.Id) return;
-
-      const existingPerson = people[person.Id];
+      const existingPerson = people.find((p) => p.Id === person.Id);
       if (existingPerson) {
         existingPerson.Role = `${existingPerson.Role}, ${person.Role}`;
       } else {
-        people[person.Id] = person;
+        people.push(person);
       }
     });
-    return Object.values(people);
+    return people;
   }, [item?.People]);
 
   if (!from) return null;
@@ -55,12 +54,9 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
         renderItem={(i) => (
           <TouchableOpacity
             onPress={() => {
-              if (i.Id) {
-                router.push({
-                  pathname: "/persons/[personId]",
-                  params: { personId: i.Id },
-                });
-              }
+              const url = itemRouter(i, from);
+              // @ts-expect-error
+              router.push(url);
             }}
             className='flex flex-col w-28'
           >

components/series/CurrentSeries.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
-import { HorizontalScroll } from "../common/HorizontalScroll";
+import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
 import Poster from "../posters/Poster";
 

components/series/JellyseerrSeasons.tsx

@@ -11,7 +11,7 @@ import { orderBy } from "lodash";
 import type React from "react";
 import { useCallback, useMemo, useState } from "react";
 import { Alert, TouchableOpacity, View } from "react-native";
-import { HorizontalScroll } from "@/components/common/HorizontalScroll";
+import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
 import { Text } from "@/components/common/Text";
 import { Tags } from "@/components/GenreTags";
 import { dateOpts } from "@/components/jellyseerr/DetailFacts";

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
-      groups={optionGroups}
-      trigger={
-        <View className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
-          <Text>
-            {t("item_card.season")} {seasonIndex}
-          </Text>
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <View className='flex flex-row'>
+          <TouchableOpacity className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
+            <Text>
+              {t("item_card.season")} {seasonIndex}
+            </Text>
+          </TouchableOpacity>
         </View>
-      }
-      title={t("item_card.seasons")}
-    />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        loop={true}
+        side='bottom'
+        align='start'
+        alignOffset={0}
+        avoidCollisions={true}
+        collisionPadding={8}
+        sideOffset={8}
+      >
+        <DropdownMenu.Label>{t("item_card.seasons")}</DropdownMenu.Label>
+        {seasons?.sort(sortByIndex).map((season: any) => {
+          const title =
+            season[keys.title] || season.Name || `Season ${season.IndexNumber}`;
+          return (
+            <DropdownMenu.Item
+              key={season.Id || season.IndexNumber}
+              onSelect={() => onSelect(season)}
+            >
+              <DropdownMenu.ItemTitle>{title}</DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          );
+        })}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
   );
 };

components/series/SeasonEpisodesCarousel.tsx

@@ -1,17 +1,18 @@
 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,
   type HorizontalScrollRef,
-} from "../common/HorizontalScroll";
+} from "../common/HorrizontalScroll";
 import { ItemCardText } from "../ItemCardText";
 
 interface Props extends ViewProps {
@@ -29,10 +30,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const { getDownloadedItems } = useDownload();
-  const downloadedFiles = useMemo(
-    () => getDownloadedItems(),
-    [getDownloadedItems],
-  );
+  const downloadedFiles = getDownloadedItems();
 
   const scrollRef = useRef<HorizontalScrollRef>(null);
 
@@ -44,7 +42,11 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
     return item?.SeasonId;
   }, [item]);
 
-  const { data: episodes, isPending } = useQuery({
+  const {
+    data: episodes,
+    isLoading,
+    isFetching,
+  } = useQuery({
     queryKey: ["episodes", seasonId, isOffline],
     queryFn: async () => {
       if (isOffline) {
@@ -59,7 +61,6 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
         userId: user.Id,
         seasonId: seasonId || undefined,
         seriesId: item.SeriesId,
-        enableUserData: true,
         fields: [
           "ItemCounts",
           "PrimaryImageAspectRatio",
@@ -73,6 +74,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);
@@ -89,7 +132,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
       ref={scrollRef}
       data={episodes}
       extraData={item}
-      loading={loading || isPending}
+      loading={loading || isLoading || isFetching}
       renderItem={(_item, _idx) => (
         <TouchableOpacity
           key={_item.Id}

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";
@@ -73,7 +74,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
     return season.Id!;
   }, [seasons, seasonIndex]);
 
-  const { data: episodes, isPending } = useQuery({
+  const { data: episodes, isFetching } = useQuery({
     queryKey: ["episodes", item.Id, selectedSeasonId],
     queryFn: async () => {
       if (!api || !user?.Id || !item.Id || !selectedSeasonId) {
@@ -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)
@@ -97,9 +98,32 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
 
       return res.data.Items;
     },
+    select: (data) =>
+      [...(data || [])].sort(
+        (a, b) => (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0),
+      ),
     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(() => {
@@ -145,7 +169,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
         ) : null}
       </View>
       <View className='px-4 flex flex-col mt-4'>
-        {isPending ? (
+        {isFetching ? (
           <View
             style={{
               minHeight: 144 * nrOfEpisodes,

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}>

components/settings/AppLanguageSelector.tsx

@@ -1,45 +1,20 @@
-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 {}
 
 export const AppLanguageSelector: React.FC<Props> = () => {
   const isTv = Platform.isTV;
-  const { settings, updateSettings } = useSettings();
+  const [settings, updateSettings] = useSettings(null);
   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
-            groups={optionGroups}
-            trigger={
-              <View className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <TouchableOpacity className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
                 <Text>
                   {APP_LANGUAGES.find(
                     (l) => l.value === settings?.preferedLanguage,
                   )?.label || t("home.settings.languages.system")}
                 </Text>
-              </View>
-            }
-            title={t("home.settings.languages.title")}
-          />
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side='bottom'
+              align='start'
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>
+                {t("home.settings.languages.title")}
+              </DropdownMenu.Label>
+              <DropdownMenu.Item
+                key={"unknown"}
+                onSelect={() => {
+                  updateSettings({
+                    preferedLanguage: undefined,
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle>
+                  {t("home.settings.languages.system")}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+              {APP_LANGUAGES?.map((l) => (
+                <DropdownMenu.Item
+                  key={l?.value ?? "unknown"}
+                  onSelect={() => {
+                    updateSettings({
+                      preferedLanguage: l.value,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
         </ListItem>
       </ListGroup>
     </View>

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 {}
@@ -16,44 +17,11 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
   const isTv = Platform.isTV;
 
   const media = useMedia();
-  const { pluginSettings } = useSettings();
+  const [_, __, pluginSettings] = useSettings(null);
   const { settings, updateSettings } = media;
   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
-            groups={optionGroups}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <TouchableOpacity 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>
-            }
-            title={t("home.settings.audio.language")}
-          />
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side='bottom'
+              align='start'
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>
+                {t("home.settings.audio.language")}
+              </DropdownMenu.Label>
+              <DropdownMenu.Item
+                key={"none-audio"}
+                onSelect={() => {
+                  updateSettings({
+                    defaultAudioLanguage: null,
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle>
+                  {t("home.settings.audio.none")}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+              {cultures?.map((l) => (
+                <DropdownMenu.Item
+                  key={l?.ThreeLetterISOLanguageName ?? "unknown"}
+                  onSelect={() => {
+                    updateSettings({
+                      defaultAudioLanguage: l,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>
+                    {l.DisplayName}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
         </ListItem>
       </ListGroup>
     </View>

components/settings/ChromecastSettings.tsx

@@ -4,7 +4,7 @@ import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 
 export const ChromecastSettings: React.FC = ({ ...props }) => {
-  const { settings, updateSettings } = useSettings();
+  const [settings, updateSettings] = useSettings(null);
   return (
     <View {...props}>
       <ListGroup title={"Chromecast"}>

components/settings/Dashboard.tsx

@@ -7,7 +7,7 @@ import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 
 export const Dashboard = () => {
-  const { settings } = useSettings();
+  const [settings, _updateSettings] = useSettings(null);
   const { sessions = [] } = useSessions({} as useSessionsProps);
   const router = useRouter();
 

components/settings/DownloadSettings.tsx

@@ -7,13 +7,13 @@ import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 
 export default function DownloadSettings({ ...props }) {
-  const { settings, updateSettings, pluginSettings } = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings(null);
   const { t } = useTranslation();
 
   const allDisabled = useMemo(
     () =>
       pluginSettings?.remuxConcurrentLimit?.locked === true &&
-      pluginSettings?.autoDownload?.locked === true,
+      pluginSettings?.autoDownload.locked === true,
     [pluginSettings],
   );