fix: Removes unused credential clearing function

Removes the `_clearAllCredentials` function as it is no longer used.
This simplifies the codebase and removes potentially confusing logic.

.github/workflows/build-apps.yml

@@ -33,7 +33,7 @@ jobs:
           swap-storage: false
 
       - name: 📥 Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -41,12 +41,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -60,7 +60,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: |
             ~/.gradle/caches
@@ -73,7 +73,7 @@ jobs:
         run: bun run prebuild
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -116,7 +116,7 @@ jobs:
           swap-storage: false
 
       - name: 📥 Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -124,12 +124,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
@@ -143,7 +143,7 @@ jobs:
           bun run submodule-reload
 
       - name: 💾 Cache Gradle global
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: |
             ~/.gradle/caches
@@ -156,7 +156,7 @@ jobs:
         run: bun run prebuild:tv
 
       - name: 💾 Cache project Gradle (.gradle)
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: android/.gradle
           key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
@@ -187,7 +187,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -195,12 +195,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
@@ -251,7 +251,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -259,12 +259,12 @@ jobs:
           show-progress: false
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 
       - name: 💾 Cache Bun dependencies
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}

.github/workflows/check-lockfile.yml

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

.github/workflows/ci-codeql.yml

@@ -24,16 +24,16 @@ jobs:
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
+        uses: github/codeql-action/init@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended,security-and-quality
 
       - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
+        uses: github/codeql-action/autobuild@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
+        uses: github/codeql-action/analyze@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10

.github/workflows/crowdin.yml

@@ -23,12 +23,12 @@ jobs:
 
     steps:
       - name: 📥 Checkout Repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           fetch-depth: 0
 
       - name: 🌐 Sync Translations with Crowdin
-        uses: crowdin/github-action@b4b468cffefb50bdd99dd83e5d2eaeb63c880380 # v2.14.0
+        uses: crowdin/github-action@60debf382ee245b21794321190ad0501db89d8c1 # v2.13.0
         with:
           upload_sources: true
           upload_translations: true

.github/workflows/linting.yml

@@ -51,7 +51,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           fetch-depth: 0
@@ -69,14 +69,14 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: 🛒 Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           submodules: recursive
           fetch-depth: 0
 
       - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 
@@ -100,7 +100,7 @@ jobs:
 
     steps:
       - name: "📥 Checkout PR code"
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           submodules: recursive
@@ -112,7 +112,7 @@ jobs:
           node-version: '24.x'
 
       - name: "🍞 Setup Bun"
-        uses: oven-sh/setup-bun@3d267786b128fe76c2f16a390aa2448b815359f3 # v2.1.2
+        uses: oven-sh/setup-bun@b7a1c7ccf290d58743029c4f6903da283811b979 # v2.1.0
         with:
           bun-version: latest
 

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

@@ -18,7 +18,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: "🟢 Setup Node.js"
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
@@ -54,7 +54,7 @@ jobs:
           dry_run: no-push
 
       - name: 📬 Commit and create pull request
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@98357b18bf14b5342f975ff684046ec3b2a07725 # v8.0.0
         with:
           add-paths: .github/ISSUE_TEMPLATE/bug_report.yml
           branch: ci-update-bug-report

CLAUDE.md

@@ -6,7 +6,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-Streamyfin is a cross-platform Jellyfin video streaming client built with Expo (React Native). It supports mobile (iOS/Android) and TV platforms, with features including offline downloads, Chromecast support, and Jellyseerr integration.
+Streamyfin is a cross-platform Jellyfin video streaming client built with Expo (React Native). It supports mobile (iOS/Android) and TV platforms, with features including offline downloads, Chromecast support, and Seerr integration.
 
 ## Development Commands
 

README.md

@@ -22,58 +22,75 @@
    
   <img src="./assets/images/screenshots/screenshot2.png" width="20%">
   &nbsp;
-  <img src="./assets/images/jellyseerr.PNG" width="21%">
+  <img src="./assets/images/seerr.PNG" width="21%">
 </p>
 
 
 ## 🌟 Features
 
-- 🚀 **Skip Intro / Credits Support**: Lets you quickly skip intros and credits during playback
-- 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking
-- 📥 **Download media**: Save your media locally and watch it offline
-- ⚙️ **Settings management**: Manage app configurations for all users through our plugin
-- 🤖 **Seerr (formerly Jellyseerr) integration**: Request media directly in the app
-- 👁️ **Sessions view:** View all active sessions currently streaming on your server
+### 🎬 Media Playback
+- 🚀 **Skip Intro / Credits**: Automatically skip intros and credits during playback
+- 🖼️ **Trickplay Images**: Chapter previews with thumbnails when seeking
+- 🎵 **Music Library**: Full support for music playback with playlists and queue management
+- 📺 **Live TV**: Watch live television streams
 - 📡 **Chromecast**: Cast your media to any Chromecast-enabled device
+- 🎥 **MPV Player**: Powerful open-source player with wide format support
 
-## 🧪 Experimental Features
+### 📱 Media Management
+- 📥 **Download Media**: Save movies, shows, and music locally for offline viewing
+- ⭐ **Favorites**: Quick access to your favorite content
+- 📋 **Watchlists**: Create and manage custom watchlists with Streamystats integration
+- 🔖 **Continue Watching**: Pick up right where you left off
+- 🎯 **Next Up**: Suggestions for your next episode
 
-Streamyfin offers exciting experimental features such as media downloading and Chromecast support. These features are under active development, and your feedback and patience help us make them even better.
+### ⚙️ Advanced Features
+- 🤖 **Seerr Integration**: Request new media directly in the app
+- 🔍 **Smart Search**: Powerful search with Marlin Search and Streamystats support
+- 👁️ **Active Sessions**: View all active streams on your server
+- 🌐 **Multi-Language**: Available in 20+ languages with Crowdin integration
+- 🎨 **Customizable**: Personalize your home screen and settings
+- 🔌 **Plugin System**: Centralized settings sync across all devices via Jellyfin plugin
 
-### 📥 Downloading
+## 🧩 How It Works
+
+### 📥 Downloads
 
 Downloading works by using FFmpeg to convert an HLS stream into a video file on your device. This lets you download and watch any content that you can stream. The conversion is handled in real time by Jellyfin on the server during the download. While this may take a bit longer, it ensures compatibility with any file your server can transcode.
 
 ### 🧩 Streamyfin Plugin
 
-The Jellyfin Plugin for Streamyfin is a plugin you install into Jellyfin that holds all settings for the client Streamyfin. This allows you to synchronize settings across all your users, like for example:
+The Jellyfin Plugin for Streamyfin synchronizes settings across all your devices and users. Install it on your Jellyfin server to enable:
 
 - Automatic Seerr login with no user input required
