fix: design

Co-authored-by: SuxAsLux <suxaslux@gmail.com>
Co-authored-by: Gauvain <68083474+Gauvino@users.noreply.github.com>
Co-authored-by: Simon Eklundh <simon.eklundh@proton.me>

.cursor/rules/external-terminal.mdc

@@ -0,0 +1,5 @@
+---
+alwaysApply: true
+---
+
+Don't run the development server or build anything. Assume the user has a separate terminal. Tell the user what to execute. 

.github/copilot-instructions.md

@@ -0,0 +1,60 @@
+# 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

@@ -0,0 +1,478 @@
+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

@@ -1,93 +0,0 @@
-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

@@ -0,0 +1,280 @@
+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

@@ -1,95 +0,0 @@
-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@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         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@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0
+        uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended,security-and-quality
 
       - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0
+        uses: github/codeql-action/autobuild@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0
+        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5

.github/workflows/crowdin.yml

@@ -0,0 +1,34 @@
+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@595b5aeba73380359d98a5e087f648dbb0edce1b # v4.7.3
+        uses: actions/dependency-review-action@56339e523c0409420f6c2c9a2f4292bbb3c07dd3 # v4.8.0
         with:
           fail-on-severity: high
           base-ref: ${{ github.event.pull_request.base.sha || 'develop' }}
@@ -65,6 +65,7 @@ jobs:
 
   expo-doctor:
     name: 🚑 Expo Doctor Check
+    if: false
     runs-on: ubuntu-24.04
     steps:
       - name: 🛒 Checkout repository
@@ -106,7 +107,7 @@ jobs:
           fetch-depth: 0
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version: '24.x'
 

.github/workflows/stale.yml

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

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

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

.gitignore

@@ -46,4 +46,5 @@ streamyfin-4fec1-firebase-adminsdk.json
 .env.local
 *.aab
 /version-backup-*
-bun.lockb
+bun.lockb
+modules/background-downloader/android/build/*

GLOBAL_MODAL_GUIDE.md

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

app.config.js

@@ -6,9 +6,6 @@ module.exports = ({ config }) => {
       "react-native-google-cast",
       { useDefaultExpandedMediaControls: true },
     ]);
-
-    // Add the background downloader plugin only for non-TV builds
-    config.plugins.push("./plugins/withRNBackgroundDownloader.js");
   }
   return {
     android: {

app.json

@@ -2,12 +2,13 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.35.0",
+    "version": "0.39.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
     "userInterfaceStyle": "dark",
     "jsEngine": "hermes",
+    "newArchEnabled": true,
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "requireFullScreen": true,
@@ -37,7 +38,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 66,
+      "versionCode": 71,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon-android-plain.png",
         "monochromeImage": "./assets/images/icon-android-themed.png",
@@ -49,6 +50,7 @@
         "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK",
         "android.permission.WRITE_SETTINGS"
       ],
+      "blockedPermissions": ["android.permission.ACTIVITY_RECOGNITION"],
       "googleServicesFile": "./google-services.json"
     },
     "plugins": [
@@ -76,6 +78,7 @@
             "useFrameworks": "static"
           },
           "android": {
+            "buildArchs": ["arm64-v8a", "x86_64"],
             "compileSdkVersion": 35,
             "targetSdkVersion": 35,
             "buildToolsVersion": "35.0.0",
@@ -121,7 +124,7 @@
       [
         "expo-splash-screen",
         {
-          "backgroundColor": "#2e2e2e",
+          "backgroundColor": "#010101",
           "image": "./assets/images/icon-ios-plain.png",
           "imageWidth": 100
         }
@@ -153,7 +156,6 @@
     },
     "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: true,
+          headerShown: Platform.OS !== "ios",
           headerLargeTitle: true,
           headerTitle: t("tabs.custom_links"),
-          headerBlurEffect: "prominent",
+          headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
         }}

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

@@ -11,12 +11,8 @@ export default function SearchLayout() {
         name='index'
         options={{
           headerShown: !Platform.isTV,
-          headerLargeTitle: true,
           headerTitle: t("tabs.favorites"),
-          headerLargeStyle: {
-            backgroundColor: "black",
-          },
-          headerBlurEffect: "prominent",
+          headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
         }}

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

@@ -21,19 +21,21 @@ export default function IndexLayout() {
         name='index'
         options={{
           headerShown: !Platform.isTV,
-          headerLargeTitle: true,
           headerTitle: t("tabs.home"),
-          headerBlurEffect: "prominent",
-          headerLargeStyle: {
-            backgroundColor: "black",
-          },
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
+          headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerRight: () => (
-            <View className='flex flex-row items-center space-x-2'>
+            <View className='flex flex-row items-center px-2'>
               {!Platform.isTV && (
                 <>
-                  <Chromecast.Chromecast />
+                  <Chromecast.Chromecast background='transparent' />
+
                   {user?.Policy?.IsAdministrator && <SessionsButton />}
                   <SettingsButton />
                 </>
@@ -46,48 +48,88 @@ export default function IndexLayout() {
         name='downloads/index'
         options={{
           title: t("home.downloads.downloads_title"),
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='downloads/[seriesId]'
         options={{
           title: t("home.downloads.tvseries"),
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='sessions/index'
         options={{
           title: t("home.sessions.title"),
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='settings'
         options={{
           title: t("home.settings.settings_title"),
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='settings/marlin-search/page'
         options={{
           title: "",
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='settings/jellyseerr/page'
         options={{
           title: "",
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='settings/hide-libraries/page'
         options={{
           title: "",
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
         name='settings/logs/page'
         options={{
           title: "",
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
         }}
       />
       <Stack.Screen
@@ -95,6 +137,11 @@ export default function IndexLayout() {
         options={{
           headerShown: false,
           title: "",
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
           presentation: "modal",
         }}
       />
@@ -105,6 +152,11 @@ export default function IndexLayout() {
         name='collections/[collectionId]'
         options={{
           title: "",
+          headerLeft: () => (
+            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
           headerShown: true,
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios",
@@ -138,14 +190,13 @@ const SessionsButton = () => {
       onPress={() => {
         router.push("/(auth)/sessions");
       }}
+      className='mr-4'
     >
-      <View className='mr-4'>
-        <Ionicons
-          name='play-circle'
-          color={sessions.length === 0 ? "white" : "#9333ea"}
-          size={25}
-        />
-      </View>
+      <Ionicons
+        name='play-circle'
+        color={sessions.length === 0 ? "white" : "#9333ea"}
+        size={28}
+      />
     </TouchableOpacity>
   );
 };

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

@@ -23,12 +23,12 @@ export default function page() {
   const [seasonIndexState, setSeasonIndexState] = useState<SeasonIndexState>(
     {},
   );
-  const { getDownloadedItems, deleteItems } = useDownload();
+  const { downloadedItems, deleteItems } = useDownload();
 
   const series = useMemo(() => {
     try {
       return (
-        getDownloadedItems()
+        downloadedItems
           ?.filter((f) => f.item.SeriesId === seriesId)
           ?.sort(
             (a, b) => a?.item.ParentIndexNumber! - b.item.ParentIndexNumber!,
@@ -37,7 +37,7 @@ export default function page() {
     } catch {
       return [];
     }
-  }, [getDownloadedItems]);
+  }, [downloadedItems, seriesId]);
 
   // Group episodes by season in a single pass
   const seasonGroups = useMemo(() => {
@@ -91,7 +91,7 @@ export default function page() {
         title: series[0].item.SeriesName,
       });
     } else {
-      storage.delete(seriesId);
+      storage.remove(seriesId);
       router.back();
     }
   }, [series]);
@@ -107,7 +107,12 @@ export default function page() {
         },
         {
           text: "Delete",
-          onPress: () => deleteItems(groupBySeason),
+          onPress: () =>
+            deleteItems(
+              groupBySeason
+                .map((episode) => episode.Id!)
+                .filter((id) => id !== undefined),
+            ),
           style: "destructive",
         },
       ],
@@ -140,7 +145,7 @@ export default function page() {
           </View>
         </View>
       )}
-      <ScrollView key={seasonIndex} className='px-4'>
+      <ScrollView key={seasonIndex} style={{ paddingHorizontal: 16 }}>
         {groupBySeason.map((episode, index) => (
           <EpisodeCard key={index} item={episode} />
         ))}

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

@@ -27,12 +27,8 @@ export default function page() {
   const navigation = useNavigation();
   const { t } = useTranslation();
   const [queue, setQueue] = useAtom(queueAtom);
-  const {
-    removeProcess,
-    getDownloadedItems,
-    deleteFileByType,
-    deleteAllFiles,
-  } = useDownload();
+  const { removeProcess, downloadedItems, deleteFileByType, deleteAllFiles } =
+    useDownload();
   const router = useRouter();
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
@@ -62,7 +58,7 @@ export default function page() {
     );
   };
 
-  const downloadedFiles = getDownloadedItems();
+  const downloadedFiles = downloadedItems;
 
   const movies = useMemo(() => {
     try {
@@ -90,10 +86,26 @@ 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: () => (
-        <TouchableOpacity onPress={bottomSheetModalRef.current?.present}>
+        <TouchableOpacity
+          onPress={bottomSheetModalRef.current?.present}
+          className='px-2'
+        >
           <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
         </TouchableOpacity>
       ),
@@ -128,15 +140,39 @@ 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) =>
+          item.item.Type &&
+          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()]);
+    await Promise.all([deleteMovies(), deleteShows(), deleteOtherMedia()]);
 
   return (
     <>
       <View style={{ flex: 1 }}>
         <ScrollView showsVerticalScrollIndicator={false} className='flex-1'>
           <View className='py-4'>
-            <View className='mb-4 flex flex-col space-y-4 px-4'>
+            <View className='mb-4 flex flex-col gap-y-4 px-4'>
               <View className='bg-neutral-900 p-4 rounded-2xl'>
                 <Text className='text-lg font-bold'>
                   {t("home.downloads.queue")}
@@ -144,7 +180,7 @@ export default function page() {
                 <Text className='text-xs opacity-70 text-red-600'>
                   {t("home.downloads.queue_hint")}
                 </Text>
-                <View className='flex flex-col space-y-2 mt-2'>
+                <View className='flex flex-col gap-y-2 mt-2'>
                   {queue.map((q, index) => (
                     <TouchableOpacity
                       onPress={() =>
@@ -238,6 +274,34 @@ 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'>
@@ -273,6 +337,11 @@ 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/settings/HomeIndex";
+import { HomeIndex } from "@/components/home/HomeIndex";
 
 export default function page() {
   return <HomeIndex />;

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

@@ -258,7 +258,7 @@ const SessionCard = ({ session }: SessionCardProps) => {
             </View>
 
             {/* Session controls */}
-            <View className='flex flex-row mt-2 space-x-4 justify-center'>
+            <View className='flex flex-row mt-2 gap-x-4 justify-center'>
               <TouchableOpacity
                 onPress={handlePrevious}
                 disabled={isControlLoading[PlaystateCommand.PreviousTrack]}
@@ -468,6 +468,7 @@ const TranscodingStreamView = ({
 };
 
 const TranscodingView = ({ session }: SessionCardProps) => {
+  const { t } = useTranslation();
   const videoStream = useMemo(() => {
     return session.NowPlayingItem?.MediaStreams?.filter(
       (s) => s.Type === "Video",
@@ -501,7 +502,7 @@ const TranscodingView = ({ session }: SessionCardProps) => {
   return (
     <View className='flex flex-col bg-neutral-800 rounded-b-2xl p-4 pt-2'>
       <TranscodingStreamView
-        title='Video'
+        title={t("common.video")}
         properties={{
           resolution: videoStreamTitle(),
           bitrate: videoStream?.BitRate,
@@ -518,7 +519,7 @@ const TranscodingView = ({ session }: SessionCardProps) => {
       />
 
       <TranscodingStreamView
-        title='Audio'
+        title={t("common.audio")}
         properties={{
           language: audioStream?.Language,
           bitrate: audioStream?.BitRate,
@@ -536,7 +537,7 @@ const TranscodingView = ({ session }: SessionCardProps) => {
 
       {subtitleStream && (
         <TranscodingStreamView
-          title='Subtitle'
+          title={t("common.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'>
+          <Text className='text-red-600 px-2'>
             {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(null);
+  const { settings, updateSettings, pluginSettings } = useSettings();
   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 [_settings, _updateSettings, pluginSettings] = useSettings(null);
+  const { pluginSettings } = useSettings();
 
   return (
     <DisabledSetting

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

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

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

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

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

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

app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/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 } = useJellyseerr();
+  const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
 
   const { companyId, image, type } = local as unknown as {
     companyId: string;
@@ -53,7 +53,10 @@ export default function page() {
       uniqBy(
         data?.pages
           ?.filter((p) => p?.results.length)
-          .flatMap((p) => p?.results ?? []),
+          .flatMap(
+            (p) =>
+              p?.results.filter((r) => isJellyseerrMovieOrTvResult(r)) ?? [],
+          ),
         "id",
       ) ?? [],
     [data],
@@ -98,9 +101,7 @@ export default function page() {
           }}
         />
       }
-      renderItem={(item, _index) => (
-        <JellyseerrPoster item={item as MovieResult | TvResult} />
-      )}
+      renderItem={(item, _index) => <JellyseerrPoster item={item} />}
     />
   );
 }

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

@@ -8,14 +8,10 @@ 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 } = useJellyseerr();
+  const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
 
   const { genreId, name, type } = local as unknown as {
     genreId: string;
@@ -51,7 +47,10 @@ export default function page() {
       uniqBy(
         data?.pages
           ?.filter((p) => p?.results.length)
-          .flatMap((p) => p?.results ?? []),
+          .flatMap(
+            (p) =>
+              p?.results.filter((r) => isJellyseerrMovieOrTvResult(r)) ?? [],
+          ),
         "id",
       ) ?? [],
     [data],
@@ -62,7 +61,7 @@ export default function page() {
       jellyseerrApi
         ? flatData.map((r) =>
             jellyseerrApi.imageProxy(
-              (r as TvResult | MovieResult).backdropPath,
+              r.backdropPath,
               "w1920_and_h800_multi_faces",
             ),
           )
@@ -92,9 +91,7 @@ export default function page() {
           {name}
         </Text>
       }
-      renderItem={(item, _index) => (
-        <JellyseerrPoster item={item as MovieResult | TvResult} />
-      )}
+      renderItem={(item, _index) => <JellyseerrPoster item={item} />}
     />
   );
 }

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

@@ -19,31 +19,29 @@ import { Text } from "@/components/common/Text";
 import { GenreTags } from "@/components/GenreTags";
 import Cast from "@/components/jellyseerr/Cast";
 import DetailFacts from "@/components/jellyseerr/DetailFacts";
+import RequestModal from "@/components/jellyseerr/RequestModal";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { JellyserrRatings } from "@/components/Ratings";
 import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
 import { ItemActions } from "@/components/series/SeriesActions";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
+import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
 import {
   type IssueType,
   IssueTypeName,
 } from "@/utils/jellyseerr/server/constants/issue";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
+import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
+import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 import type {
   MovieResult,
   TvResult,
 } from "@/utils/jellyseerr/server/models/Search";
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import RequestModal from "@/components/jellyseerr/RequestModal";
-import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
-import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
-import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
-
 const Page: React.FC = () => {
   const insets = useSafeAreaInsets();
   const params = useLocalSearchParams();
@@ -139,7 +137,15 @@ const Page: React.FC = () => {
     }
 
     requestMedia(mediaTitle, body, refetch);
-  }, [details, result, requestMedia, hasAdvancedRequestPermission]);
+  }, [
+    details,
+    result,
+    requestMedia,
+    hasAdvancedRequestPermission,
+    mediaTitle,
+    refetch,
+    mediaType,
+  ]);
 
   const isAnime = useMemo(
     () =>
@@ -148,6 +154,24 @@ 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({
@@ -208,7 +232,7 @@ const Page: React.FC = () => {
         }
       >
         <View className='flex flex-col'>
-          <View className='space-y-4'>
+          <View className='gap-y-4'>
             <View className='px-4'>
               <View className='flex flex-row justify-between w-full'>
                 <View className='flex flex-col w-56'>
@@ -277,12 +301,16 @@ const Page: React.FC = () => {
                     <Button
                       className='flex-1 bg-purple-600/50 border-purple-400 ring-purple-400 text-purple-100'
                       onPress={() => {
-                        const url =
-                          mediaType === MediaType.MOVIE
-                            ? `/(auth)/(tabs)/(search)/items/page?id=${details?.mediaInfo.jellyfinMediaId}`
-                            : `/(auth)/(tabs)/(search)/series/${details?.mediaInfo.jellyfinMediaId}`;
-                        // @ts-expect-error
-                        router.push(url);
+                        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 },
+                        });
                       }}
                       iconLeft={
                         <Ionicons name='play-outline' size={20} color='white' />
@@ -292,7 +320,7 @@ const Page: React.FC = () => {
                         borderStyle: "solid",
                       }}
                     >
-                      <Text className='text-sm'>Play</Text>
+                      <Text className='text-sm'>{t("common.play")}</Text>
                     </Button>
                   </View>
                 )
@@ -352,50 +380,23 @@ const Page: React.FC = () => {
                 </Text>
               </View>
               <View className='flex flex-col space-y-2 items-start'>
-                <View className='flex flex-col'>
-                  <DropdownMenu.Root>
-                    <DropdownMenu.Trigger>
-                      <View className='flex flex-col'>
-                        <Text className='opacity-50 mb-1 text-xs'>
-                          {t("jellyseerr.issue_type")}
+                <View className='flex flex-col w-full'>
+                  <Text className='opacity-50 mb-1 text-xs'>
+                    {t("jellyseerr.issue_type")}
+                  </Text>
+                  <PlatformDropdown
+                    groups={issueTypeOptionGroups}
+                    trigger={
+                      <View className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                        <Text numberOfLines={1}>
+                          {issueType
+                            ? IssueTypeName[issueType]
+                            : t("jellyseerr.select_an_issue")}
                         </Text>
-                        <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-                          <Text style={{}} className='' numberOfLines={1}>
-                            {issueType
-                              ? IssueTypeName[issueType]
-                              : t("jellyseerr.select_an_issue")}
-                          </Text>
-                        </TouchableOpacity>
                       </View>
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Content
-                      loop={false}
-                      side='bottom'
-                      align='center'
-                      alignOffset={0}
-                      avoidCollisions={true}
-                      collisionPadding={0}
-                      sideOffset={0}
-                    >
-                      <DropdownMenu.Label>
-                        {t("jellyseerr.types")}
-                      </DropdownMenu.Label>
-                      {Object.entries(IssueTypeName)
-                        .reverse()
-                        .map(([key, value], _idx) => (
-                          <DropdownMenu.Item
-                            key={value}
-                            onSelect={() =>
-                              setIssueType(key as unknown as IssueType)
-                            }
-                          >
-                            <DropdownMenu.ItemTitle>
-                              {value}
-                            </DropdownMenu.ItemTitle>
-                          </DropdownMenu.Item>
-                        ))}
-                    </DropdownMenu.Content>
-                  </DropdownMenu.Root>
+                    }
+                    title={t("jellyseerr.types")}
+                  />
                 </View>
 
                 <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full'>

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

@@ -10,10 +10,6 @@ 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();
@@ -106,9 +102,7 @@ export default function page() {
       MainContent={() => (
         <OverviewText text={data?.details?.biography} className='mt-4' />
       )}
-      renderItem={(item, _index) => (
-        <JellyseerrPoster item={item as MovieResult | TvResult} />
-      )}
+      renderItem={(item, _index) => <JellyseerrPoster item={item} />}
     />
   );
 }

app/(auth)/(tabs)/(home,libraries,search,favorites)/persons/[personId].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/InfiniteHorrizontalScroll";
+import { InfiniteHorizontalScroll } from "@/components/common/InfiniteHorizontalScroll";
 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 { actorId } = local as { actorId: string };
+  const { personId } = local as { personId: string };
   const { t } = useTranslation();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
   const { data: item, isLoading: l1 } = useQuery({
-    queryKey: ["item", actorId],
+    queryKey: ["item", personId],
     queryFn: async () =>
       await getUserItemData({
         api,
         userId: user?.Id,
-        itemId: actorId,
+        itemId: personId,
       }),
-    enabled: !!actorId && !!api,
+    enabled: !!personId && !!api,
     staleTime: 60,
   });
 
@@ -50,7 +50,7 @@ const page: React.FC = () => {
 
       const response = await getItemsApi(api).getItems({
         userId: user.Id,
-        personIds: [actorId],
+        personIds: [personId],
         startIndex: pageParam,
         limit: 16,
         sortOrder: ["Descending", "Descending", "Ascending"],
@@ -68,7 +68,7 @@ const page: React.FC = () => {
 
       return response.data;
     },
-    [api, user?.Id, actorId],
+    [api, user?.Id, personId],
   );
 
   const backdropUrl = useMemo(
@@ -105,7 +105,7 @@ const page: React.FC = () => {
         />
       }
     >
-      <View className='flex flex-col space-y-4 my-4'>
+      <View className='flex flex-col gap-y-4 my-4'>
         <View className='px-4 mb-4'>
           <MoviesTitleHeader item={item} className='mb-4' />
           <OverviewText text={item.Overview} />
@@ -131,7 +131,7 @@ const page: React.FC = () => {
             </TouchableItemRouter>
           )}
           queryFn={fetchItems}
-          queryKey={["actor", "movies", actorId]}
+          queryKey={["actor", "movies", personId]}
         />
         <View className='h-12' />
       </View>

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

@@ -77,7 +77,13 @@ const Page = () => {
     } else {
       _setSortBy([SortByOption.SortName]);
     }
-  }, []);
+  }, [
+    libraryId,
+    sortOrderPreference,
+    sortByPreference,
+    _setSortOrder,
+    _setSortBy,
+  ]);
 
   const setSortBy = useCallback(
     (sortBy: SortByOption[]) => {
@@ -87,7 +93,7 @@ const Page = () => {
       }
       _setSortBy(sortBy);
     },
-    [libraryId, sortByPreference],
+    [libraryId, sortByPreference, setSortByPreference, _setSortBy],
   );
 
   const setSortOrder = useCallback(
@@ -101,7 +107,7 @@ const Page = () => {
       }
       _setSortOrder(sortOrder);
     },
-    [libraryId, sortOrderPreference],
+    [libraryId, sortOrderPreference, setOderByPreference, _setSortOrder],
   );
 
   const nrOfCols = useMemo(() => {

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

@@ -1,15 +1,13 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
+import { useTranslation } from "react-i18next";
 import { Platform } from "react-native";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { useSettings } from "@/utils/atoms/settings";
 
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import { useTranslation } from "react-i18next";
-
 export default function IndexLayout() {
-  const [settings, updateSettings, pluginSettings] = useSettings(null);
+  const { settings, updateSettings, pluginSettings } = useSettings();
 
   const { t } = useTranslation();
 
@@ -21,178 +19,120 @@ export default function IndexLayout() {
         name='index'
         options={{
           headerShown: !Platform.isTV,
-          headerLargeTitle: true,
           headerTitle: t("tabs.library"),
-          headerBlurEffect: "prominent",
-          headerLargeStyle: {
-            backgroundColor: "black",
-          },
+          headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerRight: () =>
             !pluginSettings?.libraryOptions?.locked &&
             !Platform.isTV && (
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger>
+              <PlatformDropdown
+                trigger={
                   <Ionicons
                     name='ellipsis-horizontal-outline'
                     size={24}
                     color='white'
                   />
-                </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>
+                }
+                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,
+                            },
+                          }),
+                      },
+                    ],
+                  },
+                ]}
+              />
             ),
         }}
       />
@@ -201,7 +141,7 @@ export default function IndexLayout() {
         options={{
           title: "",
           headerShown: !Platform.isTV,
-          headerBlurEffect: "prominent",
+          headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
         }}
@@ -214,7 +154,7 @@ export default function IndexLayout() {
         options={{
           title: "",
           headerShown: !Platform.isTV,
-          headerBlurEffect: "prominent",
+          headerBlurEffect: "none",
           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(null);
+  const { settings } = useSettings();
 
   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,
-        paddingRight: insets.right,
+        paddingLeft: insets.left + 17,
+        paddingRight: insets.right + 17,
       }}
       data={libraries}
       renderItem={({ item }) => <LibraryItemCard library={item} />}
@@ -105,7 +105,6 @@ export default function index() {
           <View className='h-4' />
         )
       }
-      estimatedItemSize={200}
     />
   );
 }

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

@@ -14,12 +14,8 @@ export default function SearchLayout() {
         name='index'
         options={{
           headerShown: !Platform.isTV,
-          headerLargeTitle: true,
           headerTitle: t("tabs.search"),
-          headerLargeStyle: {
-            backgroundColor: "black",
-          },
-          headerBlurEffect: "prominent",
+          headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
         }}

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

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

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

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

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

@@ -2,6 +2,7 @@ import {
   type BaseItemDto,
   type MediaSourceInfo,
   PlaybackOrder,
+  PlaybackProgressInfo,
   PlaybackStartInfo,
   RepeatMode,
 } from "@jellyfin/sdk/lib/generated-client";
@@ -21,6 +22,12 @@ 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";
@@ -68,7 +75,10 @@ export default function page() {
     : require("react-native-volume-manager");
 
   const downloadUtils = useDownload();
-  const downloadedFiles = downloadUtils.getDownloadedItems();
+  const downloadedFiles = useMemo(
+    () => downloadUtils.getDownloadedItems(),
+    [downloadUtils.getDownloadedItems],
+  );
 
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
@@ -97,7 +107,7 @@ export default function page() {
     /** Playback position in ticks. */
     playbackPosition?: string;
   }>();
-  const [_settings] = useSettings(null);
+  const { settings } = useSettings();
 
   const offline = offlineStr === "true";
   const playbackManager = usePlaybackManager();
@@ -264,12 +274,7 @@ export default function page() {
     if (isPlaying) {
       await videoRef.current?.pause();
       playbackManager.reportPlaybackProgress(
-        item?.Id!,
-        msToTicks(progress.get()),
-        {
-          AudioStreamIndex: audioIndex ?? -1,
-          SubtitleStreamIndex: subtitleIndex ?? -1,
-        },
+        currentPlayStateInfo() as PlaybackProgressInfo,
       );
     } else {
       videoRef.current?.play();
@@ -387,12 +392,7 @@ export default function page() {
       if (!item?.Id) return;
 
       playbackManager.reportPlaybackProgress(
-        item.Id,
-        msToTicks(progress.get()),
-        {
-          AudioStreamIndex: audioIndex ?? -1,
-          SubtitleStreamIndex: subtitleIndex ?? -1,
-        },
+        currentPlayStateInfo() as PlaybackProgressInfo,
       );
     },
     [
@@ -499,12 +499,7 @@ export default function page() {
         setIsPlaying(true);
         if (item?.Id) {
           playbackManager.reportPlaybackProgress(
-            item.Id,
-            msToTicks(progress.get()),
-            {
-              AudioStreamIndex: audioIndex ?? -1,
-              SubtitleStreamIndex: subtitleIndex ?? -1,
-            },
+            currentPlayStateInfo() as PlaybackProgressInfo,
           );
         }
         if (!Platform.isTV) await activateKeepAwakeAsync();
@@ -515,12 +510,7 @@ export default function page() {
         setIsPlaying(false);
         if (item?.Id) {
           playbackManager.reportPlaybackProgress(
-            item.Id,
-            msToTicks(progress.get()),
-            {
-              AudioStreamIndex: audioIndex ?? -1,
-              SubtitleStreamIndex: subtitleIndex ?? -1,
-            },
+            currentPlayStateInfo() as PlaybackProgressInfo,
           );
         }
         if (!Platform.isTV) await deactivateKeepAwake();
@@ -576,8 +566,34 @@ 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)}`);
   }
@@ -748,7 +764,6 @@ export default function page() {
           setAspectRatio={setAspectRatio}
           setScaleFactor={setScaleFactor}
           isVlc
-          api={api}
           downloadedFiles={downloadedFiles}
         />
       )}

app/_layout.tsx

@@ -1,9 +1,16 @@
 import "@/augmentations";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { DarkTheme, ThemeProvider } from "@react-navigation/native";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as BackgroundTask from "expo-background-task";
+import * as Device from "expo-device";
+import { Paths } from "expo-file-system";
 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,
@@ -20,24 +27,12 @@ import {
 } from "@/utils/background-tasks";
 import {
   LogProvider,
-  writeDebugLog,
   writeErrorLog,
+  writeInfoLog,
   writeToLog,
 } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
 
-const BackGroundDownloader = !Platform.isTV
-  ? require("@kesha-antonov/react-native-background-downloader")
-  : null;
-
-import { DarkTheme, ThemeProvider } from "@react-navigation/native";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
-import * as BackgroundTask from "expo-background-task";
-
-import * as Device from "expo-device";
-import * as FileSystem from "expo-file-system";
-
 const Notifications = !Platform.isTV ? require("expo-notifications") : null;
 
 import { getLocales } from "expo-localization";
@@ -48,7 +43,7 @@ import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider } from "jotai";
 import { useEffect, useRef, useState } from "react";
 import { I18nextProvider } from "react-i18next";
-import { Appearance, AppState } from "react-native";
+import { Appearance } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
@@ -64,6 +59,7 @@ import { useAtom } from "jotai";
 import { Toaster } from "sonner-native";
 import { userAtom } from "@/providers/JellyfinProvider";
 import { store } from "@/utils/store";
+import "../global.css";
 
 if (!Platform.isTV) {
   Notifications.setNotificationHandler({
@@ -84,19 +80,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) {
@@ -106,15 +102,8 @@ function useNotificationObserver() {
       },
     );
 
-    const subscription = Notifications.addNotificationResponseReceivedListener(
-      (response: { notification: any }) => {
-        redirect(response.notification);
-      },
-    );
-
     return () => {
       isMounted = false;
-      subscription.remove();
     };
   }, []);
 }
@@ -150,7 +139,7 @@ if (!Platform.isTV) {
 
     const token = getTokenFromStorage();
     const deviceId = getOrSetDeviceId();
-    const baseDirectory = FileSystem.documentDirectory;
+    const baseDirectory = Paths.document.uri;
 
     if (!token || !deviceId || !baseDirectory)
       return BackgroundTask.BackgroundTaskResult.Failed;
@@ -230,10 +219,9 @@ const queryClient = new QueryClient({
 });
 
 function Layout() {
-  const [settings] = useSettings(null);
+  const { settings } = useSettings();
   const [user] = useAtom(userAtom);
   const [api] = useAtom(apiAtom);
-  const appState = useRef(AppState.currentState);
   const segments = useSegments();
 
   useEffect(() => {
@@ -269,6 +257,15 @@ 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();
@@ -308,38 +305,42 @@ 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;
-            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;
+            writeInfoLog(`Notification ${title} opened`, data);
 
-              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
+            let url: any;
+            const type = (data?.type ?? "").toString().toLowerCase();
+            const itemId = data?.id;
+
+            switch (type) {
+              case "movie":
+                url = `/(auth)/(tabs)/home/items/page?id=${itemId}`;
+                break;
+              case "episode":
+                // `/(auth)/(tabs)/${from}/items/page?id=${item.Id}`;
+                // We just clicked a notification for an individual episode.
+                if (itemId) {
+                  url = `/(auth)/(tabs)/home/items/page?id=${itemId}`;
+                  // summarized season notification for multiple episodes. Bring them to series season
+                } else {
+                  const seriesId = data.seriesId;
+                  const seasonIndex = data.seasonIndex;
+                  if (seasonIndex) {
+                    url = `/(auth)/(tabs)/home/series/${seriesId}?seasonIndex=${seasonIndex}`;
                   } else {
-                    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}`);
-                    }
+                    url = `/(auth)/(tabs)/home/series/${seriesId}`;
                   }
-                  break;
-              }
+                }
+                break;
+            }
+
+            writeInfoLog(`Notification attempting to redirect to ${url}`);
+            if (url) {
+              router.push(url);
             }
           },
         );
@@ -379,27 +380,6 @@ function Layout() {
     segments,
   ]);
 
-  useEffect(() => {
-    if (Platform.isTV) {
-      return;
-    }
-
-    const subscription = AppState.addEventListener("change", (nextAppState) => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === "active"
-      ) {
-        BackGroundDownloader.checkForExistingDownloads();
-      }
-    });
-
-    BackGroundDownloader.checkForExistingDownloads();
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
   return (
     <QueryClientProvider client={queryClient}>
       <JellyfinProvider>
@@ -407,52 +387,55 @@ function Layout() {
           <LogProvider>
             <WebSocketProvider>
               <DownloadProvider>
-                <BottomSheetModalProvider>
-                  <SystemBars style='light' hidden={false} />
-                  <ThemeProvider value={DarkTheme}>
-                    <Stack initialRouteName='(auth)/(tabs)'>
-                      <Stack.Screen
-                        name='(auth)/(tabs)'
-                        options={{
-                          headerShown: false,
-                          title: "",
-                          header: () => null,
+                <GlobalModalProvider>
+                  <BottomSheetModalProvider>
+                    <ThemeProvider value={DarkTheme}>
+                      <SystemBars style='light' hidden={false} />
+                      <Stack initialRouteName='(auth)/(tabs)'>
+                        <Stack.Screen
+                          name='(auth)/(tabs)'
+                          options={{
+                            headerShown: false,
+                            title: "",
+                            header: () => null,
+                          }}
+                        />
+                        <Stack.Screen
+                          name='(auth)/player'
+                          options={{
+                            headerShown: false,
+                            title: "",
+                            header: () => null,
+                          }}
+                        />
+                        <Stack.Screen
+                          name='login'
+                          options={{
+                            headerShown: true,
+                            title: "",
+                            headerTransparent: true,
+                          }}
+                        />
+                        <Stack.Screen name='+not-found' />
+                      </Stack>
+                      <Toaster
+                        duration={4000}
+                        toastOptions={{
+                          style: {
+                            backgroundColor: "#262626",
+                            borderColor: "#363639",
+                            borderWidth: 1,
+                          },
+                          titleStyle: {
+                            color: "white",
+                          },
                         }}
+                        closeButton
                       />
-                      <Stack.Screen
-                        name='(auth)/player'
-                        options={{
-                          headerShown: false,
-                          title: "",
-                          header: () => null,
-                        }}
-                      />
-                      <Stack.Screen
-                        name='login'
-                        options={{
-                          headerShown: true,
-                          title: "",
-                          headerTransparent: true,
-                        }}
-                      />
-                      <Stack.Screen name='+not-found' />
-                    </Stack>
-                    <Toaster
-                      duration={4000}
-                      toastOptions={{
-                        style: {
-                          backgroundColor: "#262626",
-                          borderColor: "#363639",
-                          borderWidth: 1,
-                        },
-                        titleStyle: {
-                          color: "white",
-                        },
-                      }}
-                      closeButton
-                    />
-                  </ThemeProvider>
-                </BottomSheetModalProvider>
+                      <GlobalModal />
+                    </ThemeProvider>
+                  </BottomSheetModalProvider>
+                </GlobalModalProvider>
               </DownloadProvider>
             </WebSocketProvider>
           </LogProvider>

app/login.tsx

@@ -4,7 +4,6 @@ import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { t } from "i18next";
 import { useAtomValue } from "jotai";
-import type React from "react";
 import { useCallback, useEffect, useState } from "react";
 import {
   Alert,
@@ -82,10 +81,10 @@ const Login: React.FC = () => {
             onPress={() => {
               removeServer();
             }}
-            className='flex flex-row items-center'
+            className='flex flex-row items-center pr-2 pl-1'
           >
             <Ionicons name='chevron-back' size={18} color={Colors.primary} />
-            <Text className='ml-2 text-purple-600'>
+            <Text className=' ml-1 text-purple-600'>
               {t("login.change_server")}
             </Text>
           </TouchableOpacity>
@@ -376,7 +375,7 @@ const Login: React.FC = () => {
         {api?.basePath ? (
           <View className='flex flex-col h-full relative items-center justify-center'>
             <View className='px-4 -mt-20 w-full'>
-              <View className='flex flex-col space-y-2'>
+              <View className='flex flex-col gap-y-2'>
                 <Text className='text-2xl font-bold -mb-2'>
                   {serverName ? (
                     <>

augmentations/mmkv.ts

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

babel.config.js

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

biome.json

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

components/BitrateSelector.tsx

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

components/Chromecast.tsx

@@ -1,6 +1,6 @@
 import { Feather } from "@expo/vector-icons";
 import { useCallback, useEffect } from "react";
-import { Platform } from "react-native";
+import { Platform, TouchableOpacity } from "react-native";
 import GoogleCast, {
   CastButton,
   CastContext,
@@ -42,6 +42,22 @@ 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/ContinueWatchingPoster.tsx

@@ -69,27 +69,28 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
   return (
     <View
       className={`
-      relative w-44 aspect-video rounded-lg overflow-hidden border border-neutral-800
+      relative w-44 aspect-video rounded-xl overflow-hidden border border-neutral-800
       ${size === "small" ? "w-32" : "w-44"}
     `}
     >
-      <View className='w-full h-full flex items-center justify-center'>
-        <Image
-          key={item.Id}
-          id={item.Id}
-          source={{
-            uri: url,
-          }}
-          cachePolicy={"memory-disk"}
-          contentFit='cover'
-          className='w-full h-full'
-        />
-        {showPlayButton && (
-          <View className='absolute inset-0 flex items-center justify-center'>
-            <Ionicons name='play-circle' size={40} color='white' />
-          </View>
-        )}
-      </View>
+      <Image
+        key={item.Id}
+        id={item.Id}
+        source={{
+          uri: url,
+        }}
+        cachePolicy={"memory-disk"}
+        contentFit='cover'
+        style={{
+          height: "100%",
+          width: "100%",
+        }}
+      />
+      {showPlayButton && (
+        <View className='absolute inset-0 flex items-center justify-center'>
+          <Ionicons name='play-circle' size={40} color='white' />
+        </View>
+      )}
       {!item.UserData?.Played && <WatchedIndicator item={item} />}
       <ProgressBar item={item} />
     </View>

components/DownloadItem.tsx

@@ -61,12 +61,11 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const [queue, _setQueue] = useAtom(queueAtom);
-  const [settings] = useSettings(null);
+  const { settings } = useSettings();
   const [downloadUnwatchedOnly, setDownloadUnwatchedOnly] = useState(false);
 
-  const { processes, startBackgroundDownload, getDownloadedItems } =
-    useDownload();
-  const downloadedFiles = getDownloadedItems();
+  const { processes, startBackgroundDownload, downloadedItems } = useDownload();
+  const downloadedFiles = downloadedItems;
 
   const [selectedOptions, setSelectedOptions] = useState<
     SelectedOptions | undefined
@@ -225,7 +224,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
         if (!mediaSource) {
           console.error(`Could not get download URL for ${item.Name}`);
           toast.error(
-            t("Could not get download URL for {{itemName}}", {
+            t("home.downloads.toasts.could_not_get_download_url_for_item", {
               itemName: item.Name,
             }),
           );
@@ -359,16 +358,18 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                   })}
               </Text>
             </View>
-            <View className='flex flex-col space-y-2 w-full items-start'>
-              <BitrateSelector
-                inverted
-                onChange={(val) =>
-                  setSelectedOptions(
-                    (prev) => prev && { ...prev, bitrate: val },
-                  )
-                }
-                selected={selectedOptions?.bitrate}
-              />
+            <View className='flex flex-col space-y-2 w-full'>
+              <View className='items-start'>
+                <BitrateSelector
+                  inverted
+                  onChange={(val) =>
+                    setSelectedOptions(
+                      (prev) => prev && { ...prev, bitrate: val },
+                    )
+                  }
+                  selected={selectedOptions?.bitrate}
+                />
+              </View>
               {itemsNotDownloaded.length > 1 && (
                 <View className='flex flex-row items-center justify-between w-full py-2'>
                   <Text>{t("item_card.download.download_unwatched_only")}</Text>
@@ -380,21 +381,23 @@ export const DownloadItems: React.FC<DownloadProps> = ({
               )}
               {itemsNotDownloaded.length === 1 && (
                 <View>
-                  <MediaSourceSelector
-                    item={items[0]}
-                    onChange={(val) =>
-                      setSelectedOptions(
-                        (prev) =>
-                          prev && {
-                            ...prev,
-                            mediaSource: val,
-                          },
-                      )
-                    }
-                    selected={selectedOptions?.mediaSource}
-                  />
+                  <View className='items-start'>
+                    <MediaSourceSelector
+                      item={items[0]}
+                      onChange={(val) =>
+                        setSelectedOptions(
+                          (prev) =>
+                            prev && {
+                              ...prev,
+                              mediaSource: val,
+                            },
+                        )
+                      }
+                      selected={selectedOptions?.mediaSource}
+                    />
+                  </View>
                   {selectedOptions?.mediaSource && (
-                    <View className='flex flex-col space-y-2'>
+                    <View className='flex flex-col space-y-2 items-start'>
                       <AudioTrackSelector
                         source={selectedOptions.mediaSource}
                         onChange={(val) => {
@@ -427,11 +430,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
               )}
             </View>
 
-            <Button
-              className='mt-auto'
-              onPress={acceptDownloadOptions}
-              color='purple'
-            >
+            <Button onPress={acceptDownloadOptions} color='purple'>
               {t("item_card.download.download_button")}
             </Button>
           </View>

components/ExampleGlobalModalUsage.tsx

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

components/GenreTags.tsx

@@ -22,9 +22,7 @@ export const Tag: React.FC<
 > = ({ text, textClass, textStyle, ...props }) => {
   return (
     <View className='bg-neutral-800 rounded-full px-2 py-1' {...props}>
-      <Text className={textClass} style={textStyle}>
-        {text}
-      </Text>
+      <Text className='text-white'>{text}</Text>
     </View>
   );
 };

components/GlobalModal.tsx

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

components/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 { useImageColors } from "@/hooks/useImageColors";
+import { useImageColorsReturn } from "@/hooks/useImageColorsReturn";
 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(null);
+    const { settings } = useSettings();
     const { orientation } = useOrientation();
     const navigation = useNavigation();
     const insets = useSafeAreaInsets();
     const [user] = useAtom(userAtom);
     const { t } = useTranslation();
 
-    useImageColors({ item });
+    const itemColors = useImageColorsReturn({ item });
 
     const [loadingLogo, setLoadingLogo] = useState(true);
     const [headerHeight, setHeaderHeight] = useState(350);
@@ -105,13 +105,27 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
       if (!Platform.isTV) {
         navigation.setOptions({
           headerRight: () =>
-            item && (
+            item &&
+            (Platform.OS === "ios" ? (
+              <View className='flex flex-row items-center pl-2'>
+                <Chromecast.Chromecast width={22} height={22} />
+                {item.Type !== "Program" && (
+                  <View className='flex flex-row items-center'>
+                    {!Platform.isTV && (
+                      <DownloadSingleItem item={item} size='large' />
+                    )}
+                    {user?.Policy?.IsAdministrator && (
+                      <PlayInRemoteSessionButton item={item} size='large' />
+                    )}
+
+                    <PlayedStatus items={[item]} size='large' />
+                    <AddToFavorites item={item} />
+                  </View>
+                )}
+              </View>
+            ) : (
               <View className='flex flex-row items-center space-x-2'>
-                <Chromecast.Chromecast
-                  background='blur'
-                  width={22}
-                  height={22}
-                />
+                <Chromecast.Chromecast width={22} height={22} />
                 {item.Type !== "Program" && (
                   <View className='flex flex-row items-center space-x-2'>
                     {!Platform.isTV && (
@@ -126,7 +140,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                   </View>
                 )}
               </View>
-            ),
+            )),
         });
       }
     }, [item, navigation, user]);
@@ -187,10 +201,10 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
           }
         >
           <View className='flex flex-col bg-transparent shrink'>
-            <View className='flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink'>
+            <View className='flex flex-col px-4 w-full pt-2 mb-2 shrink'>
               <ItemHeader item={item} className='mb-2' />
               {item.Type !== "Program" && !Platform.isTV && !isOffline && (
-                <View className='flex flex-row items-center justify-start w-full h-16'>
+                <View className='flex flex-row items-center justify-start w-full h-16 mb-2'>
                   <BitrateSheet
                     className='mr-1'
                     onChange={(val) =>
@@ -253,6 +267,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                 selectedOptions={selectedOptions}
                 item={item}
                 isOffline={isOffline}
+                colors={itemColors}
               />
             </View>
 
@@ -272,21 +287,21 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
             {item.Type !== "Program" && (
               <>
                 {item.Type === "Episode" && !isOffline && (
-                  <CurrentSeries item={item} className='mb-4' />
+                  <CurrentSeries item={item} className='' />
                 )}
 
                 {!isOffline && (
-                  <CastAndCrew item={item} className='mb-4' loading={loading} />
+                  <CastAndCrew item={item} className='' loading={loading} />
                 )}
 
                 {item.People && item.People.length > 0 && !isOffline && (
-                  <View className='mb-4'>
+                  <View className=''>
                     {item.People.slice(0, 3).map((person, idx) => (
                       <MoreMoviesWithActor
                         currentItem={item}
                         key={idx}
                         actorId={person.Id!}
-                        className='mb-4'
+                        className=''
                       />
                     ))}
                   </View>

components/ItemTechnicalDetails.tsx

@@ -29,7 +29,7 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
     <View className='px-4 mt-2 mb-4'>
       <Text className='text-lg font-bold mb-4'>{t("item_card.video")}</Text>
       <TouchableOpacity onPress={() => bottomSheetModalRef.current?.present()}>
-        <View className='flex flex-row space-x-2'>
+        <View className='flex flex-row mb-2'>
           <VideoStreamInfo source={source} />
         </View>
         <Text className='text-purple-600'>{t("item_card.more_details")}</Text>

components/MediaSourceSelector.tsx

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

components/MediaSourceSheet.tsx

@@ -36,7 +36,7 @@ export const MediaSourceSheet: React.FC<Props> = ({
     return getDisplayName(selected);
   }, [selected, getDisplayName]);
 
-  if (isTv || (item.MediaStreams && item.MediaStreams.length <= 1)) return null;
+  if (isTv || (item.MediaSources && item.MediaSources.length <= 1)) return null;
 
   return (
     <View className='flex shrink' style={{ minWidth: 75 }}>

components/MoreMoviesWithActor.tsx

@@ -5,9 +5,9 @@ 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/HorrizontalScroll";
-import { SimpleTouchableItemRouter } from "@/components/common/SimpleTouchableItemRouter";
+import { HorizontalScroll } from "@/components/common/HorizontalScroll";
 import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -82,10 +82,9 @@ export const MoreMoviesWithActor: React.FC<Props> = ({
       <HorizontalScroll
         data={items}
         loading={isLoading}
-        height={247}
-        estimatedItemSize={112}
+        height={218}
         renderItem={(item: BaseItemDto, idx: number) => (
-          <SimpleTouchableItemRouter
+          <TouchableItemRouter
             key={idx}
             item={item}
             className='flex flex-col w-28'
@@ -94,7 +93,7 @@ export const MoreMoviesWithActor: React.FC<Props> = ({
               <MoviePoster item={item} />
               <ItemCardText item={item} />
             </View>
-          </SimpleTouchableItemRouter>
+          </TouchableItemRouter>
         )}
       />
     </View>

components/PlatformDropdown.tsx

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

components/PlayButton.tsx

@@ -1,11 +1,12 @@
 import { useActionSheet } from "@expo/react-native-action-sheet";
+import { Button, Host } from "@expo/ui/swift-ui";
 import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, TouchableOpacity, View } from "react-native";
+import { Alert, Platform, TouchableOpacity, View } from "react-native";
 import CastContext, {
   CastButton,
   PlayServicesState,
@@ -23,6 +24,7 @@ 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";
@@ -32,13 +34,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 Button> {
+interface Props extends React.ComponentProps<typeof TouchableOpacity> {
   item: BaseItemDto;
   selectedOptions: SelectedOptions;
   isOffline?: boolean;
+  colors?: ThemeColors;
 }
 
 const ANIMATION_DURATION = 500;
@@ -48,6 +50,7 @@ export const PlayButton: React.FC<Props> = ({
   item,
   selectedOptions,
   isOffline,
+  colors,
   ...props
 }: Props) => {
   const { showActionSheetWithOptions } = useActionSheet();
@@ -55,19 +58,22 @@ export const PlayButton: React.FC<Props> = ({
   const mediaStatus = useMediaStatus();
   const { t } = useTranslation();
 
-  const [colorAtom] = useAtom(itemThemeColorAtom);
+  const [globalColorAtom] = 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(colorAtom);
-  const startColor = useSharedValue(colorAtom);
+  const endColor = useSharedValue(effectiveColors);
+  const startColor = useSharedValue(effectiveColors);
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
-  const [settings, updateSettings] = useSettings(null);
+  const { settings, updateSettings } = useSettings();
   const lightHapticFeedback = useHaptic("light");
 
   const goToPlayer = useCallback(
@@ -297,7 +303,7 @@ export const PlayButton: React.FC<Props> = ({
   );
 
   useAnimatedReaction(
-    () => colorAtom,
+    () => effectiveColors,
     (newColor) => {
       endColor.value = newColor;
       colorChangeProgress.value = 0;
@@ -306,19 +312,19 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.9, 0, 0.31, 0.99),
       });
     },
-    [colorAtom],
+    [effectiveColors],
   );
 
   useEffect(() => {
     const timeout_2 = setTimeout(() => {
-      startColor.value = colorAtom;
+      startColor.value = effectiveColors;
       startWidth.value = targetWidth.value;
     }, ANIMATION_DURATION);
 
     return () => {
       clearTimeout(timeout_2);
     };
-  }, [colorAtom, item]);
+  }, [effectiveColors, item]);
 
   /**
    * ANIMATED STYLES
@@ -358,6 +364,46 @@ export const PlayButton: React.FC<Props> = ({
    * *********************
    */
 
+  if (Platform.OS === "ios")
+    return (
+      <Host
+        style={{
+          height: 50,
+          flex: 1,
+        }}
+      >
+        <Button
+          variant='glassProminent'
+          onPress={onPress}
+          color={effectiveColors.primary}
+        >
+          <View className='flex flex-row items-center gap-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}
@@ -367,7 +413,7 @@ export const PlayButton: React.FC<Props> = ({
       className={"relative"}
       {...props}
     >
-      <View className='absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden'>
+      <View className='absolute w-full h-full top-0 left-0 rounded-full z-10 overflow-hidden'>
         <Animated.View
           style={[
             animatedPrimaryStyle,
@@ -381,15 +427,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-xl'
+        className='absolute w-full h-full top-0 left-0 rounded-full'
       />
       <View
         style={{
           borderWidth: 1,
-          borderColor: colorAtom.primary,
+          borderColor: effectiveColors.primary,
           borderStyle: "solid",
         }}
-        className='flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full '
+        className='flex flex-row items-center justify-center bg-transparent rounded-full 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,6 +15,7 @@ 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";
@@ -24,6 +25,7 @@ import type { SelectedOptions } from "./ItemContent";
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
   selectedOptions: SelectedOptions;
+  colors?: ThemeColors;
 }
 
 const ANIMATION_DURATION = 500;
@@ -32,19 +34,23 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({
   item,
   selectedOptions,
+  colors,
   ...props
 }: Props) => {
-  const [colorAtom] = useAtom(itemThemeColorAtom);
+  const [globalColorAtom] = useAtom(itemThemeColorAtom);
+
+  // Use colors prop if provided, otherwise fallback to global atom
+  const effectiveColors = colors || globalColorAtom;
 
   const router = useRouter();
 
   const startWidth = useSharedValue(0);
   const targetWidth = useSharedValue(0);
-  const endColor = useSharedValue(colorAtom);
-  const startColor = useSharedValue(colorAtom);
+  const endColor = useSharedValue(effectiveColors);
+  const startColor = useSharedValue(effectiveColors);
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
-  const [settings] = useSettings(null);
+  const { settings } = useSettings();
   const lightHapticFeedback = useHaptic("light");
 
   const goToPlayer = useCallback(
@@ -101,7 +107,7 @@ export const PlayButton: React.FC<Props> = ({
   );
 
   useAnimatedReaction(
-    () => colorAtom,
+    () => effectiveColors,
     (newColor) => {
       endColor.value = newColor;
       colorChangeProgress.value = 0;
@@ -110,19 +116,19 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.9, 0, 0.31, 0.99),
       });
     },
-    [colorAtom],
+    [effectiveColors],
   );
 
   useEffect(() => {
     const timeout_2 = setTimeout(() => {
-      startColor.value = colorAtom;
+      startColor.value = effectiveColors;
       startWidth.value = targetWidth.value;
     }, ANIMATION_DURATION);
 
     return () => {
       clearTimeout(timeout_2);
     };
-  }, [colorAtom, item]);
+  }, [effectiveColors, item]);
 
   /**
    * ANIMATED STYLES
@@ -189,7 +195,7 @@ export const PlayButton: React.FC<Props> = ({
       <View
         style={{
           borderWidth: 1,
-          borderColor: colorAtom.primary,
+          borderColor: effectiveColors.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 { View, type ViewProps } from "react-native";
+import { Platform, View, type ViewProps } from "react-native";
 import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import { RoundButton } from "./RoundButton";
 
@@ -14,6 +14,21 @@ 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,6 +10,7 @@ interface Props extends ViewProps {
   background?: boolean;
   size?: "default" | "large";
   fillColor?: "primary";
+  color?: "white" | "purple";
   hapticFeedback?: boolean;
 }
 
@@ -20,6 +21,7 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
   children,
   size = "default",
   fillColor,
+  color = "white",
   hapticFeedback = true,
   ...viewProps
 }) => {
@@ -34,6 +36,25 @@ 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,9 +7,9 @@ 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/HorrizontalScroll";
-import { SimpleTouchableItemRouter } from "./common/SimpleTouchableItemRouter";
+import { HorizontalScroll } from "./common/HorizontalScroll";
 import { Text } from "./common/Text";
+import { TouchableItemRouter } from "./common/TouchableItemRouter";
 import { ItemCardText } from "./ItemCardText";
 
 interface SimilarItemsProps extends ViewProps {
@@ -54,10 +54,9 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({
         data={movies}
         loading={isLoading}
         height={247}
-        estimatedItemSize={112}
         noItemsText={t("item_card.no_similar_items_found")}
         renderItem={(item: BaseItemDto, idx: number) => (
-          <SimpleTouchableItemRouter
+          <TouchableItemRouter
             key={idx}
             item={item}
             className='flex flex-col w-28'
@@ -66,7 +65,7 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({
               <MoviePoster item={item} />
               <ItemCardText item={item} />
             </View>
-          </SimpleTouchableItemRouter>
+          </TouchableItemRouter>
         )}
       />
     </View>

components/SubtitleTrackSelector.tsx

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

components/apple-tv-carousel/AppleTVCarousel.tsx

@@ -0,0 +1,851 @@
+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 = 300;
+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

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

components/common/Dropdown.tsx

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

components/common/HeaderBackButton.tsx

@@ -19,6 +19,18 @@ 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='chevron-back' size={24} color='white' />
+      </TouchableOpacity>
+    );
+  }
+
   if (background === "transparent" && Platform.OS !== "android")
     return (
       <TouchableOpacity

components/common/HorizontalScroll.tsx

@@ -3,17 +3,12 @@ import React, { useImperativeHandle, useRef } from "react";
 import { View, type ViewStyle } from "react-native";
 import { Text } from "./Text";
 
-type PartialExcept<T, K extends keyof T> = Partial<T> & Pick<T, K>;
-
 export interface HorizontalScrollRef {
   scrollToIndex: (index: number, viewOffset: number) => void;
 }
 
 interface HorizontalScrollProps<T>
-  extends PartialExcept<
-    Omit<FlashListProps<T>, "renderItem">,
-    "estimatedItemSize"
-  > {
+  extends Omit<FlashListProps<T>, "renderItem" | "data"> {
   data?: T[] | null;
   renderItem: (item: T, index: number) => React.ReactNode;
   keyExtractor?: (item: T, index: number) => string;
@@ -44,7 +39,7 @@ export const HorizontalScroll = <T,>(
     ...restProps
   } = props;
 
-  const flashListRef = useRef<FlashList<T>>(null);
+  const flashListRef = useRef<React.ComponentRef<typeof FlashList<T>>>(null);
 
   useImperativeHandle(ref!, () => ({
     scrollToIndex: (index: number, viewOffset: number) => {
@@ -78,7 +73,6 @@ export const HorizontalScroll = <T,>(
         extraData={extraData}
         renderItem={renderFlashListItem}
         horizontal
-        estimatedItemSize={200}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={{
           paddingHorizontal: 16,

components/common/JellyseerrItemRouter.tsx

@@ -1,15 +1,10 @@
 import { useRouter, useSegments } from "expo-router";
 import type React from "react";
-import { type PropsWithChildren, useCallback, useMemo } from "react";
+import { type PropsWithChildren } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
-import * as ContextMenu from "zeego/context-menu";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
-import {
-  hasPermission,
-  Permission,
-} from "@/utils/jellyseerr/server/lib/permissions";
 import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
+import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
 import type {
   MovieResult,
   TvResult,
@@ -17,7 +12,7 @@ import type {
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 
 interface Props extends TouchableOpacityProps {
-  result?: MovieResult | TvResult | MovieDetails | TvDetails;
+  result?: MovieResult | TvResult | MovieDetails | TvDetails | PersonCreditCast;
   mediaTitle: string;
   releaseYear: number;
   canRequest: boolean;
@@ -37,90 +32,33 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const router = useRouter();
   const segments = useSegments();
-  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
 
-  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]);
+  const from = (segments as string[])[2] || "(home)";
 
   if (from === "(home)" || from === "(search)" || from === "(libraries)")
     return (
-      <ContextMenu.Root>
-        <ContextMenu.Trigger>
-          <TouchableOpacity
-            onPress={() => {
-              if (!result) return;
+      <TouchableOpacity
+        onPress={() => {
+          if (!result) return;
 
-              router.push({
-                pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
-                // @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>
+          router.push({
+            pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+            // @ts-expect-error
+            params: {
+              ...result,
+              mediaTitle,
+              releaseYear,
+              canRequest: canRequest.toString(),
+              posterSrc,
+              mediaType,
+            },
+          });
+        }}
+        {...props}
+      >
+        {children}
+      </TouchableOpacity>
     );
+
+  return null;
 };

components/common/SimpleTouchableItemRouter.tsx

@@ -1,86 +0,0 @@
-import type {
-  BaseItemDto,
-  BaseItemPerson,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { useRouter, useSegments } from "expo-router";
-import { type PropsWithChildren } from "react";
-import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
-
-interface Props extends TouchableOpacityProps {
-  item: BaseItemDto;
-  isOffline?: boolean;
-}
-
-export const itemRouter = (
-  item: BaseItemDto | BaseItemPerson,
-  from: string,
-) => {
-  if ("CollectionType" in item && item.CollectionType === "livetv") {
-    return `/(auth)/(tabs)/${from}/livetv`;
-  }
-
-  if (item.Type === "Series") {
-    return `/(auth)/(tabs)/${from}/series/${item.Id}`;
-  }
-
-  if (item.Type === "Person" || item.Type === "Actor") {
-    return `/(auth)/(tabs)/${from}/actors/${item.Id}`;
-  }
-
-  if (item.Type === "BoxSet") {
-    return `/(auth)/(tabs)/${from}/collections/${item.Id}`;
-  }
-
-  if (item.Type === "UserView") {
-    return `/(auth)/(tabs)/${from}/collections/${item.Id}`;
-  }
-
-  if (item.Type === "CollectionFolder") {
-    return `/(auth)/(tabs)/(libraries)/${item.Id}`;
-  }
-
-  if (item.Type === "Playlist") {
-    return `/(auth)/(tabs)/(libraries)/${item.Id}`;
-  }
-
-  return `/(auth)/(tabs)/${from}/items/page?id=${item.Id}`;
-};
-
-/**
- * Simplified TouchableItemRouter that doesn't use hooks that might trigger API calls.
- * Intended for use in similar items rows where we want to avoid unnecessary requests.
- */
-export const SimpleTouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
-  item,
-  isOffline = false,
-  children,
-  ...props
-}) => {
-  const router = useRouter();
-  const segments = useSegments();
-  const from = segments[2] || "(home)";
-
-  if (
-    from === "(home)" ||
-    from === "(search)" ||
-    from === "(libraries)" ||
-    from === "(favorites)"
-  )
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          let url = itemRouter(item, from);
-          if (isOffline) {
-            url += `&offline=true`;
-          }
-          // @ts-expect-error
-          router.push(url);
-        }}
-        {...props}
-      >
-        {children}
-      </TouchableOpacity>
-    );
-
-  return null;
-};

components/common/Text.tsx

@@ -1,20 +1,29 @@
 import { Platform, Text as RNText, type TextProps } from "react-native";
-export function Text(props: TextProps) {
-  const { style, ...otherProps } = props;
+
+interface CustomTextProps extends TextProps {
+  className?: string;
+}
+
+export function Text({ className, ...props }: CustomTextProps) {
   if (Platform.isTV)
     return (
-      <RNText
-        allowFontScaling={false}
-        style={[{ color: "white" }, style]}
-        {...otherProps}
-      />
+      <RNText allowFontScaling={false} className={clsx(className)} {...props} />
     );
 
   return (
-    <RNText
-      allowFontScaling={false}
-      style={[{ color: "white" }, style]}
-      {...otherProps}
-    />
+    <RNText allowFontScaling={false} className={clsx(className)} {...props} />
   );
 }
+
+const clsx = (className?: string) => {
+  const colorClassRegex = /\btext-[a-z]+-\d+\b/;
+  const hasColorClass = className ? colorClassRegex.test(className) : false;
+  const defaultClassName = "text-white";
+  const classes = [
+    ...(hasColorClass ? [] : [defaultClassName]),
+    ...(className ? [className] : []),
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return classes;
+};

components/common/TouchableItemRouter.tsx

@@ -1,8 +1,5 @@
 import { useActionSheet } from "@expo/react-native-action-sheet";
-import type {
-  BaseItemDto,
-  BaseItemPerson,
-} from "@jellyfin/sdk/lib/generated-client/models";
+import type { BaseItemDto } 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";
@@ -14,10 +11,7 @@ interface Props extends TouchableOpacityProps {
   isOffline?: boolean;
 }
 
-export const itemRouter = (
-  item: BaseItemDto | BaseItemPerson,
-  from: string,
-) => {
+export const itemRouter = (item: BaseItemDto, from: string) => {
   if ("CollectionType" in item && item.CollectionType === "livetv") {
     return `/(auth)/(tabs)/${from}/livetv`;
   }
@@ -26,8 +20,8 @@ export const itemRouter = (
     return `/(auth)/(tabs)/${from}/series/${item.Id}`;
   }
 
-  if (item.Type === "Person" || item.Type === "Actor") {
-    return `/(auth)/(tabs)/${from}/actors/${item.Id}`;
+  if (item.Type === "Person") {
+    return `/(auth)/(tabs)/${from}/persons/${item.Id}`;
   }
 
   if (item.Type === "BoxSet") {
@@ -49,6 +43,48 @@ export const itemRouter = (
   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,
@@ -61,7 +97,7 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   const markAsPlayedStatus = useMarkAsPlayed([item]);
   const { isFavorite, toggleFavorite } = useFavorite(item);
 
-  const from = segments[2] || "(home)";
+  const from = (segments as string[])[2] || "(home)";
 
   const showActionSheet = useCallback(() => {
     if (
@@ -107,12 +143,15 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
       <TouchableOpacity
         onLongPress={showActionSheet}
         onPress={() => {
-          let url = itemRouter(item, from);
           if (isOffline) {
-            url += `&offline=true`;
+            // For offline mode, we still need to use query params
+            const url = `${itemRouter(item, from)}&offline=true`;
+            router.push(url as any);
+            return;
           }
-          // @ts-expect-error
-          router.push(url);
+
+          const navigation = getItemNavigation(item, from);
+          router.push(navigation as any);
         }}
         {...props}
       >

components/downloads/ActiveDownloads.tsx

@@ -1,27 +1,9 @@
-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,
-  TouchableOpacity,
-  type TouchableOpacityProps,
-  View,
-  type ViewProps,
-} from "react-native";
-import { toast } from "sonner-native";
+import { View, type ViewProps } from "react-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;
-};
+import { DownloadCard } from "./DownloadCard";
 
 interface ActiveDownloadsProps extends ViewProps {}
 
@@ -44,7 +26,7 @@ export default function ActiveDownloads({ ...props }: ActiveDownloadsProps) {
       <Text className='text-lg font-bold mb-2'>
         {t("home.downloads.active_downloads")}
       </Text>
-      <View className='space-y-2'>
+      <View className='gap-y-2'>
         {processes?.map((p: JobStatus) => (
           <DownloadCard key={p.item.Id} process={p} />
         ))}
@@ -52,163 +34,3 @@ 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

@@ -0,0 +1,156 @@
+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,
+  TouchableOpacity,
+  type TouchableOpacityProps,
+  View,
+} from "react-native";
+import { toast } from "sonner-native";
+import { Text } from "@/components/common/Text";
+import { useDownload } from "@/providers/DownloadProvider";
+import { calculateSmoothedETA } from "@/providers/Downloads/hooks/useDownloadSpeedCalculator";
+import { JobStatus } from "@/providers/Downloads/types";
+import { storage } from "@/utils/mmkv";
+import { formatTimeString } from "@/utils/time";
+
+const bytesToMB = (bytes: number) => {
+  return bytes / 1024 / 1024;
+};
+
+interface DownloadCardProps extends TouchableOpacityProps {
+  process: JobStatus;
+}
+
+export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
+  const { removeProcess } = useDownload();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  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 = useMemo(() => {
+    if (!process.estimatedTotalSizeBytes || !process.bytesDownloaded) {
+      return null;
+    }
+
+    const secondsRemaining = calculateSmoothedETA(
+      process.id,
+      process.bytesDownloaded,
+      process.estimatedTotalSizeBytes,
+    );
+
+    if (!secondsRemaining || secondsRemaining <= 0) {
+      return null;
+    }
+
+    return formatTimeString(secondsRemaining, "s");
+  }, [process.id, process.bytesDownloaded, process.estimatedTotalSizeBytes]);
+
+  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 z-10'>
+        <TouchableOpacity
+          onPress={() => handleDelete(process.id)}
+          className='p-2 bg-neutral-800 rounded-full'
+        >
+          <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 gap-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 && (
+                <Text className='text-xs'>
+                  {t("home.downloads.eta", { eta: eta })}
+                </Text>
+              )}
+            </View>
+
+            <View className='flex flex-row items-center gap-x-2 mt-1 text-purple-600'>
+              <Text className='text-xs capitalize'>{process.status}</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};

components/downloads/DownloadSize.tsx

@@ -13,14 +13,13 @@ export const DownloadSize: React.FC<DownloadSizeProps> = ({
   items,
   ...props
 }) => {
-  const { getDownloadedItemSize, getDownloadedItems } = useDownload();
-  const downloadedFiles = getDownloadedItems();
+  const { getDownloadedItemSize, downloadedItems } = useDownload();
   const [size, setSize] = useState<string | undefined>();
 
   const itemIds = useMemo(() => items.map((i) => i.Id), [items]);
 
   useEffect(() => {
-    if (!downloadedFiles) return;
+    if (!downloadedItems) return;
 
     let s = 0;
 
@@ -32,7 +31,7 @@ export const DownloadSize: React.FC<DownloadSizeProps> = ({
       }
     }
     setSize(s.bytesToReadable());
-  }, [itemIds]);
+  }, [itemIds, downloadedItems, getDownloadedItemSize]);
 
   const sizeText = useMemo(() => {
     if (!size) return "...";

components/downloads/EpisodeCard.tsx

@@ -28,7 +28,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
    */
   const handleDeleteFile = useCallback(() => {
     if (item.Id) {
-      deleteFile(item.Id, "Episode");
+      deleteFile(item.Id);
       successHapticFeedback();
     }
   }, [deleteFile, item.Id]);

components/downloads/MovieCard.tsx

@@ -37,7 +37,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
    */
   const handleDeleteFile = useCallback(() => {
     if (item.Id) {
-      deleteFile(item.Id, "Movie");
+      deleteFile(item.Id, item.Type);
     }
   }, [deleteFile, item.Id]);
 

components/downloads/SeriesCard.tsx

@@ -19,7 +19,13 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
     return storage.getString(items[0].SeriesId!);
   }, []);
 
-  const deleteSeries = useCallback(async () => deleteItems(items), [items]);
+  const deleteSeries = useCallback(
+    async () =>
+      deleteItems(
+        items.map((item) => item.Id).filter((id) => id !== undefined),
+      ),
+    [items],
+  );
 
   const showActionSheet = useCallback(() => {
     const options = ["Delete", "Cancel"];

components/home/HomeIndex.tsx

@@ -11,7 +11,6 @@ import {
   getUserLibraryApi,
   getUserViewsApi,
 } from "@jellyfin/sdk/lib/utils/api";
-import NetInfo from "@react-native-community/netinfo";
 import { type QueryFunction, useQuery } from "@tanstack/react-query";
 import { useNavigation, useRouter, useSegments } from "expo-router";
 import { useAtomValue } from "jotai";
@@ -28,16 +27,17 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
-import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { Colors } from "@/constants/Colors";
+import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
+import { AppleTVCarousel } from "../apple-tv-carousel/AppleTVCarousel";
 
 type ScrollingCollectionListSection = {
   type: "ScrollingCollectionList";
@@ -64,16 +64,7 @@ export const HomeIndex = () => {
   const user = useAtomValue(userAtom);
 
   const [loading, setLoading] = useState(false);
-  const [
-    settings,
-    _updateSettings,
-    _pluginSettings,
-    _setPluginSettings,
-    refreshStreamyfinPluginSettings,
-  ] = useSettings(null);
-
-  const [isConnected, setIsConnected] = useState<boolean | null>(null);
-  const [loadingRetry, setLoadingRetry] = useState(false);
+  const { settings, refreshStreamyfinPluginSettings } = useSettings();
 
   const navigation = useNavigation();
 
@@ -81,8 +72,14 @@ export const HomeIndex = () => {
 
   const scrollViewRef = useRef<ScrollView>(null);
 
-  const { getDownloadedItems, cleanCacheDirectory } = useDownload();
+  const { downloadedItems, cleanCacheDirectory } = useDownload();
   const prevIsConnected = useRef<boolean | null>(false);
+  const {
+    isConnected,
+    serverConnected,
+    loading: retryLoading,
+    retryCheck,
+  } = useNetworkStatus();
   const invalidateCache = useInvalidatePlaybackProgressCache();
   useEffect(() => {
     // Only invalidate cache when transitioning from offline to online
@@ -93,6 +90,11 @@ export const HomeIndex = () => {
     prevIsConnected.current = isConnected;
   }, [isConnected, invalidateCache]);
 
+  const hasDownloads = useMemo(() => {
+    if (Platform.isTV) return false;
+    return downloadedItems.length > 0;
+  }, [downloadedItems]);
+
   useEffect(() => {
     if (Platform.isTV) {
       navigation.setOptions({
@@ -100,7 +102,6 @@ export const HomeIndex = () => {
       });
       return;
     }
-    const hasDownloads = getDownloadedItems().length > 0;
     navigation.setOptions({
       headerLeft: () => (
         <TouchableOpacity
@@ -117,7 +118,7 @@ export const HomeIndex = () => {
         </TouchableOpacity>
       ),
     });
-  }, [navigation, router]);
+  }, [navigation, router, hasDownloads]);
 
   useEffect(() => {
     cleanCacheDirectory().catch((_e) =>
@@ -128,8 +129,11 @@ export const HomeIndex = () => {
   const segments = useSegments();
   useEffect(() => {
     const unsubscribe = eventBus.on("scrollToTop", () => {
-      if (segments[2] === "(home)")
-        scrollViewRef.current?.scrollTo({ y: -152, animated: true });
+      if ((segments as string[])[2] === "(home)")
+        scrollViewRef.current?.scrollTo({
+          y: Platform.isTV ? -152 : -100,
+          animated: true,
+        });
     });
 
     return () => {
@@ -137,29 +141,6 @@ export const HomeIndex = () => {
     };
   }, [segments]);
 
-  const checkConnection = useCallback(async () => {
-    setLoadingRetry(true);
-    const state = await NetInfo.fetch();
-    setIsConnected(state.isConnected);
-    setLoadingRetry(false);
-  }, []);
-
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener((state) => {
-      if (state.isConnected === false || state.isInternetReachable === false)
-        setIsConnected(false);
-      else setIsConnected(true);
-    });
-
-    NetInfo.fetch().then((state) => {
-      setIsConnected(state.isConnected);
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
   const {
     data,
     isError: e1,
@@ -218,9 +199,9 @@ export const HomeIndex = () => {
             await getUserLibraryApi(api).getLatestMedia({
               userId: user?.Id,
               limit: 20,
-              fields: ["PrimaryImageAspectRatio", "Path"],
+              fields: ["PrimaryImageAspectRatio", "Path", "Genres"],
               imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               includeItemTypes,
               parentId,
             })
@@ -262,8 +243,9 @@ export const HomeIndex = () => {
           (
             await getItemsApi(api).getResumeItems({
               userId: user.Id,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               includeItemTypes: ["Movie", "Series", "Episode"],
+              fields: ["Genres"],
             })
           ).data.Items || [],
         type: "ScrollingCollectionList",
@@ -276,9 +258,9 @@ export const HomeIndex = () => {
           (
             await getTvShowsApi(api).getNextUp({
               userId: user?.Id,
-              fields: ["MediaSourceCount"],
+              fields: ["MediaSourceCount", "Genres"],
               limit: 20,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               enableResumable: false,
             })
           ).data.Items || [],
@@ -339,10 +321,10 @@ export const HomeIndex = () => {
     if (!api || !user?.Id || !settings?.home?.sections) return [];
     const ss: Section[] = [];
     for (const [index, section] of settings.home.sections.entries()) {
-      const id = section.items?.title || `section-${index}`;
+      const id = section.title || `section-${index}`;
       ss.push({
-        title: id,
-        queryKey: ["home", id],
+        title: t(`${id}`),
+        queryKey: ["home", "custom", String(index), section.title ?? null],
         queryFn: async () => {
           if (section.items) {
             const response = await getItemsApi(api).getItems({
@@ -360,9 +342,9 @@ export const HomeIndex = () => {
           if (section.nextUp) {
             const response = await getTvShowsApi(api).getNextUp({
               userId: user?.Id,
-              fields: ["MediaSourceCount"],
+              fields: ["MediaSourceCount", "Genres"],
               limit: section.nextUp?.limit || 25,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               enableResumable: section.nextUp?.enableResumable,
               enableRewatching: section.nextUp?.enableRewatching,
             });
@@ -389,41 +371,57 @@ export const HomeIndex = () => {
 
   const sections = settings?.home?.sections ? customSections : defaultSections;
 
-  if (isConnected === false) {
+  if (!isConnected || serverConnected !== true) {
+    let title = "";
+    let subtitle = "";
+
+    if (!isConnected) {
+      // No network connection
+      title = t("home.no_internet");
+      subtitle = t("home.no_internet_message");
+    } else if (serverConnected === null) {
+      // Network is up, but server is being checked
+      title = t("home.checking_server_connection");
+      subtitle = t("home.checking_server_connection_message");
+    } else if (!serverConnected) {
+      // Network is up, but server is unreachable
+      title = t("home.server_unreachable");
+      subtitle = t("home.server_unreachable_message");
+    }
     return (
       <View className='flex flex-col items-center justify-center h-full -mt-6 px-8'>
-        <Text className='text-3xl font-bold mb-2'>{t("home.no_internet")}</Text>
-        <Text className='text-center opacity-70'>
-          {t("home.no_internet_message")}
-        </Text>
+        <Text className='text-3xl font-bold mb-2'>{title}</Text>
+        <Text className='text-center opacity-70'>{subtitle}</Text>
+
         <View className='mt-4'>
-          <Button
-            color='purple'
-            onPress={() => router.push("/(auth)/downloads")}
-            justify='center'
-            iconRight={
-              <Ionicons name='arrow-forward' size={20} color='white' />
-            }
-          >
-            {t("home.go_to_downloads")}
-          </Button>
+          {!Platform.isTV && (
+            <Button
+              color='purple'
+              onPress={() => router.push("/(auth)/downloads")}
+              justify='center'
+              iconRight={
+                <Ionicons name='arrow-forward' size={20} color='white' />
+              }
+            >
+              {t("home.go_to_downloads")}
+            </Button>
+          )}
+
           <Button
             color='black'
-            onPress={() => {
-              checkConnection();
-            }}
+            onPress={retryCheck}
             justify='center'
             className='mt-2'
             iconRight={
-              loadingRetry ? null : (
+              retryLoading ? null : (
                 <Ionicons name='refresh' size={20} color='white' />
               )
             }
           >
-            {loadingRetry ? (
-              <ActivityIndicator size={"small"} color={"white"} />
+            {retryLoading ? (
+              <ActivityIndicator size='small' color='white' />
             ) : (
-              "Retry"
+              t("home.retry")
             )}
           </Button>
         </View>
@@ -453,44 +451,55 @@ export const HomeIndex = () => {
       scrollToOverflowEnabled={true}
       ref={scrollViewRef}
       nestedScrollEnabled
-      contentInsetAdjustmentBehavior='automatic'
+      contentInsetAdjustmentBehavior='never'
       refreshControl={
-        <RefreshControl refreshing={loading} onRefresh={refetch} />
+        <RefreshControl
+          refreshing={loading}
+          onRefresh={refetch}
+          tintColor='white' // For iOS
+          colors={["white"]} // For Android
+          progressViewOffset={200} // This offsets the refresh indicator to appear over the carousel
+        />
       }
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 16,
-      }}
+      style={{ marginTop: Platform.isTV ? 0 : -100 }}
+      contentContainerStyle={{ paddingTop: Platform.isTV ? 0 : 100 }}
     >
-      <View className='flex flex-col space-y-4'>
-        <LargeMovieCarousel />
-
-        {sections.map((section, index) => {
-          if (section.type === "ScrollingCollectionList") {
-            return (
-              <ScrollingCollectionList
-                key={index}
-                title={section.title}
-                queryKey={section.queryKey}
-                queryFn={section.queryFn}
-                orientation={section.orientation}
-                hideIfEmpty
-              />
-            );
-          }
-          if (section.type === "MediaListSection") {
-            return (
-              <MediaListSection
-                key={index}
-                queryKey={section.queryKey}
-                queryFn={section.queryFn}
-              />
-            );
-          }
-          return null;
-        })}
+      <AppleTVCarousel initialIndex={0} />
+      <View
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+          paddingBottom: 16,
+        }}
+      >
+        <View className='flex flex-col gap-4'>
+          {sections.map((section, index) => {
+            if (section.type === "ScrollingCollectionList") {
+              return (
+                <ScrollingCollectionList
+                  key={index}
+                  title={section.title}
+                  queryKey={section.queryKey}
+                  queryFn={section.queryFn}
+                  orientation={section.orientation}
+                  hideIfEmpty
+                />
+              );
+            }
+            if (section.type === "MediaListSection") {
+              return (
+                <MediaListSection
+                  key={index}
+                  queryKey={section.queryKey}
+                  queryFn={section.queryFn}
+                />
+              );
+            }
+            return null;
+          })}
+        </View>
       </View>
+      <View className='h-24' />
     </ScrollView>
   );
 };

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 { itemRouter } from "../common/TouchableItemRouter";
+import { getItemNavigation } from "../common/TouchableItemRouter";
 
 interface Props extends ViewProps {}
 
 export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
-  const [settings] = useSettings(null);
+  const { settings } = useSettings();
 
   const ref = React.useRef<ICarouselInstance>(null);
   const progress = useSharedValue<number>(0);
@@ -88,22 +88,24 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
   if (!popularItems) return null;
 
   return (
-    <View className='flex flex-col items-center mt-2' {...props}>
+    <View className='flex flex-col items-center' {...props}>
       <Carousel
         ref={ref}
         autoPlay={false}
         loop={true}
         snapEnabled={true}
+        vertical={false}
         mode='parallax'
         modeConfig={{
-          parallaxScrollingScale: 0.86,
-          parallaxScrollingOffset: 100,
+          parallaxScrollingScale: 1,
+          parallaxScrollingOffset: 0,
         }}
         width={width}
-        height={204}
+        height={500}
         data={popularItems}
         onProgressChange={progress}
         renderItem={({ item, index }) => <RenderItem key={index} item={item} />}
+        scrollAnimationDuration={1000}
       />
       <Pagination.Basic
         progress={progress}
@@ -146,20 +148,20 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   }, [item]);
 
   const segments = useSegments();
-  const from = segments[2] || "(home)";
+  const from = (segments as string[])[2] || "(home)";
 
   const opacity = useSharedValue(1);
 
   const handleRoute = useCallback(() => {
     if (!from) return;
-    const url = itemRouter(item, from);
     lightHapticFeedback();
-    // @ts-expect-error
-    if (url) router.push(url);
+    const navigation = getItemNavigation(item, from);
+    router.push(navigation as any);
   }, [item, from]);
 
   const tap = Gesture.Tap()
     .maxDuration(2000)
+    .shouldCancelWhenOutside(true)
     .onBegin(() => {
       opacity.value = withTiming(0.8, { duration: 100 });
     })
@@ -174,25 +176,19 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
 
   return (
     <GestureDetector gesture={tap}>
-      <Animated.View
-        style={{
-          opacity: opacity,
-        }}
-        className='px-4'
-      >
-        <View className='relative flex justify-center rounded-2xl overflow-hidden border border-neutral-800'>
+      <Animated.View style={{ opacity }}>
+        <View className='relative flex justify-center overflow-hidden border border-neutral-800'>
           <Image
             source={{
               uri,
             }}
             style={{
               width: "100%",
-              height: 200,
-              borderRadius: 16,
+              height: 500,
               overflow: "hidden",
             }}
           />
-          <View className='absolute bottom-0 left-0 w-full h-24 p-4 flex items-center'>
+          <View className='absolute bottom-0 left-0 w-full flex items-center'>
             <Image
               source={{
                 uri: logoUri,

components/inputs/PinInput.tsx

@@ -0,0 +1,131 @@
+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[2] || "(home)";
+  const from = (segments as string[])[2] || "(home)";
 
   if (from === "(home)" || from === "(search)" || from === "(libraries)")
     return (

components/jellyseerr/RequestModal.tsx

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

components/jellyseerr/discover/CompanySlide.tsx

@@ -16,13 +16,12 @@ const CompanySlide: React.FC<
 > = ({ slide, data, ...props }) => {
   const segments = useSegments();
   const { jellyseerrApi } = useJellyseerr();
-  const from = segments[2] || "(home)";
+  const from = (segments as string[])[2] || "(home)";
 
   const navigate = useCallback(
     ({ id, image, name }: Network | Studio) =>
       router.push({
-        // @ts-expect-error - Dynamic pathname for jellyseerr routing
-        pathname: `/(auth)/(tabs)/${from}/jellyseerr/company/${id}`,
+        pathname: `/(auth)/(tabs)/${from}/jellyseerr/company/${id}` as any,
         params: { id, image, name, type: slide.type },
       }),
     [slide],

components/jellyseerr/discover/Discover.tsx

@@ -31,7 +31,7 @@ const Discover: React.FC<Props> = ({ sliders }) => {
   if (!hasSliders) return null;
 
   return (
-    <View className='flex flex-col space-y-4 mb-8'>
+    <View className='flex flex-col gap-y-4 mb-8'>
       {sortedSliders.map((slide) => {
         switch (slide.type) {
           case DiscoverSliderType.RECENT_REQUESTS:

components/jellyseerr/discover/GenreSlide.tsx

@@ -13,13 +13,12 @@ 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[2] || "(home)";
+  const from = (segments as string[])[2] || "(home)";
 
   const navigate = useCallback(
     (genre: GenreSliderItem) =>
       router.push({
-        // @ts-expect-error - Dynamic pathname for jellyseerr routing
-        pathname: `/(auth)/(tabs)/${from}/jellyseerr/genre/${genre.id}`,
+        pathname: `/(auth)/(tabs)/${from}/jellyseerr/genre/${genre.id}` as any,
         params: { type: slide.type, name: genre.name },
       }),
     [slide],

components/jellyseerr/discover/MovieTvSlide.tsx

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

components/jellyseerr/discover/RecentRequestsSlide.tsx

@@ -8,7 +8,14 @@ import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 import type MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
 import type { NonFunctionProperties } from "@/utils/jellyseerr/server/interfaces/api/common";
 
-const RequestCard: React.FC<{ request: MediaRequest }> = ({ request }) => {
+type ExtendedMediaRequest = NonFunctionProperties<MediaRequest> & {
+  profileName: string;
+  canRemove: boolean;
+};
+
+const RequestCard: React.FC<{ request: ExtendedMediaRequest }> = ({
+  request,
+}) => {
   const { jellyseerrApi } = useJellyseerr();
 
   const { data: details } = useQuery({
@@ -67,9 +74,15 @@ const RecentRequestsSlide: React.FC<SlideProps & ViewProps> = ({
       <Slide
         {...props}
         slide={slide}
-        data={requests.results}
+        data={
+          requests.results.map((item) => ({
+            ...item,
+            profileName: item.profileName ?? "Unknown",
+            canRemove: Boolean(item.canRemove),
+          })) as ExtendedMediaRequest[]
+        }
         keyExtractor={(item) => item.id.toString()}
-        renderItem={(item: NonFunctionProperties<MediaRequest>) => (
+        renderItem={(item: ExtendedMediaRequest) => (
           <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(null);
+  const { settings } = useSettings();
 
   const { t } = useTranslation();
 

components/list/ListGroup.tsx

@@ -27,18 +27,23 @@ export const ListGroup: React.FC<PropsWithChildren<Props>> = ({
         {title}
       </Text>
       <View
-        style={[]}
+        style={{
+          borderRadius: 12,
+        }}
         className='flex flex-col rounded-xl overflow-hidden pl-0 bg-neutral-900'
       >
         {Children.map(childrenArray, (child, index) => {
           if (isValidElement<{ style?: ViewStyle }>(child)) {
+            const isLastItem = index === childrenArray.length - 1;
             return cloneElement(child as any, {
-              style: StyleSheet.compose(
-                child.props.style,
-                index < childrenArray.length - 1
-                  ? styles.borderBottom
-                  : undefined,
-              ),
+              ...(isLastItem
+                ? {}
+                : {
+                    style: StyleSheet.compose(
+                      child.props.style,
+                      styles.borderBottom,
+                    ),
+                  }),
             });
           }
           return child;

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

components/posters/JellyseerrPoster.tsx

@@ -20,6 +20,7 @@ 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,
@@ -27,7 +28,7 @@ import type {
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 
 interface Props extends ViewProps {
-  item?: MovieResult | TvResult | MovieDetails | TvDetails;
+  item?: MovieResult | TvResult | MovieDetails | TvDetails | PersonCreditCast;
   horizontal?: boolean;
   showDownloadInfo?: boolean;
   mediaRequest?: MediaRequest;

components/search/DiscoverFilters.tsx

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