-- Set your preferred default languages
-- Configure download method and search provider
-- Personalize your home screen
+- Default language preferences for audio and subtitles
+- Configure download settings and search providers (Marlin, Streamystats)
+- Customize your home screen layout and sections
+- Centralized configuration management
 - And much more
 
 [Streamyfin Plugin](https://github.com/streamyfin/jellyfin-plugin-streamyfin)
 
-### 📡 Chromecast
-
-Chromecast support is currently under development. Video casting is already available, and we're actively working on adding subtitle support and additional features.
-
 ### 🎬 MPV Player
 
 Streamyfin uses [MPV](https://mpv.io/) as its primary video player on all platforms, powered by [MPVKit](https://github.com/mpvkit/MPVKit). MPV is a powerful, open-source media player known for its wide format support and high-quality playback.
+
 Thanks to [@Alexk2309](https://github.com/Alexk2309) for the hard work building the native MPV module in Streamyfin.
 
-### 🔍 Jellysearch
+### 🎵 Music Library
 
-[Jellysearch](https://gitlab.com/DomiStyle/jellysearch) works with Streamyfin
+Full music library support with playlists, queue management, background playback, and offline downloads.
 
-> A fast full-text search proxy for Jellyfin. Integrates seamlessly with most Jellyfin clients.
+### 🔍 Search Providers
+
+Streamyfin supports multiple search providers:
+
+- **Marlin Search**: Fast semantic search for your Jellyfin library
+- **Streamystats**: Advanced statistics and personalized recommendations
+- **Jellysearch**: Fast full-text search proxy ([Jellysearch](https://gitlab.com/DomiStyle/jellysearch))
 
 ## 🛣️ Roadmap
 
-Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) To see what we're working on next, we are always open to feedback and suggestions. Please let us know if you have any ideas or feature requests.
+Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) to see what we're working on next. We are always open to feedback and suggestions. Please let us know if you have any ideas or feature requests.
 
 ## 📥 Download Streamyfin
 
@@ -113,13 +130,12 @@ You can contribute translations directly on our [Crowdin project page](https://c
 
 ### 👨‍💻 Development Info
 
-1. Use node `>20`
-2. Install dependencies `bun i && bun run submodule-reload`
-3. Make sure you have xcode and/or android studio installed. (follow the guides for expo: https://docs.expo.dev/workflow/android-studio-emulator/)
-   - If iOS builds fail with `missing Metal Toolchain` (KSPlayer shaders), run `npm run ios:install-metal-toolchain` once
-4. Install BiomeJS extension in VSCode/Your IDE (https://biomejs.dev/)
-4. run `npm run prebuild`
-5. Create an expo dev build by running `npm run ios` or `npm run android`. This will open a simulator on your computer and run the app
+1. Use Node.js `>20`
+2. Install dependencies: `bun i && bun run submodule-reload`
+3. Make sure you have Xcode and/or Android Studio installed ([Expo setup guide](https://docs.expo.dev/workflow/android-studio-emulator/))
+4. Install the [BiomeJS extension](https://biomejs.dev/) in your IDE
+5. Run `npm run prebuild`
+6. Create an Expo dev build by running `npm run ios` or `npm run android`. This will open a simulator on your computer and run the app
 
 For the TV version suffix the npm commands with `:tv`.
 
@@ -137,10 +153,20 @@ Need assistance or have any questions?
 
 ## ❓ FAQ
 
-1. Q: Why can't I see my libraries in Streamyfin?  
-   A: Make sure your server is running one of the latest versions and that you have at least one library that isn't audio only
-2. Q: Why can't I see my music library?
-   A: We don't currently support music and are unlikely to support music in the near future
+1. **Q: Why can't I see my libraries in Streamyfin?**  
+   A: Ensure your Jellyfin server is running a recent version (10.10.0+) and that you have proper permissions to access the libraries.
+
+2. **Q: How do I enable downloads?**  
+   A: Downloads use FFmpeg to convert HLS streams. Ensure your server has transcoding enabled and sufficient resources.
+
+3. **Q: Does Streamyfin support subtitles?**  
+   A: Yes, with full customization including size, color, position, and automatic language selection.
+
+4. **Q: Can I use Streamyfin on Apple TV or Android TV?**  
+   A: Yes, Streamyfin has dedicated TV builds, but they are currently in **early development** and may have stability issues.
+
+5. **Q: How do I set up Seerr integration?**  
+   A: Go to Settings → Plugins → Seerr, enter your server URL and Jellyfin credentials.
 
 ## 📝 Credits
 
@@ -254,7 +280,9 @@ A special mention to the following people and projects for their contributions:
 ## 📄 License
 
 Streamyfin is licensed under the Mozilla Public License 2.0 (MPL-2.0).
+
 This means you are free to use, modify, and distribute this software. The MPL-2.0 is a copyleft license that allows for more flexibility in combining the software with proprietary code.
+
 Key points of the MPL-2.0:
 
 - You can use the software for any purpose
@@ -263,10 +291,13 @@ Key points of the MPL-2.0:
 - You must disclose your source code for any modifications to the covered files
 - Larger works may combine MPL code with code under other licenses
 - MPL-licensed components must remain under the MPL, but the larger work can be under a different license
-- For the full text of the license, please see the LICENSE file in this repository
+
+For the full text of the license, please see the LICENSE file in this repository.
 
 ## ⚠️ Disclaimer
+
 Streamyfin does not promote, support, or condone piracy in any form. The app is intended solely for streaming media that you personally own and control. It does not provide or include any media content. Any discussions, support requests, or references to piracy, as well as any tools, software, or websites related to piracy, are strictly prohibited across all our channels.
 
 ## 🤝 Sponsorship
-VPS hosting generously provided by [Hexabyte](https://hexabyte.se/en/vps/?currency=eur) and [SweHosting](https://swehosting.se/en/#tj%C3%A4nster)
+
+VPS hosting generously provided by [Hexabyte](https://hexabyte.se/en/vps/?currency=eur) and [SweHosting](https://swehosting.se/en/#tj%C3%A4nster).

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

@@ -222,9 +222,9 @@ export default function IndexLayout() {
         }}
       />
       <Stack.Screen
-        name='settings/plugins/jellyseerr/page'
+        name='settings/plugins/seerr/page'
         options={{
-          title: "Jellyseerr",
+          title: "Seerr",
           headerBlurEffect: "none",
           headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,

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

@@ -71,7 +71,7 @@ export default function page() {
           ))}
         </ListGroup>
         <Text className='px-4 text-xs text-neutral-500 mt-1'>
-          {t("home.settings.other.select_liraries_you_want_to_hide")}
+          {t("home.settings.other.select_libraries_you_want_to_hide")}
         </Text>
       </DisabledSetting>
     </ScrollView>

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

@@ -60,7 +60,7 @@ export default function page() {
         ))}
       </ListGroup>
       <Text className='px-4 text-xs text-neutral-500 mt-1'>
-        {t("home.settings.other.select_liraries_you_want_to_hide")}
+        {t("home.settings.other.select_libraries_you_want_to_hide")}
       </Text>
     </DisabledSetting>
   );

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

@@ -1,10 +1,10 @@
 import { ScrollView } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import DisabledSetting from "@/components/settings/DisabledSetting";
-import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
+import { SeerrSettings } from "@/components/settings/Seerr";
 import { useSettings } from "@/utils/atoms/settings";
 
-export default function page() {
+export default function Page() {
   const { pluginSettings } = useSettings();
   const insets = useSafeAreaInsets();
 
@@ -17,10 +17,10 @@ export default function page() {
       }}
     >
       <DisabledSetting
-        disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
+        disabled={pluginSettings?.seerrServerUrl?.locked === true}
         className='px-4'
       >
-        <JellyseerrSettings />
+        <SeerrSettings />
       </DisabledSetting>
     </ScrollView>
   );

app/(auth)/(tabs)/(home)/settings/segment-skip/page.tsx

@@ -1,238 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { useNavigation } from "expo-router";
-import { TFunction } from "i18next";
-import { useEffect, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { ListGroup } from "@/components/list/ListGroup";
-import { ListItem } from "@/components/list/ListItem";
-import { PlatformDropdown } from "@/components/PlatformDropdown";
-import DisabledSetting from "@/components/settings/DisabledSetting";
-import { useSettings } from "@/utils/atoms/settings";
-
-/**
- * Factory function to create skip options for a specific segment type
- * Reduces code duplication across all 5 segment types
- */
-const useSkipOptions = (
-  settingKey:
-    | "skipIntro"
-    | "skipOutro"
-    | "skipRecap"
-    | "skipCommercial"
-    | "skipPreview",
-  settings: ReturnType<typeof useSettings>["settings"] | null,
-  updateSettings: ReturnType<typeof useSettings>["updateSettings"],
-  t: TFunction<"translation", undefined>,
-) => {
-  return useMemo(
-    () => [
-      {
-        options: SEGMENT_SKIP_OPTIONS(t).map((option) => ({
-          type: "radio" as const,
-          label: option.label,
-          value: option.value,
-          selected: option.value === settings?.[settingKey],
-          onPress: () => updateSettings({ [settingKey]: option.value }),
-        })),
-      },
-    ],
-    [settings?.[settingKey], updateSettings, t, settingKey],
-  );
-};
-
-export default function SegmentSkipPage() {
-  const { settings, updateSettings, pluginSettings } = useSettings();
-  const { t } = useTranslation();
-  const navigation = useNavigation();
-
-  useEffect(() => {
-    navigation.setOptions({
-      title: t("home.settings.other.segment_skip_settings"),
-    });
-  }, [navigation, t]);
-
-  const skipIntroOptions = useSkipOptions(
-    "skipIntro",
-    settings,
-    updateSettings,
-    t,
-  );
-  const skipOutroOptions = useSkipOptions(
-    "skipOutro",
-    settings,
-    updateSettings,
-    t,
-  );
-  const skipRecapOptions = useSkipOptions(
-    "skipRecap",
-    settings,
-    updateSettings,
-    t,
-  );
-  const skipCommercialOptions = useSkipOptions(
-    "skipCommercial",
-    settings,
-    updateSettings,
-    t,
-  );
-  const skipPreviewOptions = useSkipOptions(
-    "skipPreview",
-    settings,
-    updateSettings,
-    t,
-  );
-
-  if (!settings) return null;
-
-  return (
-    <DisabledSetting disabled={false} className='px-4'>
-      <ListGroup>
-        <ListItem
-          title={t("home.settings.other.skip_intro")}
-          subtitle={t("home.settings.other.skip_intro_description")}
-          disabled={pluginSettings?.skipIntro?.locked}
-        >
-          <PlatformDropdown
-            groups={skipIntroOptions}
-            disabled={pluginSettings?.skipIntro?.locked}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {t(`home.settings.other.segment_skip_${settings.skipIntro}`)}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.skip_intro")}
-          />
-        </ListItem>
-
-        <ListItem
-          title={t("home.settings.other.skip_outro")}
-          subtitle={t("home.settings.other.skip_outro_description")}
-          disabled={pluginSettings?.skipOutro?.locked}
-        >
-          <PlatformDropdown
-            groups={skipOutroOptions}
-            disabled={pluginSettings?.skipOutro?.locked}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {t(`home.settings.other.segment_skip_${settings.skipOutro}`)}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.skip_outro")}
-          />
-        </ListItem>
-
-        <ListItem
-          title={t("home.settings.other.skip_recap")}
-          subtitle={t("home.settings.other.skip_recap_description")}
-          disabled={pluginSettings?.skipRecap?.locked}
-        >
-          <PlatformDropdown
-            groups={skipRecapOptions}
-            disabled={pluginSettings?.skipRecap?.locked}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {t(`home.settings.other.segment_skip_${settings.skipRecap}`)}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.skip_recap")}
-          />
-        </ListItem>
-
-        <ListItem
-          title={t("home.settings.other.skip_commercial")}
-          subtitle={t("home.settings.other.skip_commercial_description")}
-          disabled={pluginSettings?.skipCommercial?.locked}
-        >
-          <PlatformDropdown
-            groups={skipCommercialOptions}
-            disabled={pluginSettings?.skipCommercial?.locked}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {t(
-                    `home.settings.other.segment_skip_${settings.skipCommercial}`,
-                  )}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.skip_commercial")}
-          />
-        </ListItem>
-
-        <ListItem
-          title={t("home.settings.other.skip_preview")}
-          subtitle={t("home.settings.other.skip_preview_description")}
-          disabled={pluginSettings?.skipPreview?.locked}
-        >
-          <PlatformDropdown
-            groups={skipPreviewOptions}
-            disabled={pluginSettings?.skipPreview?.locked}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {t(
-                    `home.settings.other.segment_skip_${settings.skipPreview}`,
-                  )}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.skip_preview")}
-          />
-        </ListItem>
-      </ListGroup>
-    </DisabledSetting>
-  );
-}
-
-const SEGMENT_SKIP_OPTIONS = (
-  t: TFunction<"translation", undefined>,
-): Array<{
-  label: string;
-  value: "none" | "ask" | "auto";
-}> => [
-  {
-    label: t("home.settings.other.segment_skip_auto"),
-    value: "auto",
-  },
-  {
-    label: t("home.settings.other.segment_skip_ask"),
-    value: "ask",
-  },
-  {
-    label: t("home.settings.other.segment_skip_none"),
-    value: "none",
-  },
-];

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

@@ -3,9 +3,9 @@ import { Image } from "expo-image";
 import { useLocalSearchParams } from "expo-router";
 import { uniqBy } from "lodash";
 import { useMemo } from "react";
-import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
-import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr";
+import SeerrPoster from "@/components/posters/SeerrPoster";
+import ParallaxSlideShow from "@/components/seerr/ParallaxSlideShow";
+import { Endpoints, useSeerr } from "@/hooks/useSeerr";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 import {
   type MovieResult,
@@ -13,9 +13,9 @@ import {
 } from "@/utils/jellyseerr/server/models/Search";
 import { COMPANY_LOGO_IMAGE_FILTER } from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
 
-export default function page() {
+export default function CompanyPage() {
   const local = useLocalSearchParams();
-  const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
+  const { seerrApi, isSeerrMovieOrTvResult } = useSeerr();
 
   const { companyId, image, type } = local as unknown as {
     companyId: string;
@@ -25,12 +25,12 @@ export default function page() {
   };
 
   const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
-    queryKey: ["jellyseerr", "company", type, companyId],
+    queryKey: ["seerr", "company", type, companyId],
     queryFn: async ({ pageParam }) => {
       const params: any = {
         page: Number(pageParam),
       };
-      return jellyseerrApi?.discover(
+      return seerrApi?.discover(
         `${
           Number(type) === DiscoverSliderType.NETWORKS
             ? Endpoints.DISCOVER_TV_NETWORK
@@ -39,7 +39,7 @@ export default function page() {
         params,
       );
     },
-    enabled: !!jellyseerrApi && !!companyId,
+    enabled: !!seerrApi && !!companyId,
     initialPageParam: 1,
     getNextPageParam: (lastPage, pages) =>
       (lastPage?.page || pages?.findLast((p) => p?.results.length)?.page || 1) +
@@ -53,25 +53,24 @@ export default function page() {
         data?.pages
           ?.filter((p) => p?.results.length)
           .flatMap(
-            (p) =>
-              p?.results.filter((r) => isJellyseerrMovieOrTvResult(r)) ?? [],
+            (p) => p?.results.filter((r) => isSeerrMovieOrTvResult(r)) ?? [],
           ),
         "id",
       ) ?? [],
-    [data],
+    [data, isSeerrMovieOrTvResult],
   );
 
   const backdrops = useMemo(
     () =>
-      jellyseerrApi
+      seerrApi
         ? flatData.map((r) =>
-            jellyseerrApi.imageProxy(
+            seerrApi.imageProxy(
               (r as TvResult | MovieResult).backdropPath,
               "w1920_and_h800_multi_faces",
             ),
           )
         : [],
-    [jellyseerrApi, flatData],
+    [seerrApi, flatData],
   );
 
   return (
@@ -92,7 +91,7 @@ export default function page() {
           key={companyId}
           className='bottom-1 w-1/2'
           source={{
-            uri: jellyseerrApi?.imageProxy(image, COMPANY_LOGO_IMAGE_FILTER),
+            uri: seerrApi?.imageProxy(image, COMPANY_LOGO_IMAGE_FILTER),
           }}
           cachePolicy={"memory-disk"}
           contentFit='contain'
@@ -101,7 +100,7 @@ export default function page() {
           }}
         />
       }
-      renderItem={(item, _index) => <JellyseerrPoster item={item} />}
+      renderItem={(item, _index) => <SeerrPoster item={item} />}
     />
   );
 }

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

@@ -3,15 +3,15 @@ import { useLocalSearchParams } from "expo-router";
 import { uniqBy } from "lodash";
 import { useMemo } from "react";
 import { Text } from "@/components/common/Text";
-import { textShadowStyle } from "@/components/jellyseerr/discover/GenericSlideCard";
-import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
-import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr";
+import SeerrPoster from "@/components/posters/SeerrPoster";
+import { textShadowStyle } from "@/components/seerr/discover/GenericSlideCard";
+import ParallaxSlideShow from "@/components/seerr/ParallaxSlideShow";
+import { Endpoints, useSeerr } from "@/hooks/useSeerr";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 
-export default function page() {
+export default function GenrePage() {
   const local = useLocalSearchParams();
-  const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
+  const { seerrApi, isSeerrMovieOrTvResult } = useSeerr();
 
   const { genreId, name, type } = local as unknown as {
     genreId: string;
@@ -20,21 +20,21 @@ export default function page() {
   };
 
   const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
-    queryKey: ["jellyseerr", "company", type, genreId],
+    queryKey: ["seerr", "genre", type, genreId],
     queryFn: async ({ pageParam }) => {
       const params: any = {
         page: Number(pageParam),
         genre: genreId,
       };
 
-      return jellyseerrApi?.discover(
+      return seerrApi?.discover(
         type === DiscoverSliderType.MOVIE_GENRES
           ? Endpoints.DISCOVER_MOVIES
           : Endpoints.DISCOVER_TV,
         params,
       );
     },
-    enabled: !!jellyseerrApi && !!genreId,
+    enabled: !!seerrApi && !!genreId,
     initialPageParam: 1,
     getNextPageParam: (lastPage, pages) =>
       (lastPage?.page || pages?.findLast((p) => p?.results.length)?.page || 1) +
@@ -48,8 +48,7 @@ export default function page() {
         data?.pages
           ?.filter((p) => p?.results.length)
           .flatMap(
-            (p) =>
-              p?.results.filter((r) => isJellyseerrMovieOrTvResult(r)) ?? [],
+            (p) => p?.results.filter((r) => isSeerrMovieOrTvResult(r)) ?? [],
           ),
         "id",
       ) ?? [],
@@ -58,15 +57,12 @@ export default function page() {
 
   const backdrops = useMemo(
     () =>
-      jellyseerrApi
+      seerrApi
         ? flatData.map((r) =>
-            jellyseerrApi.imageProxy(
-              r.backdropPath,
-              "w1920_and_h800_multi_faces",
-            ),
+            seerrApi.imageProxy(r.backdropPath, "w1920_and_h800_multi_faces"),
           )
         : [],
-    [jellyseerrApi, flatData],
+    [seerrApi, flatData],
   );
 
   return (
@@ -91,7 +87,7 @@ export default function page() {
           {name}
         </Text>
       }
-      renderItem={(item, _index) => <JellyseerrPoster item={item} />}
+      renderItem={(item, _index) => <SeerrPoster item={item} />}
     />
   );
 }

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

@@ -18,18 +18,18 @@ import { toast } from "sonner-native";
 import { Button } from "@/components/Button";
 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 { SeerrRatings } from "@/components/Ratings";
+import Cast from "@/components/seerr/Cast";
+import DetailFacts from "@/components/seerr/DetailFacts";
+import RequestModal from "@/components/seerr/RequestModal";
+import SeerrSeasons from "@/components/series/SeerrSeasons";
 import { ItemActions } from "@/components/series/SeriesActions";
 import useRouter from "@/hooks/useAppRouter";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
+import { useSeerr } from "@/hooks/useSeerr";
+import { useSeerrCanRequest } from "@/utils/_seerr/useSeerrCanRequest";
 import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
 import {
   type IssueType,
@@ -68,7 +68,7 @@ const Page: React.FC = () => {
     } & Partial<MovieResult | TvResult | MovieDetails | TvDetails>;
 
   const navigation = useNavigation();
-  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
+  const { seerrApi, seerrUser, requestMedia } = useSeerr();
 
   const [issueType, setIssueType] = useState<IssueType>();
   const [issueMessage, setIssueMessage] = useState<string>();
@@ -83,8 +83,8 @@ const Page: React.FC = () => {
     isLoading,
     refetch,
   } = useQuery({
-    enabled: !!jellyseerrApi && !!result && !!result.id,
-    queryKey: ["jellyseerr", "detail", mediaType, result.id],
+    enabled: !!seerrApi && !!result && !!result.id,
+    queryKey: ["seerr", "detail", mediaType, result.id],
     staleTime: 0,
     refetchOnMount: true,
     refetchOnReconnect: true,
@@ -93,21 +93,18 @@ const Page: React.FC = () => {
     refetchInterval: 0,
     queryFn: async () => {
       return mediaType === MediaType.MOVIE
-        ? jellyseerrApi?.movieDetails(result.id!)
-        : jellyseerrApi?.tvDetails(result.id!);
+        ? seerrApi?.movieDetails(result.id!)
+        : seerrApi?.tvDetails(result.id!);
     },
   });
 
   const [canRequest, hasAdvancedRequestPermission] =
-    useJellyseerrCanRequest(details);
+    useSeerrCanRequest(details);
 
   const canManageRequests = useMemo(() => {
-    if (!jellyseerrUser) return false;
-    return hasPermission(
-      Permission.MANAGE_REQUESTS,
-      jellyseerrUser.permissions,
-    );
-  }, [jellyseerrUser]);
+    if (!seerrUser) return false;
+    return hasPermission(Permission.MANAGE_REQUESTS, seerrUser.permissions);
+  }, [seerrUser]);
 
   const pendingRequest = useMemo(() => {
     return details?.mediaInfo?.requests?.find(
@@ -119,27 +116,27 @@ const Page: React.FC = () => {
     if (!pendingRequest?.id) return;
 
     try {
-      await jellyseerrApi?.approveRequest(pendingRequest.id);
-      toast.success(t("jellyseerr.toasts.request_approved"));
+      await seerrApi?.approveRequest(pendingRequest.id);
+      toast.success(t("seerr.toasts.request_approved"));
       refetch();
     } catch (error) {
-      toast.error(t("jellyseerr.toasts.failed_to_approve_request"));
+      toast.error(t("seerr.toasts.failed_to_approve_request"));
       console.error("Failed to approve request:", error);
     }
-  }, [jellyseerrApi, pendingRequest, refetch, t]);
+  }, [seerrApi, pendingRequest, refetch, t]);
 
   const handleDeclineRequest = useCallback(async () => {
     if (!pendingRequest?.id) return;
 
     try {
-      await jellyseerrApi?.declineRequest(pendingRequest.id);
-      toast.success(t("jellyseerr.toasts.request_declined"));
+      await seerrApi?.declineRequest(pendingRequest.id);
+      toast.success(t("seerr.toasts.request_declined"));
       refetch();
     } catch (error) {
-      toast.error(t("jellyseerr.toasts.failed_to_decline_request"));
+      toast.error(t("seerr.toasts.failed_to_decline_request"));
       console.error("Failed to decline request:", error);
     }
-  }, [jellyseerrApi, pendingRequest, refetch, t]);
+  }, [seerrApi, pendingRequest, refetch, t]);
 
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
@@ -154,7 +151,7 @@ const Page: React.FC = () => {
 
   const submitIssue = useCallback(() => {
     if (result.id && issueType && issueMessage && details) {
-      jellyseerrApi
+      seerrApi
         ?.submitIssue(details.mediaInfo.id, Number(issueType), issueMessage)
         .then(() => {
           setIssueType(undefined);
@@ -162,7 +159,7 @@ const Page: React.FC = () => {
           bottomSheetModalRef?.current?.close();
         });
     }
-  }, [jellyseerrApi, details, result, issueType, issueMessage]);
+  }, [seerrApi, details, result, issueType, issueMessage]);
 
   const handleIssueModalDismiss = useCallback(() => {
     setIssueTypeDropdownOpen(false);
@@ -214,7 +211,7 @@ const Page: React.FC = () => {
   const issueTypeOptionGroups = useMemo(
     () => [
       {
-        title: t("jellyseerr.types"),
+        title: t("seerr.types"),
         options: Object.entries(IssueTypeName)
           .reverse()
           .map(([key, value]) => ({
@@ -265,7 +262,7 @@ const Page: React.FC = () => {
                   height: "100%",
                 }}
                 source={{
-                  uri: jellyseerrApi?.imageProxy(
+                  uri: seerrApi?.imageProxy(
                     result.backdropPath,
                     "w1920_and_h800_multi_faces",
                   ),
@@ -295,7 +292,7 @@ const Page: React.FC = () => {
             <View className='px-4'>
               <View className='flex flex-row justify-between w-full'>
                 <View className='flex flex-col w-56'>
-                  <JellyserrRatings
+                  <SeerrRatings
                     result={
                       result as
                         | MovieResult
@@ -330,7 +327,7 @@ const Page: React.FC = () => {
                 />
               ) : canRequest ? (
                 <Button color='purple' onPress={request} className='mt-4'>
-                  {t("jellyseerr.request_button")}
+                  {t("seerr.request_button")}
                 </Button>
               ) : (
                 details?.mediaInfo?.jellyfinMediaId && (
@@ -353,7 +350,7 @@ const Page: React.FC = () => {
                         }}
                       >
                         <Text className='text-sm'>
-                          {t("jellyseerr.report_issue_button")}
+                          {t("seerr.report_issue_button")}
                         </Text>
                       </Button>
                     )}
@@ -389,12 +386,12 @@ const Page: React.FC = () => {
                   <View className='flex flex-row items-center space-x-2'>
                     <Ionicons name='person-outline' size={16} color='#9CA3AF' />
                     <Text className='text-sm text-neutral-400'>
-                      {t("jellyseerr.requested_by", {
+                      {t("seerr.requested_by", {
                         user:
                           pendingRequest.requestedBy?.displayName ||
                           pendingRequest.requestedBy?.username ||
                           pendingRequest.requestedBy?.jellyfinUsername ||
-                          t("jellyseerr.unknown_user"),
+                          t("seerr.unknown_user"),
                       })}
                     </Text>
                   </View>
@@ -415,7 +412,7 @@ const Page: React.FC = () => {
                         borderStyle: "solid",
                       }}
                     >
-                      <Text className='text-sm'>{t("jellyseerr.approve")}</Text>
+                      <Text className='text-sm'>{t("seerr.approve")}</Text>
                     </Button>
                     <Button
                       className='flex-1 bg-red-600/50 border-red-400 ring-red-400 text-red-100'
@@ -433,7 +430,7 @@ const Page: React.FC = () => {
                         borderStyle: "solid",
                       }}
                     >
-                      <Text className='text-sm'>{t("jellyseerr.decline")}</Text>
+                      <Text className='text-sm'>{t("seerr.decline")}</Text>
                     </Button>
                   </View>
                 </View>
@@ -442,7 +439,7 @@ const Page: React.FC = () => {
             </View>
 
             {mediaType === MediaType.TV && (
-              <JellyseerrSeasons
+              <SeerrSeasons
                 isLoading={isLoading || isFetching}
                 details={details as TvDetails}
                 refetch={refetch}
@@ -491,13 +488,13 @@ const Page: React.FC = () => {
             <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
               <View>
                 <Text className='font-bold text-2xl text-neutral-100'>
-                  {t("jellyseerr.whats_wrong")}
+                  {t("seerr.whats_wrong")}
                 </Text>
               </View>
               <View className='flex flex-col space-y-2 items-start'>
                 <View className='flex flex-col w-full'>
                   <Text className='opacity-50 mb-1 text-xs'>
-                    {t("jellyseerr.issue_type")}
+                    {t("seerr.issue_type")}
                   </Text>
                   <PlatformDropdown
                     groups={issueTypeOptionGroups}
@@ -506,11 +503,11 @@ const Page: React.FC = () => {
                         <Text numberOfLines={1}>
                           {issueType
                             ? IssueTypeName[issueType]
-                            : t("jellyseerr.select_an_issue")}
+                            : t("seerr.select_an_issue")}
                         </Text>
                       </View>
                     }
-                    title={t("jellyseerr.types")}
+                    title={t("seerr.types")}
                     open={issueTypeDropdownOpen}
                     onOpenChange={setIssueTypeDropdownOpen}
                   />
@@ -522,7 +519,7 @@ const Page: React.FC = () => {
                     maxLength={254}
                     style={{ color: "white" }}
                     clearButtonMode='always'
-                    placeholder={t("jellyseerr.describe_the_issue")}
+                    placeholder={t("seerr.describe_the_issue")}
                     placeholderTextColor='#9CA3AF'
                     // Issue with multiline + Textinput inside a portal
                     // https://github.com/callstack/react-native-paper/issues/1668
@@ -532,7 +529,7 @@ const Page: React.FC = () => {
                 </View>
               </View>
               <Button className='mt-auto' onPress={submitIssue} color='purple'>
-                {t("jellyseerr.submit_button")}
+                {t("seerr.submit_button")}
               </Button>
             </View>
           </BottomSheetView>

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

@@ -5,31 +5,27 @@ import { orderBy, uniqBy } from "lodash";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Text } from "@/components/common/Text";
-import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
 import { OverviewText } from "@/components/OverviewText";
-import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import SeerrPoster from "@/components/posters/SeerrPoster";
+import ParallaxSlideShow from "@/components/seerr/ParallaxSlideShow";
+import { useSeerr } from "@/hooks/useSeerr";
 import type { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
 
-export default function page() {
+export default function PersonPage() {
   const local = useLocalSearchParams();
   const { t } = useTranslation();
 
-  const {
-    jellyseerrApi,
-    jellyseerrRegion: region,
-    jellyseerrLocale: locale,
-  } = useJellyseerr();
+  const { seerrApi, seerrLocale: locale } = useSeerr();
 
   const { personId } = local as { personId: string };
 
   const { data } = useQuery({
-    queryKey: ["jellyseerr", "person", personId],
+    queryKey: ["seerr", "person", personId],
     queryFn: async () => ({
-      details: await jellyseerrApi?.personDetails(personId),
-      combinedCredits: await jellyseerrApi?.personCombinedCredits(personId),
+      details: await seerrApi?.personDetails(personId),
+      combinedCredits: await seerrApi?.personCombinedCredits(personId),
     }),
-    enabled: !!jellyseerrApi && !!personId,
+    enabled: !!seerrApi && !!personId,
   });
 
   const castedRoles: PersonCreditCast[] = useMemo(
@@ -46,22 +42,19 @@ export default function page() {
   );
   const backdrops = useMemo(
     () =>
-      jellyseerrApi
+      seerrApi
         ? castedRoles.map((c) =>
-            jellyseerrApi.imageProxy(
-              c.backdropPath,
-              "w1920_and_h800_multi_faces",
-            ),
+            seerrApi.imageProxy(c.backdropPath, "w1920_and_h800_multi_faces"),
           )
         : [],
-    [jellyseerrApi, data?.combinedCredits],
+    [seerrApi, data?.combinedCredits],
   );
 
   return (
     <ParallaxSlideShow
       data={castedRoles}
       images={backdrops}
-      listHeader={t("jellyseerr.appearances")}
+      listHeader={t("seerr.appearances")}
       keyExtractor={(item) => item.id.toString()}
       logo={
         <Image
@@ -69,7 +62,7 @@ export default function page() {
           id={data?.details?.id.toString()}
           className='rounded-full bottom-1'
           source={{
-            uri: jellyseerrApi?.imageProxy(
+            uri: seerrApi?.imageProxy(
               data?.details?.profilePath,
               "w600_and_h600_bestv2",
             ),
@@ -86,16 +79,13 @@ export default function page() {
         <>
           <Text className='font-bold text-2xl mb-1'>{data?.details?.name}</Text>
           <Text className='opacity-50'>
-            {t("jellyseerr.born")}{" "}
+            {t("seerr.born")}{" "}
             {data?.details?.birthday &&
-              new Date(data.details.birthday).toLocaleDateString(
-                `${locale}-${region}`,
-                {
-                  year: "numeric",
-                  month: "long",
-                  day: "numeric",
-                },
-              )}{" "}
+              new Date(data.details.birthday).toLocaleDateString(locale, {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}{" "}
             | {data?.details?.placeOfBirth}
           </Text>
         </>
@@ -103,7 +93,7 @@ export default function page() {
       MainContent={() => (
         <OverviewText text={data?.details?.biography} className='mt-4' />
       )}
-      renderItem={(item, _index) => <JellyseerrPoster item={item} />}
+      renderItem={(item, _index) => <SeerrPoster item={item} />}
     />
   );
 }

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

@@ -33,17 +33,17 @@ export default function SearchLayout() {
           headerShadowVisible: false,
         }}
       />
-      <Stack.Screen name='jellyseerr/page' options={commonScreenOptions} />
+      <Stack.Screen name='seerr/page' options={commonScreenOptions} />
       <Stack.Screen
-        name='jellyseerr/person/[personId]'
+        name='seerr/person/[personId]'
         options={commonScreenOptions}
       />
       <Stack.Screen
-        name='jellyseerr/company/[companyId]'
+        name='seerr/company/[companyId]'
         options={commonScreenOptions}
       />
       <Stack.Screen
-        name='jellyseerr/genre/[genreId]'
+        name='seerr/genre/[genreId]'
         options={commonScreenOptions}
       />
     </Stack>

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

@@ -26,18 +26,18 @@ import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
-import {
-  JellyseerrSearchSort,
-  JellyserrIndexPage,
-} from "@/components/jellyseerr/JellyseerrIndexPage";
 import MoviePoster from "@/components/posters/MoviePoster";
 import SeriesPoster from "@/components/posters/SeriesPoster";
 import { DiscoverFilters } from "@/components/search/DiscoverFilters";
 import { LoadingSkeleton } from "@/components/search/LoadingSkeleton";
 import { SearchItemWrapper } from "@/components/search/SearchItemWrapper";
 import { SearchTabButtons } from "@/components/search/SearchTabButtons";
+import {
+  SeerrIndexPage,
+  SeerrSearchSort,
+} from "@/components/seerr/SeerrIndexPage";
 import useRouter from "@/hooks/useAppRouter";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { useSeerr } from "@/hooks/useSeerr";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
@@ -55,7 +55,7 @@ const exampleSearches = [
   "The Mandalorian",
 ];
 
-export default function search() {
+export default function SearchPage() {
   const params = useLocalSearchParams();
   const insets = useSafeAreaInsets();
   const router = useRouter();
@@ -93,16 +93,11 @@ export default function search() {
   const [api] = useAtom(apiAtom);
 
   const { settings } = useSettings();
-  const { jellyseerrApi } = useJellyseerr();
-  const [jellyseerrOrderBy, setJellyseerrOrderBy] =
-    useState<JellyseerrSearchSort>(
-      JellyseerrSearchSort[
-        JellyseerrSearchSort.DEFAULT
-      ] as unknown as JellyseerrSearchSort,
-    );
-  const [jellyseerrSortOrder, setJellyseerrSortOrder] = useState<
-    "asc" | "desc"
-  >("desc");
+  const { seerrApi } = useSeerr();
+  const [seerrOrderBy, setSeerrOrderBy] = useState<SeerrSearchSort>(
+    SeerrSearchSort[SeerrSearchSort.DEFAULT] as unknown as SeerrSearchSort,
+  );
+  const [seerrSortOrder, setSeerrSortOrder] = useState<"asc" | "desc">("desc");
 
   const searchEngine = useMemo(() => {
     return settings?.searchEngine || "Jellyfin";
@@ -474,7 +469,7 @@ export default function search() {
         className='flex flex-col'
         style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
       >
-        {jellyseerrApi && (
+        {seerrApi && (
           <View className='pl-4 pr-4 flex flex-row'>
             <SearchTabButtons
               searchType={searchType}
@@ -488,10 +483,10 @@ export default function search() {
                 <DiscoverFilters
                   searchFilterId={searchFilterId}
                   orderFilterId={orderFilterId}
-                  jellyseerrOrderBy={jellyseerrOrderBy}
-                  setJellyseerrOrderBy={setJellyseerrOrderBy}
-                  jellyseerrSortOrder={jellyseerrSortOrder}
-                  setJellyseerrSortOrder={setJellyseerrSortOrder}
+                  seerrOrderBy={seerrOrderBy}
+                  setSeerrOrderBy={setSeerrOrderBy}
+                  seerrSortOrder={seerrSortOrder}
+                  setSeerrSortOrder={setSeerrSortOrder}
                   t={t}
                 />
               )}
@@ -754,10 +749,10 @@ export default function search() {
             />
           </View>
         ) : (
-          <JellyserrIndexPage
+          <SeerrIndexPage
             searchQuery={debouncedSearch}
-            sortType={jellyseerrOrderBy}
-            order={jellyseerrSortOrder}
+            sortType={seerrOrderBy}
+            order={seerrSortOrder}
           />
         )}
 

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

@@ -11,7 +11,6 @@ import { withLayoutContext } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
-import { CastingMiniPlayer } from "@/components/casting/CastingMiniPlayer";
 import { MiniPlayerBar } from "@/components/music/MiniPlayerBar";
 import { MusicPlaybackEngine } from "@/components/music/MusicPlaybackEngine";
 import { Colors } from "@/constants/Colors";
@@ -119,7 +118,6 @@ export default function TabLayout() {
           }}
         />
       </NativeTabs>
-      <CastingMiniPlayer />
       <MiniPlayerBar />
       <MusicPlaybackEngine />
     </View>

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

@@ -71,9 +71,6 @@ export default function page() {
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, _setShowControls] = useState(true);
   const [isPipMode, setIsPipMode] = useState(false);
-  const [aspectRatio] = useState<"default" | "16:9" | "4:3" | "1:1" | "21:9">(
-    "default",
-  );
   const [isZoomedToFill, setIsZoomedToFill] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isMuted, setIsMuted] = useState(false);
@@ -939,7 +936,7 @@ export default function page() {
                   console.error("Video Error:", e.nativeEvent);
                   Alert.alert(
                     t("player.error"),
-                    t("player.an_error_occurred_while_playing_the_video"),
+                    t("player.an_error_occured_while_playing_the_video"),
                   );
                   writeToLog("ERROR", "Video Error", e.nativeEvent);
                 }}
@@ -981,7 +978,6 @@ export default function page() {
                 pause={pause}
                 seek={seek}
                 enableTrickplay={true}
-                aspectRatio={aspectRatio}
                 isZoomedToFill={isZoomedToFill}
                 onZoomToggle={handleZoomToggle}
                 api={api}

augmentations/index.ts

@@ -1,4 +1,3 @@
 export * from "./api";
 export * from "./mmkv";
 export * from "./number";
-export * from "./string";

augmentations/number.ts

@@ -3,7 +3,6 @@ declare global {
     bytesToReadable(decimals?: number): string;
     secondsToMilliseconds(): number;
     minutesToMilliseconds(): number;
-    hoursToMilliseconds(): number;
   }
 }
 
@@ -28,8 +27,4 @@ Number.prototype.minutesToMilliseconds = function () {
   return this.valueOf() * (60).secondsToMilliseconds();
 };
 
-Number.prototype.hoursToMilliseconds = function () {
-  return this.valueOf() * (60).minutesToMilliseconds();
-};
-
 export {};

augmentations/string.ts

@@ -1,14 +0,0 @@
-declare global {
-  interface String {
-    toTitle(): string;
-  }
-}
-
-String.prototype.toTitle = function () {
-  return this.replaceAll("_", " ").replace(
-    /\w\S*/g,
-    (text) => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase(),
-  );
-};
-
-export {};

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "streamyfin",
@@ -18,7 +19,7 @@
         "@shopify/flash-list": "2.0.2",
         "@tanstack/query-sync-storage-persister": "^5.90.18",
         "@tanstack/react-pacer": "^0.19.1",
-        "@tanstack/react-query": "5.90.20",
+        "@tanstack/react-query": "5.90.17",
         "@tanstack/react-query-persist-client": "^5.90.18",
         "axios": "^1.7.9",
         "expo": "~54.0.31",
@@ -51,12 +52,12 @@
         "expo-web-browser": "~15.0.10",
         "i18next": "^25.0.0",
         "jotai": "2.16.2",
-        "lodash": "4.17.23",
+        "lodash": "4.17.21",
         "nativewind": "^2.0.11",
         "patch-package": "^8.0.0",
         "react": "19.1.0",
         "react-dom": "19.1.0",
-        "react-i18next": "16.5.4",
+        "react-i18next": "16.5.3",
         "react-native": "0.81.5",
         "react-native-awesome-slider": "^2.9.0",
         "react-native-bottom-tabs": "1.1.0",
@@ -96,7 +97,7 @@
       "devDependencies": {
         "@babel/core": "7.28.6",
         "@biomejs/biome": "2.3.11",
-        "@react-native-community/cli": "20.1.1",
+        "@react-native-community/cli": "20.1.0",
         "@react-native-tvos/config-tv": "0.1.4",
         "@types/jest": "29.5.14",
         "@types/lodash": "4.17.23",
@@ -511,29 +512,29 @@
 
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
-    "@react-native-community/cli": ["@react-native-community/cli@20.1.1", "", { "dependencies": { "@react-native-community/cli-clean": "20.1.1", "@react-native-community/cli-config": "20.1.1", "@react-native-community/cli-doctor": "20.1.1", "@react-native-community/cli-server-api": "20.1.1", "@react-native-community/cli-tools": "20.1.1", "@react-native-community/cli-types": "20.1.1", "commander": "^9.4.1", "deepmerge": "^4.3.0", "execa": "^5.0.0", "find-up": "^5.0.0", "fs-extra": "^8.1.0", "graceful-fs": "^4.1.3", "picocolors": "^1.1.1", "prompts": "^2.4.2", "semver": "^7.5.2" }, "bin": { "rnc-cli": "build/bin.js" } }, "sha512-aLPUx43+WSeTOaUepR2FBD5a1V0OAZ1QB2DOlRlW4fOEjtBXgv40eM/ho8g3WCvAOKfPvTvx4fZdcuovTyV81Q=="],
+    "@react-native-community/cli": ["@react-native-community/cli@20.1.0", "", { "dependencies": { "@react-native-community/cli-clean": "20.1.0", "@react-native-community/cli-config": "20.1.0", "@react-native-community/cli-doctor": "20.1.0", "@react-native-community/cli-server-api": "20.1.0", "@react-native-community/cli-tools": "20.1.0", "@react-native-community/cli-types": "20.1.0", "commander": "^9.4.1", "deepmerge": "^4.3.0", "execa": "^5.0.0", "find-up": "^5.0.0", "fs-extra": "^8.1.0", "graceful-fs": "^4.1.3", "picocolors": "^1.1.1", "prompts": "^2.4.2", "semver": "^7.5.2" }, "bin": { "rnc-cli": "build/bin.js" } }, "sha512-441WsVtRe4nGJ9OzA+QMU1+22lA6Q2hRWqqIMKD0wjEMLqcSfOZyu2UL9a/yRpL/dRpyUsU4n7AxqKfTKO/Csg=="],
 
-    "@react-native-community/cli-clean": ["@react-native-community/cli-clean@20.1.1", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.1", "execa": "^5.0.0", "fast-glob": "^3.3.2", "picocolors": "^1.1.1" } }, "sha512-6nGQ08w2+EcDwTFC4JFiW/wI2pLwzMrk9thz4um7tKRNW8sADX0IyCsfM2F4rHS720C0UNKYBZE9nAsfp8Vkcw=="],
+    "@react-native-community/cli-clean": ["@react-native-community/cli-clean@20.1.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.0", "execa": "^5.0.0", "fast-glob": "^3.3.2", "picocolors": "^1.1.1" } }, "sha512-77L4DifWfxAT8ByHnkypge7GBMYpbJAjBGV+toowt5FQSGaTBDcBHCX+FFqFRukD5fH6i8sZ41Gtw+nbfCTTIA=="],
 
-    "@react-native-community/cli-config": ["@react-native-community/cli-config@20.1.1", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.1", "cosmiconfig": "^9.0.0", "deepmerge": "^4.3.0", "fast-glob": "^3.3.2", "joi": "^17.2.1", "picocolors": "^1.1.1" } }, "sha512-ajs2i56MANie/v0bMQ1BmRcrOb6MEvLT2rh/I1CA62NXGqF1Rxv6QwsN84LrADMXHRg8QiEMAIADkyDeQHt7Kg=="],
+    "@react-native-community/cli-config": ["@react-native-community/cli-config@20.1.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.0", "cosmiconfig": "^9.0.0", "deepmerge": "^4.3.0", "fast-glob": "^3.3.2", "joi": "^17.2.1", "picocolors": "^1.1.1" } }, "sha512-1x9rhLLR/dKKb92Lb5O0l0EmUG08FHf+ZVyVEf9M+tX+p5QIm52MRiy43R0UAZ2jJnFApxRk+N3sxoYK4Dtnag=="],
 
-    "@react-native-community/cli-config-android": ["@react-native-community/cli-config-android@20.1.1", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.1", "fast-glob": "^3.3.2", "fast-xml-parser": "^4.4.1", "picocolors": "^1.1.1" } }, "sha512-1iUV2rPAyoWPo8EceAFC2vZTF+pEd9YqS87c0aqpbGOFE0gs1rHEB+auVR8CdjzftR4U9sq6m2jrdst0rvpIkg=="],
+    "@react-native-community/cli-config-android": ["@react-native-community/cli-config-android@20.1.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.0", "fast-glob": "^3.3.2", "fast-xml-parser": "^4.4.1", "picocolors": "^1.1.1" } }, "sha512-3A01ZDyFeCALzzPcwP/fleHoP3sGNq1UX7FzxkTrOFX8RRL9ntXNXQd27E56VU4BBxGAjAJT4Utw8pcOjJceIA=="],
 
-    "@react-native-community/cli-config-apple": ["@react-native-community/cli-config-apple@20.1.1", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.1", "execa": "^5.0.0", "fast-glob": "^3.3.2", "picocolors": "^1.1.1" } }, "sha512-doepJgLJVqeJb5tNoP9hyFIcoZ1OMGO7QN/YMuCCIjbThUQe/J87XdwPol3Qrjr58KRt9xeBVz+kHeW5mtSutw=="],
+    "@react-native-community/cli-config-apple": ["@react-native-community/cli-config-apple@20.1.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.0", "execa": "^5.0.0", "fast-glob": "^3.3.2", "picocolors": "^1.1.1" } }, "sha512-n6JVs8Q3yxRbtZQOy05ofeb1kGtspGN3SgwPmuaqvURF9fsuS7c4/9up2Kp9C+1D2J1remPJXiZLNGOcJvfpOA=="],
 
-    "@react-native-community/cli-doctor": ["@react-native-community/cli-doctor@20.1.1", "", { "dependencies": { "@react-native-community/cli-config": "20.1.1", "@react-native-community/cli-platform-android": "20.1.1", "@react-native-community/cli-platform-apple": "20.1.1", "@react-native-community/cli-platform-ios": "20.1.1", "@react-native-community/cli-tools": "20.1.1", "command-exists": "^1.2.8", "deepmerge": "^4.3.0", "envinfo": "^7.13.0", "execa": "^5.0.0", "node-stream-zip": "^1.9.1", "ora": "^5.4.1", "picocolors": "^1.1.1", "semver": "^7.5.2", "wcwidth": "^1.0.1", "yaml": "^2.2.1" } }, "sha512-eFpg5wWnV7uGqvLemshpgj2trPD8cckqxBuI4nT7sxKF/YpA/e3nnnyytHxPP5EnYfWbMcqfaq8hDJoOnJinGQ=="],
+    "@react-native-community/cli-doctor": ["@react-native-community/cli-doctor@20.1.0", "", { "dependencies": { "@react-native-community/cli-config": "20.1.0", "@react-native-community/cli-platform-android": "20.1.0", "@react-native-community/cli-platform-apple": "20.1.0", "@react-native-community/cli-platform-ios": "20.1.0", "@react-native-community/cli-tools": "20.1.0", "command-exists": "^1.2.8", "deepmerge": "^4.3.0", "envinfo": "^7.13.0", "execa": "^5.0.0", "node-stream-zip": "^1.9.1", "ora": "^5.4.1", "picocolors": "^1.1.1", "semver": "^7.5.2", "wcwidth": "^1.0.1", "yaml": "^2.2.1" } }, "sha512-QfJF1GVjA4PBrIT3SJ0vFFIu0km1vwOmLDlOYVqfojajZJ+Dnvl0f94GN1il/jT7fITAxom///XH3/URvi7YTQ=="],
 
-    "@react-native-community/cli-platform-android": ["@react-native-community/cli-platform-android@20.1.1", "", { "dependencies": { "@react-native-community/cli-config-android": "20.1.1", "@react-native-community/cli-tools": "20.1.1", "execa": "^5.0.0", "logkitty": "^0.7.1", "picocolors": "^1.1.1" } }, "sha512-KPheizJQI0tVvBLy9owzpo+A9qDsDAa87e7a8xNaHnwqGpExnIzFPrbdvrltiZjstU2eB/+/UgNQxYIEd4Oc+g=="],
+    "@react-native-community/cli-platform-android": ["@react-native-community/cli-platform-android@20.1.0", "", { "dependencies": { "@react-native-community/cli-config-android": "20.1.0", "@react-native-community/cli-tools": "20.1.0", "execa": "^5.0.0", "logkitty": "^0.7.1", "picocolors": "^1.1.1" } }, "sha512-TeHPDThOwDppQRpndm9kCdRCBI8AMy3HSIQ+iy7VYQXL5BtZ5LfmGdusoj7nVN/ZGn0Lc6Gwts5qowyupXdeKg=="],
 
-    "@react-native-community/cli-platform-apple": ["@react-native-community/cli-platform-apple@20.1.1", "", { "dependencies": { "@react-native-community/cli-config-apple": "20.1.1", "@react-native-community/cli-tools": "20.1.1", "execa": "^5.0.0", "fast-xml-parser": "^4.4.1", "picocolors": "^1.1.1" } }, "sha512-mQEjOzRFCcQTrCt73Q/+5WWTfUg6U2vLZv5rPuFiNrLbrwRqxVH3OLaXg5gilJkDTJC80z8iOSsdd8MRxONOig=="],
+    "@react-native-community/cli-platform-apple": ["@react-native-community/cli-platform-apple@20.1.0", "", { "dependencies": { "@react-native-community/cli-config-apple": "20.1.0", "@react-native-community/cli-tools": "20.1.0", "execa": "^5.0.0", "fast-xml-parser": "^4.4.1", "picocolors": "^1.1.1" } }, "sha512-0ih1hrYezSM2cuOlVnwBEFtMwtd8YgpTLmZauDJCv50rIumtkI1cQoOgLoS4tbPCj9U/Vn2a9BFH0DLFOOIacg=="],
 
-    "@react-native-community/cli-platform-ios": ["@react-native-community/cli-platform-ios@20.1.1", "", { "dependencies": { "@react-native-community/cli-platform-apple": "20.1.1" } }, "sha512-6vr10/oSjKkZO/BBgfFJNQTC/0CDF4WrN8iW9ss+Kt6ZL2QrBXLYz7fobrrboOlHwqqs5EyQadlEaNii7gKRJg=="],
+    "@react-native-community/cli-platform-ios": ["@react-native-community/cli-platform-ios@20.1.0", "", { "dependencies": { "@react-native-community/cli-platform-apple": "20.1.0" } }, "sha512-XN7Da9z4WsJxtqVtEzY8q2bv22OsvzaFP5zy5+phMWNoJlU4lf7IvBSxqGYMpQ9XhYP7arDw5vmW4W34s06rnA=="],
 
-    "@react-native-community/cli-server-api": ["@react-native-community/cli-server-api@20.1.1", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.1", "body-parser": "^1.20.3", "compression": "^1.7.1", "connect": "^3.6.5", "errorhandler": "^1.5.1", "nocache": "^3.0.1", "open": "^6.2.0", "pretty-format": "^29.7.0", "serve-static": "^1.13.1", "strict-url-sanitise": "0.0.1", "ws": "^6.2.3" } }, "sha512-phHfiCa4WqfKfaoV2vGVR3ZrYQDQTpI1k+C+i6rXAxFGxPuy8IgFFVOSL543qjKPpHBVwLcA+/xAJCVpdyCtVQ=="],
+    "@react-native-community/cli-server-api": ["@react-native-community/cli-server-api@20.1.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.1.0", "body-parser": "^1.20.3", "compression": "^1.7.1", "connect": "^3.6.5", "errorhandler": "^1.5.1", "nocache": "^3.0.1", "open": "^6.2.0", "pretty-format": "^29.7.0", "serve-static": "^1.13.1", "ws": "^6.2.3" } }, "sha512-Tb415Oh8syXNT2zOzLzFkBXznzGaqKCiaichxKzGCDKg6JGHp3jSuCmcTcaPeYC7oc32n/S3Psw7798r4Q/7lA=="],
 
-    "@react-native-community/cli-tools": ["@react-native-community/cli-tools@20.1.1", "", { "dependencies": { "@vscode/sudo-prompt": "^9.0.0", "appdirsjs": "^1.2.4", "execa": "^5.0.0", "find-up": "^5.0.0", "launch-editor": "^2.9.1", "mime": "^2.4.1", "ora": "^5.4.1", "picocolors": "^1.1.1", "prompts": "^2.4.2", "semver": "^7.5.2" } }, "sha512-j+zX/H2X+6ZGneIDj56tZ1Hbnip5nSfnq7yGlMyF/zm3U1hKp3G1jN5v0YEfnz/zEmjr7zruh4Y06KmZrF1lrA=="],
+    "@react-native-community/cli-tools": ["@react-native-community/cli-tools@20.1.0", "", { "dependencies": { "@vscode/sudo-prompt": "^9.0.0", "appdirsjs": "^1.2.4", "execa": "^5.0.0", "find-up": "^5.0.0", "launch-editor": "^2.9.1", "mime": "^2.4.1", "ora": "^5.4.1", "picocolors": "^1.1.1", "prompts": "^2.4.2", "semver": "^7.5.2" } }, "sha512-/YmzHGOkY6Bgrv4OaA1L8rFqsBlQd1EB2/ipAoKPiieV0EcB5PUamUSuNeFU3sBZZTYQCUENwX4wgOHgFUlDnQ=="],
 
-    "@react-native-community/cli-types": ["@react-native-community/cli-types@20.1.1", "", { "dependencies": { "joi": "^17.2.1" } }, "sha512-Tp+s27I/RDONrGvWVj4IzEmga2HhJhXi8ZlZTfycMMyAcv4LG/CTPira+BUZs8nzLAJNrlJ79pVVPJPqQAe+aw=="],
+    "@react-native-community/cli-types": ["@react-native-community/cli-types@20.1.0", "", { "dependencies": { "joi": "^17.2.1" } }, "sha512-D0kDspcwgbVXyNjwicT7Bb1JgXjijTw1JJd+qxyF/a9+sHv7TU4IchV+gN38QegeXqVyM4Ym7YZIvXMFBmyJqA=="],
 
     "@react-native-community/netinfo": ["@react-native-community/netinfo@11.4.1", "", { "peerDependencies": { "react-native": ">=0.59" } }, "sha512-B0BYAkghz3Q2V09BF88RA601XursIEA111tnc2JOaN7axJWmNefmfjZqw/KdSxKZp7CZUuPpjBmz/WCR9uaHYg=="],
 
@@ -601,7 +602,7 @@
 
     "@tanstack/react-pacer": ["@tanstack/react-pacer@0.19.1", "", { "dependencies": { "@tanstack/pacer": "0.17.1", "@tanstack/react-store": "^0.8.0" }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-wfGwKLo2gosKr5tsXico+jWJ8LsWsBC8MA1HVtUY/D6dhFduEVizKxRUcvP60I3dRvnoXDbN202g4feJHlivnA=="],
 
-    "@tanstack/react-query": ["@tanstack/react-query@5.90.20", "", { "dependencies": { "@tanstack/query-core": "5.90.20" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-vXBxa+qeyveVO7OA0jX1z+DeyCA4JKnThKv411jd5SORpBKgkcVnYKCiBgECvADvniBX7tobwBmg01qq9JmMJw=="],
+    "@tanstack/react-query": ["@tanstack/react-query@5.90.17", "", { "dependencies": { "@tanstack/query-core": "5.90.17" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-PGc2u9KLwohDUSchjW9MZqeDQJfJDON7y4W7REdNBgiFKxQy+Pf7eGjiFWEj5xPqKzAeHYdAb62IWI1a9UJyGQ=="],
 
     "@tanstack/react-query-persist-client": ["@tanstack/react-query-persist-client@5.90.18", "", { "dependencies": { "@tanstack/query-persist-client-core": "5.91.15" }, "peerDependencies": { "@tanstack/react-query": "^5.90.16", "react": "^18 || ^19" } }, "sha512-ToVRTVpjzTrd9S/p7JIvGdLs+Xtz9aDMM/7+TQGSV9notY8Jt64irfAAAkZ05syftLKS+3KPgyKAnHcVeKVbWQ=="],
 
@@ -1375,7 +1376,7 @@
 
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
-    "lodash": ["lodash@4.17.23", "", {}, "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="],
+    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
 
     "lodash.debounce": ["lodash.debounce@4.0.8", "", {}, "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="],
 
@@ -1639,7 +1640,7 @@
 
     "react-freeze": ["react-freeze@1.0.4", "", { "peerDependencies": { "react": ">=17.0.0" } }, "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA=="],
 
-    "react-i18next": ["react-i18next@16.5.4", "", { "dependencies": { "@babel/runtime": "^7.28.4", "html-parse-stringify": "^3.0.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "i18next": ">= 25.6.2", "react": ">= 16.8.0", "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-6yj+dcfMncEC21QPhOTsW8mOSO+pzFmT6uvU7XXdvM/Cp38zJkmTeMeKmTrmCMD5ToT79FmiE/mRWiYWcJYW4g=="],
+    "react-i18next": ["react-i18next@16.5.3", "", { "dependencies": { "@babel/runtime": "^7.28.4", "html-parse-stringify": "^3.0.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "i18next": ">= 25.6.2", "react": ">= 16.8.0", "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-fo+/NNch37zqxOzlBYrWMx0uy/yInPkRfjSuy4lqKdaecR17nvCHnEUt3QyzA8XjQ2B/0iW/5BhaHR3ZmukpGw=="],
 
     "react-is": ["react-is@19.2.3", "", {}, "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA=="],
 
@@ -1853,8 +1854,6 @@
 
     "strict-uri-encode": ["strict-uri-encode@2.0.0", "", {}, "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="],
 
-    "strict-url-sanitise": ["strict-url-sanitise@0.0.1", "", {}, "sha512-nuFtF539K8jZg3FjaWH/L8eocCR6gegz5RDOsaWxfdbF5Jqr2VXWxZayjTwUzsWJDC91k2EbnJXp6FuWW+Z4hg=="],
-
     "string-argv": ["string-argv@0.3.2", "", {}, "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q=="],
 
     "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
@@ -2243,7 +2242,7 @@
 
     "@react-navigation/native-stack/color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
 
-    "@tanstack/react-query/@tanstack/query-core": ["@tanstack/query-core@5.90.20", "", {}, "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg=="],
+    "@tanstack/react-query/@tanstack/query-core": ["@tanstack/query-core@5.90.17", "", {}, "sha512-hDww+RyyYhjhUfoYQ4es6pbgxY7LNiPWxt4l1nJqhByjndxJ7HIjDxTBtfvMr5HwjYavMrd+ids5g4Rfev3lVQ=="],
 
     "@types/babel__core/@babel/parser": ["@babel/parser@7.28.5", "", { "dependencies": { "@babel/types": "^7.28.5" }, "bin": "./bin/babel-parser.js" }, "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ=="],
 

components/Chromecast.tsx

@@ -1,23 +1,15 @@
 import { Feather } from "@expo/vector-icons";
-import type { PlaybackProgressInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
-import { router } from "expo-router";
-import { useAtomValue } from "jotai";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { Platform } from "react-native";
 import { Pressable } from "react-native-gesture-handler";
 import GoogleCast, {
   CastButton,
   CastContext,
-  CastState,
   useCastDevice,
-  useCastState,
   useDevices,
   useMediaStatus,
   useRemoteMediaClient,
 } from "react-native-google-cast";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { ChromecastConnectionMenu } from "./chromecast/ChromecastConnectionMenu";
 import { RoundButton } from "./RoundButton";
 
 export function Chromecast({
@@ -26,137 +18,23 @@ export function Chromecast({
   background = "transparent",
   ...props
 }) {
-  // Hooks called for their side effects (keep Chromecast session active)
-  useRemoteMediaClient();
-  useCastDevice();
-  const castState = useCastState();
-  useDevices();
+  const client = useRemoteMediaClient();
+  const castDevice = useCastDevice();
+  const devices = useDevices();
+  const sessionManager = GoogleCast.getSessionManager();
   const discoveryManager = GoogleCast.getDiscoveryManager();
   const mediaStatus = useMediaStatus();
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
 
-  // Connection menu state
-  const [showConnectionMenu, setShowConnectionMenu] = useState(false);
-  const isConnected = castState === CastState.CONNECTED;
-
-  const lastReportedProgressRef = useRef(0);
-  const lastReportedPlayerStateRef = useRef<string | null>(null);
-  const playSessionIdRef = useRef<string | null>(null);
-  const lastContentIdRef = useRef<string | null>(null);
-  const discoveryAttempts = useRef(0);
-  const maxDiscoveryAttempts = 3;
-
-  // Enhanced discovery with retry mechanism - runs once on mount
   useEffect(() => {
-    let isSubscribed = true;
-    let retryTimeout: NodeJS.Timeout;
-
-    const startDiscoveryWithRetry = async () => {
+    (async () => {
       if (!discoveryManager) {
+        console.warn("DiscoveryManager is not initialized");
         return;
       }
 
-      try {
-        // Stop any existing discovery first
-        try {
-          await discoveryManager.stopDiscovery();
-        } catch {
-          // Ignore errors when stopping
-        }
-
-        // Start fresh discovery
-        await discoveryManager.startDiscovery();
-        discoveryAttempts.current = 0; // Reset on success
-      } catch (error) {
-        console.error("[Chromecast Discovery] Failed:", error);
-
-        // Retry on error
-        if (discoveryAttempts.current < maxDiscoveryAttempts && isSubscribed) {
-          discoveryAttempts.current++;
-          retryTimeout = setTimeout(() => {
-            if (isSubscribed) {
-              startDiscoveryWithRetry();
-            }
-          }, 2000);
-        }
-      }
-    };
-
-    startDiscoveryWithRetry();
-
-    return () => {
-      isSubscribed = false;
-      if (retryTimeout) {
-        clearTimeout(retryTimeout);
-      }
-    };
-  }, [discoveryManager]); // Only re-run if discoveryManager changes
-
-  // Report video progress to Jellyfin server
-  useEffect(() => {
-    if (!api || !user?.Id || !mediaStatus?.mediaInfo?.contentId) {
-      return;
-    }
-
-    const streamPosition = mediaStatus.streamPosition || 0;
-    const playerState = mediaStatus.playerState || null;
-
-    // Report every 10 seconds OR immediately when playerState changes (pause/resume)
-    const positionChanged =
-      Math.abs(streamPosition - lastReportedProgressRef.current) >= 10;
-    const stateChanged = playerState !== lastReportedPlayerStateRef.current;
-    if (!positionChanged && !stateChanged) {
-      return;
-    }
-
-    const contentId = mediaStatus.mediaInfo.contentId;
-
-    // Generate a new PlaySessionId when the content changes
-    if (contentId !== lastContentIdRef.current) {
-      const randomBytes = new Uint8Array(16);
-      crypto.getRandomValues(randomBytes);
-      // Format as UUID v4
-      randomBytes[6] = (randomBytes[6] & 0x0f) | 0x40; // Version 4
-      randomBytes[8] = (randomBytes[8] & 0x3f) | 0x80; // Variant 10
-      const uuid = Array.from(randomBytes, (b, i) => {
-        const hex = b.toString(16).padStart(2, "0");
-        return [4, 6, 8, 10].includes(i) ? `-${hex}` : hex;
-      }).join("");
-      playSessionIdRef.current = uuid;
-      lastContentIdRef.current = contentId;
-    }
-
-    const positionTicks = Math.floor(streamPosition * 10000000);
-    const isPaused = mediaStatus.playerState === "paused";
-    const streamUrl = mediaStatus.mediaInfo.contentUrl || "";
-    const isTranscoding = /m3u8/i.test(streamUrl);
-
-    const progressInfo: PlaybackProgressInfo = {
-      ItemId: contentId,
-      PositionTicks: positionTicks,
-      IsPaused: isPaused,
-      PlayMethod: isTranscoding ? "Transcode" : "DirectStream",
-      PlaySessionId: playSessionIdRef.current || contentId,
-    };
-
-    getPlaystateApi(api)
-      .reportPlaybackProgress({ playbackProgressInfo: progressInfo })
-      .then(() => {
-        lastReportedProgressRef.current = streamPosition;
-        lastReportedPlayerStateRef.current = playerState;
-      })
-      .catch((error) => {
-        console.error("Failed to report Chromecast progress:", error);
-      });
-  }, [
-    api,
-    user?.Id,
-    mediaStatus?.streamPosition,
-    mediaStatus?.mediaInfo?.contentId,
-    mediaStatus?.playerState,
-    mediaStatus?.mediaInfo?.contentUrl,
-  ]);
+      await discoveryManager.startDiscovery();
+    })();
+  }, [client, devices, castDevice, sessionManager, discoveryManager]);
 
   // Android requires the cast button to be present for startDiscovery to work
   const AndroidCastButton = useCallback(
@@ -165,92 +43,50 @@ export function Chromecast({
     [Platform.OS],
   );
 
-  // Handle press - show connection menu when connected, otherwise show cast dialog
-  const handlePress = useCallback(() => {
-    if (isConnected) {
-      if (mediaStatus?.currentItemId) {
-        // Media is playing - navigate to full player
-        router.push("/casting-player");
-      } else {
-        // Connected but no media - show connection menu
-        setShowConnectionMenu(true);
-      }
-    } else {
-      // Not connected - show cast dialog
-      CastContext.showCastDialog();
-    }
-  }, [isConnected, mediaStatus?.currentItemId]);
-
-  // Handle disconnect from Chromecast
-  const handleDisconnect = useCallback(async () => {
-    try {
-      const sessionManager = GoogleCast.getSessionManager();
-      await sessionManager.endCurrentSession(true);
-    } catch (error) {
-      console.error("[Chromecast] Disconnect error:", error);
-    }
-  }, []);
-
   if (Platform.OS === "ios") {
     return (
-      <>
-        <Pressable className='mr-4' onPress={handlePress} {...props}>
-          <AndroidCastButton />
-          <Feather
-            name='cast'
-            size={22}
-            color={isConnected ? "#a855f7" : "white"}
-          />
-        </Pressable>
-        <ChromecastConnectionMenu
-          visible={showConnectionMenu}
-          onClose={() => setShowConnectionMenu(false)}
-          onDisconnect={handleDisconnect}
-        />
-      </>
+      <Pressable
+        className='mr-4'
+        onPress={() => {
+          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+          else CastContext.showCastDialog();
+        }}
+        {...props}
+      >
+        <AndroidCastButton />
+        <Feather name='cast' size={22} color={"white"} />
+      </Pressable>
     );
   }
 
   if (background === "transparent")
     return (
-      <>
-        <RoundButton
-          size='large'
-          className='mr-2'
-          background={false}
-          onPress={handlePress}
-          {...props}
-        >
-          <AndroidCastButton />
-          <Feather
-            name='cast'
-            size={22}
-            color={isConnected ? "#a855f7" : "white"}
-          />
-        </RoundButton>
-        <ChromecastConnectionMenu
-          visible={showConnectionMenu}
-          onClose={() => setShowConnectionMenu(false)}
-          onDisconnect={handleDisconnect}
-        />
-      </>
+      <RoundButton
+        size='large'
+        className='mr-2'
+        background={false}
+        onPress={() => {
+          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+          else CastContext.showCastDialog();
+        }}
+        {...props}
+      >
+        <AndroidCastButton />
+        <Feather name='cast' size={22} color={"white"} />
+      </RoundButton>
     );
 
   return (
-    <>
-      <RoundButton size='large' onPress={handlePress} {...props}>
-        <AndroidCastButton />
-        <Feather
-          name='cast'
-          size={22}
-          color={isConnected ? "#a855f7" : "white"}
-        />
-      </RoundButton>
-      <ChromecastConnectionMenu
-        visible={showConnectionMenu}
-        onClose={() => setShowConnectionMenu(false)}
-        onDisconnect={handleDisconnect}
-      />
-    </>
+    <RoundButton
+      size='large'
+      onPress={() => {
+        if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+        else CastContext.showCastDialog();
+      }}
+      {...props}
+    >
+      <AndroidCastButton />
+      <Feather name='cast' size={22} color={"white"} />
+    </RoundButton>
   );
 }

components/ExampleGlobalModalUsage.tsx

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

components/IntroSheet.tsx

@@ -89,16 +89,16 @@ export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
             </Text>
             <View className='flex flex-row items-center mt-4'>
               <Image
-                source={require("@/assets/icons/jellyseerr-logo.svg")}
+                source={require("@/assets/icons/seerr-logo.svg")}
                 style={{
                   width: 50,
                   height: 50,
                 }}
               />
               <View className='shrink ml-2'>
-                <Text className='font-bold mb-1'>Jellyseerr</Text>
+                <Text className='font-bold mb-1'>Seerr</Text>
                 <Text className='shrink text-xs'>
-                  {t("home.intro.jellyseerr_feature_description")}
+                  {t("home.intro.seerr_feature_description")}
                 </Text>
               </View>
             </View>
@@ -158,12 +158,12 @@ export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
               </View>
               <View className='shrink ml-2'>
                 <Text className='font-bold mb-1'>
-                  {t("home.intro.centralised_settings_plugin_title")}
+                  {t("home.intro.centralized_settings_plugin_title")}
                 </Text>
                 <View className='flex-row flex-wrap items-baseline'>
                   <Text className='shrink text-xs'>
                     {t(
-                      "home.intro.centralised_settings_plugin_description",
+                      "home.intro.centralized_settings_plugin_description",
                     )}{" "}
                   </Text>
                   <TouchableOpacity

components/MoreMoviesWithActor.tsx

@@ -11,9 +11,11 @@ import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import MoviePoster from "@/components/posters/MoviePoster";
-import { POSTER_CAROUSEL_HEIGHT } from "@/constants/Values";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 
+// Matches `w-28` poster cards (approx 112px wide, 10/15 aspect ratio) + 2 lines of text.
+const POSTER_CAROUSEL_HEIGHT = 220;
+
 interface Props extends ViewProps {
   actorId: string;
   actorName?: string | null;

components/PlatformDropdown.tsx

@@ -47,7 +47,6 @@ interface PlatformDropdownProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   onOptionSelect?: (value?: any) => void;
-  disabled?: boolean;
   expoUIConfig?: {
     hostStyle?: any;
   };
@@ -198,7 +197,6 @@ const PlatformDropdownComponent = ({
   onOpenChange: controlledOnOpenChange,
   onOptionSelect,
   expoUIConfig,
-  disabled,
   bottomSheetConfig,
 }: PlatformDropdownProps) => {
   const { showModal, hideModal, isVisible } = useGlobalModal();
@@ -233,13 +231,6 @@ const PlatformDropdownComponent = ({
   }, [isVisible, controlledOpen, controlledOnOpenChange]);
 
   if (Platform.OS === "ios") {
-    if (disabled) {
-      return (
-        <View style={{ opacity: 0.5 }} pointerEvents='none'>
-          {trigger || <Text className='text-white'>Open Menu</Text>}
-        </View>
-      );
-    }
     return (
       <Host style={expoUIConfig?.hostStyle}>
         <ContextMenu>
@@ -362,14 +353,8 @@ const PlatformDropdownComponent = ({
   };
 
   return (
-    <TouchableOpacity
-      onPress={handlePress}
-      activeOpacity={0.7}
-      disabled={disabled}
-    >
-      <View style={disabled ? { opacity: 0.5 } : undefined}>
-        {trigger || <Text className='text-white'>Open Menu</Text>}
-      </View>
+    <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
+      {trigger || <Text className='text-white'>Open Menu</Text>}
     </TouchableOpacity>
   );
 };

components/PlayButton.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 import { Alert, Platform, TouchableOpacity, View } from "react-native";
 import CastContext, {
   CastButton,
-  MediaPlayerState,
+  MediaStreamType,
   PlayServicesState,
   useMediaStatus,
   useRemoteMediaClient,
@@ -32,7 +32,8 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { useSettings } from "@/utils/atoms/settings";
-import { buildCastMediaInfo } from "@/utils/casting/mediaInfo";
+import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { chromecast } from "@/utils/profiles/chromecast";
 import { chromecasth265 } from "@/utils/profiles/chromecasth265";
@@ -110,11 +111,7 @@ export const PlayButton: React.FC<Props> = ({
       return;
     }
 
-    const options = [
-      t("casting_player.chromecast"),
-      t("casting_player.device"),
-      t("casting_player.cancel"),
-    ];
+    const options = ["Chromecast", "Device", "Cancel"];
     const cancelButtonIndex = 2;
     showActionSheetWithOptions(
       {
@@ -123,14 +120,9 @@ export const PlayButton: React.FC<Props> = ({
       },
       async (selectedIndex: number | undefined) => {
         if (!api) return;
-        // Compare item IDs AND check if media is actually playing (not stopped/idle)
-        const currentContentId = mediaStatus?.mediaInfo?.contentId;
-        const isMediaActive =
-          mediaStatus?.playerState === MediaPlayerState.PLAYING ||
-          mediaStatus?.playerState === MediaPlayerState.PAUSED ||
-          mediaStatus?.playerState === MediaPlayerState.BUFFERING;
+        const currentTitle = mediaStatus?.mediaInfo?.metadata?.title;
         const isOpeningCurrentlyPlayingMedia =
-          isMediaActive && currentContentId && currentContentId === item?.Id;
+          currentTitle && currentTitle === item?.Name;
 
         switch (selectedIndex) {
           case 0:
@@ -183,6 +175,8 @@ export const PlayButton: React.FC<Props> = ({
                     subtitleStreamIndex: selectedOptions.subtitleIndex,
                   });
 
+                  console.log("URL: ", data?.url, enableH265);
+
                   if (!data?.url) {
                     console.warn("No URL returned from getStreamUrl", data);
                     Alert.alert(
@@ -192,16 +186,74 @@ export const PlayButton: React.FC<Props> = ({
                     return;
                   }
 
+                  // Calculate start time in seconds from playback position
                   const startTimeSeconds =
                     (item?.UserData?.PlaybackPositionTicks ?? 0) / 10000000;
 
+                  // Calculate stream duration in seconds from runtime
+                  const streamDurationSeconds = item.RunTimeTicks
+                    ? item.RunTimeTicks / 10000000
+                    : undefined;
+
                   client
                     .loadMedia({
-                      mediaInfo: buildCastMediaInfo({
-                        item,
-                        streamUrl: data.url,
-                        api,
-                      }),
+                      mediaInfo: {
+                        contentId: item.Id,
+                        contentUrl: data?.url,
+                        contentType: "video/mp4",
+                        streamType: MediaStreamType.BUFFERED,
+                        streamDuration: streamDurationSeconds,
+                        metadata:
+                          item.Type === "Episode"
+                            ? {
+                                type: "tvShow",
+                                title: item.Name || "",
+                                episodeNumber: item.IndexNumber || 0,
+                                seasonNumber: item.ParentIndexNumber || 0,
+                                seriesTitle: item.SeriesName || "",
+                                images: [
+                                  {
+                                    url: getParentBackdropImageUrl({
+                                      api,
+                                      item,
+                                      quality: 90,
+                                      width: 2000,
+                                    })!,
+                                  },
+                                ],
+                              }
+                            : item.Type === "Movie"
+                              ? {
+                                  type: "movie",
+                                  title: item.Name || "",
+                                  subtitle: item.Overview || "",
+                                  images: [
+                                    {
+                                      url: getPrimaryImageUrl({
+                                        api,
+                                        item,
+                                        quality: 90,
+                                        width: 2000,
+                                      })!,
+                                    },
+                                  ],
+                                }
+                              : {
+                                  type: "generic",
+                                  title: item.Name || "",
+                                  subtitle: item.Overview || "",
+                                  images: [
+                                    {
+                                      url: getPrimaryImageUrl({
+                                        api,
+                                        item,
+                                        quality: 90,
+                                        width: 2000,
+                                      })!,
+                                    },
+                                  ],
+                                },
+                      },
                       startTime: startTimeSeconds,
                     })
                     .then(() => {
@@ -209,13 +261,10 @@ export const PlayButton: React.FC<Props> = ({
                       if (isOpeningCurrentlyPlayingMedia) {
                         return;
                       }
-                      router.push("/casting-player");
-                    })
-                    .catch((err) => {
-                      console.error("[PlayButton] loadMedia failed:", err);
+                      CastContext.showExpandedControls();
                     });
                 } catch (e) {
-                  console.error("[PlayButton] Cast error:", e);
+                  console.log(e);
                 }
               }
             });

components/Ratings.tsx

@@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useMemo } from "react";
 import { View, type ViewProps } from "react-native";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { useSeerr } from "@/hooks/useSeerr";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 import type {
@@ -55,23 +55,23 @@ export const Ratings: React.FC<Props> = ({ item, ...props }) => {
   );
 };
 
-export const JellyserrRatings: React.FC<{
+export const SeerrRatings: React.FC<{
   result: MovieResult | TvResult | TvDetails | MovieDetails;
 }> = ({ result }) => {
-  const { jellyseerrApi, getMediaType } = useJellyseerr();
+  const { seerrApi, getMediaType } = useSeerr();
 
   const mediaType = useMemo(() => getMediaType(result), [result]);
 
   const { data, isLoading } = useQuery({
-    queryKey: ["jellyseerr", result.id, mediaType, "ratings"],
+    queryKey: ["seerr", result.id, mediaType, "ratings"],
     queryFn: async () => {
       return mediaType === MediaType.MOVIE
-        ? jellyseerrApi?.movieRatings(result.id)
-        : jellyseerrApi?.tvRatings(result.id);
+        ? seerrApi?.movieRatings(result.id)
+        : seerrApi?.tvRatings(result.id);
     },
     staleTime: (5).minutesToMilliseconds(),
     retry: false,
-    enabled: !!jellyseerrApi,
+    enabled: !!seerrApi,
   });
 
   return (

components/SimilarItems.tsx

@@ -6,8 +6,11 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { View, type ViewProps } from "react-native";
 import MoviePoster from "@/components/posters/MoviePoster";
-import { POSTER_CAROUSEL_HEIGHT } from "@/constants/Values";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
+// Matches `w-28` poster cards (approx 112px wide, 10/15 aspect ratio) + 2 lines of text.
+const POSTER_CAROUSEL_HEIGHT = 220;
+
 import { HorizontalScroll } from "./common/HorizontalScroll";
 import { Text } from "./common/Text";
 import { TouchableItemRouter } from "./common/TouchableItemRouter";

components/TrackSheet.tsx

@@ -26,7 +26,7 @@ export const TrackSheet: React.FC<Props> = ({
 
   const streams = useMemo(
     () => source?.MediaStreams?.filter((x) => x.Type === streamType),
-    [source],
+    [source, streamType],
   );
 
   const selectedSteam = useMemo(

components/casting/CastingMiniPlayer.tsx

@@ -1,457 +0,0 @@
-/**
- * Unified Casting Mini Player
- * Works with all supported casting protocols
- */
-
-import { Ionicons } from "@expo/vector-icons";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { Image } from "expo-image";
-import { router } from "expo-router";
-import { useAtomValue } from "jotai";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Dimensions, Pressable, View } from "react-native";
-import { Slider } from "react-native-awesome-slider";
-import {
-  MediaPlayerState,
-  useCastDevice,
-  useMediaStatus,
-  useRemoteMediaClient,
-} from "react-native-google-cast";
-import Animated, {
-  SlideInDown,
-  SlideOutDown,
-  useSharedValue,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { useTrickplay } from "@/hooks/useTrickplay";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import {
-  formatTime,
-  formatTrickplayTime,
-  getPosterUrl,
-} from "@/utils/casting/helpers";
-import { CASTING_CONSTANTS } from "@/utils/casting/types";
-import { msToTicks, ticksToSeconds } from "@/utils/time";
-
-export const CastingMiniPlayer: React.FC = () => {
-  const api = useAtomValue(apiAtom);
-  const insets = useSafeAreaInsets();
-  const castDevice = useCastDevice();
-  const mediaStatus = useMediaStatus();
-  const remoteMediaClient = useRemoteMediaClient();
-
-  const currentItem = useMemo(() => {
-    return mediaStatus?.mediaInfo?.customData as BaseItemDto | undefined;
-  }, [mediaStatus?.mediaInfo?.customData]);
-
-  // Trickplay support - pass currentItem as BaseItemDto or null
-  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
-    currentItem || null,
-  );
-  const [trickplayTime, setTrickplayTime] = useState({
-    hours: 0,
-    minutes: 0,
-    seconds: 0,
-  });
-  const [scrubPercentage, setScrubPercentage] = useState(0);
-  const isScrubbing = useRef(false);
-
-  // Slider shared values
-  const sliderProgress = useSharedValue(0);
-  const sliderMin = useSharedValue(0);
-  const sliderMax = useSharedValue(100);
-
-  // Live progress state that updates every second when playing
-  const [liveProgress, setLiveProgress] = useState(
-    mediaStatus?.streamPosition || 0,
-  );
-
-  // Track baseline for elapsed-time computation
-  const baselinePositionRef = useRef(mediaStatus?.streamPosition || 0);
-  const baselineTimestampRef = useRef(Date.now());
-
-  // Sync live progress with mediaStatus and poll every second when playing
-  useEffect(() => {
-    // Resync baseline whenever mediaStatus reports a new position
-    if (mediaStatus?.streamPosition !== undefined) {
-      baselinePositionRef.current = mediaStatus.streamPosition;
-      baselineTimestampRef.current = Date.now();
-      setLiveProgress(mediaStatus.streamPosition);
-    }
-
-    // Update based on elapsed real time when playing
-    const interval = setInterval(() => {
-      if (mediaStatus?.playerState === MediaPlayerState.PLAYING) {
-        const elapsed =
-          ((Date.now() - baselineTimestampRef.current) *
-            (mediaStatus.playbackRate || 1)) /
-          1000;
-        setLiveProgress(baselinePositionRef.current + elapsed);
-      } else if (mediaStatus?.streamPosition !== undefined) {
-        // Sync with actual position when paused/buffering
-        baselinePositionRef.current = mediaStatus.streamPosition;
-        baselineTimestampRef.current = Date.now();
-        setLiveProgress(mediaStatus.streamPosition);
-      }
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [
-    mediaStatus?.playerState,
-    mediaStatus?.streamPosition,
-    mediaStatus?.playbackRate,
-  ]);
-
-  const progress = liveProgress * 1000; // Convert to ms
-  const duration = (mediaStatus?.mediaInfo?.streamDuration || 0) * 1000;
-  const isPlaying = mediaStatus?.playerState === MediaPlayerState.PLAYING;
-
-  // Update slider max value when duration changes
-  useEffect(() => {
-    if (duration > 0) {
-      sliderMax.value = duration;
-    }
-  }, [duration, sliderMax]);
-
-  // Sync slider progress with live progress (when not scrubbing)
-  useEffect(() => {
-    if (!isScrubbing.current && progress >= 0) {
-      sliderProgress.value = progress;
-    }
-  }, [progress, sliderProgress]);
-
-  // For episodes, use series poster; for other content, use item poster
-  const posterUrl = useMemo(() => {
-    if (!api?.basePath || !currentItem) return null;
-
-    if (
-      currentItem.Type === "Episode" &&
-      currentItem.SeriesId &&
-      currentItem.ParentIndexNumber !== undefined &&
-      currentItem.SeasonId
-    ) {
-      // Build series poster URL using SeriesId and series-level image tag
-      const imageTag = currentItem.SeriesPrimaryImageTag || "";
-      const tagParam = imageTag ? `&tag=${imageTag}` : "";
-      return `${api.basePath}/Items/${currentItem.SeriesId}/Images/Primary?fillHeight=120&fillWidth=80&quality=96${tagParam}`;
-    }
-
-    // For non-episodes, use item's own poster
-    return getPosterUrl(
-      api.basePath,
-      currentItem.Id,
-      currentItem.ImageTags?.Primary,
-      80,
-      120,
-    );
-  }, [api?.basePath, currentItem]);
-
-  // Hide mini player when:
-  // - No cast device connected
-  // - No media info (currentItem)
-  // - No media status
-  // - Media is stopped (IDLE state)
-  // - Media is unknown state
-  const playerState = mediaStatus?.playerState;
-  const isMediaStopped = playerState === MediaPlayerState.IDLE;
-
-  if (!castDevice || !currentItem || !mediaStatus || isMediaStopped) {
-    return null;
-  }
-
-  const protocolColor = "#a855f7"; // Streamyfin purple
-  const TAB_BAR_HEIGHT = 80; // Standard tab bar height
-
-  const handlePress = () => {
-    router.push("/casting-player");
-  };
-
-  const handleTogglePlayPause = () => {
-    if (isPlaying) {
-      remoteMediaClient?.pause()?.catch((error: unknown) => {
-        console.error("[CastingMiniPlayer] Pause error:", error);
-      });
-    } else {
-      remoteMediaClient?.play()?.catch((error: unknown) => {
-        console.error("[CastingMiniPlayer] Play error:", error);
-      });
-    }
-  };
-
-  return (
-    <Animated.View
-      entering={SlideInDown.duration(CASTING_CONSTANTS.ANIMATION_DURATION)}
-      exiting={SlideOutDown.duration(CASTING_CONSTANTS.ANIMATION_DURATION)}
-      style={{
-        position: "absolute",
-        bottom: TAB_BAR_HEIGHT + insets.bottom,
-        left: 0,
-        right: 0,
-        backgroundColor: "#1a1a1a",
-        borderTopWidth: 1,
-        borderTopColor: "#333",
-        zIndex: 100,
-      }}
-    >
-      {/* Interactive progress slider with trickplay */}
-      <View style={{ paddingHorizontal: 8, paddingTop: 4 }}>
-        <Slider
-          style={{ width: "100%", height: 20 }}
-          progress={sliderProgress}
-          minimumValue={sliderMin}
-          maximumValue={sliderMax}
-          theme={{
-            maximumTrackTintColor: "#333",
-            minimumTrackTintColor: protocolColor,
-            bubbleBackgroundColor: protocolColor,
-            bubbleTextColor: "#fff",
-          }}
-          onSlidingStart={() => {
-            isScrubbing.current = true;
-          }}
-          onValueChange={(value) => {
-            // Calculate trickplay preview
-            const progressInTicks = msToTicks(value);
-            calculateTrickplayUrl(progressInTicks);
-
-            // Update time display for trickplay bubble
-            const progressInSeconds = Math.floor(
-              ticksToSeconds(progressInTicks),
-            );
-            const hours = Math.floor(progressInSeconds / 3600);
-            const minutes = Math.floor((progressInSeconds % 3600) / 60);
-            const seconds = progressInSeconds % 60;
-            setTrickplayTime({ hours, minutes, seconds });
-
-            // Track scrub percentage for bubble positioning
-            if (duration > 0) {
-              setScrubPercentage(value / duration);
-            }
-          }}
-          onSlidingComplete={(value) => {
-            isScrubbing.current = false;
-            // Seek to the position (value is in milliseconds, convert to seconds)
-            const positionSeconds = value / 1000;
-            if (remoteMediaClient && duration > 0) {
-              remoteMediaClient
-                .seek({ position: positionSeconds })
-                .catch((error) => {
-                  console.error("[Mini Player] Seek error:", error);
-                });
-            }
-          }}
-          renderBubble={() => {
-            // Calculate bubble position with edge clamping
-            const screenWidth = Dimensions.get("window").width;
-            const sliderPadding = 8;
-            const thumbWidth = 10; // matches thumbWidth prop on Slider
-            const sliderWidth = screenWidth - sliderPadding * 2;
-            // Adjust thumb position to account for thumb width affecting travel range
-            const effectiveTrackWidth = sliderWidth - thumbWidth;
-            const thumbPosition =
-              thumbWidth / 2 + scrubPercentage * effectiveTrackWidth;
-
-            if (!trickPlayUrl || !trickplayInfo) {
-              // Show simple time bubble when no trickplay
-              const timeBubbleWidth = 70;
-              const minLeft = -thumbPosition;
-              const maxLeft = sliderWidth - thumbPosition - timeBubbleWidth;
-              const centeredLeft = -timeBubbleWidth / 2;
-              const clampedLeft = Math.max(
-                minLeft,
-                Math.min(maxLeft, centeredLeft),
-              );
-
-              return (
-                <View
-                  style={{
-                    position: "absolute",
-                    bottom: 12,
-                    left: clampedLeft,
-                    backgroundColor: protocolColor,
-                    paddingHorizontal: 8,
-                    paddingVertical: 4,
-                    borderRadius: 4,
-                  }}
-                >
-                  <Text
-                    style={{ color: "#fff", fontSize: 11, fontWeight: "600" }}
-                  >
-                    {formatTrickplayTime(trickplayTime)}
-                  </Text>
-                </View>
-              );
-            }
-
-            const { x, y, url } = trickPlayUrl;
-            const tileWidth = 140; // Smaller preview for mini player
-            const tileHeight = tileWidth / (trickplayInfo.aspectRatio ?? 1.78);
-
-            // Calculate clamped position for trickplay preview
-            const minLeft = -thumbPosition;
-            const maxLeft = sliderWidth - thumbPosition - tileWidth;
-            const centeredLeft = -tileWidth / 2;
-            const clampedLeft = Math.max(
-              minLeft,
-              Math.min(maxLeft, centeredLeft),
-            );
-
-            return (
-              <View
-                style={{
-                  position: "absolute",
-                  bottom: 12,
-                  left: clampedLeft,
-                  width: tileWidth,
-                  alignItems: "center",
-                }}
-              >
-                {/* Trickplay image preview */}
-                <View
-                  style={{
-                    width: tileWidth,
-                    height: tileHeight,
-                    borderRadius: 6,
-                    overflow: "hidden",
-                    backgroundColor: "#1a1a1a",
-                  }}
-                >
-                  <Image
-                    cachePolicy='memory-disk'
-                    style={{
-                      width: tileWidth * (trickplayInfo.data?.TileWidth ?? 1),
-                      height:
-                        (tileWidth / (trickplayInfo.aspectRatio ?? 1.78)) *
-                        (trickplayInfo.data?.TileHeight ?? 1),
-                      transform: [
-                        { translateX: -x * tileWidth },
-                        { translateY: -y * tileHeight },
-                      ],
-                    }}
-                    source={{ uri: url }}
-                    contentFit='cover'
-                  />
-                </View>
-                {/* Time overlay */}
-                <View
-                  style={{
-                    position: "absolute",
-                    bottom: 2,
-                    left: 2,
-                    backgroundColor: "rgba(0, 0, 0, 0.7)",
-                    paddingHorizontal: 4,
-                    paddingVertical: 1,
-                    borderRadius: 3,
-                  }}
-                >
-                  <Text
-                    style={{ color: "#fff", fontSize: 10, fontWeight: "600" }}
-                  >
-                    {formatTrickplayTime(trickplayTime)}
-                  </Text>
-                </View>
-              </View>
-            );
-          }}
-          sliderHeight={3}
-          thumbWidth={10}
-          panHitSlop={{ top: 20, bottom: 20, left: 5, right: 5 }}
-        />
-      </View>
-
-      <Pressable onPress={handlePress}>
-        {/* Content */}
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            padding: 12,
-            paddingTop: 6,
-            gap: 12,
-          }}
-        >
-          {/* Poster */}
-          {posterUrl && (
-            <Image
-              source={{ uri: posterUrl }}
-              style={{
-                width: 40,
-                height: 60,
-                borderRadius: 4,
-              }}
-              contentFit='cover'
-            />
-          )}
-
-          {/* Info */}
-          <View style={{ flex: 1 }}>
-            <Text
-              style={{
-                color: "white",
-                fontSize: 14,
-                fontWeight: "600",
-              }}
-              numberOfLines={1}
-            >
-              {currentItem.Name}
-            </Text>
-            {currentItem.SeriesName && (
-              <Text
-                style={{
-                  color: "#999",
-                  fontSize: 12,
-                }}
-                numberOfLines={1}
-              >
-                {currentItem.SeriesName}
-              </Text>
-            )}
-            <View
-              style={{
-                flexDirection: "row",
-                alignItems: "center",
-                gap: 8,
-                marginTop: 2,
-              }}
-            >
-              <Ionicons name='tv' size={12} color={protocolColor} />
-              <Text
-                style={{
-                  color: protocolColor,
-                  fontSize: 11,
-                }}
-                numberOfLines={1}
-              >
-                {castDevice.friendlyName || "Chromecast"}
-              </Text>
-              <Text
-                style={{
-                  color: "#666",
-                  fontSize: 11,
-                }}
-              >
-                {formatTime(progress)} / {formatTime(duration)}
-              </Text>
-            </View>
-          </View>
-
-          {/* Play/Pause button */}
-          <Pressable
-            onPress={(e) => {
-              e.stopPropagation();
-              handleTogglePlayPause();
-            }}
-            style={{ padding: 8 }}
-          >
-            <Ionicons
-              name={isPlaying ? "pause" : "play"}
-              size={28}
-              color='white'
-            />
-          </Pressable>
-        </View>
-      </Pressable>
-    </Animated.View>
-  );
-};

components/chromecast/ChromecastConnectionMenu.tsx

@@ -1,321 +0,0 @@
-/**
- * Chromecast Connection Menu
- * Shows device info, volume control, and disconnect option
- * Simple menu for when connected but not actively controlling playback
- */
-
-import { Ionicons } from "@expo/vector-icons";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Modal, Pressable, View } from "react-native";
-import { Slider } from "react-native-awesome-slider";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { useCastDevice, useCastSession } from "react-native-google-cast";
-import { useSharedValue } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-
-interface ChromecastConnectionMenuProps {
-  visible: boolean;
-  onClose: () => void;
-  onDisconnect?: () => Promise<void>;
-}
-
-export const ChromecastConnectionMenu: React.FC<
-  ChromecastConnectionMenuProps
-> = ({ visible, onClose, onDisconnect }) => {
-  const insets = useSafeAreaInsets();
-  const { t } = useTranslation();
-  const castDevice = useCastDevice();
-  const castSession = useCastSession();
-
-  // Volume state - use refs to avoid triggering re-renders during sliding
-  const [displayVolume, setDisplayVolume] = useState(50);
-  const [isMuted, setIsMuted] = useState(false);
-  const isMutedRef = useRef(false);
-  const volumeValue = useSharedValue(50);
-  const minimumValue = useSharedValue(0);
-  const maximumValue = useSharedValue(100);
-  const isSliding = useRef(false);
-  const lastSetVolume = useRef(50);
-
-  const protocolColor = "#a855f7";
-
-  // Get initial volume and mute state when menu opens
-  useEffect(() => {
-    if (!visible || !castSession) return;
-
-    // Get initial states
-    const fetchInitialState = async () => {
-      try {
-        const vol = await castSession.getVolume();
-        if (vol !== undefined) {
-          const percent = Math.round(vol * 100);
-          setDisplayVolume(percent);
-          volumeValue.value = percent;
-          lastSetVolume.current = percent;
-        }
-        const muted = await castSession.isMute();
-        isMutedRef.current = muted;
-        setIsMuted(muted);
-      } catch {
-        // Ignore errors
-      }
-    };
-    fetchInitialState();
-
-    // Poll for external volume changes (physical buttons) - only when not sliding
-    const interval = setInterval(async () => {
-      if (isSliding.current) return;
-
-      try {
-        const vol = await castSession.getVolume();
-        if (vol !== undefined) {
-          const percent = Math.round(vol * 100);
-          // Only update if external change detected (not our own change)
-          if (Math.abs(percent - lastSetVolume.current) > 2) {
-            setDisplayVolume(percent);
-            volumeValue.value = percent;
-            lastSetVolume.current = percent;
-          }
-        }
-        const muted = await castSession.isMute();
-        if (muted !== isMutedRef.current) {
-          isMutedRef.current = muted;
-          setIsMuted(muted);
-        }
-      } catch {
-        // Ignore errors
-      }
-    }, 1000); // Poll less frequently
-
-    return () => clearInterval(interval);
-  }, [visible, castSession, volumeValue]);
-
-  // Volume change during sliding - update display only, don't call API
-  const handleVolumeChange = useCallback((value: number) => {
-    const rounded = Math.round(value);
-    setDisplayVolume(rounded);
-  }, []);
-
-  // Volume change complete - call API
-  const handleVolumeComplete = useCallback(
-    async (value: number) => {
-      isSliding.current = false;
-      const rounded = Math.round(value);
-      setDisplayVolume(rounded);
-      lastSetVolume.current = rounded;
-
-      try {
-        if (castSession) {
-          await castSession.setVolume(rounded / 100);
-        }
-      } catch (error) {
-        console.error("[Connection Menu] Volume error:", error);
-      }
-    },
-    [castSession],
-  );
-
-  // Toggle mute
-  const handleToggleMute = useCallback(async () => {
-    if (!castSession) return;
-    try {
-      const newMute = !isMuted;
-      await castSession.setMute(newMute);
-      isMutedRef.current = newMute;
-      setIsMuted(newMute);
-    } catch (error) {
-      console.error("[Connection Menu] Mute error:", error);
-    }
-  }, [castSession, isMuted]);
-
-  // Disconnect
-  const handleDisconnect = useCallback(async () => {
-    try {
-      if (onDisconnect) {
-        await onDisconnect();
-      }
-    } catch (error) {
-      console.error("[Connection Menu] Disconnect error:", error);
-    } finally {
-      onClose();
-    }
-  }, [onDisconnect, onClose]);
-
-  return (
-    <Modal
-      visible={visible}
-      transparent={true}
-      animationType='slide'
-      onRequestClose={onClose}
-    >
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <Pressable
-          style={{
-            flex: 1,
-            backgroundColor: "rgba(0, 0, 0, 0.9)",
-            justifyContent: "flex-end",
-          }}
-          onPress={onClose}
-        >
-          <Pressable
-            style={{
-              backgroundColor: "#1a1a1a",
-              borderTopLeftRadius: 20,
-              borderTopRightRadius: 20,
-              paddingBottom: insets.bottom + 16,
-            }}
-            onPress={(e) => e.stopPropagation()}
-          >
-            {/* Header with device name */}
-            <View
-              style={{
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                padding: 16,
-                borderBottomWidth: 1,
-                borderBottomColor: "#333",
-              }}
-            >
-              <View
-                style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
-              >
-                <View
-                  style={{
-                    width: 40,
-                    height: 40,
-                    borderRadius: 20,
-                    backgroundColor: protocolColor,
-                    justifyContent: "center",
-                    alignItems: "center",
-                  }}
-                >
-                  <Ionicons name='tv' size={20} color='white' />
-                </View>
-                <View>
-                  <Text
-                    style={{ color: "white", fontSize: 16, fontWeight: "600" }}
-                  >
-                    {castDevice?.friendlyName || t("casting_player.chromecast")}
-                  </Text>
-                  <Text style={{ color: protocolColor, fontSize: 12 }}>
-                    {t("casting_player.connected")}
-                  </Text>
-                </View>
-              </View>
-              <Pressable onPress={onClose} style={{ padding: 8 }}>
-                <Ionicons name='close' size={24} color='white' />
-              </Pressable>
-            </View>
-
-            {/* Volume Control */}
-            <View style={{ padding: 16 }}>
-              <View
-                style={{
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  marginBottom: 12,
-                }}
-              >
-                <Text style={{ color: "#999", fontSize: 12 }}>
-                  {t("casting_player.volume")}
-                </Text>
-                <Text style={{ color: "white", fontSize: 14 }}>
-                  {isMuted ? t("casting_player.muted") : `${displayVolume}%`}
-                </Text>
-              </View>
-              <View
-                style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
-              >
-                <Pressable
-                  onPress={handleToggleMute}
-                  style={{
-                    padding: 8,
-                    borderRadius: 20,
-                    backgroundColor: isMuted ? protocolColor : "transparent",
-                  }}
-                >
-                  <Ionicons
-                    name={isMuted ? "volume-mute" : "volume-low"}
-                    size={20}
-                    color={isMuted ? "white" : "#999"}
-                  />
-                </Pressable>
-                <View style={{ flex: 1 }}>
-                  <Slider
-                    style={{ width: "100%", height: 40 }}
-                    progress={volumeValue}
-                    minimumValue={minimumValue}
-                    maximumValue={maximumValue}
-                    theme={{
-                      disableMinTrackTintColor: "#333",
-                      maximumTrackTintColor: "#333",
-                      minimumTrackTintColor: isMuted ? "#666" : protocolColor,
-                      bubbleBackgroundColor: protocolColor,
-                    }}
-                    onSlidingStart={() => {
-                      isSliding.current = true;
-                    }}
-                    onValueChange={async (value) => {
-                      volumeValue.value = value;
-                      handleVolumeChange(value);
-                      // Unmute when adjusting volume - use ref to avoid
-                      // stale closure and prevent repeated async calls
-                      if (isMutedRef.current) {
-                        isMutedRef.current = false;
-                        setIsMuted(false);
-                        try {
-                          await castSession?.setMute(false);
-                        } catch (error: unknown) {
-                          console.error(
-                            "[ChromecastConnectionMenu] Failed to unmute:",
-                            error,
-                          );
-                          isMutedRef.current = true;
-                          setIsMuted(true); // Rollback on failure
-                        }
-                      }
-                    }}
-                    onSlidingComplete={handleVolumeComplete}
-                    panHitSlop={{ top: 20, bottom: 20, left: 0, right: 0 }}
-                  />
-                </View>
-                <Ionicons
-                  name='volume-high'
-                  size={20}
-                  color={isMuted ? "#666" : "#999"}
-                />
-              </View>
-            </View>
-
-            {/* Disconnect button */}
-            <View style={{ paddingHorizontal: 16 }}>
-              <Pressable
-                onPress={handleDisconnect}
-                style={{
-                  backgroundColor: protocolColor,
-                  padding: 14,
-                  borderRadius: 8,
-                  flexDirection: "row",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  gap: 8,
-                }}
-              >
-                <Ionicons name='power' size={20} color='white' />
-                <Text
-                  style={{ color: "white", fontSize: 14, fontWeight: "500" }}
-                >
-                  {t("casting_player.disconnect")}
-                </Text>
-              </Pressable>
-            </View>
-          </Pressable>
-        </Pressable>
-      </GestureHandlerRootView>
-    </Modal>
-  );
-};

components/chromecast/ChromecastDeviceSheet.tsx

@@ -1,348 +0,0 @@
-/**
- * Chromecast Device Info Sheet
- * Shows device details, volume control, and disconnect option
- */
-
-import { Ionicons } from "@expo/vector-icons";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Modal, Pressable, View } from "react-native";
-import { Slider } from "react-native-awesome-slider";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { useCastSession } from "react-native-google-cast";
-import { useSharedValue } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-
-interface ChromecastDeviceSheetProps {
-  visible: boolean;
-  onClose: () => void;
-  device: { friendlyName?: string } | null;
-  onDisconnect: () => Promise<void>;
-  volume?: number;
-  onVolumeChange?: (volume: number) => Promise<void>;
-}
-
-export const ChromecastDeviceSheet: React.FC<ChromecastDeviceSheetProps> = ({
-  visible,
-  onClose,
-  device,
-  onDisconnect,
-  volume = 0.5,
-  onVolumeChange,
-}) => {
-  const insets = useSafeAreaInsets();
-  const { t } = useTranslation();
-  const [isDisconnecting, setIsDisconnecting] = useState(false);
-  const [displayVolume, setDisplayVolume] = useState(Math.round(volume * 100));
-  const volumeValue = useSharedValue(volume * 100);
-  const minimumValue = useSharedValue(0);
-  const maximumValue = useSharedValue(100);
-  const castSession = useCastSession();
-  const volumeDebounceRef = useRef<NodeJS.Timeout | null>(null);
-  const [isMuted, setIsMuted] = useState(false);
-  const isSliding = useRef(false);
-  const lastSetVolume = useRef(Math.round(volume * 100));
-
-  // Sync volume slider with prop changes (updates from physical buttons)
-  // Skip updates while user is actively sliding to avoid overwriting drag
-  useEffect(() => {
-    if (isSliding.current) return;
-    volumeValue.value = volume * 100;
-    setDisplayVolume(Math.round(volume * 100));
-  }, [volume, volumeValue]);
-
-  // Poll for volume and mute updates when sheet is visible to catch physical button changes
-  useEffect(() => {
-    if (!visible || !castSession) return;
-
-    // Get initial mute state
-    castSession
-      .isMute()
-      .then(setIsMuted)
-      .catch(() => {});
-
-    // Poll CastSession for device volume and mute state (only when not sliding)
-    const interval = setInterval(async () => {
-      if (isSliding.current) return;
-
-      try {
-        const deviceVolume = await castSession.getVolume();
-        if (deviceVolume !== undefined) {
-          const volumePercent = Math.round(deviceVolume * 100);
-          // Only update if external change (physical buttons)
-          if (Math.abs(volumePercent - lastSetVolume.current) > 2) {
-            setDisplayVolume(volumePercent);
-            volumeValue.value = volumePercent;
-            lastSetVolume.current = volumePercent;
-          }
-        }
-
-        // Check mute state
-        const muteState = await castSession.isMute();
-        setIsMuted(muteState);
-      } catch {
-        // Ignore errors - device might be disconnected
-      }
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [visible, castSession, volumeValue]);
-
-  const handleDisconnect = async () => {
-    setIsDisconnecting(true);
-    try {
-      await onDisconnect();
-      onClose();
-    } catch (error) {
-      console.error("Failed to disconnect:", error);
-    } finally {
-      setIsDisconnecting(false);
-    }
-  };
-
-  const handleVolumeComplete = async (value: number) => {
-    const newVolume = value / 100;
-    setDisplayVolume(Math.round(value));
-    try {
-      // Use CastSession.setVolume for DEVICE volume control
-      // This works even when no media is playing, unlike setStreamVolume
-      if (castSession) {
-        await castSession.setVolume(newVolume);
-      } else if (onVolumeChange) {
-        // Fallback to prop method if session not available
-        await onVolumeChange(newVolume);
-      }
-    } catch (error) {
-      console.error("[Volume] Error setting volume:", error);
-    }
-  };
-
-  // Debounced volume update during sliding for smooth live feedback
-  const handleVolumeChange = useCallback(
-    (value: number) => {
-      setDisplayVolume(Math.round(value));
-
-      // Debounce the API call to avoid too many requests
-      if (volumeDebounceRef.current) {
-        clearTimeout(volumeDebounceRef.current);
-      }
-
-      volumeDebounceRef.current = setTimeout(async () => {
-        const newVolume = value / 100;
-        try {
-          if (castSession) {
-            await castSession.setVolume(newVolume);
-          }
-        } catch {
-          // Ignore errors during sliding
-        }
-      }, 150); // 150ms debounce
-    },
-    [castSession],
-  );
-
-  // Toggle mute state
-  const handleToggleMute = useCallback(async () => {
-    if (!castSession) return;
-    try {
-      const newMuteState = !isMuted;
-      await castSession.setMute(newMuteState);
-      setIsMuted(newMuteState);
-    } catch (error) {
-      console.error("[Volume] Error toggling mute:", error);
-    }
-  }, [castSession, isMuted]);
-
-  // Cleanup debounce timer on unmount
-  useEffect(() => {
-    return () => {
-      if (volumeDebounceRef.current) {
-        clearTimeout(volumeDebounceRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <Modal
-      visible={visible}
-      transparent={true}
-      animationType='slide'
-      onRequestClose={onClose}
-    >
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <Pressable
-          style={{
-            flex: 1,
-            backgroundColor: "rgba(0, 0, 0, 0.85)",
-            justifyContent: "flex-end",
-          }}
-          onPress={onClose}
-        >
-          <Pressable
-            style={{
-              backgroundColor: "#1a1a1a",
-              borderTopLeftRadius: 16,
-              borderTopRightRadius: 16,
-              paddingBottom: insets.bottom + 16,
-            }}
-            onPress={(e) => e.stopPropagation()}
-          >
-            {/* Header */}
-            <View
-              style={{
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                padding: 16,
-                borderBottomWidth: 1,
-                borderBottomColor: "#333",
-              }}
-            >
-              <View
-                style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
-              >
-                <Ionicons name='tv' size={24} color='#a855f7' />
-                <Text
-                  style={{ color: "white", fontSize: 18, fontWeight: "600" }}
-                >
-                  {t("casting_player.chromecast")}
-                </Text>
-              </View>
-              <Pressable onPress={onClose} style={{ padding: 8 }}>
-                <Ionicons name='close' size={24} color='white' />
-              </Pressable>
-            </View>
-
-            {/* Device info */}
-            <View style={{ padding: 16 }}>
-              <View style={{ marginBottom: 20 }}>
-                <Text style={{ color: "#999", fontSize: 12, marginBottom: 4 }}>
-                  {t("casting_player.device_name")}
-                </Text>
-                <Text
-                  style={{ color: "white", fontSize: 16, fontWeight: "500" }}
-                >
-                  {device?.friendlyName || t("casting_player.unknown_device")}
-                </Text>
-              </View>
-              {/* Volume control */}
-              <View style={{ marginBottom: 24 }}>
-                <View
-                  style={{
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    marginBottom: 12,
-                  }}
-                >
-                  <Text style={{ color: "#999", fontSize: 12 }}>
-                    {t("casting_player.volume")}
-                  </Text>
-                  <Text style={{ color: "white", fontSize: 14 }}>
-                    {isMuted ? t("casting_player.muted") : `${displayVolume}%`}
-                  </Text>
-                </View>
-                <View
-                  style={{
-                    flexDirection: "row",
-                    alignItems: "center",
-                    gap: 12,
-                  }}
-                >
-                  {/* Mute button */}
-                  <Pressable
-                    onPress={handleToggleMute}
-                    style={{
-                      padding: 8,
-                      borderRadius: 20,
-                      backgroundColor: isMuted ? "#a855f7" : "transparent",
-                    }}
-                  >
-                    <Ionicons
-                      name={isMuted ? "volume-mute" : "volume-low"}
-                      size={20}
-                      color={isMuted ? "white" : "#999"}
-                    />
-                  </Pressable>
-                  <View style={{ flex: 1 }}>
-                    <Slider
-                      style={{ width: "100%", height: 40 }}
-                      progress={volumeValue}
-                      minimumValue={minimumValue}
-                      maximumValue={maximumValue}
-                      theme={{
-                        disableMinTrackTintColor: "#333",
-                        maximumTrackTintColor: "#333",
-                        minimumTrackTintColor: isMuted ? "#666" : "#a855f7",
-                        bubbleBackgroundColor: "#a855f7",
-                      }}
-                      onSlidingStart={async () => {
-                        isSliding.current = true;
-                        // Auto-unmute when user starts adjusting volume
-                        if (isMuted && castSession) {
-                          setIsMuted(false);
-                          try {
-                            await castSession.setMute(false);
-                          } catch (error) {
-                            console.error("[Volume] Failed to unmute:", error);
-                            setIsMuted(true); // Rollback on failure
-                          }
-                        }
-                      }}
-                      onValueChange={(value) => {
-                        volumeValue.value = value;
-                        handleVolumeChange(value);
-                      }}
-                      onSlidingComplete={(value) => {
-                        isSliding.current = false;
-                        lastSetVolume.current = Math.round(value);
-                        handleVolumeComplete(value);
-                      }}
-                      panHitSlop={{ top: 20, bottom: 20, left: 0, right: 0 }}
-                    />
-                  </View>
-                  <Ionicons
-                    name='volume-high'
-                    size={20}
-                    color={isMuted ? "#666" : "#999"}
-                  />
-                </View>
-              </View>
-
-              {/* Disconnect button */}
-              <Pressable
-                onPress={handleDisconnect}
-                disabled={isDisconnecting}
-                style={{
-                  backgroundColor: "#a855f7",
-                  padding: 16,
-                  borderRadius: 8,
-                  flexDirection: "row",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  gap: 8,
-                  opacity: isDisconnecting ? 0.5 : 1,
-                }}
-              >
-                <Ionicons
-                  name='power'
-                  size={20}
-                  color='white'
-                  style={{ marginTop: 2 }}
-                />
-                <Text
-                  style={{ color: "white", fontSize: 16, fontWeight: "600" }}
-                >
-                  {isDisconnecting
-                    ? t("casting_player.disconnecting")
-                    : t("casting_player.stop_casting")}
-                </Text>
-              </Pressable>
-            </View>
-          </Pressable>
-        </Pressable>
-      </GestureHandlerRootView>
-    </Modal>
-  );
-};

components/chromecast/ChromecastEpisodeList.tsx

@@ -1,351 +0,0 @@
-/**
- * Episode List for Chromecast Player
- * Displays list of episodes for TV shows with thumbnails
- */
-
-import { Ionicons } from "@expo/vector-icons";
-import type { Api } from "@jellyfin/sdk";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { Image } from "expo-image";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { FlatList, Modal, Pressable, ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { truncateTitle } from "@/utils/casting/helpers";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-
-interface ChromecastEpisodeListProps {
-  visible: boolean;
-  onClose: () => void;
-  currentItem: BaseItemDto | null;
-  episodes: BaseItemDto[];
-  onSelectEpisode: (episode: BaseItemDto) => void;
-  api: Api | null;
-}
-
-export const ChromecastEpisodeList: React.FC<ChromecastEpisodeListProps> = ({
-  visible,
-  onClose,
-  currentItem,
-  episodes,
-  onSelectEpisode,
-  api,
-}) => {
-  const insets = useSafeAreaInsets();
-  const { t } = useTranslation();
-  const flatListRef = useRef<FlatList>(null);
-  const [selectedSeason, setSelectedSeason] = useState<number | null>(null);
-  const scrollRetryCountRef = useRef(0);
-  const scrollRetryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const MAX_SCROLL_RETRIES = 3;
-
-  // Cleanup pending retry timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (scrollRetryTimeoutRef.current) {
-        clearTimeout(scrollRetryTimeoutRef.current);
-        scrollRetryTimeoutRef.current = null;
-      }
-      scrollRetryCountRef.current = 0;
-    };
-  }, []);
-
-  // Get unique seasons from episodes
-  const seasons = useMemo(() => {
-    const seasonSet = new Set<number>();
-    for (const ep of episodes) {
-      if (ep.ParentIndexNumber !== undefined && ep.ParentIndexNumber !== null) {
-        seasonSet.add(ep.ParentIndexNumber);
-      }
-    }
-    return Array.from(seasonSet).sort((a, b) => a - b);
-  }, [episodes]);
-
-  // Filter episodes by selected season and exclude virtual episodes
-  const filteredEpisodes = useMemo(() => {
-    let eps = episodes;
-
-    // Filter by season if selected
-    if (selectedSeason !== null) {
-      eps = eps.filter((ep) => ep.ParentIndexNumber === selectedSeason);
-    }
-
-    // Filter out virtual episodes (episodes without actual video files)
-    // LocationType === "Virtual" means the episode doesn't have a media file
-    eps = eps.filter((ep) => ep.LocationType !== "Virtual");
-
-    return eps;
-  }, [episodes, selectedSeason]);
-
-  // Set initial season to current episode's season
-  useEffect(() => {
-    if (currentItem?.ParentIndexNumber !== undefined) {
-      setSelectedSeason(currentItem.ParentIndexNumber);
-    }
-  }, [currentItem]);
-
-  useEffect(() => {
-    // Reset retry counter when visibility or data changes
-    scrollRetryCountRef.current = 0;
-    if (scrollRetryTimeoutRef.current) {
-      clearTimeout(scrollRetryTimeoutRef.current);
-    }
-
-    if (visible && currentItem && filteredEpisodes.length > 0) {
-      const currentIndex = filteredEpisodes.findIndex(
-        (ep) => ep.Id === currentItem.Id,
-      );
-      if (currentIndex !== -1 && flatListRef.current) {
-        // Delay to ensure FlatList is rendered
-        const timeoutId = setTimeout(() => {
-          flatListRef.current?.scrollToIndex({
-            index: currentIndex,
-            animated: true,
-            viewPosition: 0.5, // Center the item
-          });
-        }, 300);
-        return () => {
-          clearTimeout(timeoutId);
-          if (scrollRetryTimeoutRef.current) {
-            clearTimeout(scrollRetryTimeoutRef.current);
-          }
-        };
-      }
-    }
-  }, [visible, currentItem, filteredEpisodes]);
-
-  const renderEpisode = ({ item }: { item: BaseItemDto }) => {
-    const isCurrentEpisode = item.Id === currentItem?.Id;
-
-    return (
-      <Pressable
-        onPress={() => {
-          onSelectEpisode(item);
-          onClose();
-        }}
-        style={{
-          flexDirection: "row",
-          padding: 12,
-          backgroundColor: isCurrentEpisode ? "#a855f7" : "transparent",
-          borderRadius: 8,
-          marginBottom: 8,
-        }}
-      >
-        {/* Thumbnail */}
-        <View
-          style={{
-            width: 120,
-            height: 68,
-            borderRadius: 4,
-            overflow: "hidden",
-            backgroundColor: "#1a1a1a",
-          }}
-        >
-          {(() => {
-            const imageUrl =
-              api && item.Id ? getPrimaryImageUrl({ api, item }) : null;
-            if (imageUrl) {
-              return (
-                <Image
-                  source={{ uri: imageUrl }}
-                  style={{ width: "100%", height: "100%" }}
-                  contentFit='cover'
-                />
-              );
-            }
-            return (
-              <View
-                style={{
-                  flex: 1,
-                  justifyContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                <Ionicons name='film-outline' size={32} color='#333' />
-              </View>
-            );
-          })()}
-        </View>
-
-        {/* Episode info */}
-        <View style={{ flex: 1, marginLeft: 12, justifyContent: "center" }}>
-          <Text
-            style={{
-              color: "white",
-              fontSize: 14,
-              fontWeight: "600",
-              marginBottom: 4,
-            }}
-            numberOfLines={1}
-          >
-            {item.IndexNumber != null ? `${item.IndexNumber}. ` : ""}
-            {truncateTitle(item.Name || t("casting_player.unknown"), 30)}
-          </Text>
-          {item.Overview && (
-            <Text
-              style={{
-                color: "#999",
-                fontSize: 12,
-                marginBottom: 4,
-              }}
-              numberOfLines={2}
-            >
-              {item.Overview}
-            </Text>
-          )}
-          <View style={{ flexDirection: "row", gap: 8, alignItems: "center" }}>
-            {item.ParentIndexNumber !== undefined &&
-              item.IndexNumber !== undefined && (
-                <Text
-                  style={{ color: "#a855f7", fontSize: 11, fontWeight: "600" }}
-                >
-                  S{String(item.ParentIndexNumber).padStart(2, "0")}:E
-                  {String(item.IndexNumber).padStart(2, "0")}
-                </Text>
-              )}
-            {item.ProductionYear && (
-              <Text style={{ color: "#666", fontSize: 11 }}>
-                {item.ProductionYear}
-              </Text>
-            )}
-            {item.RunTimeTicks && (
-              <Text style={{ color: "#666", fontSize: 11 }}>
-                {Math.round(item.RunTimeTicks / 600000000)}{" "}
-                {t("casting_player.minutes_short")}
-              </Text>
-            )}
-          </View>
-        </View>
-
-        {isCurrentEpisode && (
-          <View
-            style={{
-              justifyContent: "center",
-              marginLeft: 8,
-            }}
-          >
-            <Ionicons name='play-circle' size={24} color='white' />
-          </View>
-        )}
-      </Pressable>
-    );
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      transparent={true}
-      animationType='slide'
-      onRequestClose={onClose}
-    >
-      <Pressable
-        style={{
-          flex: 1,
-          backgroundColor: "rgba(0, 0, 0, 0.85)",
-        }}
-        onPress={onClose}
-      >
-        <Pressable
-          style={{
-            flex: 1,
-            paddingTop: insets.top,
-          }}
-          onPress={(e) => e.stopPropagation()}
-        >
-          {/* Header */}
-          <View
-            style={{
-              paddingHorizontal: 16,
-              paddingVertical: 12,
-              borderBottomWidth: 1,
-              borderBottomColor: "#333",
-            }}
-          >
-            <View
-              style={{
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginBottom: seasons.length > 1 ? 12 : 0,
-              }}
-            >
-              <Text style={{ color: "white", fontSize: 18, fontWeight: "600" }}>
-                {t("casting_player.episodes")}
-              </Text>
-              <Pressable onPress={onClose} style={{ padding: 8 }}>
-                <Ionicons name='close' size={24} color='white' />
-              </Pressable>
-            </View>
-
-            {/* Season selector */}
-            {seasons.length > 1 && (
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                contentContainerStyle={{ gap: 8 }}
-              >
-                {seasons.map((season) => (
-                  <Pressable
-                    key={season}
-                    onPress={() => setSelectedSeason(season)}
-                    style={{
-                      paddingHorizontal: 16,
-                      paddingVertical: 8,
-                      borderRadius: 20,
-                      backgroundColor:
-                        selectedSeason === season ? "#a855f7" : "#1a1a1a",
-                    }}
-                  >
-                    <Text
-                      style={{
-                        color: "white",
-                        fontSize: 14,
-                        fontWeight: selectedSeason === season ? "600" : "400",
-                      }}
-                    >
-                      {t("casting_player.season", { number: season })}
-                    </Text>
-                  </Pressable>
-                ))}
-              </ScrollView>
-            )}
-          </View>
-
-          {/* Episode list */}
-          <FlatList
-            ref={flatListRef}
-            data={filteredEpisodes}
-            renderItem={renderEpisode}
-            keyExtractor={(item, index) => item.Id || `episode-${index}`}
-            contentContainerStyle={{
-              padding: 16,
-              paddingBottom: insets.bottom + 16,
-            }}
-            showsVerticalScrollIndicator={false}
-            onScrollToIndexFailed={(info) => {
-              // Bounded retry for scroll failures
-              if (
-                scrollRetryCountRef.current >= MAX_SCROLL_RETRIES ||
-                info.index >= filteredEpisodes.length
-              ) {
-                return;
-              }
-              scrollRetryCountRef.current += 1;
-              if (scrollRetryTimeoutRef.current) {
-                clearTimeout(scrollRetryTimeoutRef.current);
-              }
-              scrollRetryTimeoutRef.current = setTimeout(() => {
-                flatListRef.current?.scrollToIndex({
-                  index: info.index,
-                  animated: true,
-                  viewPosition: 0.5,
-                });
-              }, 500);
-            }}
-          />
-        </Pressable>
-      </Pressable>
-    </Modal>
-  );
-};

components/chromecast/ChromecastSettingsMenu.tsx

@@ -1,347 +0,0 @@
-/**
- * Chromecast Settings Menu
- * Allows users to configure audio, subtitles, quality, and playback speed
- */
-
-import { Ionicons } from "@expo/vector-icons";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Modal, Pressable, ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import type {
-  AudioTrack,
-  MediaSource,
-  SubtitleTrack,
-} from "@/utils/casting/types";
-
-interface ChromecastSettingsMenuProps {
-  visible: boolean;
-  onClose: () => void;
-  item: BaseItemDto;
-  mediaSources: MediaSource[];
-  selectedMediaSource: MediaSource | null;
-  onMediaSourceChange: (source: MediaSource) => void;
-  audioTracks: AudioTrack[];
-  selectedAudioTrack: AudioTrack | null;
-  onAudioTrackChange: (track: AudioTrack) => void;
-  subtitleTracks: SubtitleTrack[];
-  selectedSubtitleTrack: SubtitleTrack | null;
-  onSubtitleTrackChange: (track: SubtitleTrack | null) => void;
-  playbackSpeed: number;
-  onPlaybackSpeedChange: (speed: number) => void;
-}
-
-const PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-
-export const ChromecastSettingsMenu: React.FC<ChromecastSettingsMenuProps> = ({
-  visible,
-  onClose,
-  item: _item, // Reserved for future use (technical info display)
-  mediaSources,
-  selectedMediaSource,
-  onMediaSourceChange,
-  audioTracks,
-  selectedAudioTrack,
-  onAudioTrackChange,
-  subtitleTracks,
-  selectedSubtitleTrack,
-  onSubtitleTrackChange,
-  playbackSpeed,
-  onPlaybackSpeedChange,
-}) => {
-  const insets = useSafeAreaInsets();
-  const { t } = useTranslation();
-  const [expandedSection, setExpandedSection] = useState<string | null>(null);
-
-  const toggleSection = (section: string) => {
-    setExpandedSection(expandedSection === section ? null : section);
-  };
-
-  const renderSectionHeader = (
-    title: string,
-    icon: keyof typeof Ionicons.glyphMap,
-    sectionKey: string,
-  ) => (
-    <Pressable
-      onPress={() => toggleSection(sectionKey)}
-      style={{
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: 16,
-        borderBottomWidth: 1,
-        borderBottomColor: "#333",
-      }}
-    >
-      <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
-        <Ionicons name={icon} size={20} color='white' />
-        <Text style={{ color: "white", fontSize: 16, fontWeight: "500" }}>
-          {title}
-        </Text>
-      </View>
-      <Ionicons
-        name={expandedSection === sectionKey ? "chevron-up" : "chevron-down"}
-        size={20}
-        color='#999'
-      />
-    </Pressable>
-  );
-
-  return (
-    <Modal
-      visible={visible}
-      transparent={true}
-      animationType='slide'
-      onRequestClose={onClose}
-    >
-      <Pressable
-        style={{
-          flex: 1,
-          backgroundColor: "rgba(0, 0, 0, 0.85)",
-          justifyContent: "flex-end",
-        }}
-        onPress={onClose}
-      >
-        <Pressable
-          style={{
-            backgroundColor: "#1a1a1a",
-            borderTopLeftRadius: 16,
-            borderTopRightRadius: 16,
-            maxHeight: "80%",
-            paddingBottom: insets.bottom,
-          }}
-          onPress={(e) => e.stopPropagation()}
-        >
-          {/* Header */}
-          <View
-            style={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-              padding: 16,
-              borderBottomWidth: 1,
-              borderBottomColor: "#333",
-            }}
-          >
-            <Text style={{ color: "white", fontSize: 18, fontWeight: "600" }}>
-              {t("casting_player.playback_settings")}
-            </Text>
-            <Pressable onPress={onClose} style={{ padding: 8 }}>
-              <Ionicons name='close' size={24} color='white' />
-            </Pressable>
-          </View>
-
-          <ScrollView>
-            {/* Quality/Media Source - only show when sources available */}
-            {mediaSources.length > 0 &&
-              renderSectionHeader(
-                t("casting_player.quality"),
-                "film-outline",
-                "quality",
-              )}
-            {mediaSources.length > 0 && expandedSection === "quality" && (
-              <View style={{ paddingVertical: 8 }}>
-                {mediaSources.map((source) => (
-                  <Pressable
-                    key={source.id}
-                    onPress={() => {
-                      onMediaSourceChange(source);
-                      setExpandedSection(null);
-                    }}
-                    style={{
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      padding: 16,
-                      backgroundColor:
-                        selectedMediaSource?.id === source.id
-                          ? "#2a2a2a"
-                          : "transparent",
-                    }}
-                  >
-                    <View>
-                      <Text style={{ color: "white", fontSize: 15 }}>
-                        {source.name}
-                      </Text>
-                      {source.bitrate && (
-                        <Text
-                          style={{ color: "#999", fontSize: 13, marginTop: 2 }}
-                        >
-                          {Math.round(source.bitrate / 1000000)} Mbps
-                        </Text>
-                      )}
-                    </View>
-                    {selectedMediaSource?.id === source.id && (
-                      <Ionicons name='checkmark' size={20} color='#a855f7' />
-                    )}
-                  </Pressable>
-                ))}
-              </View>
-            )}
-
-            {/* Audio Tracks - only show if more than one track */}
-            {audioTracks.length > 1 &&
-              renderSectionHeader(
-                t("casting_player.audio"),
-                "musical-notes",
-                "audio",
-              )}
-            {audioTracks.length > 1 && expandedSection === "audio" && (
-              <View style={{ paddingVertical: 8 }}>
-                {audioTracks.map((track) => (
-                  <Pressable
-                    key={track.index}
-                    onPress={() => {
-                      onAudioTrackChange(track);
-                      setExpandedSection(null);
-                    }}
-                    style={{
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      padding: 16,
-                      backgroundColor:
-                        selectedAudioTrack?.index === track.index
-                          ? "#2a2a2a"
-                          : "transparent",
-                    }}
-                  >
-                    <View>
-                      <Text style={{ color: "white", fontSize: 15 }}>
-                        {track.displayTitle ||
-                          track.language ||
-                          t("casting_player.unknown")}
-                      </Text>
-                      {track.codec && (
-                        <Text
-                          style={{ color: "#999", fontSize: 13, marginTop: 2 }}
-                        >
-                          {track.codec.toUpperCase()}
-                        </Text>
-                      )}
-                    </View>
-                    {selectedAudioTrack?.index === track.index && (
-                      <Ionicons name='checkmark' size={20} color='#a855f7' />
-                    )}
-                  </Pressable>
-                ))}
-              </View>
-            )}
-
-            {/* Subtitle Tracks - only show if subtitles available */}
-            {subtitleTracks.length > 0 &&
-              renderSectionHeader(
-                t("casting_player.subtitles"),
-                "text",
-                "subtitles",
-              )}
-            {subtitleTracks.length > 0 && expandedSection === "subtitles" && (
-              <View style={{ paddingVertical: 8 }}>
-                <Pressable
-                  onPress={() => {
-                    onSubtitleTrackChange(null);
-                    setExpandedSection(null);
-                  }}
-                  style={{
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    padding: 16,
-                    backgroundColor:
-                      selectedSubtitleTrack === null
-                        ? "#2a2a2a"
-                        : "transparent",
-                  }}
-                >
-                  <Text style={{ color: "white", fontSize: 15 }}>
-                    {t("casting_player.none")}
-                  </Text>
-                  {selectedSubtitleTrack === null && (
-                    <Ionicons name='checkmark' size={20} color='#a855f7' />
-                  )}
-                </Pressable>
-                {subtitleTracks.map((track) => (
-                  <Pressable
-                    key={track.index}
-                    onPress={() => {
-                      onSubtitleTrackChange(track);
-                      setExpandedSection(null);
-                    }}
-                    style={{
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      padding: 16,
-                      backgroundColor:
-                        selectedSubtitleTrack?.index === track.index
-                          ? "#2a2a2a"
-                          : "transparent",
-                    }}
-                  >
-                    <View>
-                      <Text style={{ color: "white", fontSize: 15 }}>
-                        {track.displayTitle ||
-                          track.language ||
-                          t("casting_player.unknown")}
-                      </Text>
-                      {(track.codec || track.isForced) && (
-                        <Text
-                          style={{ color: "#999", fontSize: 13, marginTop: 2 }}
-                        >
-                          {track.codec ? track.codec.toUpperCase() : ""}
-                          {track.isForced && ` • ${t("casting_player.forced")}`}
-                        </Text>
-                      )}
-                    </View>
-                    {selectedSubtitleTrack?.index === track.index && (
-                      <Ionicons name='checkmark' size={20} color='#a855f7' />
-                    )}
-                  </Pressable>
-                ))}
-              </View>
-            )}
-
-            {/* Playback Speed */}
-            {renderSectionHeader(
-              t("casting_player.playback_speed"),
-              "speedometer",
-              "speed",
-            )}
-            {expandedSection === "speed" && (
-              <View style={{ paddingVertical: 8 }}>
-                {PLAYBACK_SPEEDS.map((speed) => (
-                  <Pressable
-                    key={speed}
-                    onPress={() => {
-                      onPlaybackSpeedChange(speed);
-                      setExpandedSection(null);
-                    }}
-                    style={{
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      padding: 16,
-                      backgroundColor:
-                        Math.abs(playbackSpeed - speed) < 0.01
-                          ? "#2a2a2a"
-                          : "transparent",
-                    }}
-                  >
-                    <Text style={{ color: "white", fontSize: 15 }}>
-                      {speed === 1 ? t("casting_player.normal") : `${speed}x`}
-                    </Text>
-                    {Math.abs(playbackSpeed - speed) < 0.01 && (
-                      <Ionicons name='checkmark' size={20} color='#a855f7' />
-                    )}
-                  </Pressable>
-                ))}
-              </View>
-            )}
-          </ScrollView>
-        </Pressable>
-      </Pressable>
-    </Modal>
-  );
-};

components/chromecast/hooks/useChromecastSegments.ts

@@ -1,171 +0,0 @@
-/**
- * Hook for managing Chromecast segments (intro, credits, recap, commercial, preview)
- * Integrates with autoskip API for segment detection
- */
-
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useAtomValue } from "jotai";
-import { useCallback, useMemo } from "react";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { isWithinSegment } from "@/utils/casting/helpers";
-import type { ChromecastSegmentData } from "@/utils/chromecast/options";
-import { useSegments } from "@/utils/segments";
-
-export const useChromecastSegments = (
-  item: BaseItemDto | null,
-  currentProgressMs: number,
-  isOffline = false,
-) => {
-  const api = useAtomValue(apiAtom);
-  const { settings } = useSettings();
-
-  // Fetch segments from autoskip API
-  const { data: segmentData } = useSegments(
-    item?.Id || "",
-    isOffline,
-    undefined, // downloadedFiles parameter
-    api,
-  );
-
-  // Parse segments into usable format
-  const segments = useMemo<ChromecastSegmentData>(() => {
-    if (!segmentData) {
-      return {
-        intro: null,
-        credits: null,
-        recap: null,
-        commercial: [],
-        preview: [],
-      };
-    }
-
-    const intro =
-      segmentData.introSegments && segmentData.introSegments.length > 0
-        ? {
-            start: segmentData.introSegments[0].startTime,
-            end: segmentData.introSegments[0].endTime,
-          }
-        : null;
-
-    const credits =
-      segmentData.creditSegments && segmentData.creditSegments.length > 0
-        ? {
-            start: segmentData.creditSegments[0].startTime,
-            end: segmentData.creditSegments[0].endTime,
-          }
-        : null;
-
-    const recap =
-      segmentData.recapSegments && segmentData.recapSegments.length > 0
-        ? {
-            start: segmentData.recapSegments[0].startTime,
-            end: segmentData.recapSegments[0].endTime,
-          }
-        : null;
-
-    const commercial = (segmentData.commercialSegments || []).map((seg) => ({
-      start: seg.startTime,
-      end: seg.endTime,
-    }));
-
-    const preview = (segmentData.previewSegments || []).map((seg) => ({
-      start: seg.startTime,
-      end: seg.endTime,
-    }));
-
-    return { intro, credits, recap, commercial, preview };
-  }, [segmentData]);
-
-  // Check which segment we're currently in
-  // currentProgressMs is in milliseconds; isWithinSegment() converts ms→seconds internally
-  // before comparing with segment times (which are in seconds from the autoskip API)
-  const currentSegment = useMemo(() => {
-    if (isWithinSegment(currentProgressMs, segments.intro)) {
-      return { type: "intro" as const, segment: segments.intro };
-    }
-    if (isWithinSegment(currentProgressMs, segments.credits)) {
-      return { type: "credits" as const, segment: segments.credits };
-    }
-    if (isWithinSegment(currentProgressMs, segments.recap)) {
-      return { type: "recap" as const, segment: segments.recap };
-    }
-    for (const commercial of segments.commercial) {
-      if (isWithinSegment(currentProgressMs, commercial)) {
-        return { type: "commercial" as const, segment: commercial };
-      }
-    }
-    for (const preview of segments.preview) {
-      if (isWithinSegment(currentProgressMs, preview)) {
-        return { type: "preview" as const, segment: preview };
-      }
-    }
-    return null;
-  }, [currentProgressMs, segments]);
-
-  // Skip functions
-  const skipIntro = useCallback(
-    async (seekFn: (positionMs: number) => Promise<void>): Promise<void> => {
-      if (segments.intro) {
-        await seekFn(segments.intro.end * 1000);
-      }
-    },
-    [segments.intro],
-  );
-
-  const skipCredits = useCallback(
-    async (seekFn: (positionMs: number) => Promise<void>): Promise<void> => {
-      if (segments.credits) {
-        await seekFn(segments.credits.end * 1000);
-      }
-    },
-    [segments.credits],
-  );
-
-  const skipSegment = useCallback(
-    async (seekFn: (positionMs: number) => Promise<void>): Promise<void> => {
-      if (currentSegment?.segment) {
-        await seekFn(currentSegment.segment.end * 1000);
-      }
-    },
-    [currentSegment],
-  );
-
-  // Auto-skip logic based on settings
-  const shouldAutoSkip = useMemo(() => {
-    if (!currentSegment) return false;
-
-    switch (currentSegment.type) {
-      case "intro":
-        return settings?.skipIntro === "auto";
-      case "credits":
-        return settings?.skipOutro === "auto";
-      case "recap":
-        return settings?.skipRecap === "auto";
-      case "commercial":
-        return settings?.skipCommercial === "auto";
-      case "preview":
-        return settings?.skipPreview === "auto";
-      default:
-        return false;
-    }
-  }, [
-    currentSegment,
-    settings?.skipIntro,
-    settings?.skipOutro,
-    settings?.skipRecap,
-    settings?.skipCommercial,
-    settings?.skipPreview,
-  ]);
-
-  return {
-    segments,
-    currentSegment,
-    skipIntro,
-    skipCredits,
-    skipSegment,
-    shouldAutoSkip,
-    hasIntro: !!segments.intro,
-    hasCredits: !!segments.credits,
-  };
-};

components/common/LargePoster.tsx

@@ -1,20 +0,0 @@
-import { Image } from "expo-image";
-import { View } from "react-native";
-
-export const LargePoster: React.FC<{ url?: string | null }> = ({ url }) => {
-  if (!url)
-    return (
-      <View className='p-4 rounded-xl overflow-hidden '>
-        <View className='w-full aspect-video rounded-xl overflow-hidden border border-neutral-800' />
-      </View>
-    );
-
-  return (
-    <View className='p-4 rounded-xl overflow-hidden '>
-      <Image
-        source={{ uri: url }}
-        className='w-full aspect-video rounded-xl overflow-hidden border border-neutral-800'
-      />
-    </View>
-  );
-};

components/common/SeerrItemRouter.tsx

@@ -21,7 +21,7 @@ interface Props extends TouchableOpacityProps {
   mediaType: MediaType;
 }
 
-export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
+export const TouchableSeerrRouter: React.FC<PropsWithChildren<Props>> = ({
   result,
   mediaTitle,
   releaseYear,
@@ -42,18 +42,24 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
         onPress={() => {
           if (!result) return;
 
-          router.push({
-            pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
-            // @ts-expect-error
-            params: {
-              ...result,
-              mediaTitle,
-              releaseYear,
-              canRequest: canRequest.toString(),
-              posterSrc,
-              mediaType,
-            },
+          // Build URL with query params - avoids Expo Router's strict type checking
+          const params = new URLSearchParams({
+            ...Object.fromEntries(
+              Object.entries(result).map(([key, value]) => [
+                key,
+                String(value ?? ""),
+              ]),
+            ),
+            mediaTitle,
+            releaseYear: releaseYear.toString(),
+            canRequest: canRequest.toString(),
+            posterSrc,
+            mediaType: mediaType.toString(),
           });
+
+          router.push(
+            `/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/seerr/page?${params.toString()}`,
+          );
         }}
         {...props}
       >

components/common/VerticalSkeleton.tsx

@@ -1,28 +0,0 @@
-import { View, type ViewProps } from "react-native";
-
-interface Props extends ViewProps {
-  index: number;
-}
-
-export const VerticalSkeleton: React.FC<Props> = ({ index, ...props }) => {
-  return (
-    <View
-      key={index}
-      style={{
-        width: "32%",
-      }}
-      className='flex flex-col'
-      {...props}
-    >
-      <View
-        style={{
-          aspectRatio: "10/15",
-        }}
-        className='w-full bg-neutral-800 mb-2 rounded-lg'
-      />
-      <View className='h-2 bg-neutral-800 rounded-full mb-1' />
-      <View className='h-2 bg-neutral-800 rounded-full mb-1' />
-      <View className='h-2 bg-neutral-800 rounded-full mb-2 w-1/2' />
-    </View>
-  );
-};

components/home/HomeWithCarousel.tsx

@@ -569,29 +569,31 @@ export const HomeWithCarousel = () => {
               settings.streamyStatsSeriesRecommendations ||
               settings.streamyStatsPromotedWatchlists;
             const streamystatsSections =
-              index === streamystatsIndex && hasStreamystatsContent ? (
-                <>
-                  {settings.streamyStatsMovieRecommendations && (
-                    <StreamystatsRecommendations
-                      title={t(
-                        "home.settings.plugins.streamystats.recommended_movies",
-                      )}
-                      type='Movie'
-                    />
-                  )}
-                  {settings.streamyStatsSeriesRecommendations && (
-                    <StreamystatsRecommendations
-                      title={t(
-                        "home.settings.plugins.streamystats.recommended_series",
-                      )}
-                      type='Series'
-                    />
-                  )}
-                  {settings.streamyStatsPromotedWatchlists && (
-                    <StreamystatsPromotedWatchlists />
-                  )}
-                </>
-              ) : null;
+              index === streamystatsIndex && hasStreamystatsContent
+                ? [
+                    settings.streamyStatsMovieRecommendations && (
+                      <StreamystatsRecommendations
+                        key='movie-recommendations'
+                        title={t(
+                          "home.settings.plugins.streamystats.recommended_movies",
+                        )}
+                        type='Movie'
+                      />
+                    ),
+                    settings.streamyStatsSeriesRecommendations && (
+                      <StreamystatsRecommendations
+                        key='series-recommendations'
+                        title={t(
+                          "home.settings.plugins.streamystats.recommended_series",
+                        )}
+                        type='Series'
+                      />
+                    ),
+                    settings.streamyStatsPromotedWatchlists && (
+                      <StreamystatsPromotedWatchlists key='promoted-watchlists' />
+                    ),
+                  ].filter(Boolean)
+                : null;
 
             if (section.type === "InfiniteScrollingCollectionList") {
               return (

components/home/StreamystatsPromotedWatchlists.tsx

@@ -247,15 +247,14 @@ export const StreamystatsPromotedWatchlists: React.FC<
   }
 
   return (
-    <>
+    <View {...props}>
       {watchlists?.map((watchlist) => (
         <WatchlistSection
           key={watchlist.id}
           watchlist={watchlist}
           jellyfinServerId={jellyfinServerId!}
-          {...props}
         />
       ))}
-    </>
+    </View>
   );
 };

components/item/ItemPeopleSections.tsx

@@ -47,7 +47,7 @@ export const ItemPeopleSections: React.FC<Props> = ({ item, ...props }) => {
 
       return (
         <MoreMoviesWithActor
-          key={`${person.Id}-${idx}`}
+          key={person.Id}
           currentItem={item}
           actorId={person.Id}
           actorName={person.Name}

components/library/LibraryItemCard.tsx

@@ -51,7 +51,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
         api,
         item: library,
       }),
-    [library],
+    [api, library],
   );
 
   const itemType = useMemo(() => {

components/music/MusicAlbumCard.tsx

@@ -23,10 +23,8 @@ export const MusicAlbumCard: React.FC<Props> = ({ album, width = 130 }) => {
   );
 
   const handlePress = useCallback(() => {
-    router.push({
-      pathname: "/music/album/[albumId]",
-      params: { albumId: album.Id! },
-    });
+    if (!album.Id) return;
+    router.push(`/music/album/${album.Id}`);
   }, [router, album.Id]);
 
   return (

components/music/MusicAlbumRowCard.tsx

@@ -24,10 +24,8 @@ export const MusicAlbumRowCard: React.FC<Props> = ({ album }) => {
   );
 
   const handlePress = useCallback(() => {
-    router.push({
-      pathname: "/music/album/[albumId]",
-      params: { albumId: album.Id! },
-    });
+    if (!album.Id) return;
+    router.push(`/music/album/${album.Id}`);
   }, [router, album.Id]);
 
   return (

components/music/MusicArtistCard.tsx

@@ -25,10 +25,8 @@ export const MusicArtistCard: React.FC<Props> = ({ artist }) => {
   );
 
   const handlePress = useCallback(() => {
-    router.push({
-      pathname: "/music/artist/[artistId]",
-      params: { artistId: artist.Id! },
-    });
+    if (!artist.Id) return;
+    router.push(`/music/artist/${artist.Id}`);
   }, [router, artist.Id]);
 
   return (

components/music/MusicPlaylistCard.tsx

@@ -61,10 +61,7 @@ export const MusicPlaylistCard: React.FC<Props> = ({ playlist }) => {
   const hasDownloads = downloadStatus.downloaded > 0;
 
   const handlePress = useCallback(() => {
-    router.push({
-      pathname: "/music/playlist/[playlistId]",
-      params: { playlistId: playlist.Id! },
-    });
+    router.push(`/music/playlist/${playlist.Id}`);
   }, [router, playlist.Id]);
 
   return (

components/music/TrackOptionsSheet.tsx

@@ -197,10 +197,7 @@ export const TrackOptionsSheet: React.FC<Props> = ({
     const artistId = track?.ArtistItems?.[0]?.Id;
     if (artistId) {
       setOpen(false);
-      router.push({
-        pathname: "/music/artist/[artistId]",
-        params: { artistId },
-      });
+      router.push(`/music/artist/${artistId}`);
     }
   }, [track?.ArtistItems, router, setOpen]);
 
@@ -208,10 +205,7 @@ export const TrackOptionsSheet: React.FC<Props> = ({
     const albumId = track?.AlbumId || track?.ParentId;
     if (albumId) {
       setOpen(false);
-      router.push({
-        pathname: "/music/album/[albumId]",
-        params: { albumId },
-      });
+      router.push(`/music/album/${albumId}`);
     }
   }, [track?.AlbumId, track?.ParentId, router, setOpen]);
 

components/navigation/TabBarIcon.tsx

@@ -1,12 +0,0 @@
-// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
-
-import type { IconProps } from "@expo/vector-icons/build/createIconSet";
-import Ionicons from "@expo/vector-icons/Ionicons";
-import type { ComponentProps } from "react";
-
-export function TabBarIcon({
-  style,
-  ...rest
-}: IconProps<ComponentProps<typeof Ionicons>["name"]>) {
-  return <Ionicons size={26} style={[{ marginBottom: -3 }, style]} {...rest} />;
-}

components/posters/EpisodePoster.tsx

@@ -1,63 +0,0 @@
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { Image } from "expo-image";
-import { useAtom } from "jotai";
-import { useMemo, useState } from "react";
-import { View } from "react-native";
-import { WatchedIndicator } from "@/components/WatchedIndicator";
-import { apiAtom } from "@/providers/JellyfinProvider";
-
-type MoviePosterProps = {
-  item: BaseItemDto;
-  showProgress?: boolean;
-};
-
-export const EpisodePoster: React.FC<MoviePosterProps> = ({
-  item,
-  showProgress = false,
-}) => {
-  const [api] = useAtom(apiAtom);
-
-  const url = useMemo(() => {
-    if (item.Type === "Episode") {
-      return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
-    }
-  }, [item]);
-
-  const [progress, _setProgress] = useState(
-    item.UserData?.PlayedPercentage || 0,
-  );
-
-  const blurhash = useMemo(() => {
-    const key = item.ImageTags?.Primary as string;
-    return item.ImageBlurHashes?.Primary?.[key];
-  }, [item]);
-
-  return (
-    <View className='relative rounded-lg overflow-hidden border border-neutral-900'>
-      <Image
-        placeholder={{
-          blurhash,
-        }}
-        key={item.Id}
-        id={item.Id}
-        source={
-          url
-            ? {
-                uri: url,
-              }
-            : null
-        }
-        cachePolicy={"memory-disk"}
-        contentFit='cover'
-        style={{
-          aspectRatio: "10/15",
-          width: "100%",
-        }}
-      />
-      <WatchedIndicator item={item} />
-      {showProgress && progress > 0 && (
-        <View className='h-1 bg-red-600 w-full' />
-      )}
-    </View>
-  );
-};

components/posters/ParentPoster.tsx

@@ -1,48 +0,0 @@
-import { Image } from "expo-image";
-import { useAtom } from "jotai";
-import { useMemo } from "react";
-import { View } from "react-native";
-import { apiAtom } from "@/providers/JellyfinProvider";
-
-type PosterProps = {
-  id?: string;
-  showProgress?: boolean;
-};
-
-const ParentPoster: React.FC<PosterProps> = ({ id }) => {
-  const [api] = useAtom(apiAtom);
-
-  const url = useMemo(
-    () => `${api?.basePath}/Items/${id}/Images/Primary`,
-    [id],
-  );
-
-  if (!url || !id)
-    return (
-      <View
-        className='border border-neutral-900'
-        style={{
-          aspectRatio: "10/15",
-        }}
-      />
-    );
-
-  return (
-    <View className='rounded-lg overflow-hidden border border-neutral-900'>
-      <Image
-        key={id}
-        id={id}
-        source={{
-          uri: url,
-        }}
-        cachePolicy={"memory-disk"}
-        contentFit='cover'
-        style={{
-          aspectRatio: "10/15",
-        }}
-      />
-    </View>
-  );
-};
-
-export default ParentPoster;

components/posters/SeerrPoster.tsx

@@ -7,15 +7,15 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import { TouchableJellyseerrRouter } from "@/components/common/JellyseerrItemRouter";
+import { TouchableSeerrRouter } from "@/components/common/SeerrItemRouter";
 import { Text } from "@/components/common/Text";
 import { Tag, Tags } from "@/components/GenreTags";
-import { textShadowStyle } from "@/components/jellyseerr/discover/GenericSlideCard";
-import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
-import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
+import { textShadowStyle } from "@/components/seerr/discover/GenericSlideCard";
+import SeerrMediaIcon from "@/components/seerr/SeerrMediaIcon";
+import SeerrStatusIcon from "@/components/seerr/SeerrStatusIcon";
 import { Colors } from "@/constants/Colors";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
+import { useSeerr } from "@/hooks/useSeerr";
+import { useSeerrCanRequest } from "@/utils/_seerr/useSeerrCanRequest";
 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";
@@ -34,13 +34,13 @@ interface Props extends ViewProps {
   mediaRequest?: MediaRequest;
 }
 
-const JellyseerrPoster: React.FC<Props> = ({
+const SeerrPoster: React.FC<Props> = ({
   item,
   horizontal,
   showDownloadInfo,
   mediaRequest,
 }) => {
-  const { jellyseerrApi, getTitle, getYear, getMediaType } = useJellyseerr();
+  const { seerrApi, getTitle, getYear, getMediaType } = useSeerr();
   const loadingOpacity = useSharedValue(1);
   const imageOpacity = useSharedValue(0);
   const { t } = useTranslation();
@@ -56,16 +56,13 @@ const JellyseerrPoster: React.FC<Props> = ({
 
   const backdropSrc = useMemo(
     () =>
-      jellyseerrApi?.imageProxy(
-        item?.backdropPath,
-        "w1920_and_h800_multi_faces",
-      ),
-    [item, jellyseerrApi, horizontal],
+      seerrApi?.imageProxy(item?.backdropPath, "w1920_and_h800_multi_faces"),
+    [item, seerrApi, horizontal],
   );
 
   const posterSrc = useMemo(
-    () => jellyseerrApi?.imageProxy(item?.posterPath, "w300_and_h450_face"),
-    [item, jellyseerrApi, horizontal],
+    () => seerrApi?.imageProxy(item?.posterPath, "w300_and_h450_face"),
+    [item, seerrApi, horizontal],
   );
 
   const title = useMemo(() => getTitle(item), [item]);
@@ -75,7 +72,7 @@ const JellyseerrPoster: React.FC<Props> = ({
   const size = useMemo(() => (horizontal ? "h-28" : "w-28"), [horizontal]);
   const ratio = useMemo(() => (horizontal ? "15/10" : "10/15"), [horizontal]);
 
-  const [canRequest] = useJellyseerrCanRequest(item);
+  const [canRequest] = useSeerrCanRequest(item);
 
   const is4k = useMemo(() => mediaRequest?.is4k === true, [mediaRequest]);
 
@@ -109,7 +106,7 @@ const JellyseerrPoster: React.FC<Props> = ({
         second,
         third,
         fourth,
-        t("home.settings.plugins.jellyseerr.plus_n_more", { n: rest.length }),
+        t("home.settings.plugins.seerr.plus_n_more", { n: rest.length }),
       ];
     }
     return seasons;
@@ -121,7 +118,7 @@ const JellyseerrPoster: React.FC<Props> = ({
   }, [mediaRequest, is4k]);
 
   return (
-    <TouchableJellyseerrRouter
+    <TouchableSeerrRouter
       result={item}
       mediaTitle={title}
       releaseYear={releaseYear}
@@ -173,7 +170,7 @@ const JellyseerrPoster: React.FC<Props> = ({
                 className='absolute right-1 top-1 text-right bg-black border border-neutral-800/50'
                 text={mediaRequest?.requestedBy.displayName}
               />
-              {requestedSeasons.length > 0 && (
+              {(requestedSeasons?.length ?? 0) > 0 && (
                 <Tags
                   className='absolute bottom-1 left-0.5 w-32'
                   tagProps={{
@@ -184,12 +181,12 @@ const JellyseerrPoster: React.FC<Props> = ({
               )}
             </>
           )}
-          <JellyseerrStatusIcon
+          <SeerrStatusIcon
             className='absolute bottom-1 right-1'
             showRequestIcon={canRequest}
             mediaStatus={mediaRequest?.media?.status || item?.mediaInfo?.status}
           />
-          <JellyseerrMediaIcon
+          <SeerrMediaIcon
             className='absolute top-1 left-1'
             mediaType={mediaType}
           />
@@ -201,8 +198,8 @@ const JellyseerrPoster: React.FC<Props> = ({
           {releaseYear || ""}
         </Text>
       </View>
-    </TouchableJellyseerrRouter>
+    </TouchableSeerrRouter>
   );
 };
 
-export default JellyseerrPoster;
+export default SeerrPoster;

components/search/DiscoverFilters.tsx

@@ -1,19 +1,19 @@
 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";
+import { SeerrSearchSort } from "@/components/seerr/SeerrIndexPage";
 
 interface DiscoverFiltersProps {
   searchFilterId: string;
   orderFilterId: string;
-  jellyseerrOrderBy: JellyseerrSearchSort;
-  setJellyseerrOrderBy: (value: JellyseerrSearchSort) => void;
-  jellyseerrSortOrder: "asc" | "desc";
-  setJellyseerrSortOrder: (value: "asc" | "desc") => void;
+  seerrOrderBy: SeerrSearchSort;
+  setSeerrOrderBy: (value: SeerrSearchSort) => void;
+  seerrSortOrder: "asc" | "desc";
+  setSeerrSortOrder: (value: "asc" | "desc") => void;
   t: (key: string) => string;
 }
 
-const sortOptions = Object.keys(JellyseerrSearchSort).filter((v) =>
+const sortOptions = Object.keys(SeerrSearchSort).filter((v) =>
   Number.isNaN(Number(v)),
 );
 
@@ -22,10 +22,10 @@ const orderOptions = ["asc", "desc"] as const;
 export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
   searchFilterId,
   orderFilterId,
-  jellyseerrOrderBy,
-  setJellyseerrOrderBy,
-  jellyseerrSortOrder,
-  setJellyseerrSortOrder,
+  seerrOrderBy,
+  setSeerrOrderBy,
+  seerrSortOrder,
+  setSeerrSortOrder,
   t,
 }) => {
   if (Platform.OS === "ios") {
@@ -52,16 +52,16 @@ export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
             <Picker
               label={t("library.filters.sort_by")}
               options={sortOptions.map((item) =>
-                t(`home.settings.plugins.jellyseerr.order_by.${item}`),
+                t(`home.settings.plugins.seerr.order_by.${item}`),
               )}
               variant='menu'
               selectedIndex={sortOptions.indexOf(
-                jellyseerrOrderBy as unknown as string,
+                seerrOrderBy as unknown as string,
               )}
               onOptionSelected={(event: any) => {
                 const index = event.nativeEvent.index;
-                setJellyseerrOrderBy(
-                  sortOptions[index] as unknown as JellyseerrSearchSort,
+                setSeerrOrderBy(
+                  sortOptions[index] as unknown as SeerrSearchSort,
                 );
               }}
             />
@@ -69,10 +69,10 @@ export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
               label={t("library.filters.sort_order")}
               options={orderOptions.map((item) => t(`library.filters.${item}`))}
               variant='menu'
-              selectedIndex={orderOptions.indexOf(jellyseerrSortOrder)}
+              selectedIndex={orderOptions.indexOf(seerrSortOrder)}
               onOptionSelected={(event: any) => {
                 const index = event.nativeEvent.index;
-                setJellyseerrSortOrder(orderOptions[index]);
+                setSeerrSortOrder(orderOptions[index]);
               }}
             />
           </ContextMenu.Items>
@@ -86,17 +86,15 @@ export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
     <View className='flex flex-row justify-end items-center space-x-1'>
       <FilterButton
         id={searchFilterId}
-        queryKey='jellyseerr_search'
+        queryKey='seerr_search'
         queryFn={async () =>
-          Object.keys(JellyseerrSearchSort).filter((v) =>
-            Number.isNaN(Number(v)),
-          )
+          Object.keys(SeerrSearchSort).filter((v) => Number.isNaN(Number(v)))
         }
-        set={(value) => setJellyseerrOrderBy(value[0])}
-        values={[jellyseerrOrderBy]}
+        set={(value) => setSeerrOrderBy(value[0])}
+        values={[seerrOrderBy]}
         title={t("library.filters.sort_by")}
         renderItemLabel={(item) =>
-          t(`home.settings.plugins.jellyseerr.order_by.${item}`)
+          t(`home.settings.plugins.seerr.order_by.${item}`)
         }
         disableSearch={true}
       />
@@ -104,8 +102,8 @@ export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
         id={orderFilterId}
         queryKey='jellysearr_search'
         queryFn={async () => ["asc", "desc"]}
-        set={(value) => setJellyseerrSortOrder(value[0])}
-        values={[jellyseerrSortOrder]}
+        set={(value) => setSeerrSortOrder(value[0])}
+        values={[seerrSortOrder]}
         title={t("library.filters.sort_order")}
         renderItemLabel={(item) => t(`library.filters.${item}`)}
         disableSearch={true}

components/seerr/Cast.tsx

@@ -3,7 +3,7 @@ import type React from "react";
 import { useTranslation } from "react-i18next";
 import { View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
-import PersonPoster from "@/components/jellyseerr/PersonPoster";
+import PersonPoster from "@/components/seerr/PersonPoster";
 import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 
@@ -15,19 +15,17 @@ const CastSlide: React.FC<
     details?.credits?.cast &&
     details?.credits?.cast?.length > 0 && (
       <View {...props}>
-        <Text className='text-lg font-bold mb-2 px-4'>
-          {t("jellyseerr.cast")}
-        </Text>
+        <Text className='text-lg font-bold mb-2 px-4'>{t("seerr.cast")}</Text>
         <FlashList
           horizontal
           showsHorizontalScrollIndicator={false}
           data={details?.credits.cast}
           ItemSeparatorComponent={() => <View className='w-2' />}
-          keyExtractor={(item) => item?.id?.toString()}
+          keyExtractor={(item) => item?.id?.toString() ?? ""}
           contentContainerStyle={{ paddingHorizontal: 16 }}
           renderItem={({ item }) => (
             <PersonPoster
-              id={item.id.toString()}
+              id={item?.id?.toString() ?? ""}
               posterPath={item.profilePath}
               name={item.name}
               subName={item.character}

components/seerr/DetailFacts.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { View, type ViewProps } from "react-native";
 import CountryFlag from "react-native-country-flag";
 import { Text } from "@/components/common/Text";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { useSeerr } from "@/hooks/useSeerr";
 import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
 import type { TmdbRelease } from "@/utils/jellyseerr/server/api/themoviedb/interfaces";
 import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
@@ -50,8 +50,7 @@ const Fact: React.FC<{ title: string; fact?: string | null } & ViewProps> = ({
 const DetailFacts: React.FC<
   { details?: MovieDetails | TvDetails } & ViewProps
 > = ({ details, className, ...props }) => {
-  const { jellyseerrRegion: region, jellyseerrLocale: locale } =
-    useJellyseerr();
+  const { seerrRegion: region, seerrLocale: locale } = useSeerr();
   const { t } = useTranslation();
 
   const releases = useMemo(
@@ -59,7 +58,7 @@ const DetailFacts: React.FC<
       (details as MovieDetails)?.releases?.results.find(
         (r: TmdbRelease) => r.iso_3166_1 === region,
       )?.release_dates as TmdbRelease["release_dates"],
-    [details],
+    [details, region],
   );
 
   // Release date types:
@@ -81,40 +80,34 @@ const DetailFacts: React.FC<
   const firstAirDate = useMemo(() => {
     const firstAirDate = (details as TvDetails)?.firstAirDate;
     if (firstAirDate) {
-      return new Date(firstAirDate).toLocaleDateString(
-        `${locale}-${region}`,
-        dateOpts,
-      );
+      return new Date(firstAirDate).toLocaleDateString(locale, dateOpts);
     }
-  }, [details]);
+  }, [details, locale]);
 
   const nextAirDate = useMemo(() => {
     const firstAirDate = (details as TvDetails)?.firstAirDate;
     const nextAirDate = (details as TvDetails)?.nextEpisodeToAir?.airDate;
     if (nextAirDate && firstAirDate !== nextAirDate) {
-      return new Date(nextAirDate).toLocaleDateString(
-        `${locale}-${region}`,
-        dateOpts,
-      );
+      return new Date(nextAirDate).toLocaleDateString(locale, dateOpts);
     }
-  }, [details]);
+  }, [details, locale]);
 
   const revenue = useMemo(
     () =>
-      (details as MovieDetails)?.revenue?.toLocaleString?.(
-        `${locale}-${region}`,
-        { style: "currency", currency: "USD" },
-      ),
-    [details],
+      (details as MovieDetails)?.revenue?.toLocaleString?.(locale, {
+        style: "currency",
+        currency: "USD",
+      }),
+    [details, locale],
   );
 
   const budget = useMemo(
     () =>
-      (details as MovieDetails)?.budget?.toLocaleString?.(
-        `${locale}-${region}`,
-        { style: "currency", currency: "USD" },
-      ),
-    [details],
+      (details as MovieDetails)?.budget?.toLocaleString?.(locale, {
+        style: "currency",
+        currency: "USD",
+      }),
+    [details, locale],
   );
 
   const streamingProviders = useMemo(
@@ -122,7 +115,7 @@ const DetailFacts: React.FC<
       details?.watchProviders?.find(
         (provider) => provider.iso_3166_1 === region,
       )?.flatrate,
-    [details],
+    [details, region],
   );
 
   const networks = useMemo(() => (details as TvDetails)?.networks, [details]);
@@ -138,21 +131,21 @@ const DetailFacts: React.FC<
   return (
     details && (
       <View className='p-4'>
-        <Text className='text-lg font-bold'>{t("jellyseerr.details")}</Text>
+        <Text className='text-lg font-bold'>{t("seerr.details")}</Text>
         <View
           className={`${className} flex flex-col justify-center divide-y-2 divide-neutral-800`}
           {...props}
         >
-          <Fact title={t("jellyseerr.status")} fact={details?.status} />
+          <Fact title={t("seerr.status")} fact={details?.status} />
           <Fact
-            title={t("jellyseerr.original_title")}
+            title={t("seerr.original_title")}
             fact={(details as TvDetails)?.originalName}
           />
           {details.keywords.some(
             (keyword) => keyword.id === ANIME_KEYWORD_ID,
-          ) && <Fact title={t("jellyseerr.series_type")} fact='Anime' />}
+          ) && <Fact title={t("seerr.series_type")} fact='Anime' />}
           <Facts
-            title={t("jellyseerr.release_dates")}
+            title={t("seerr.release_dates")}
             facts={filteredReleases?.map?.((r: Release, idx) => (
               <View key={idx} className='flex flex-row space-x-2 items-center'>
                 {r.type === 3 ? (
@@ -171,23 +164,20 @@ const DetailFacts: React.FC<
                 )}
                 <Text>
                   {new Date(r.release_date).toLocaleDateString(
-                    `${locale}-${region}`,
+                    locale,
                     dateOpts,
                   )}
                 </Text>
               </View>
             ))}
           />
-          <Fact title={t("jellyseerr.first_air_date")} fact={firstAirDate} />
-          <Fact title={t("jellyseerr.next_air_date")} fact={nextAirDate} />
-          <Fact title={t("jellyseerr.revenue")} fact={revenue} />
-          <Fact title={t("jellyseerr.budget")} fact={budget} />
-          <Fact
-            title={t("jellyseerr.original_language")}
-            fact={spokenLanguage}
-          />
+          <Fact title={t("seerr.first_air_date")} fact={firstAirDate} />
+          <Fact title={t("seerr.next_air_date")} fact={nextAirDate} />
+          <Fact title={t("seerr.revenue")} fact={revenue} />
+          <Fact title={t("seerr.budget")} fact={budget} />
+          <Fact title={t("seerr.original_language")} fact={spokenLanguage} />
           <Facts
-            title={t("jellyseerr.production_country")}
+            title={t("seerr.production_country")}
             facts={details?.productionCountries?.map((n, idx) => (
               <View key={idx} className='flex flex-row items-center space-x-2'>
                 <CountryFlag isoCode={n.iso_3166_1} size={10} />
@@ -196,17 +186,17 @@ const DetailFacts: React.FC<
             ))}
           />
           <Facts
-            title={t("jellyseerr.studios")}
+            title={t("seerr.studios")}
             facts={uniqBy(details?.productionCompanies, "name")?.map(
               (n) => n.name,
             )}
           />
           <Facts
-            title={t("jellyseerr.network")}
+            title={t("seerr.network")}
             facts={networks?.map((n) => n.name)}
           />
           <Facts
-            title={t("jellyseerr.currently_streaming_on")}
+            title={t("seerr.currently_streaming_on")}
             facts={streamingProviders?.map((s) => s.name)}
           />
         </View>

components/seerr/GridSkeleton.tsx

@@ -1,16 +1,10 @@
+import React from "react";
 import { View } from "react-native";
 
-interface Props {
-  index: number;
-}
 // Dev note might be a good idea to standardize skeletons across the app and have one "file" for it.
-export const GridSkeleton: React.FC<Props> = ({ index }) => {
+export const GridSkeleton = React.memo(() => {
   return (
-    <View
-      key={index}
-      className='flex flex-col mr-2 h-auto'
-      style={{ width: "30.5%" }}
-    >
+    <View className='flex flex-col mr-2 h-auto' style={{ width: "30.5%" }}>
       <View className='relative rounded-lg overflow-hidden border border-neutral-900 w-full mt-4 aspect-[10/15] bg-neutral-800' />
       <View className='mt-2 flex flex-col w-full'>
         <View className='h-4 bg-neutral-800 rounded mb-1' />
@@ -18,4 +12,4 @@ export const GridSkeleton: React.FC<Props> = ({ index }) => {
       </View>
     </View>
   );
-};
+});

components/seerr/ParallaxSlideShow.tsx

@@ -133,7 +133,7 @@ const ParallaxSlideShow = <T,>({
                 <View className='px-4'>
                   <View className='flex flex-row flex-wrap'>
                     {Array.from({ length: 9 }, (_, i) => (
-                      <GridSkeleton key={i} index={i} />
+                      <GridSkeleton key={i} />
                     ))}
                   </View>
                 </View>

components/seerr/PersonPoster.tsx

@@ -4,7 +4,7 @@ import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 import Poster from "@/components/posters/Poster";
 import useRouter from "@/hooks/useAppRouter";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { useSeerr } from "@/hooks/useSeerr";
 
 interface Props {
   id: string;
@@ -20,7 +20,7 @@ const PersonPoster: React.FC<Props & ViewProps> = ({
   subName,
   ...props
 }) => {
-  const { jellyseerrApi } = useJellyseerr();
+  const { seerrApi } = useSeerr();
   const router = useRouter();
   const segments = useSegments();
   const from = (segments as string[])[2] || "(home)";
@@ -28,20 +28,20 @@ const PersonPoster: React.FC<Props & ViewProps> = ({
   if (from === "(home)" || from === "(search)" || from === "(libraries)")
     return (
       <TouchableOpacity
-        onPress={() =>
-          router.push(`/(auth)/(tabs)/${from}/jellyseerr/person/${id}`)
-        }
+        onPress={() => router.push(`/(auth)/(tabs)/${from}/seerr/person/${id}`)}
       >
         <View className='flex flex-col w-28' {...props}>
           <Poster
             id={id}
-            url={jellyseerrApi?.imageProxy(posterPath, "w600_and_h900_bestv2")}
+            url={seerrApi?.imageProxy(posterPath, "w600_and_h900_bestv2")}
           />
           <Text className='mt-2'>{name}</Text>
           {subName && <Text className='text-xs opacity-50'>{subName}</Text>}
         </View>
       </TouchableOpacity>
     );
+
+  return null;
 };
 
 export default PersonPoster;

components/seerr/RequestModal.tsx

@@ -12,7 +12,7 @@ import { View, type ViewProps } from "react-native";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { useSeerr } from "@/hooks/useSeerr";
 import type {
   QualityProfile,
   RootFolder,
@@ -38,14 +38,23 @@ const RequestModal = forwardRef<
   Props & Omit<ViewProps, "id">
 >(
   (
-    { id, title, requestBody, type, isAnime = false, onRequested, onDismiss },
+    {
+      id,
+      title,
+      requestBody,
+      type,
+      isAnime = false,
+      is4k,
+      onRequested,
+      onDismiss,
+    },
     ref,
   ) => {
-    const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
+    const { seerrApi, seerrUser, requestMedia } = useSeerr();
     const [requestOverrides, setRequestOverrides] = useState<MediaRequestBody>({
       mediaId: Number(id),
       mediaType: type,
-      userId: jellyseerrUser?.id,
+      userId: seerrUser?.id,
     });
 
     const [qualityProfileOpen, setQualityProfileOpen] = useState(false);
@@ -65,18 +74,17 @@ const RequestModal = forwardRef<
     }, [onDismiss]);
 
     const { data: serviceSettings } = useQuery({
-      queryKey: ["jellyseerr", "request", type, "service"],
+      queryKey: ["seerr", "request", type, "service"],
       queryFn: async () =>
-        jellyseerrApi?.service(type === "movie" ? "radarr" : "sonarr"),
-      enabled: !!jellyseerrApi && !!jellyseerrUser,
+        seerrApi?.service(type === "movie" ? "radarr" : "sonarr"),
+      enabled: !!seerrApi && !!seerrUser,
       refetchOnMount: "always",
     });
 
     const { data: users } = useQuery({
-      queryKey: ["jellyseerr", "users"],
-      queryFn: async () =>
-        jellyseerrApi?.user({ take: 1000, sort: "displayname" }),
-      enabled: !!jellyseerrApi && !!jellyseerrUser,
+      queryKey: ["seerr", "users"],
+      queryFn: async () => seerrApi?.user({ take: 1000, sort: "displayname" }),
+      enabled: !!seerrApi && !!seerrUser,
       refetchOnMount: "always",
     });
 
@@ -87,7 +95,7 @@ const RequestModal = forwardRef<
 
     const { data: defaultServiceDetails } = useQuery({
       queryKey: [
-        "jellyseerr",
+        "seerr",
         "request",
         type,
         "service",
@@ -99,12 +107,12 @@ const RequestModal = forwardRef<
           ...prev,
           serverId: defaultService?.id,
         }));
-        return jellyseerrApi?.serviceDetails(
+        return seerrApi?.serviceDetails(
           type === "movie" ? "radarr" : "sonarr",
           defaultService!.id,
         );
       },
-      enabled: !!jellyseerrApi && !!jellyseerrUser && !!defaultService,
+      enabled: !!seerrApi && !!seerrUser && !!defaultService,
       refetchOnMount: "always",
     });
 
@@ -148,9 +156,9 @@ const RequestModal = forwardRef<
         return undefined;
       }
       if (requestBody.seasons.length > 1) {
-        return t("jellyseerr.season_all");
+        return t("seerr.season_all");
       }
-      return t("jellyseerr.season_number", {
+      return t("seerr.season_number", {
         season_number: requestBody.seasons[0],
       });
     }, [requestBody?.seasons]);
@@ -245,8 +253,7 @@ const RequestModal = forwardRef<
               type: "radio" as const,
               label: user.displayName,
               value: user.id.toString(),
-              selected:
-                (requestOverrides.userId || jellyseerrUser?.id) === user.id,
+              selected: (requestOverrides.userId || seerrUser?.id) === user.id,
               onPress: () =>
                 setRequestOverrides((prev) => ({
                   ...prev,
@@ -255,12 +262,13 @@ const RequestModal = forwardRef<
             })) || [],
         },
       ],
-      [users, jellyseerrUser, requestOverrides.userId],
+      [users, seerrUser, requestOverrides.userId],
     );
 
     const request = useCallback(() => {
       const body = {
-        is4k: defaultService?.is4k || defaultServiceDetails?.server.is4k,
+        is4k:
+          is4k ?? defaultService?.is4k ?? defaultServiceDetails?.server.is4k,
         profileId: defaultProfile?.id,
         rootFolder: defaultFolder?.path,
         tags: defaultTags.map((t) => t.id),
@@ -268,7 +276,7 @@ const RequestModal = forwardRef<
         ...requestOverrides,
       };
 
-      writeDebugLog("Sending Jellyseerr advanced request", body);
+      writeDebugLog("Sending Seerr advanced request", body);
 
       requestMedia(
         seasonTitle ? `${title}, ${seasonTitle}` : title,
@@ -276,11 +284,18 @@ const RequestModal = forwardRef<
         onRequested,
       );
     }, [
+      is4k,
+      defaultService?.is4k,
+      defaultServiceDetails?.server.is4k,
       requestBody,
       requestOverrides,
       defaultProfile,
       defaultFolder,
       defaultTags,
+      requestMedia,
+      seasonTitle,
+      title,
+      onRequested,
     ]);
 
     return (
@@ -308,7 +323,7 @@ const RequestModal = forwardRef<
           <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
             <View>
               <Text className='font-bold text-2xl text-neutral-100'>
-                {t("jellyseerr.advanced")}
+                {t("seerr.advanced")}
               </Text>
               {seasonTitle && (
                 <Text className='text-neutral-300'>{seasonTitle}</Text>
@@ -319,7 +334,7 @@ const RequestModal = forwardRef<
                 <>
                   <View className='flex flex-col'>
                     <Text className='opacity-50 mb-1 text-xs'>
-                      {t("jellyseerr.quality_profile")}
+                      {t("seerr.quality_profile")}
                     </Text>
                     <PlatformDropdown
                       groups={qualityProfileOptions}
@@ -335,7 +350,7 @@ const RequestModal = forwardRef<
                           </Text>
                         </View>
                       }
-                      title={t("jellyseerr.quality_profile")}
+                      title={t("seerr.quality_profile")}
                       open={qualityProfileOpen}
                       onOpenChange={setQualityProfileOpen}
                     />
@@ -343,7 +358,7 @@ const RequestModal = forwardRef<
 
                   <View className='flex flex-col'>
                     <Text className='opacity-50 mb-1 text-xs'>
-                      {t("jellyseerr.root_folder")}
+                      {t("seerr.root_folder")}
                     </Text>
                     <PlatformDropdown
                       groups={rootFolderOptions}
@@ -368,42 +383,45 @@ const RequestModal = forwardRef<
                           </Text>
                         </View>
                       }
-                      title={t("jellyseerr.root_folder")}
+                      title={t("seerr.root_folder")}
                       open={rootFolderOpen}
                       onOpenChange={setRootFolderOpen}
                     />
                   </View>
 
-                  <View className='flex flex-col'>
-                    <Text className='opacity-50 mb-1 text-xs'>
-                      {t("jellyseerr.tags")}
-                    </Text>
-                    <PlatformDropdown
-                      groups={tagsOptions}
-                      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}>
-                            {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>
-                        </View>
-                      }
-                      title={t("jellyseerr.tags")}
-                      open={tagsOpen}
-                      onOpenChange={setTagsOpen}
-                    />
-                  </View>
+                  {defaultServiceDetails?.tags &&
+                    defaultServiceDetails.tags.length > 0 && (
+                      <View className='flex flex-col'>
+                        <Text className='opacity-50 mb-1 text-xs'>
+                          {t("seerr.tags")}
+                        </Text>
+                        <PlatformDropdown
+                          groups={tagsOptions}
+                          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}>
+                                {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>
+                            </View>
+                          }
+                          title={t("seerr.tags")}
+                          open={tagsOpen}
+                          onOpenChange={setTagsOpen}
+                        />
+                      </View>
+                    )}
 
                   <View className='flex flex-col'>
                     <Text className='opacity-50 mb-1 text-xs'>
-                      {t("jellyseerr.request_as")}
+                      {t("seerr.request_as")}
                     </Text>
                     <PlatformDropdown
                       groups={usersOptions}
@@ -413,12 +431,12 @@ const RequestModal = forwardRef<
                             {users.find(
                               (u) =>
                                 u.id ===
-                                (requestOverrides.userId || jellyseerrUser?.id),
-                            )?.displayName || jellyseerrUser!.displayName}
+                                (requestOverrides.userId || seerrUser?.id),
+                            )?.displayName || seerrUser!.displayName}
                           </Text>
                         </View>
                       }
-                      title={t("jellyseerr.request_as")}
+                      title={t("seerr.request_as")}
                       open={usersOpen}
                       onOpenChange={setUsersOpen}
                     />
@@ -427,7 +445,7 @@ const RequestModal = forwardRef<
               )}
             </View>
             <Button className='mt-auto' onPress={request} color='purple'>
-              {t("jellyseerr.request_button")}
+              {t("seerr.request_button")}
             </Button>
           </View>
         </BottomSheetView>

components/seerr/SeerrIndexPage.tsx

@@ -8,8 +8,8 @@ import {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import Discover from "@/components/jellyseerr/discover/Discover";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import Discover from "@/components/seerr/discover/Discover";
+import { useSeerr } from "@/hooks/useSeerr";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 import type {
   MovieResult,
@@ -18,57 +18,57 @@ import type {
 } from "@/utils/jellyseerr/server/models/Search";
 import { useReactNavigationQuery } from "@/utils/useReactNavigationQuery";
 import { Text } from "../common/Text";
-import JellyseerrPoster from "../posters/JellyseerrPoster";
+import SeerrPoster from "../posters/SeerrPoster";
 import { LoadingSkeleton } from "../search/LoadingSkeleton";
 import { SearchItemWrapper } from "../search/SearchItemWrapper";
 import PersonPoster from "./PersonPoster";
 
 interface Props extends ViewProps {
   searchQuery: string;
-  sortType?: JellyseerrSearchSort;
+  sortType?: SeerrSearchSort;
   order?: "asc" | "desc";
 }
 
-export enum JellyseerrSearchSort {
+export enum SeerrSearchSort {
   DEFAULT = 0,
   VOTE_COUNT_AND_AVERAGE = 1,
   POPULARITY = 2,
 }
 
-export const JellyserrIndexPage: React.FC<Props> = ({
+export const SeerrIndexPage: React.FC<Props> = ({
   searchQuery,
   sortType,
   order,
 }) => {
-  const { jellyseerrApi } = useJellyseerr();
+  const { seerrApi } = useSeerr();
   const opacity = useSharedValue(1);
   const { t } = useTranslation();
 
   const {
-    data: jellyseerrDiscoverSettings,
+    data: seerrDiscoverSettings,
     isFetching: f1,
     isLoading: l1,
   } = useReactNavigationQuery({
-    queryKey: ["search", "jellyseerr", "discoverSettings", searchQuery],
-    queryFn: async () => jellyseerrApi?.discoverSettings(),
-    enabled: !!jellyseerrApi && searchQuery.length === 0,
+    queryKey: ["search", "seerr", "discoverSettings", searchQuery],
+    queryFn: async () => seerrApi?.discoverSettings(),
+    enabled: !!seerrApi && searchQuery.length === 0,
   });
 
   const {
-    data: jellyseerrResults,
+    data: seerrResults,
     isFetching: f2,
     isLoading: l2,
   } = useReactNavigationQuery({
-    queryKey: ["search", "jellyseerr", "results", searchQuery],
+    queryKey: ["search", "seerr", "results", searchQuery],
     queryFn: async () => {
       const params = {
         query: new URLSearchParams(searchQuery || "").toString(),
       };
       return await Promise.all([
-        jellyseerrApi?.search({ ...params, page: 1 }),
-        jellyseerrApi?.search({ ...params, page: 2 }),
-        jellyseerrApi?.search({ ...params, page: 3 }),
-        jellyseerrApi?.search({ ...params, page: 4 }),
+        seerrApi?.search({ ...params, page: 1 }),
+        seerrApi?.search({ ...params, page: 2 }),
+        seerrApi?.search({ ...params, page: 3 }),
+        seerrApi?.search({ ...params, page: 4 }),
       ]).then((all) =>
         uniqBy(
           all.flatMap((v) => v?.results || []),
@@ -76,7 +76,7 @@ export const JellyserrIndexPage: React.FC<Props> = ({
         ),
       );
     },
-    enabled: !!jellyseerrApi && searchQuery.length > 0,
+    enabled: !!seerrApi && searchQuery.length > 0,
   });
 
   useAnimatedReaction(
@@ -92,20 +92,20 @@ export const JellyserrIndexPage: React.FC<Props> = ({
 
   const sortingType = useMemo(() => {
     if (!sortType) return;
-    switch (Number(JellyseerrSearchSort[sortType])) {
-      case JellyseerrSearchSort.VOTE_COUNT_AND_AVERAGE:
+    switch (Number(SeerrSearchSort[sortType])) {
+      case SeerrSearchSort.VOTE_COUNT_AND_AVERAGE:
         return ["voteCount", "voteAverage"];
-      case JellyseerrSearchSort.POPULARITY:
+      case SeerrSearchSort.POPULARITY:
         return ["voteCount", "popularity"];
       default:
         return undefined;
     }
   }, [sortType, order]);
 
-  const jellyseerrMovieResults = useMemo(
+  const seerrMovieResults = useMemo(
     () =>
       orderBy(
-        jellyseerrResults?.filter(
+        seerrResults?.filter(
           (r) => r.mediaType === MediaType.MOVIE,
         ) as MovieResult[],
         sortingType || [
@@ -113,41 +113,37 @@ export const JellyserrIndexPage: React.FC<Props> = ({
         ],
         order || "desc",
       ),
-    [jellyseerrResults, sortingType, order],
+    [seerrResults, sortingType, order, searchQuery],
   );
 
-  const jellyseerrTvResults = useMemo(
+  const seerrTvResults = useMemo(
     () =>
       orderBy(
-        jellyseerrResults?.filter(
-          (r) => r.mediaType === MediaType.TV,
-        ) as TvResult[],
+        seerrResults?.filter((r) => r.mediaType === MediaType.TV) as TvResult[],
         sortingType || [
           (t) => t.name.toLowerCase() === searchQuery.toLowerCase(),
         ],
         order || "desc",
       ),
-    [jellyseerrResults, sortingType, order],
+    [seerrResults, sortingType, order, searchQuery],
   );
 
-  const jellyseerrPersonResults = useMemo(
+  const seerrPersonResults = useMemo(
     () =>
       orderBy(
-        jellyseerrResults?.filter(
-          (r) => r.mediaType === "person",
-        ) as PersonResult[],
+        seerrResults?.filter((r) => r.mediaType === "person") as PersonResult[],
         sortingType || [
           (p) => p.name.toLowerCase() === searchQuery.toLowerCase(),
         ],
         order || "desc",
       ),
-    [jellyseerrResults, sortingType, order],
+    [seerrResults, sortingType, order, searchQuery],
   );
 
   if (!searchQuery.length)
     return (
       <View className='flex flex-col'>
-        <Discover sliders={jellyseerrDiscoverSettings} />
+        <Discover sliders={seerrDiscoverSettings} />
       </View>
     );
 
@@ -155,9 +151,9 @@ export const JellyserrIndexPage: React.FC<Props> = ({
     <View>
       <LoadingSkeleton isLoading={f1 || f2 || l1 || l2} />
 
-      {!jellyseerrMovieResults?.length &&
-        !jellyseerrTvResults?.length &&
-        !jellyseerrPersonResults?.length &&
+      {!seerrMovieResults?.length &&
+        !seerrTvResults?.length &&
+        !seerrPersonResults?.length &&
         !f1 &&
         !f2 &&
         !l1 &&
@@ -175,21 +171,21 @@ export const JellyserrIndexPage: React.FC<Props> = ({
       <View className={f1 || f2 || l1 || l2 ? "opacity-0" : "opacity-100"}>
         <SearchItemWrapper
           header={t("search.request_movies")}
-          items={jellyseerrMovieResults}
+          items={seerrMovieResults}
           renderItem={(item: MovieResult) => (
-            <JellyseerrPoster item={item} key={item.id} />
+            <SeerrPoster item={item} key={item.id} />
           )}
         />
         <SearchItemWrapper
           header={t("search.request_series")}
-          items={jellyseerrTvResults}
+          items={seerrTvResults}
           renderItem={(item: TvResult) => (
-            <JellyseerrPoster item={item} key={item.id} />
+            <SeerrPoster item={item} key={item.id} />
           )}
         />
         <SearchItemWrapper
           header={t("search.actors")}
-          items={jellyseerrPersonResults}
+          items={seerrPersonResults}
           renderItem={(item: PersonResult) => (
             <PersonPoster
               className='mr-2'

components/seerr/SeerrMediaIcon.tsx

@@ -3,9 +3,11 @@ import { useMemo } from "react";
 import { View, type ViewProps } from "react-native";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 
-const JellyseerrMediaIcon: React.FC<
-  { mediaType: "tv" | "movie" } & ViewProps
-> = ({ mediaType, className, ...props }) => {
+const SeerrMediaIcon: React.FC<{ mediaType: "tv" | "movie" } & ViewProps> = ({
+  mediaType,
+  className,
+  ...props
+}) => {
   const style = useMemo(
     () =>
       mediaType === MediaType.MOVIE
@@ -29,4 +31,4 @@ const JellyseerrMediaIcon: React.FC<
   );
 };
 
-export default JellyseerrMediaIcon;
+export default SeerrMediaIcon;

components/seerr/SeerrStatusIcon.tsx

@@ -9,7 +9,7 @@ interface Props {
   onPress?: () => void;
 }
 
-const JellyseerrStatusIcon: React.FC<Props & ViewProps> = ({
+const SeerrStatusIcon: React.FC<Props & ViewProps> = ({
   mediaStatus,
   showRequestIcon,
   onPress,
@@ -74,4 +74,4 @@ const JellyseerrStatusIcon: React.FC<Props & ViewProps> = ({
   );
 };
 
-export default JellyseerrStatusIcon;
+export default SeerrStatusIcon;

components/seerr/discover/CompanySlide.tsx

@@ -2,10 +2,10 @@ import { useSegments } from "expo-router";
 import type React from "react";
 import { useCallback } from "react";
 import { TouchableOpacity, type ViewProps } from "react-native";
-import GenericSlideCard from "@/components/jellyseerr/discover/GenericSlideCard";
-import Slide, { type SlideProps } from "@/components/jellyseerr/discover/Slide";
+import GenericSlideCard from "@/components/seerr/discover/GenericSlideCard";
+import Slide, { type SlideProps } from "@/components/seerr/discover/Slide";
 import useRouter from "@/hooks/useAppRouter";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { useSeerr } from "@/hooks/useSeerr";
 import {
   COMPANY_LOGO_IMAGE_FILTER,
   type Network,
@@ -16,17 +16,17 @@ const CompanySlide: React.FC<
   { data: Network[] | Studio[] } & SlideProps & ViewProps
 > = ({ slide, data, ...props }) => {
   const segments = useSegments();
-  const { jellyseerrApi } = useJellyseerr();
+  const { seerrApi } = useSeerr();
   const router = useRouter();
   const from = (segments as string[])[2] || "(home)";
 
   const navigate = useCallback(
     ({ id, image, name }: Network | Studio) =>
       router.push({
-        pathname: `/(auth)/(tabs)/${from}/jellyseerr/company/${id}` as any,
+        pathname: `/(auth)/(tabs)/${from}/seerr/company/${id}` as any,
         params: { id, image, name, type: slide.type },
       }),
-    [slide],
+    [router, from, slide.type],
   );
 
   return (
@@ -40,10 +40,7 @@ const CompanySlide: React.FC<
           <GenericSlideCard
             className='w-28 rounded-lg overflow-hidden border border-neutral-900 p-4'
             id={item.id.toString()}
-            url={jellyseerrApi?.imageProxy(
-              item.image,
-              COMPANY_LOGO_IMAGE_FILTER,
-            )}
+            url={seerrApi?.imageProxy(item.image, COMPANY_LOGO_IMAGE_FILTER)}
           />
         </TouchableOpacity>
       )}

components/seerr/discover/Discover.tsx

@@ -2,10 +2,10 @@ import { sortBy } from "lodash";
 import type React from "react";
 import { useMemo } from "react";
 import { View } from "react-native";
-import CompanySlide from "@/components/jellyseerr/discover/CompanySlide";
-import GenreSlide from "@/components/jellyseerr/discover/GenreSlide";
-import MovieTvSlide from "@/components/jellyseerr/discover/MovieTvSlide";
-import RecentRequestsSlide from "@/components/jellyseerr/discover/RecentRequestsSlide";
+import CompanySlide from "@/components/seerr/discover/CompanySlide";
+import GenreSlide from "@/components/seerr/discover/GenreSlide";
+import MovieTvSlide from "@/components/seerr/discover/MovieTvSlide";
+import RecentRequestsSlide from "@/components/seerr/discover/RecentRequestsSlide";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 import type DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
 import { networks } from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
@@ -23,7 +23,6 @@ const Discover: React.FC<Props> = ({ sliders }) => {
       sortBy(
         (sliders ?? []).filter((s) => s.enabled),
         "order",
-        "asc",
       ),
     [sliders],
   );

components/seerr/discover/GenericSlideCard.tsx

@@ -1,6 +1,6 @@
 import { Image, type ImageContentFit } from "expo-image";
 import { LinearGradient } from "expo-linear-gradient";
-import type React from "react";
+import React from "react";
 import { StyleSheet, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 
@@ -67,4 +67,4 @@ const GenericSlideCard: React.FC<
   </>
 );
 
-export default GenericSlideCard;
+export default React.memo(GenericSlideCard);

components/seerr/discover/GenreSlide.tsx

@@ -3,39 +3,38 @@ import { useSegments } from "expo-router";
 import type React from "react";
 import { useCallback } from "react";
 import { TouchableOpacity, type ViewProps } from "react-native";
-import GenericSlideCard from "@/components/jellyseerr/discover/GenericSlideCard";
-import Slide, { type SlideProps } from "@/components/jellyseerr/discover/Slide";
+import GenericSlideCard from "@/components/seerr/discover/GenericSlideCard";
+import Slide, { type SlideProps } from "@/components/seerr/discover/Slide";
 import useRouter from "@/hooks/useAppRouter";
-import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr";
+import { Endpoints, useSeerr } from "@/hooks/useSeerr";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 import type { GenreSliderItem } from "@/utils/jellyseerr/server/interfaces/api/discoverInterfaces";
 import { genreColorMap } from "@/utils/jellyseerr/src/components/Discover/constants";
 
 const GenreSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) => {
   const segments = useSegments();
-  const { jellyseerrApi } = useJellyseerr();
+  const { seerrApi } = useSeerr();
   const router = useRouter();
   const from = (segments as string[])[2] || "(home)";
 
   const navigate = useCallback(
     (genre: GenreSliderItem) =>
       router.push({
-        pathname: `/(auth)/(tabs)/${from}/jellyseerr/genre/${genre.id}` as any,
+        pathname: `/(auth)/(tabs)/${from}/seerr/genre/${genre.id}` as any,
         params: { type: slide.type, name: genre.name },
       }),
-    [slide],
+    [router, from, slide.type],
   );
-
   const { data } = useQuery({
-    queryKey: ["jellyseerr", "discover", slide.type, slide.id],
+    queryKey: ["seerr", "discover", slide.type, slide.id],
     queryFn: async () => {
-      return jellyseerrApi?.getGenreSliders(
+      return seerrApi?.getGenreSliders(
         slide.type === DiscoverSliderType.MOVIE_GENRES
           ? Endpoints.MOVIE
           : Endpoints.TV,
       );
     },
-    enabled: !!jellyseerrApi,
+    enabled: !!seerrApi,
   });
 
   return (
@@ -53,7 +52,7 @@ const GenreSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) => {
               title={item.name}
               colors={["transparent", "transparent"]}
               contentFit={"cover"}
-              url={jellyseerrApi?.imageProxy(
+              url={seerrApi?.imageProxy(
                 item.backdrops?.[0],
                 `w780_filter(duotone,${
                   genreColorMap[item.id] ?? genreColorMap[0]

components/seerr/discover/MovieTvSlide.tsx

@@ -3,23 +3,19 @@ import { uniqBy } from "lodash";
 import type React from "react";
 import { useMemo } from "react";
 import type { ViewProps } from "react-native";
-import Slide, { type SlideProps } from "@/components/jellyseerr/discover/Slide";
-import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import {
-  type DiscoverEndpoint,
-  Endpoints,
-  useJellyseerr,
-} from "@/hooks/useJellyseerr";
+import SeerrPoster from "@/components/posters/SeerrPoster";
+import Slide, { type SlideProps } from "@/components/seerr/discover/Slide";
+import { type DiscoverEndpoint, Endpoints, useSeerr } from "@/hooks/useSeerr";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 
 const MovieTvSlide: React.FC<SlideProps & ViewProps> = ({
   slide,
   ...props
 }) => {
-  const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
+  const { seerrApi, isSeerrMovieOrTvResult } = useSeerr();
 
   const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
-    queryKey: ["jellyseerr", "discover", slide.id],
+    queryKey: ["seerr", "discover", slide.id],
     queryFn: async ({ pageParam }) => {
       let endpoint: DiscoverEndpoint | undefined;
       let params: any = {
@@ -50,13 +46,13 @@ const MovieTvSlide: React.FC<SlideProps & ViewProps> = ({
           break;
       }
 
-      return endpoint ? jellyseerrApi?.discover(endpoint, params) : null;
+      return endpoint ? seerrApi?.discover(endpoint, params) : null;
     },
     initialPageParam: 1,
     getNextPageParam: (lastPage, pages) =>
       (lastPage?.page || pages?.findLast((p) => p?.results.length)?.page || 1) +
       1,
-    enabled: !!jellyseerrApi,
+    enabled: !!seerrApi,
     staleTime: 0,
   });
 
@@ -65,12 +61,10 @@ const MovieTvSlide: React.FC<SlideProps & ViewProps> = ({
       uniqBy(
         data?.pages
           ?.filter((p) => p?.results.length)
-          .flatMap((p) =>
-            p?.results.filter((r) => isJellyseerrMovieOrTvResult(r)),
-          ),
+          .flatMap((p) => p?.results.filter((r) => isSeerrMovieOrTvResult(r))),
         "id",
       ),
-    [data],
+    [data, isSeerrMovieOrTvResult],
   );
 
   return (
@@ -84,7 +78,7 @@ const MovieTvSlide: React.FC<SlideProps & ViewProps> = ({
         onEndReached={() => {
           if (hasNextPage) fetchNextPage();
         }}
-        renderItem={(item) => <JellyseerrPoster item={item} key={item?.id} />}
+        renderItem={(item) => <SeerrPoster item={item} key={item?.id} />}
       />
     )
   );

components/seerr/discover/RecentRequestsSlide.tsx

@@ -1,9 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import type React from "react";
 import type { ViewProps } from "react-native";
-import Slide, { type SlideProps } from "@/components/jellyseerr/discover/Slide";
-import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import SeerrPoster from "@/components/posters/SeerrPoster";
+import Slide, { type SlideProps } from "@/components/seerr/discover/Slide";
+import { useSeerr } from "@/hooks/useSeerr";
 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";
@@ -16,36 +16,36 @@ type ExtendedMediaRequest = NonFunctionProperties<MediaRequest> & {
 const RequestCard: React.FC<{ request: ExtendedMediaRequest }> = ({
   request,
 }) => {
-  const { jellyseerrApi } = useJellyseerr();
+  const { seerrApi } = useSeerr();
 
   const { data: details } = useQuery({
     queryKey: [
-      "jellyseerr",
+      "seerr",
       "detail",
       request.media.mediaType,
       request.media.tmdbId,
     ],
     queryFn: async () => {
       return request.media.mediaType === MediaType.MOVIE
-        ? jellyseerrApi?.movieDetails(request.media.tmdbId)
-        : jellyseerrApi?.tvDetails(request.media.tmdbId);
+        ? seerrApi?.movieDetails(request.media.tmdbId)
+        : seerrApi?.tvDetails(request.media.tmdbId);
     },
-    enabled: !!jellyseerrApi,
+    enabled: !!seerrApi,
     refetchOnMount: true,
     staleTime: 0,
   });
 
   const { data: refreshedRequest } = useQuery({
-    queryKey: ["jellyseerr", "requests", request.media.mediaType, request.id],
-    queryFn: async () => jellyseerrApi?.getRequest(request.id),
-    enabled: !!jellyseerrApi,
+    queryKey: ["seerr", "requests", request.media.mediaType, request.id],
+    queryFn: async () => seerrApi?.getRequest(request.id),
+    enabled: !!seerrApi,
     refetchOnMount: true,
     refetchInterval: 5000,
     staleTime: 0,
   });
 
   return (
-    <JellyseerrPoster
+    <SeerrPoster
       horizontal
       showDownloadInfo
       item={details}
@@ -58,12 +58,12 @@ const RecentRequestsSlide: React.FC<SlideProps & ViewProps> = ({
   slide,
   ...props
 }) => {
-  const { jellyseerrApi } = useJellyseerr();
+  const { seerrApi } = useSeerr();
 
   const { data: requests } = useQuery({
-    queryKey: ["jellyseerr", "recent_requests"],
-    queryFn: async () => jellyseerrApi?.requests(),
-    enabled: !!jellyseerrApi,
+    queryKey: ["seerr", "recent_requests"],
+    queryFn: async () => seerrApi?.requests(),
+    enabled: !!seerrApi,
     refetchOnMount: true,
     staleTime: 0,
   });

components/seerr/discover/Slide.tsx

@@ -14,10 +14,7 @@ export interface SlideProps {
 
 interface Props<T> extends SlideProps {
   data: T[];
-  renderItem: (
-    item: T,
-    index: number,
-  ) => React.ComponentType<any> | React.ReactElement | null | undefined;
+  renderItem: (item: T, index: number) => React.ReactElement | null;
   keyExtractor: (item: T) => string;
   onEndReached?: (() => void) | null | undefined;
 }
@@ -47,7 +44,6 @@ const Slide = <T,>({
         data={data}
         onEndReachedThreshold={1}
         onEndReached={onEndReached}
-        //@ts-expect-error
         renderItem={({ item, index }) =>
           item ? renderItem(item, index) : null
         }

components/series/CastAndCrew.tsx

@@ -8,7 +8,6 @@ import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
-import { POSTER_CAROUSEL_HEIGHT } from "@/constants/Values";
 import useRouter from "@/hooks/useAppRouter";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
@@ -53,7 +52,7 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
       <HorizontalScroll
         loading={loading}
         keyExtractor={(i, _idx) => i.Id?.toString() || ""}
-        height={POSTER_CAROUSEL_HEIGHT}
+        height={220}
         data={destinctPeople}
         renderItem={(i) => (
           <TouchableOpacity

components/series/CurrentSeries.tsx

@@ -3,7 +3,6 @@ import { useAtom } from "jotai";
 import type React from "react";
 import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
-import { POSTER_CAROUSEL_HEIGHT } from "@/constants/Values";
 import useRouter from "@/hooks/useAppRouter";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
@@ -27,7 +26,7 @@ export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {
       </Text>
       <HorizontalScroll
         data={[item]}
-        height={POSTER_CAROUSEL_HEIGHT}
+        height={220}
         renderItem={(item, _index) => (
           <TouchableOpacity
             key={item?.Id}

components/series/SeerrSeasons.tsx

@@ -14,11 +14,11 @@ import { Alert, TouchableOpacity, View } from "react-native";
 import { HorizontalScroll } from "@/components/common/HorizontalScroll";
 import { Text } from "@/components/common/Text";
 import { Tags } from "@/components/GenreTags";
-import { dateOpts } from "@/components/jellyseerr/DetailFacts";
-import { textShadowStyle } from "@/components/jellyseerr/discover/GenericSlideCard";
-import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
 import { RoundButton } from "@/components/RoundButton";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { dateOpts } from "@/components/seerr/DetailFacts";
+import { textShadowStyle } from "@/components/seerr/discover/GenericSlideCard";
+import SeerrStatusIcon from "@/components/seerr/SeerrStatusIcon";
+import { useSeerr } from "@/hooks/useSeerr";
 import {
   MediaStatus,
   MediaType,
@@ -30,15 +30,15 @@ import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 import { Loader } from "../Loader";
 
-const JellyseerrSeasonEpisodes: React.FC<{
+const SeerrSeasonEpisodes: React.FC<{
   details: TvDetails;
   seasonNumber: number;
 }> = ({ details, seasonNumber }) => {
-  const { jellyseerrApi } = useJellyseerr();
+  const { seerrApi } = useSeerr();
 
   const { data: seasonWithEpisodes, isLoading } = useQuery({
-    queryKey: ["jellyseerr", details.id, "season", seasonNumber],
-    queryFn: async () => jellyseerrApi?.tvSeason(details.id, seasonNumber),
+    queryKey: ["seerr", details.id, "season", seasonNumber],
+    queryFn: async () => seerrApi?.tvSeason(details.id, seasonNumber),
     enabled: details.seasons.filter((s) => s.seasonNumber !== 0).length > 0,
   });
 
@@ -57,11 +57,7 @@ const JellyseerrSeasonEpisodes: React.FC<{
 };
 
 const RenderItem = ({ item }: any) => {
-  const {
-    jellyseerrApi,
-    jellyseerrRegion: region,
-    jellyseerrLocale: locale,
-  } = useJellyseerr();
+  const { seerrApi, seerrRegion: region, seerrLocale: locale } = useSeerr();
   const [imageError, setImageError] = useState(false);
 
   const upcomingAirDate = useMemo(() => {
@@ -69,7 +65,7 @@ const RenderItem = ({ item }: any) => {
     if (airDate) {
       const airDateObj = new Date(airDate);
       if (new Date() < airDateObj) {
-        return airDateObj.toLocaleDateString(`${locale}-${region}`, dateOpts);
+        return airDateObj.toLocaleDateString(locale, dateOpts);
       }
     }
   }, [item, locale, region]);
@@ -83,7 +79,7 @@ const RenderItem = ({ item }: any) => {
               key={item.id}
               id={item.id}
               source={{
-                uri: jellyseerrApi?.imageProxy(item.stillPath),
+                uri: seerrApi?.imageProxy(item.stillPath),
               }}
               cachePolicy={"memory-disk"}
               contentFit='cover'
@@ -131,7 +127,7 @@ const RenderItem = ({ item }: any) => {
   );
 };
 
-const JellyseerrSeasons: React.FC<{
+const SeerrSeasons: React.FC<{
   isLoading: boolean;
   details?: TvDetails;
   hasAdvancedRequest?: boolean;
@@ -148,7 +144,7 @@ const JellyseerrSeasons: React.FC<{
   hasAdvancedRequest,
   onAdvancedRequest,
 }) => {
-  const { jellyseerrApi, requestMedia } = useJellyseerr();
+  const { seerrApi, requestMedia } = useSeerr();
   const [seasonStates, setSeasonStates] = useState<{ [key: number]: boolean }>(
     {},
   );
@@ -181,7 +177,7 @@ const JellyseerrSeasons: React.FC<{
   );
 
   const requestAll = useCallback(() => {
-    if (details && jellyseerrApi) {
+    if (details && seerrApi) {
       const body: MediaRequestBody = {
         mediaId: details.id,
         mediaType: MediaType.TV,
@@ -198,7 +194,7 @@ const JellyseerrSeasons: React.FC<{
       requestMedia(details.name, body, refetch);
     }
   }, [
-    jellyseerrApi,
+    seerrApi,
     seasons,
     details,
     hasAdvancedRequest,
@@ -210,15 +206,15 @@ const JellyseerrSeasons: React.FC<{
   const promptRequestAll = useCallback(
     () =>
       Alert.alert(
-        t("jellyseerr.confirm"),
-        t("jellyseerr.are_you_sure_you_want_to_request_all_seasons"),
+        t("seerr.confirm"),
+        t("seerr.are_you_sure_you_want_to_request_all_seasons"),
         [
           {
-            text: t("jellyseerr.cancel"),
+            text: t("seerr.cancel"),
             style: "cancel",
           },
           {
-            text: t("jellyseerr.yes"),
+            text: t("seerr.yes"),
             onPress: requestAll,
           },
         ],
@@ -301,10 +297,10 @@ const JellyseerrSeasons: React.FC<{
               <Tags
                 textClass=''
                 tags={[
-                  t("jellyseerr.season_number", {
+                  t("seerr.season_number", {
                     season_number: season.seasonNumber,
                   }),
-                  t("jellyseerr.number_episodes", {
+                  t("seerr.number_episodes", {
                     episode_number: season.episodeCount,
                   }),
                 ]}
@@ -312,7 +308,7 @@ const JellyseerrSeasons: React.FC<{
               {[0].map(() => {
                 const canRequest = season.status === MediaStatus.UNKNOWN;
                 return (
-                  <JellyseerrStatusIcon
+                  <SeerrStatusIcon
                     key={0}
                     onPress={() =>
                       requestSeason(canRequest, season.seasonNumber)
@@ -326,7 +322,7 @@ const JellyseerrSeasons: React.FC<{
             </View>
           </TouchableOpacity>
           {seasonStates?.[season.seasonNumber] && (
-            <JellyseerrSeasonEpisodes
+            <SeerrSeasonEpisodes
               key={season.seasonNumber}
               details={details}
               seasonNumber={season.seasonNumber}
@@ -338,4 +334,4 @@ const JellyseerrSeasons: React.FC<{
   );
 };
 
-export default JellyseerrSeasons;
+export default SeerrSeasons;

components/settings/Dashboard.tsx

@@ -1,29 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import useRouter from "@/hooks/useAppRouter";
-import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
-import { useSettings } from "@/utils/atoms/settings";
-import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
-
-export const Dashboard = () => {
-  const { settings } = useSettings();
-  const { sessions = [] } = useSessions({} as useSessionsProps);
-  const router = useRouter();
-
-  const { t } = useTranslation();
-
-  if (!settings) return null;
-  return (
-    <View>
-      <ListGroup title={t("home.settings.dashboard.title")} className='mt-4'>
-        <ListItem
-          className={sessions.length !== 0 ? "bg-purple-900" : ""}
-          onPress={() => router.push("/settings/dashboard/sessions")}
-          title={t("home.settings.dashboard.sessions_title")}
-          showArrow
-        />
-      </ListGroup>
-    </View>
-  );
-};

components/settings/DownloadSettings.tsx

@@ -1,3 +0,0 @@
-export default function DownloadSettings() {
-  return null;
-}

components/settings/DownloadSettings.tv.tsx

@@ -1,3 +0,0 @@
-export default function DownloadSettings() {
-  return null;
-}

components/settings/Jellyseerr.tsx

@@ -1,181 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import { toast } from "sonner-native";
-import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
-import { userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { Button } from "../Button";
-import { Input } from "../common/Input";
-import { Text } from "../common/Text";
-import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
-
-export const JellyseerrSettings = () => {
-  const { jellyseerrUser, setJellyseerrUser, clearAllJellyseerData } =
-    useJellyseerr();
-
-  const { t } = useTranslation();
-
-  const [user] = useAtom(userAtom);
-  const { settings, updateSettings } = useSettings();
-
-  const [jellyseerrPassword, setJellyseerrPassword] = useState<
-    string | undefined
-  >(undefined);
-
-  const [jellyseerrServerUrl, setjellyseerrServerUrl] = useState<
-    string | undefined
-  >(settings?.jellyseerrServerUrl || undefined);
-
-  const loginToJellyseerrMutation = useMutation({
-    mutationFn: async () => {
-      if (!jellyseerrServerUrl && !settings?.jellyseerrServerUrl)
-        throw new Error("Missing server url");
-      if (!user?.Name)
-        throw new Error("Missing required information for login");
-      const jellyseerrTempApi = new JellyseerrApi(
-        jellyseerrServerUrl || settings.jellyseerrServerUrl || "",
-      );
-      const testResult = await jellyseerrTempApi.test();
-      if (!testResult.isValid) throw new Error("Invalid server url");
-      return jellyseerrTempApi.login(user.Name, jellyseerrPassword || "");
-    },
-    onSuccess: (user) => {
-      setJellyseerrUser(user);
-      updateSettings({ jellyseerrServerUrl });
-    },
-    onError: () => {
-      toast.error(t("jellyseerr.failed_to_login"));
-    },
-    onSettled: () => {
-      setJellyseerrPassword(undefined);
-    },
-  });
-
-  const clearData = () => {
-    clearAllJellyseerData().finally(() => {
-      setJellyseerrUser(undefined);
-      setJellyseerrPassword(undefined);
-      setjellyseerrServerUrl(undefined);
-    });
-  };
-
-  return (
-    <View className=''>
-      <View>
-        {jellyseerrUser ? (
-          <>
-            <ListGroup title={"Jellyseerr"}>
-              <ListItem
-                title={t(
-                  "home.settings.plugins.jellyseerr.total_media_requests",
-                )}
-                value={jellyseerrUser?.requestCount?.toString()}
-              />
-              <ListItem
-                title={t("home.settings.plugins.jellyseerr.movie_quota_limit")}
-                value={
-                  jellyseerrUser?.movieQuotaLimit?.toString() ??
-                  t("home.settings.plugins.jellyseerr.unlimited")
-                }
-              />
-              <ListItem
-                title={t("home.settings.plugins.jellyseerr.movie_quota_days")}
-                value={
-                  jellyseerrUser?.movieQuotaDays?.toString() ??
-                  t("home.settings.plugins.jellyseerr.unlimited")
-                }
-              />
-              <ListItem
-                title={t("home.settings.plugins.jellyseerr.tv_quota_limit")}
-                value={
-                  jellyseerrUser?.tvQuotaLimit?.toString() ??
-                  t("home.settings.plugins.jellyseerr.unlimited")
-                }
-              />
-              <ListItem
-                title={t("home.settings.plugins.jellyseerr.tv_quota_days")}
-                value={
-                  jellyseerrUser?.tvQuotaDays?.toString() ??
-                  t("home.settings.plugins.jellyseerr.unlimited")
-                }
-              />
-            </ListGroup>
-
-            <View className='p-4'>
-              <Button color='red' onPress={clearData}>
-                {t(
-                  "home.settings.plugins.jellyseerr.reset_jellyseerr_config_button",
-                )}
-              </Button>
-            </View>
-          </>
-        ) : (
-          <View className='flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900'>
-            <Text className='text-xs text-red-600 mb-2'>
-              {t("home.settings.plugins.jellyseerr.jellyseerr_warning")}
-            </Text>
-            <Text className='font-bold mb-1'>
-              {t("home.settings.plugins.jellyseerr.server_url")}
-            </Text>
-            <View className='flex flex-col shrink mb-2'>
-              <Text className='text-xs text-gray-600'>
-                {t("home.settings.plugins.jellyseerr.server_url_hint")}
-              </Text>
-            </View>
-            <Input
-              className='border border-neutral-800 mb-2'
-              placeholder={t(
-                "home.settings.plugins.jellyseerr.server_url_placeholder",
-              )}
-              value={jellyseerrServerUrl ?? settings?.jellyseerrServerUrl}
-              defaultValue={
-                settings?.jellyseerrServerUrl ?? jellyseerrServerUrl
-              }
-              keyboardType='url'
-              returnKeyType='done'
-              autoCapitalize='none'
-              textContentType='URL'
-              onChangeText={setjellyseerrServerUrl}
-              editable={!loginToJellyseerrMutation.isPending}
-            />
-            <View>
-              <Text className='font-bold mb-2'>
-                {t("home.settings.plugins.jellyseerr.password")}
-              </Text>
-              <Input
-                className='border border-neutral-800'
-                autoFocus={true}
-                focusable={true}
-                placeholder={t(
-                  "home.settings.plugins.jellyseerr.password_placeholder",
-                  { username: user?.Name },
-                )}
-                value={jellyseerrPassword}
-                keyboardType='default'
-                secureTextEntry={true}
-                returnKeyType='done'
-                autoCapitalize='none'
-                textContentType='password'
-                onChangeText={setJellyseerrPassword}
-                editable={!loginToJellyseerrMutation.isPending}
-              />
-              <Button
-                loading={loginToJellyseerrMutation.isPending}
-                disabled={loginToJellyseerrMutation.isPending}
-                color='purple'
-                className='h-12 mt-2'
-                onPress={() => loginToJellyseerrMutation.mutate()}
-              >
-                {t("home.settings.plugins.jellyseerr.login_button")}
-              </Button>
-            </View>
-          </View>
-        )}
-      </View>
-    </View>
-  );
-};

components/settings/LibraryOptionsSheet.tsx

@@ -229,7 +229,7 @@ export const LibraryOptionsSheet: React.FC<Props> = ({
             />
           </OptionGroup>
 
-          <OptionGroup title='Options'>
+          <OptionGroup title={t("library.options.options_title")}>
             <ToggleItem
               label={t("library.options.show_titles")}
               value={settings.showTitles}

components/settings/MpvSubtitleSettings.tsx

@@ -1,5 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
 import { Stepper } from "@/components/inputs/Stepper";
 import { Text } from "../common/Text";
@@ -17,20 +18,21 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
   const isTv = Platform.isTV;
   const media = useMedia();
   const { settings, updateSettings } = media;
+  const { t } = useTranslation();
 
   const alignXOptions: AlignX[] = ["left", "center", "right"];
   const alignYOptions: AlignY[] = ["top", "center", "bottom"];
 
   const alignXLabels: Record<AlignX, string> = {
-    left: "Left",
-    center: "Center",
-    right: "Right",
+    left: t("player.alignment_left"),
+    center: t("player.alignment_center"),
+    right: t("player.alignment_right"),
   };
 
   const alignYLabels: Record<AlignY, string> = {
-    top: "Top",
-    center: "Center",
-    bottom: "Bottom",
+    top: t("player.alignment_top"),
+    center: t("player.alignment_center"),
+    bottom: t("player.alignment_bottom"),
   };
 
   const alignXOptionGroups = useMemo(() => {
@@ -61,14 +63,14 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
   return (
     <View {...props}>
       <ListGroup
-        title='MPV Subtitle Settings'
+        title={t("player.mpv_subtitle_settings_title")}
         description={
           <Text className='text-[#8E8D91] text-xs'>
-            Advanced subtitle customization for MPV player
+            {t("player.mpv_subtitle_settings_description")}
           </Text>
         }
       >
-        <ListItem title='Subtitle Scale'>
+        <ListItem title={t("player.subtitle_scale")}>
           <Stepper
             value={settings.mpvSubtitleScale ?? 1.0}
             step={0.1}
@@ -80,7 +82,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
           />
         </ListItem>
 
-        <ListItem title='Vertical Margin'>
+        <ListItem title={t("player.vertical_margin")}>
           <Stepper
             value={settings.mpvSubtitleMarginY ?? 0}
             step={5}
@@ -90,7 +92,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
           />
         </ListItem>
 
-        <ListItem title='Horizontal Alignment'>
+        <ListItem title={t("player.horizontal_alignment")}>
           <PlatformDropdown
             groups={alignXOptionGroups}
             trigger={
@@ -105,11 +107,11 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                 />
               </View>
             }
-            title='Horizontal Alignment'
+            title={t("player.horizontal_alignment")}
           />
         </ListItem>
 
-        <ListItem title='Vertical Alignment'>
+        <ListItem title={t("player.vertical_alignment")}>
           <PlatformDropdown
             groups={alignYOptionGroups}
             trigger={
@@ -124,7 +126,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                 />
               </View>
             }
-            title='Vertical Alignment'
+            title={t("player.vertical_alignment")}
           />
         </ListItem>
       </ListGroup>

components/settings/PlaybackControlsSettings.tsx

@@ -8,7 +8,6 @@ import { BITRATES } from "@/components/BitrateSelector";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
 import DisabledSetting from "@/components/settings/DisabledSetting";
-import useRouter from "@/hooks/useAppRouter";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
@@ -16,7 +15,6 @@ import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 
 export const PlaybackControlsSettings: React.FC = () => {
-  const router = useRouter();
   const { settings, updateSettings, pluginSettings } = useSettings();
   const { t } = useTranslation();
 
@@ -250,15 +248,6 @@ export const PlaybackControlsSettings: React.FC = () => {
             title={t("home.settings.other.max_auto_play_episode_count")}
           />
         </ListItem>
-
-        {/* Media Segment Skip Settings */}
-        <ListItem
-          title={t("home.settings.other.segment_skip_settings")}
-          subtitle={t("home.settings.other.segment_skip_settings_description")}
-          onPress={() => router.push("/settings/segment-skip/page")}
-        >
-          <Ionicons name='chevron-forward' size={20} color='#8E8D91' />
-        </ListItem>
       </ListGroup>
     </DisabledSetting>
   );

components/settings/PluginSettings.tsx

@@ -19,23 +19,23 @@ export const PluginSettings = () => {
       className='mb-4'
     >
       <ListItem
-        onPress={() => router.push("/settings/plugins/jellyseerr/page")}
-        title={"Jellyseerr"}
-        showArrow
-      />
-      <ListItem
-        onPress={() => router.push("/settings/plugins/marlin-search/page")}
-        title='Marlin Search'
+        onPress={() => router.push("/settings/plugins/seerr/page")}
+        title={"Seerr"}
         showArrow
       />
       <ListItem
         onPress={() => router.push("/settings/plugins/streamystats/page")}
-        title='Streamystats'
+        title={"Streamystats"}
+        showArrow
+      />
+      <ListItem
+        onPress={() => router.push("/settings/plugins/marlin-search/page")}
+        title={"Marlin Search"}
         showArrow
       />
       <ListItem
         onPress={() => router.push("/settings/plugins/kefinTweaks/page")}
-        title='KefinTweaks'
+        title={"KefinTweaks"}
         showArrow
       />
     </ListGroup>

components/settings/Seerr.tsx

@@ -0,0 +1,174 @@
+import { useMutation } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { toast } from "sonner-native";
+import { SeerrApi, useSeerr } from "@/hooks/useSeerr";
+import { userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { Button } from "../Button";
+import { Input } from "../common/Input";
+import { Text } from "../common/Text";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+export const SeerrSettings = () => {
+  const { seerrUser, setSeerrUser, clearAllSeerrData } = useSeerr();
+
+  const { t } = useTranslation();
+
+  const [user] = useAtom(userAtom);
+  const { settings, updateSettings } = useSettings();
+
+  const [seerrPassword, setSeerrPassword] = useState<string | undefined>(
+    undefined,
+  );
+
+  const [seerrServerUrl, setSeerrServerUrl] = useState<string | undefined>(
+    settings?.seerrServerUrl || undefined,
+  );
+
+  const loginToSeerrMutation = useMutation({
+    mutationFn: async () => {
+      if (!seerrServerUrl && !settings?.seerrServerUrl)
+        throw new Error("Missing server url");
+      if (!user?.Name)
+        throw new Error("Missing required information for login");
+      const seerrTempApi = new SeerrApi(
+        seerrServerUrl || settings.seerrServerUrl || "",
+      );
+      const testResult = await seerrTempApi.test();
+      if (!testResult.isValid) throw new Error("Invalid server url");
+      return seerrTempApi.login(user.Name, seerrPassword || "");
+    },
+    onSuccess: (user) => {
+      setSeerrUser(user);
+      updateSettings({ seerrServerUrl });
+    },
+    onError: () => {
+      toast.error(t("seerr.failed_to_login"));
+    },
+    onSettled: () => {
+      setSeerrPassword(undefined);
+    },
+  });
+
+  const clearData = () => {
+    clearAllSeerrData().finally(() => {
+      setSeerrUser(undefined);
+      setSeerrPassword(undefined);
+      setSeerrServerUrl(undefined);
+    });
+  };
+
+  return (
+    <View className=''>
+      <View>
+        {seerrUser ? (
+          <>
+            <ListGroup title={"Seerr"}>
+              <ListItem
+                title={t("home.settings.plugins.seerr.total_media_requests")}
+                value={seerrUser?.requestCount?.toString()}
+              />
+              <ListItem
+                title={t("home.settings.plugins.seerr.movie_quota_limit")}
+                value={
+                  seerrUser?.movieQuotaLimit?.toString() ??
+                  t("home.settings.plugins.seerr.unlimited")
+                }
+              />
+              <ListItem
+                title={t("home.settings.plugins.seerr.movie_quota_days")}
+                value={
+                  seerrUser?.movieQuotaDays?.toString() ??
+                  t("home.settings.plugins.seerr.unlimited")
+                }
+              />
+              <ListItem
+                title={t("home.settings.plugins.seerr.tv_quota_limit")}
+                value={
+                  seerrUser?.tvQuotaLimit?.toString() ??
+                  t("home.settings.plugins.seerr.unlimited")
+                }
+              />
+              <ListItem
+                title={t("home.settings.plugins.seerr.tv_quota_days")}
+                value={
+                  seerrUser?.tvQuotaDays?.toString() ??
+                  t("home.settings.plugins.seerr.unlimited")
+                }
+              />
+            </ListGroup>
+
+            <View className='p-4'>
+              <Button color='red' onPress={clearData}>
+                {t("home.settings.plugins.seerr.reset_seerr_config_button")}
+              </Button>
+            </View>
+          </>
+        ) : (
+          <View className='flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900'>
+            <Text className='text-xs text-red-600 mb-2'>
+              {t("home.settings.plugins.seerr.seerr_warning")}
+            </Text>
+            <Text className='font-bold mb-1'>
+              {t("home.settings.plugins.seerr.server_url")}
+            </Text>
+            <View className='flex flex-col shrink mb-2'>
+              <Text className='text-xs text-gray-600'>
+                {t("home.settings.plugins.seerr.server_url_hint")}
+              </Text>
+            </View>
+            <Input
+              className='border border-neutral-800 mb-2'
+              placeholder={t(
+                "home.settings.plugins.seerr.server_url_placeholder",
+              )}
+              value={seerrServerUrl ?? settings?.seerrServerUrl}
+              defaultValue={settings?.seerrServerUrl ?? seerrServerUrl}
+              keyboardType='url'
+              returnKeyType='done'
+              autoCapitalize='none'
+              textContentType='URL'
+              onChangeText={setSeerrServerUrl}
+              editable={!loginToSeerrMutation.isPending}
+            />
+            <View>
+              <Text className='font-bold mb-2'>
+                {t("home.settings.plugins.seerr.password")}
+              </Text>
+              <Input
+                className='border border-neutral-800'
+                autoFocus={true}
+                focusable={true}
+                placeholder={t(
+                  "home.settings.plugins.seerr.password_placeholder",
+                  { username: user?.Name },
+                )}
+                value={seerrPassword}
+                keyboardType='default'
+                secureTextEntry={true}
+                returnKeyType='done'
+                autoCapitalize='none'
+                textContentType='password'
+                onChangeText={setSeerrPassword}
+                editable={!loginToSeerrMutation.isPending}
+              />
+              <Button
+                loading={loginToSeerrMutation.isPending}
+                disabled={loginToSeerrMutation.isPending}
+                color='purple'
+                className='h-12 mt-2'
+                onPress={() => loginToSeerrMutation.mutate()}
+              >
+                {t("home.settings.plugins.seerr.login_button")}
+              </Button>
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};

components/video-player/controls/BottomControls.tsx

@@ -19,9 +19,7 @@ interface BottomControlsProps {
   currentTime: number;
   remainingTime: number;
   showSkipButton: boolean;
-  skipButtonText: string;
   showSkipCreditButton: boolean;
-  skipCreditButtonText: string;
   hasContentAfterCredits: boolean;
   skipIntro: () => void;
   skipCredit: () => void;
@@ -69,9 +67,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
   currentTime,
   remainingTime,
   showSkipButton,
-  skipButtonText,
   showSkipCreditButton,
-  skipCreditButtonText,
   hasContentAfterCredits,
   skipIntro,
   skipCredit,
@@ -140,7 +136,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
           <SkipButton
             showButton={showSkipButton}
             onPress={skipIntro}
-            buttonText={skipButtonText}
+            buttonText='Skip Intro'
           />
           {/* Smart Skip Credits behavior:
               - Show "Skip Credits" if there's content after credits OR no next episode
@@ -150,7 +146,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
               showSkipCreditButton && (hasContentAfterCredits || !nextItem)
             }
             onPress={skipCredit}
-            buttonText={skipCreditButtonText}
+            buttonText='Skip Credits'
           />
           {settings.autoPlayNextEpisode !== false &&
             (settings.maxAutoPlayEpisodeCount.value === -1 ||

components/video-player/controls/Controls.tsx

@@ -4,15 +4,7 @@ import type {
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
 import { useLocalSearchParams } from "expo-router";
-import {
-  type FC,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useTranslation } from "react-i18next";
+import { type FC, useCallback, useEffect, useState } from "react";
 import { StyleSheet, useWindowDimensions, View } from "react-native";
 import Animated, {
   Easing,
@@ -24,17 +16,17 @@ import Animated, {
 } from "react-native-reanimated";
 import ContinueWatchingOverlay from "@/components/video-player/controls/ContinueWatchingOverlay";
 import useRouter from "@/hooks/useAppRouter";
+import { useCreditSkipper } from "@/hooks/useCreditSkipper";
 import { useHaptic } from "@/hooks/useHaptic";
+import { useIntroSkipper } from "@/hooks/useIntroSkipper";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
-import { useSegmentSkipper } from "@/hooks/useSegmentSkipper";
 import { useTrickplay } from "@/hooks/useTrickplay";
 import type { TechnicalInfo } from "@/modules/mpv-player";
 import { DownloadedItem } from "@/providers/Downloads/types";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { useSegments } from "@/utils/segments";
-import { msToSeconds, ticksToMs } from "@/utils/time";
+import { ticksToMs } from "@/utils/time";
 import { BottomControls } from "./BottomControls";
 import { CenterControls } from "./CenterControls";
 import { CONTROLS_CONSTANTS } from "./constants";
@@ -48,10 +40,6 @@ import { useVideoTime } from "./hooks/useVideoTime";
 import { TechnicalInfoOverlay } from "./TechnicalInfoOverlay";
 import { useControlsTimeout } from "./useControlsTimeout";
 import { PlaybackSpeedScope } from "./utils/playback-speed-settings";
-import { type AspectRatio } from "./VideoScalingModeSelector";
-
-// No-op function to avoid creating new references on every render
-const noop = () => {};
 
 interface Props {
   item: BaseItemDto;
@@ -69,7 +57,6 @@ interface Props {
   startPictureInPicture?: () => Promise<void>;
   play: () => void;
   pause: () => void;
-  aspectRatio?: AspectRatio;
   isZoomedToFill?: boolean;
   onZoomToggle?: () => void;
   api?: Api | null;
@@ -100,7 +87,6 @@ export const Controls: FC<Props> = ({
   showControls,
   setShowControls,
   mediaSource,
-  aspectRatio = "default",
   isZoomedToFill = false,
   onZoomToggle,
   api = null,
@@ -121,24 +107,6 @@ export const Controls: FC<Props> = ({
   const [episodeView, setEpisodeView] = useState(false);
   const [showAudioSlider, setShowAudioSlider] = useState(false);
 
-  // Ref to track pending play timeout for cleanup and cancellation
-  const playTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Mutable ref tracking isPlaying to avoid stale closures in seekMs timeout
-  const playingRef = useRef(isPlaying);
-  useEffect(() => {
-    playingRef.current = isPlaying;
-  }, [isPlaying]);
-
-  // Clean up timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (playTimeoutRef.current) {
-        clearTimeout(playTimeoutRef.current);
-      }
-    };
-  }, []);
-
   const { height: screenHeight, width: screenWidth } = useWindowDimensions();
   const { previousItem, nextItem } = usePlaybackManager({
     item,
@@ -329,125 +297,27 @@ export const Controls: FC<Props> = ({
     subtitleIndex: string;
   }>();
 
-  // Fetch all segments for the current item
-  const { data: segments } = useSegments(
-    item.Id ?? "",
+  const { showSkipButton, skipIntro } = useIntroSkipper(
+    item.Id!,
+    currentTime,
+    seek,
+    play,
     offline,
-    downloadedFiles,
     api,
+    downloadedFiles,
   );
 
-  // Convert milliseconds to seconds for segment comparison
-  const currentTimeSeconds = msToSeconds(currentTime);
-  const maxSeconds = maxMs ? msToSeconds(maxMs) : undefined;
-
-  // Wrapper to convert segment skip from seconds to milliseconds
-  // Includes 200ms delay to allow seek operation to complete before resuming playback
-  const seekMs = useCallback(
-    (timeInSeconds: number) => {
-      // Cancel any pending play call to avoid race conditions
-      if (playTimeoutRef.current) {
-        clearTimeout(playTimeoutRef.current);
-      }
-      seek(timeInSeconds * 1000);
-      // Brief delay ensures the seek operation completes before resuming playback
-      // Without this, playback may resume from the old position
-      // Read latest isPlaying from ref to avoid stale closure
-      playTimeoutRef.current = setTimeout(() => {
-        if (playingRef.current) {
-          play();
-        }
-        playTimeoutRef.current = null;
-      }, 200);
-    },
-    [seek, play],
-  );
-
-  // Use unified segment skipper for all segment types
-  const introSkipper = useSegmentSkipper({
-    segments: segments?.introSegments || [],
-    segmentType: "Intro",
-    currentTime: currentTimeSeconds,
-    seek: seekMs,
-    isPaused: !isPlaying,
-  });
-
-  const outroSkipper = useSegmentSkipper({
-    segments: segments?.creditSegments || [],
-    segmentType: "Outro",
-    currentTime: currentTimeSeconds,
-    totalDuration: maxSeconds,
-    seek: seekMs,
-    isPaused: !isPlaying,
-  });
-
-  const recapSkipper = useSegmentSkipper({
-    segments: segments?.recapSegments || [],
-    segmentType: "Recap",
-    currentTime: currentTimeSeconds,
-    seek: seekMs,
-    isPaused: !isPlaying,
-  });
-
-  const commercialSkipper = useSegmentSkipper({
-    segments: segments?.commercialSegments || [],
-    segmentType: "Commercial",
-    currentTime: currentTimeSeconds,
-    seek: seekMs,
-    isPaused: !isPlaying,
-  });
-
-  const previewSkipper = useSegmentSkipper({
-    segments: segments?.previewSegments || [],
-    segmentType: "Preview",
-    currentTime: currentTimeSeconds,
-    seek: seekMs,
-    isPaused: !isPlaying,
-  });
-
-  // Determine which segment button to show (priority order)
-  // Commercial > Recap > Intro > Preview > Outro
-  const activeSegment = useMemo(() => {
-    if (commercialSkipper.currentSegment)
-      return { type: "Commercial", ...commercialSkipper };
-    if (recapSkipper.currentSegment) return { type: "Recap", ...recapSkipper };
-    if (introSkipper.currentSegment) return { type: "Intro", ...introSkipper };
-    if (previewSkipper.currentSegment)
-      return { type: "Preview", ...previewSkipper };
-    if (outroSkipper.currentSegment) return { type: "Outro", ...outroSkipper };
-    return null;
-  }, [
-    commercialSkipper.currentSegment,
-    recapSkipper.currentSegment,
-    introSkipper.currentSegment,
-    previewSkipper.currentSegment,
-    outroSkipper.currentSegment,
-    commercialSkipper,
-    recapSkipper,
-    introSkipper,
-    previewSkipper,
-    outroSkipper,
-  ]);
-
-  // Legacy compatibility: map to old variable names
-  const showSkipButton = !!(
-    activeSegment &&
-    ["Intro", "Recap", "Commercial", "Preview"].includes(activeSegment.type)
-  );
-  const skipIntro = activeSegment?.skipSegment || noop;
-  const showSkipCreditButton = activeSegment?.type === "Outro";
-  const skipCredit = outroSkipper.skipSegment || noop;
-  const hasContentAfterCredits =
-    outroSkipper.currentSegment && maxSeconds
-      ? outroSkipper.currentSegment.endTime < maxSeconds
-      : false;
-
-  // Get button text based on segment type using i18n
-  const { t } = useTranslation();
-  const skipButtonText = activeSegment
-    ? t(`player.skip_${activeSegment.type.toLowerCase()}`)
-    : t("player.skip_intro");
-  const skipCreditButtonText = t("player.skip_outro");
+  const { showSkipCreditButton, skipCredit, hasContentAfterCredits } =
+    useCreditSkipper(
+      item.Id!,
+      currentTime,
+      seek,
+      play,
+      offline,
+      api,
+      downloadedFiles,
+      maxMs,
+    );
 
   const goToItemCommon = useCallback(
     (item: BaseItemDto) => {
@@ -625,7 +495,6 @@ export const Controls: FC<Props> = ({
               goToNextItem={goToNextItem}
               previousItem={previousItem}
               nextItem={nextItem}
-              aspectRatio={aspectRatio}
               isZoomedToFill={isZoomedToFill}
               onZoomToggle={onZoomToggle}
               playbackSpeed={playbackSpeed}
@@ -661,9 +530,7 @@ export const Controls: FC<Props> = ({
               currentTime={currentTime}
               remainingTime={remainingTime}
               showSkipButton={showSkipButton}
-              skipButtonText={skipButtonText}
               showSkipCreditButton={showSkipCreditButton}
-              skipCreditButtonText={skipCreditButtonText}
               hasContentAfterCredits={hasContentAfterCredits}
               skipIntro={skipIntro}
               skipCredit={skipCredit}

components/video-player/controls/HeaderControls.tsx

@@ -14,7 +14,6 @@ import { useSettings } from "@/utils/atoms/settings";
 import { HEADER_LAYOUT, ICON_SIZES } from "./constants";
 import DropdownView from "./dropdown/DropdownView";
 import { PlaybackSpeedScope } from "./utils/playback-speed-settings";
-import { type AspectRatio } from "./VideoScalingModeSelector";
 import { ZoomToggle } from "./ZoomToggle";
 
 interface HeaderControlsProps {
@@ -28,7 +27,6 @@ interface HeaderControlsProps {
   goToNextItem: (options: { isAutoPlay?: boolean }) => void;
   previousItem?: BaseItemDto | null;
   nextItem?: BaseItemDto | null;
-  aspectRatio?: AspectRatio;
   isZoomedToFill?: boolean;
   onZoomToggle?: () => void;
   // Playback speed props
@@ -50,7 +48,6 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
   goToNextItem,
   previousItem,
   nextItem,
-  aspectRatio: _aspectRatio = "default",
   isZoomedToFill = false,
   onZoomToggle,
   playbackSpeed = 1.0,

components/video-player/controls/TechnicalInfoOverlay.tsx

@@ -120,7 +120,13 @@ const formatTranscodeReason = (reason: string): string => {
 };
 
 export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
-  ({ visible, getTechnicalInfo, playMethod, transcodeReasons }) => {
+  ({
+    showControls,
+    visible,
+    getTechnicalInfo,
+    playMethod,
+    transcodeReasons,
+  }) => {
     const { settings } = useSettings();
     const insets = useSafeAreaInsets();
     const [info, setInfo] = useState<TechnicalInfo | null>(null);

components/video-player/controls/VideoScalingModeSelector.tsx

@@ -1,105 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import React, { useMemo } from "react";
-import { Platform, View } from "react-native";
-import {
-  type OptionGroup,
-  PlatformDropdown,
-} from "@/components/PlatformDropdown";
-import { useHaptic } from "@/hooks/useHaptic";
-
-export type AspectRatio = "default" | "16:9" | "4:3" | "1:1" | "21:9";
-
-interface AspectRatioSelectorProps {
-  currentRatio: AspectRatio;
-  onRatioChange: (ratio: AspectRatio) => void;
-  disabled?: boolean;
-}
-
-interface AspectRatioOption {
-  id: AspectRatio;
-  label: string;
-  description: string;
-}
-
-const ASPECT_RATIO_OPTIONS: AspectRatioOption[] = [
-  {
-    id: "default",
-    label: "Original",
-    description: "Use video's original aspect ratio",
-  },
-  {
-    id: "16:9",
-    label: "16:9",
-    description: "Widescreen (most common)",
-  },
-  {
-    id: "4:3",
-    label: "4:3",
-    description: "Traditional TV format",
-  },
-  {
-    id: "1:1",
-    label: "1:1",
-    description: "Square format",
-  },
-  {
-    id: "21:9",
-    label: "21:9",
-    description: "Ultra-wide cinematic",
-  },
-];
-
-export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
-  currentRatio,
-  onRatioChange,
-  disabled = false,
-}) => {
-  const lightHapticFeedback = useHaptic("light");
-
-  const handleRatioSelect = (ratio: AspectRatio) => {
-    onRatioChange(ratio);
-    lightHapticFeedback();
-  };
-
-  const optionGroups = useMemo<OptionGroup[]>(() => {
-    return [
-      {
-        options: ASPECT_RATIO_OPTIONS.map((option) => ({
-          type: "radio" as const,
-          label: option.label,
-          value: option.id,
-          selected: option.id === currentRatio,
-          onPress: () => handleRatioSelect(option.id),
-          disabled,
-        })),
-      },
-    ];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentRatio, disabled]);
-
-  const trigger = useMemo(
-    () => (
-      <View
-        className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-        style={{ opacity: disabled ? 0.5 : 1 }}
-      >
-        <Ionicons name='crop-outline' size={24} color='white' />
-      </View>
-    ),
-    [disabled],
-  );
-
-  // Hide on TV platforms
-  if (Platform.isTV) return null;
-
-  return (
-    <PlatformDropdown
-      title='Aspect Ratio'
-      groups={optionGroups}
-      trigger={trigger}
-      bottomSheetConfig={{
-        enablePanDownToClose: true,
-      }}
-    />
-  );
-};

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

@@ -1,6 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useCallback, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
 import {
@@ -45,6 +46,7 @@ const DropdownView = ({
   const { settings, updateSettings } = useSettings();
   const router = useRouter();
   const isOffline = useOfflineMode();
+  const { t } = useTranslation();
 
   const { subtitleIndex, audioIndex, bitrateValue, playbackPosition } =
     useLocalSearchParams<{
@@ -215,7 +217,7 @@ const DropdownView = ({
 
   return (
     <PlatformDropdown
-      title='Playback Options'
+      title={t("player.playback_options_title")}
       groups={optionGroups}
       trigger={trigger}
       expoUIConfig={{}}

constants/Languages.ts

@@ -1,39 +0,0 @@
-import type { DefaultLanguageOption } from "@/utils/atoms/settings";
-
-export const LANGUAGES: DefaultLanguageOption[] = [
-  { label: "English", value: "eng" },
-  { label: "Spanish", value: "spa" },
-  { label: "Chinese (Mandarin)", value: "cmn" },
-  { label: "Hindi", value: "hin" },
-  { label: "Arabic", value: "ara" },
-  { label: "French", value: "fra" },
-  { label: "Russian", value: "rus" },
-  { label: "Portuguese", value: "por" },
-  { label: "Japanese", value: "jpn" },
-  { label: "German", value: "deu" },
-  { label: "Italian", value: "ita" },
-  { label: "Korean", value: "kor" },
-  { label: "Turkish", value: "tur" },
-  { label: "Dutch", value: "nld" },
-  { label: "Polish", value: "pol" },
-  { label: "Vietnamese", value: "vie" },
-  { label: "Thai", value: "tha" },
-  { label: "Indonesian", value: "ind" },
-  { label: "Greek", value: "ell" },
-  { label: "Swedish", value: "swe" },
-  { label: "Danish", value: "dan" },
-  { label: "Norwegian", value: "nor" },
-  { label: "Finnish", value: "fin" },
-  { label: "Czech", value: "ces" },
-  { label: "Hungarian", value: "hun" },
-  { label: "Romanian", value: "ron" },
-  { label: "Ukrainian", value: "ukr" },
-  { label: "Hebrew", value: "heb" },
-  { label: "Bengali", value: "ben" },
-  { label: "Punjabi", value: "pan" },
-  { label: "Tagalog", value: "tgl" },
-  { label: "Swahili", value: "swa" },
-  { label: "Malay", value: "msa" },
-  { label: "Persian", value: "fas" },
-  { label: "Urdu", value: "urd" },
-];

constants/Values.ts

@@ -1,6 +0,0 @@
-import { Platform } from "react-native";
-
-export const TAB_HEIGHT = Platform.OS === "android" ? 58 : 74;
-
-// Matches `w-28` poster cards (approx 112px wide, 10/15 aspect ratio) + 2 lines of text.
-export const POSTER_CAROUSEL_HEIGHT = 220;

hooks/useCasting.ts

@@ -1,393 +0,0 @@
-/**
- * Unified Casting Hook
- * Protocol-agnostic casting interface - currently supports Chromecast
- * Architecture allows for future protocol integrations
- */
-
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
-import { useAtomValue } from "jotai";
-import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  CastState,
-  useCastDevice,
-  useCastState,
-  useMediaStatus,
-  useRemoteMediaClient,
-} from "react-native-google-cast";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import type { CastPlayerState, CastProtocol } from "@/utils/casting/types";
-import { DEFAULT_CAST_STATE } from "@/utils/casting/types";
-
-/**
- * Unified hook for managing casting
- * Extensible architecture supporting multiple protocols
- */
-export const useCasting = (item: BaseItemDto | null) => {
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-
-  // Chromecast hooks
-  const client = useRemoteMediaClient();
-  const castDevice = useCastDevice();
-  const castState = useCastState();
-  const mediaStatus = useMediaStatus();
-
-  // Local state
-  const [state, setState] = useState<CastPlayerState>(DEFAULT_CAST_STATE);
-  const lastReportedProgressRef = useRef(0);
-  const volumeDebounceRef = useRef<NodeJS.Timeout | null>(null);
-  const hasReportedStartRef = useRef<string | null>(null); // Track which item we reported start for
-  const stateRef = useRef<CastPlayerState>(DEFAULT_CAST_STATE); // Ref for progress reporting without deps
-
-  // Helper to update both state and ref
-  const updateState = useCallback(
-    (updater: (prev: CastPlayerState) => CastPlayerState) => {
-      setState((prev) => {
-        const next = updater(prev);
-        stateRef.current = next;
-        return next;
-      });
-    },
-    [],
-  );
-
-  // Detect which protocol is active - use CastState for reliable detection
-  const chromecastConnected = castState === CastState.CONNECTED;
-  // Future: Add detection for other protocols here
-
-  const activeProtocol: CastProtocol | null = chromecastConnected
-    ? "chromecast"
-    : null;
-
-  const isConnected = chromecastConnected;
-
-  // Update current device
-  useEffect(() => {
-    if (chromecastConnected && castDevice) {
-      updateState((prev) => ({
-        ...prev,
-        isConnected: true,
-        protocol: "chromecast",
-        currentDevice: {
-          id: castDevice.deviceId,
-          name: castDevice.friendlyName || castDevice.deviceId,
-          protocol: "chromecast",
-        },
-      }));
-    } else {
-      updateState((prev) => ({
-        ...prev,
-        isConnected: false,
-        protocol: null,
-        currentDevice: null,
-      }));
-    }
-    // Future: Add device detection for other protocols
-  }, [chromecastConnected, castDevice]);
-
-  // Chromecast: Update playback state
-  useEffect(() => {
-    if (activeProtocol === "chromecast" && mediaStatus) {
-      updateState((prev) => ({
-        ...prev,
-        isPlaying: mediaStatus.playerState === "playing",
-        progress: (mediaStatus.streamPosition || 0) * 1000,
-        duration: (mediaStatus.mediaInfo?.streamDuration || 0) * 1000,
-        isBuffering: mediaStatus.playerState === "buffering",
-      }));
-    }
-  }, [mediaStatus, activeProtocol, updateState]);
-
-  // Chromecast: Sync volume from mediaStatus
-  useEffect(() => {
-    if (activeProtocol !== "chromecast") return;
-
-    // Sync from mediaStatus when available
-    if (mediaStatus?.volume !== undefined) {
-      updateState((prev) => ({
-        ...prev,
-        volume: mediaStatus.volume,
-      }));
-    }
-  }, [mediaStatus?.volume, activeProtocol, updateState]);
-
-  // Progress reporting to Jellyfin (matches native player behavior)
-  // Uses stateRef to read current progress/volume without adding them as deps
-  useEffect(() => {
-    if (!isConnected || !item?.Id || !user?.Id || !api) return;
-
-    const playStateApi = getPlaystateApi(api);
-
-    // Report playback start when media begins (only once per item)
-    // Don't require progress > 0 — playback can legitimately start at position 0
-    const currentState = stateRef.current;
-    const isPlaybackActive =
-      currentState.isPlaying ||
-      mediaStatus?.playerState === "playing" ||
-      currentState.progress > 0;
-    if (hasReportedStartRef.current !== item.Id && isPlaybackActive) {
-      // Set synchronously before async call to prevent race condition duplicates
-      hasReportedStartRef.current = item.Id || null;
-
-      playStateApi
-        .reportPlaybackStart({
-          playbackStartInfo: {
-            ItemId: item.Id,
-            PositionTicks: Math.floor(currentState.progress * 10000),
-            PlayMethod:
-              activeProtocol === "chromecast" ? "DirectStream" : "DirectPlay",
-            VolumeLevel: Math.floor(currentState.volume * 100),
-            IsMuted: currentState.volume === 0,
-            PlaySessionId: mediaStatus?.mediaInfo?.contentId,
-          },
-        })
-        .catch((error) => {
-          // Revert on failure so it can be retried
-          hasReportedStartRef.current = null;
-          console.error("[useCasting] Failed to report playback start:", error);
-        });
-    }
-
-    const reportProgress = () => {
-      const s = stateRef.current;
-      // Don't report if no meaningful progress or if buffering
-      if (s.progress <= 0 || s.isBuffering) return;
-
-      const progressMs = Math.floor(s.progress);
-      const progressTicks = progressMs * 10000; // Convert ms to ticks
-      const progressSeconds = Math.floor(progressMs / 1000);
-
-      // When paused, always report to keep server in sync
-      // When playing, skip if progress hasn't changed significantly (less than 3 seconds)
-      if (
-        s.isPlaying &&
-        Math.abs(progressSeconds - lastReportedProgressRef.current) < 3
-      ) {
-        return;
-      }
-
-      lastReportedProgressRef.current = progressSeconds;
-
-      playStateApi
-        .reportPlaybackProgress({
-          playbackProgressInfo: {
-            ItemId: item.Id,
-            PositionTicks: progressTicks,
-            IsPaused: !s.isPlaying,
-            PlayMethod:
-              activeProtocol === "chromecast" ? "DirectStream" : "DirectPlay",
-            VolumeLevel: Math.floor(s.volume * 100),
-            IsMuted: s.volume === 0,
-            PlaySessionId: mediaStatus?.mediaInfo?.contentId,
-          },
-        })
-        .catch((error) => {
-          console.error("[useCasting] Failed to report progress:", error);
-        });
-    };
-
-    // Report progress on a fixed interval, reading latest state from ref
-    const interval = setInterval(reportProgress, 10000);
-    return () => clearInterval(interval);
-  }, [
-    api,
-    item?.Id,
-    user?.Id,
-    isConnected,
-    activeProtocol,
-    mediaStatus?.mediaInfo?.contentId,
-  ]);
-
-  // Play/Pause controls
-  const play = useCallback(async () => {
-    if (activeProtocol === "chromecast") {
-      // Check if there's an active media session
-      if (!client || !mediaStatus?.mediaInfo) {
-        console.warn(
-          "[useCasting] Cannot play - no active media session. Media needs to be loaded first.",
-        );
-        return;
-      }
-      try {
-        await client.play();
-      } catch (error) {
-        console.error("[useCasting] Error playing:", error);
-        throw error;
-      }
-    }
-    // Future: Add play control for other protocols
-  }, [client, mediaStatus, activeProtocol]);
-
-  const pause = useCallback(async () => {
-    if (activeProtocol === "chromecast") {
-      try {
-        await client?.pause();
-      } catch (error) {
-        console.error("[useCasting] Error pausing:", error);
-        throw error;
-      }
-    }
-    // Future: Add pause control for other protocols
-  }, [client, activeProtocol]);
-
-  const togglePlayPause = useCallback(async () => {
-    if (state.isPlaying) {
-      await pause();
-    } else {
-      await play();
-    }
-  }, [state.isPlaying, play, pause]);
-
-  // Seek controls
-  const seek = useCallback(
-    async (positionMs: number) => {
-      // Validate position
-      if (positionMs < 0 || !Number.isFinite(positionMs)) {
-        console.error("[useCasting] Invalid seek position (ms):", positionMs);
-        return;
-      }
-
-      const positionSeconds = positionMs / 1000;
-
-      // Additional validation for Chromecast
-      if (activeProtocol === "chromecast") {
-        // state.duration is in ms, positionSeconds is in seconds - compare in same unit
-        // Only clamp when duration is known (> 0) to avoid forcing seeks to 0
-        const durationSeconds = state.duration / 1000;
-        if (durationSeconds > 0 && positionSeconds > durationSeconds) {
-          console.warn(
-            "[useCasting] Seek position exceeds duration, clamping:",
-            positionSeconds,
-            "->",
-            durationSeconds,
-          );
-          await client?.seek({ position: durationSeconds });
-          return;
-        }
-        await client?.seek({ position: positionSeconds });
-      }
-      // Future: Add seek control for other protocols
-    },
-    [client, activeProtocol, state.duration],
-  );
-
-  const skipForward = useCallback(
-    async (seconds = 10) => {
-      const newPosition = state.progress + seconds * 1000;
-      await seek(Math.min(newPosition, state.duration));
-    },
-    [state.progress, state.duration, seek],
-  );
-
-  const skipBackward = useCallback(
-    async (seconds = 10) => {
-      const newPosition = state.progress - seconds * 1000;
-      await seek(Math.max(newPosition, 0));
-    },
-    [state.progress, seek],
-  );
-
-  // Stop and disconnect
-  const stop = useCallback(
-    async (onStopComplete?: () => void) => {
-      try {
-        if (activeProtocol === "chromecast") {
-          await client?.stop();
-        }
-        // Future: Add stop control for other protocols
-
-        // Report stop to Jellyfin
-        if (api && item?.Id && user?.Id) {
-          const playStateApi = getPlaystateApi(api);
-          await playStateApi.reportPlaybackStopped({
-            playbackStopInfo: {
-              ItemId: item.Id,
-              PositionTicks: stateRef.current.progress * 10000,
-            },
-          });
-        }
-      } catch (error) {
-        console.error("[useCasting] Error during stop:", error);
-      } finally {
-        hasReportedStartRef.current = null;
-        setState(DEFAULT_CAST_STATE);
-        stateRef.current = DEFAULT_CAST_STATE;
-
-        // Call callback after stop completes (e.g., to navigate away)
-        if (onStopComplete) {
-          onStopComplete();
-        }
-      }
-    },
-    [client, api, item?.Id, user?.Id, activeProtocol],
-  );
-
-  // Volume control (debounced to reduce API calls)
-  const setVolume = useCallback(
-    (volume: number) => {
-      const clampedVolume = Math.max(0, Math.min(1, volume));
-
-      // Update UI immediately
-      updateState((prev) => ({ ...prev, volume: clampedVolume }));
-
-      // Debounce API call
-      if (volumeDebounceRef.current) {
-        clearTimeout(volumeDebounceRef.current);
-      }
-
-      volumeDebounceRef.current = setTimeout(async () => {
-        if (activeProtocol === "chromecast" && client && isConnected) {
-          // Use setStreamVolume for media stream volume (0.0 - 1.0)
-          // Physical volume buttons are handled automatically by the framework
-          await client.setStreamVolume(clampedVolume).catch(() => {
-            // Ignore errors - session might have ended
-          });
-        }
-        // Future: Add volume control for other protocols
-      }, 300);
-    },
-    [client, activeProtocol, isConnected],
-  );
-
-  // Cleanup
-  useEffect(() => {
-    return () => {
-      if (volumeDebounceRef.current) {
-        clearTimeout(volumeDebounceRef.current);
-      }
-    };
-  }, []);
-
-  return {
-    // State
-    isConnected,
-    protocol: activeProtocol,
-    isPlaying: state.isPlaying,
-    isBuffering: state.isBuffering,
-    currentItem: item,
-    currentDevice: state.currentDevice,
-    progress: state.progress,
-    duration: state.duration,
-    volume: state.volume,
-
-    // Availability - derived from actual cast state
-    isChromecastAvailable:
-      castState === CastState.CONNECTED ||
-      castState === CastState.CONNECTING ||
-      castState === CastState.NOT_CONNECTED,
-
-    // Raw clients (for advanced operations)
-    remoteMediaClient: client,
-
-    // Controls
-    play,
-    pause,
-    togglePlayPause,
-    seek,
-    skipForward,
-    skipBackward,
-    stop,
-    setVolume,
-  };
-};

hooks/useControlsVisibility.ts

@@ -1,37 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-import { useSharedValue } from "react-native-reanimated";
-
-export const useControlsVisibility = (timeout = 3000) => {
-  const opacity = useSharedValue(1);
-
-  const hideControlsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  );
-
-  const showControls = useCallback(() => {
-    opacity.value = 1;
-    if (hideControlsTimerRef.current) {
-      clearTimeout(hideControlsTimerRef.current);
-    }
-    hideControlsTimerRef.current = setTimeout(() => {
-      opacity.value = 0;
-    }, timeout);
-  }, [timeout]);
-
-  const hideControls = useCallback(() => {
-    opacity.value = 0;
-    if (hideControlsTimerRef.current) {
-      clearTimeout(hideControlsTimerRef.current);
-    }
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      if (hideControlsTimerRef.current) {
-        clearTimeout(hideControlsTimerRef.current);
-      }
-    };
-  }, []);
-
-  return { opacity, showControls, hideControls };
-};

hooks/useCreditSkipper.ts

@@ -0,0 +1,109 @@
+import { Api } from "@jellyfin/sdk";
+import { useCallback, useEffect, useState } from "react";
+import { DownloadedItem } from "@/providers/Downloads/types";
+import { useSegments } from "@/utils/segments";
+import { msToSeconds, secondsToMs } from "@/utils/time";
+import { useHaptic } from "./useHaptic";
+
+/**
+ * Custom hook to handle skipping credits in a media player.
+ * The player reports time values in milliseconds.
+ */
+export const useCreditSkipper = (
+  itemId: string,
+  currentTime: number,
+  seek: (ms: number) => void,
+  play: () => void,
+  isOffline = false,
+  api: Api | null = null,
+  downloadedFiles: DownloadedItem[] | undefined = undefined,
+  totalDuration?: number,
+) => {
+  const [showSkipCreditButton, setShowSkipCreditButton] = useState(false);
+  const lightHapticFeedback = useHaptic("light");
+
+  // Convert ms to seconds for comparison with timestamps
+  const currentTimeSeconds = msToSeconds(currentTime);
+
+  const totalDurationInSeconds =
+    totalDuration != null ? msToSeconds(totalDuration) : undefined;
+
+  // Regular function (not useCallback) to match useIntroSkipper pattern
+  const wrappedSeek = (seconds: number) => {
+    seek(secondsToMs(seconds));
+  };
+
+  const { data: segments } = useSegments(
+    itemId,
+    isOffline,
+    downloadedFiles,
+    api,
+  );
+  const creditTimestamps = segments?.creditSegments?.[0];
+
+  // Determine if there's content after credits (credits don't extend to video end)
+  // Use a 5-second buffer to account for timing discrepancies
+  const hasContentAfterCredits = (() => {
+    if (
+      !creditTimestamps ||
+      totalDurationInSeconds == null ||
+      !Number.isFinite(totalDurationInSeconds)
+    ) {
+      return false;
+    }
+    const creditsEndToVideoEnd =
+      totalDurationInSeconds - creditTimestamps.endTime;
+    // If credits end more than 5 seconds before video ends, there's content after
+    return creditsEndToVideoEnd > 5;
+  })();
+
+  useEffect(() => {
+    if (creditTimestamps) {
+      const shouldShow =
+        currentTimeSeconds > creditTimestamps.startTime &&
+        currentTimeSeconds < creditTimestamps.endTime;
+
+      setShowSkipCreditButton(shouldShow);
+    } else {
+      // Reset button state when no credit timestamps exist
+      if (showSkipCreditButton) {
+        setShowSkipCreditButton(false);
+      }
+    }
+  }, [creditTimestamps, currentTimeSeconds, showSkipCreditButton]);
+
+  const skipCredit = useCallback(() => {
+    if (!creditTimestamps) return;
+
+    try {
+      lightHapticFeedback();
+
+      // Calculate the target seek position
+      let seekTarget = creditTimestamps.endTime;
+
+      // If we have total duration, ensure we don't seek past the end of the video.
+      // Some media sources report credit end times that exceed the actual video duration,
+      // which causes the player to pause/stop when seeking past the end.
+      // Leave a small buffer (2 seconds) to trigger the natural end-of-video flow
+      // (next episode countdown, etc.) instead of an abrupt pause.
+      if (totalDurationInSeconds && seekTarget >= totalDurationInSeconds) {
+        seekTarget = Math.max(0, totalDurationInSeconds - 2);
+      }
+
+      wrappedSeek(seekTarget);
+      setTimeout(() => {
+        play();
+      }, 200);
+    } catch (error) {
+      console.error("[CREDIT_SKIPPER] Error skipping credit", error);
+    }
+  }, [
+    creditTimestamps,
+    lightHapticFeedback,
+    wrappedSeek,
+    play,
+    totalDurationInSeconds,
+  ]);
+
+  return { showSkipCreditButton, skipCredit, hasContentAfterCredits };
+};