fix: add missing props to ChromecastControls

make media loading for chromecast more reusable

.github/copilot-instructions.md

@@ -3,7 +3,7 @@
 ## Project Overview
 
 Streamyfin is a cross-platform Jellyfin video streaming client built with Expo (React Native).  
-It supports mobile (iOS/Android) and TV platforms, integrates with Jellyfin and Seerr APIs,
+It supports mobile (iOS/Android) and TV platforms, integrates with Jellyfin and Jellyseerr APIs,
 and provides seamless media streaming with offline capabilities and Chromecast support.
 
 ## Main Technologies
@@ -40,30 +40,9 @@ and provides seamless media streaming with offline capabilities and Chromecast s
 - `scripts/` – Automation scripts (Node.js, Bash)
 - `plugins/` – Expo/Metro plugins
 
-## Code Quality Standards
+## Coding Standards
 
-**CRITICAL: Code must be production-ready, reliable, and maintainable**
-
-### Type Safety
 - Use TypeScript for ALL files (no .js files)
-- **NEVER use `any` type** - use proper types, generics, or `unknown` with type guards
-- Use `@ts-expect-error` with detailed comments only when necessary (e.g., library limitations)
-- When facing type issues, create proper type definitions and helper functions instead of using `any`
-- Use type assertions (`as`) only as a last resort with clear documentation explaining why
-- For Expo Router navigation: prefer string URLs with `URLSearchParams` over object syntax to avoid type conflicts
-- Enable and respect strict TypeScript compiler options
-- Define explicit return types for functions
-- Use discriminated unions for complex state
-
-### Code Reliability
-- Implement comprehensive error handling with try-catch blocks
-- Validate all external inputs (API responses, user input, query params)
-- Handle edge cases explicitly (empty arrays, null, undefined)
-- Use optional chaining (`?.`) and nullish coalescing (`??`) appropriately
-- Add runtime checks for critical operations
-- Implement proper loading and error states in components
-
-### Best Practices
 - Use descriptive English names for variables, functions, and components
 - Prefer functional React components with hooks
 - Use Jotai atoms for global state management
@@ -71,10 +50,8 @@ and provides seamless media streaming with offline capabilities and Chromecast s
 - Follow BiomeJS formatting and linting rules
 - Use `const` over `let`, avoid `var` entirely
 - Implement proper error boundaries
-- Use React.memo() for performance optimization when needed
+- Use React.memo() for performance optimization
 - Handle both mobile and TV navigation patterns
-- Write self-documenting code with clear intent
-- Add comments only when code complexity requires explanation
 
 ## API Integration
 
@@ -108,18 +85,6 @@ Exemples:
 - `fix(auth): handle expired JWT tokens`
 - `chore(deps): update Jellyfin SDK`
 
-## Internationalization (i18n)
-
-- **Primary workflow**: Always edit `translations/en.json` for new translation keys or updates
-- **Translation files** (ar.json, ca.json, cs.json, de.json, etc.):
-  - **NEVER add or remove keys** - Crowdin manages the key structure
-  - **Editing translation values is safe** - Bidirectional sync handles merges
-  - Prefer letting Crowdin translators update values, but direct edits work if needed
-- **Crowdin workflow**:
-  - New keys added to `en.json` sync to Crowdin automatically
-  - Approved translations sync back to language files via GitHub integration
-  - The source of truth is `en.json` for structure, Crowdin for translations
-
 ## Special Instructions
 
 - Prioritize cross-platform compatibility (mobile + TV)

.github/workflows/linting.yml

@@ -107,7 +107,7 @@ jobs:
           fetch-depth: 0
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: '24.x'
 

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

@@ -21,7 +21,7 @@ jobs:
         uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version: '24.x'
           cache: 'npm'

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 Seerr 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 Jellyseerr integration.
 
 ## Development Commands
 

README.md

@@ -22,75 +22,58 @@
    
   <img src="./assets/images/screenshots/screenshot2.png" width="20%">
   &nbsp;
-  <img src="./assets/images/seerr.PNG" width="21%">
+  <img src="./assets/images/jellyseerr.PNG" width="21%">
 </p>
 
 
 ## 🌟 Features
 
-### 🎬 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 and record live television streams
+- 🚀 **Skip Intro / Credits Support**: Lets you quickly skip intros and credits during playback
+- 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking
+- 📥 **Download media**: Save your media locally and watch it offline
+- ⚙️ **Settings management**: Manage app configurations for all users through our plugin
+- 🤖 **Seerr (formerly Jellyseerr) integration**: Request media directly in the app
+- 👁️ **Sessions view:** View all active sessions currently streaming on your server
 - 📡 **Chromecast**: Cast your media to any Chromecast-enabled device
-- 🎥 **MPV Player**: Powerful open-source player with wide format support
 
-### 📱 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**: Smart suggestions for your next episode
+## 🧪 Experimental Features
 
-### ⚙️ 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
+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.
 
-## 🧩 How It Works
-
-### 📥 Downloads
+### 📥 Downloading
 
 Downloading works by using FFmpeg to convert an HLS stream into a video file on your device. This lets you download and watch any content that you can stream. The conversion is handled in real time by Jellyfin on the server during the download. While this may take a bit longer, it ensures compatibility with any file your server can transcode.
 
 ### 🧩 Streamyfin Plugin
 
-The Jellyfin Plugin for Streamyfin synchronizes settings across all your devices and users. Install it on your Jellyfin server to enable:
+The Jellyfin Plugin for Streamyfin is a plugin you install into Jellyfin that holds all settings for the client Streamyfin. This allows you to synchronize settings across all your users, like for example:
 
 - Automatic Seerr login with no user input required
-- 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
+- Set your preferred default languages
+- Configure download method and search provider
+- Personalize your home screen
 - And much more
 
 [Streamyfin Plugin](https://github.com/streamyfin/jellyfin-plugin-streamyfin)
 
+### 📡 Chromecast
+
+Chromecast support is currently under development. Video casting is already available, and we're actively working on adding subtitle support and additional features.
+
 ### 🎬 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.
 
-### 🎵 Music Library
+### 🔍 Jellysearch
 
-Full music library support with playlists, queue management, background playback, and offline downloads.
+[Jellysearch](https://gitlab.com/DomiStyle/jellysearch) works with Streamyfin
 
-### 🔍 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))
+> A fast full-text search proxy for Jellyfin. Integrates seamlessly with most Jellyfin clients.
 
 ## 🛣️ 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
 
@@ -130,13 +113,13 @@ You can contribute translations directly on our [Crowdin project page](https://c
 
 ### 👨‍💻 Development Info
 
-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/))
+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 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
+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
 
 For the TV version suffix the npm commands with `:tv`.
 
@@ -154,20 +137,10 @@ Need assistance or have any questions?
 
 ## ❓ FAQ
 
-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 optimized for remote control navigation. Please note that TV platforms are currently in early development and not very stable. Android TV is currently the most reliable platform for testing.
-
-5. **Q: How do I set up Seerr integration?**  
-   A: Go to Settings → Plugins → Seerr, enter your server URL and Jellyfin credentials.
+1. Q: Why can't I see my libraries in Streamyfin?  
+   A: Make sure your server is running one of the latest versions and that you have at least one library that isn't audio only
+2. Q: Why can't I see my music library?
+   A: We don't currently support music and are unlikely to support music in the near future
 
 ## 📝 Credits
 
@@ -281,9 +254,7 @@ 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
@@ -292,13 +263,10 @@ 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/seerr/page'
+        name='settings/plugins/jellyseerr/page'
         options={{
-          title: "Seerr",
+          title: "Jellyseerr",
           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_libraries_you_want_to_hide")}
+          {t("home.settings.other.select_liraries_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_libraries_you_want_to_hide")}
+        {t("home.settings.other.select_liraries_you_want_to_hide")}
       </Text>
     </DisabledSetting>
   );

app/(auth)/(tabs)/(home)/settings/plugins/jellyseerr/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 { SeerrSettings } from "@/components/settings/Seerr";
+import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
 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?.seerrServerUrl?.locked === true}
+        disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
         className='px-4'
       >
-        <SeerrSettings />
+        <JellyseerrSettings />
       </DisabledSetting>
     </ScrollView>
   );

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

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

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

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

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

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

@@ -33,17 +33,17 @@ export default function SearchLayout() {
           headerShadowVisible: false,
         }}
       />
-      <Stack.Screen name='seerr/page' options={commonScreenOptions} />
+      <Stack.Screen name='jellyseerr/page' options={commonScreenOptions} />
       <Stack.Screen
-        name='seerr/person/[personId]'
+        name='jellyseerr/person/[personId]'
         options={commonScreenOptions}
       />
       <Stack.Screen
-        name='seerr/company/[companyId]'
+        name='jellyseerr/company/[companyId]'
         options={commonScreenOptions}
       />
       <Stack.Screen
-        name='seerr/genre/[genreId]'
+        name='jellyseerr/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 { useSeerr } from "@/hooks/useSeerr";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
 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 SearchPage() {
+export default function search() {
   const params = useLocalSearchParams();
   const insets = useSafeAreaInsets();
   const router = useRouter();
@@ -93,11 +93,16 @@ export default function SearchPage() {
   const [api] = useAtom(apiAtom);
 
   const { settings } = useSettings();
-  const { seerrApi } = useSeerr();
-  const [seerrOrderBy, setSeerrOrderBy] = useState<SeerrSearchSort>(
-    SeerrSearchSort[SeerrSearchSort.DEFAULT] as unknown as SeerrSearchSort,
-  );
-  const [seerrSortOrder, setSeerrSortOrder] = useState<"asc" | "desc">("desc");
+  const { jellyseerrApi } = useJellyseerr();
+  const [jellyseerrOrderBy, setJellyseerrOrderBy] =
+    useState<JellyseerrSearchSort>(
+      JellyseerrSearchSort[
+        JellyseerrSearchSort.DEFAULT
+      ] as unknown as JellyseerrSearchSort,
+    );
+  const [jellyseerrSortOrder, setJellyseerrSortOrder] = useState<
+    "asc" | "desc"
+  >("desc");
 
   const searchEngine = useMemo(() => {
     return settings?.searchEngine || "Jellyfin";
@@ -469,7 +474,7 @@ export default function SearchPage() {
         className='flex flex-col'
         style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
       >
-        {seerrApi && (
+        {jellyseerrApi && (
           <View className='pl-4 pr-4 flex flex-row'>
             <SearchTabButtons
               searchType={searchType}
@@ -483,10 +488,10 @@ export default function SearchPage() {
                 <DiscoverFilters
                   searchFilterId={searchFilterId}
                   orderFilterId={orderFilterId}
-                  seerrOrderBy={seerrOrderBy}
-                  setSeerrOrderBy={setSeerrOrderBy}
-                  seerrSortOrder={seerrSortOrder}
-                  setSeerrSortOrder={setSeerrSortOrder}
+                  jellyseerrOrderBy={jellyseerrOrderBy}
+                  setJellyseerrOrderBy={setJellyseerrOrderBy}
+                  jellyseerrSortOrder={jellyseerrSortOrder}
+                  setJellyseerrSortOrder={setJellyseerrSortOrder}
                   t={t}
                 />
               )}
@@ -749,10 +754,10 @@ export default function SearchPage() {
             />
           </View>
         ) : (
-          <SeerrIndexPage
+          <JellyserrIndexPage
             searchQuery={debouncedSearch}
-            sortType={seerrOrderBy}
-            order={seerrSortOrder}
+            sortType={jellyseerrOrderBy}
+            order={jellyseerrSortOrder}
           />
         )}
 

app/(auth)/player/_layout.tsx

@@ -41,6 +41,15 @@ export default function Layout() {
             animation: "fade",
           }}
         />
+        <Stack.Screen
+          name="google-cast-player"
+          options={{
+            headerShown: false,
+            autoHideHomeIndicator: true,
+            title: "",
+            animation: "fade",
+          }}
+        />
       </Stack>
     </>
   );

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

@@ -71,6 +71,9 @@ 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);
@@ -528,7 +531,11 @@ export default function page() {
       subtitleIndex,
       isTranscoding,
     );
-    const initialAudioId = getMpvAudioId(mediaSource, audioIndex);
+    const initialAudioId = getMpvAudioId(
+      mediaSource,
+      audioIndex,
+      isTranscoding,
+    );
 
     // Calculate start position directly here to avoid timing issues
     const startTicks = playbackPositionFromUrl
@@ -968,6 +975,7 @@ export default function page() {
                 pause={pause}
                 seek={seek}
                 enableTrickplay={true}
+                aspectRatio={aspectRatio}
                 isZoomedToFill={isZoomedToFill}
                 onZoomToggle={handleZoomToggle}
                 api={api}

app/(auth)/player/google-cast-player.tsx

@@ -0,0 +1,184 @@
+import React, { useMemo, useState, useRef } from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { Button } from "@/components/Button";
+import { Feather } from "@expo/vector-icons";
+import { RoundButton } from "@/components/RoundButton";
+
+import GoogleCast, {
+  CastButton,
+  CastContext,
+  CastState,
+  useCastDevice,
+  useCastState,
+  useDevices,
+  useMediaStatus,
+  useRemoteMediaClient,
+} from "react-native-google-cast";
+import { useCallback, useEffect } from "react";
+import { Platform } from "react-native";
+import { useRouter } from "expo-router";
+import { useHaptic } from "@/hooks/useHaptic";
+import ChromecastControls from "@/components/ChromecastControls";
+import { useTranslation } from "react-i18next";
+
+export default function Player() {
+  const castState = useCastState();
+
+  const client = useRemoteMediaClient();
+  const castDevice = useCastDevice();
+  const devices = useDevices();
+  const sessionManager = GoogleCast.getSessionManager();
+  const discoveryManager = GoogleCast.getDiscoveryManager();
+  const mediaStatus = useMediaStatus();
+
+  const [wasMediaPlaying, setWasMediaPlaying] = useState(false);
+  const reportPlaybackStopedRef = useRef(() => {});
+
+  useEffect(() => {
+    if (mediaStatus) return; // media currently playing
+
+    // media was just playing, report playback stopped
+    if (wasMediaPlaying) {
+      reportPlaybackStopedRef.current();
+      setWasMediaPlaying(false);
+    }
+  }, [mediaStatus, wasMediaPlaying]);
+
+  const router = useRouter();
+
+  const lightHapticFeedback = useHaptic("light");
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    (async () => {
+      if (!discoveryManager) {
+        console.warn("DiscoveryManager is not initialized");
+        return;
+      }
+
+      await discoveryManager.startDiscovery();
+    })();
+  }, [client, devices, castDevice, sessionManager, discoveryManager]);
+
+  // Android requires the cast button to be present for startDiscovery to work
+  const AndroidCastButton = useCallback(
+    () =>
+      Platform.OS === "android" ? (
+        <CastButton tintColor="transparent" />
+      ) : (
+        <></>
+      ),
+    [Platform.OS]
+  );
+
+  const GoHomeButton = useCallback(
+    () => (
+      <Button
+        onPress={() => {
+          router.push("/(auth)/(home)/");
+        }}
+      >
+        {t("chromecast.go_home")}
+      </Button>
+    ),
+    [router]
+  );
+
+  const ChromecastControlsMemoized = useMemo(() => {
+    if (!mediaStatus || !client) return undefined;
+    return (
+      <ChromecastControls
+        mediaStatus={mediaStatus}
+        client={client}
+        setWasMediaPlaying={setWasMediaPlaying}
+        reportPlaybackStopedRef={reportPlaybackStopedRef}
+      />
+    );
+  }, [mediaStatus, client]);
+
+  if (
+    castState === CastState.NO_DEVICES_AVAILABLE ||
+    castState === CastState.NOT_CONNECTED
+  ) {
+    // no devices to connect to
+    if (devices.length === 0) {
+      return (
+        <View className="w-screen h-screen flex flex-col ">
+          <AndroidCastButton />
+          <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+            <Text className="text-white text-lg">
+              {t("chromecast.no_devices_available")}
+            </Text>
+            <Text className="text-gray-400">
+              {t("chromecast.are_you_on_same_network")}
+            </Text>
+          </View>
+          <View className="px-10">
+            <GoHomeButton />
+          </View>
+        </View>
+      );
+    }
+    // no device selected
+    return (
+      <View className="w-screen h-screen flex flex-col ">
+        <AndroidCastButton />
+        <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+          <RoundButton
+            size="large"
+            background={false}
+            onPress={() => {
+              lightHapticFeedback();
+              CastContext.showCastDialog();
+            }}
+          >
+            <AndroidCastButton />
+            <Feather name="cast" size={42} color={"white"} />
+          </RoundButton>
+          <Text className="text-white text-xl mt-2">
+            {t("chromecast.no_device_selected")}
+          </Text>
+          <Text className="text-gray-400">
+            {t("chromecast.click_icon_to_connect")}
+          </Text>
+        </View>
+        <View className="px-10">
+          <GoHomeButton />
+        </View>
+      </View>
+    );
+  }
+
+  if (castState === CastState.CONNECTING) {
+    return (
+      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+        <Text className="text-white font-semibold lg mb-2">
+          {t("chromecast.establishing_connection")}
+        </Text>
+        <Loader />
+      </View>
+    );
+  }
+
+  // connected, but no media playing
+  if (!mediaStatus) {
+    return (
+      <View className="w-screen h-screen flex flex-col ">
+        <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+          <Text className="text-white text-lg">
+            {t("chromecast.no_media_selected")}
+          </Text>
+          <Text className="text-gray-400">{t("chromecast.start_playing")}</Text>
+        </View>
+        <View className="px-10">
+          <GoHomeButton />
+        </View>
+      </View>
+    );
+  }
+
+  return ChromecastControlsMemoized;
+}

augmentations/index.ts

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

augmentations/number.ts

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

augmentations/string.ts

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

@@ -74,7 +74,7 @@
         "react-native-ios-context-menu": "^3.2.1",
         "react-native-ios-utilities": "5.2.0",
         "react-native-mmkv": "4.1.1",
-        "react-native-nitro-modules": "0.32.1",
+        "react-native-nitro-modules": "0.33.1",
         "react-native-pager-view": "^6.9.1",
         "react-native-reanimated": "~4.1.1",
         "react-native-reanimated-carousel": "4.0.3",
@@ -1678,7 +1678,7 @@
 
     "react-native-mmkv": ["react-native-mmkv@4.1.1", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-nitro-modules": "*" } }, "sha512-nYFjM27l7zVhIiyAqWEFRagGASecb13JMIlzAuOeakRRz9GMJ49hCQntUBE2aeuZRE4u4ehSqTOomB0mTF56Ew=="],
 
-    "react-native-nitro-modules": ["react-native-nitro-modules@0.32.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-V+Vy76e4fxRxgVGu5Uh3cBPvuFQW8fM1OUKk1mqEA/JawjhX+hxHtBhpfuvNjV0BnV/uXCIg8/eK+rTpB6tqFg=="],
+    "react-native-nitro-modules": ["react-native-nitro-modules@0.33.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-Kdo8qiqlkGAEs7fq29i0yiZs0Gf7ucmMiFsH8PH4uzsnSGEt2CQRBJGnQKKMl9vJYL8e7rzA0TZKRwO/L8G/Sg=="],
 
     "react-native-pager-view": ["react-native-pager-view@6.9.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-uUT0MMMbNtoSbxe9pRvdJJKEi9snjuJ3fXlZhG8F2vVMOBJVt/AFtqMPUHu9yMflmqOr08PewKzj9EPl/Yj+Gw=="],
 

components/Chromecast.tsx

@@ -1,5 +1,8 @@
 import { Feather } from "@expo/vector-icons";
-import { useCallback, useEffect } from "react";
+import type { PlaybackProgressInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useRef } from "react";
 import { Platform } from "react-native";
 import { Pressable } from "react-native-gesture-handler";
 import GoogleCast, {
@@ -10,7 +13,9 @@ import GoogleCast, {
   useMediaStatus,
   useRemoteMediaClient,
 } from "react-native-google-cast";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { RoundButton } from "./RoundButton";
+import { useRouter } from "expo-router";
 
 export function Chromecast({
   width = 48,
@@ -24,6 +29,12 @@ export function Chromecast({
   const sessionManager = GoogleCast.getSessionManager();
   const discoveryManager = GoogleCast.getDiscoveryManager();
   const mediaStatus = useMediaStatus();
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+
+  const lastReportedProgressRef = useRef(0);
+
+  const router = useRouter();
 
   useEffect(() => {
     (async () => {
@@ -36,6 +47,53 @@ export function Chromecast({
     })();
   }, [client, devices, castDevice, sessionManager, discoveryManager]);
 
+  // Report video progress to Jellyfin server
+  useEffect(() => {
+    if (
+      !api ||
+      !user?.Id ||
+      !mediaStatus ||
+      !mediaStatus.mediaInfo?.contentId
+    ) {
+      return;
+    }
+
+    const streamPosition = mediaStatus.streamPosition || 0;
+
+    // Report every 10 seconds
+    if (Math.abs(streamPosition - lastReportedProgressRef.current) < 10) {
+      return;
+    }
+
+    const contentId = mediaStatus.mediaInfo.contentId;
+    const positionTicks = Math.floor(streamPosition * 10000000);
+    const isPaused = mediaStatus.playerState === "paused";
+    const streamUrl = mediaStatus.mediaInfo.contentUrl || "";
+    const isTranscoding = streamUrl.includes("m3u8");
+
+    const progressInfo: PlaybackProgressInfo = {
+      ItemId: contentId,
+      PositionTicks: positionTicks,
+      IsPaused: isPaused,
+      PlayMethod: isTranscoding ? "Transcode" : "DirectStream",
+      PlaySessionId: contentId,
+    };
+
+    getPlaystateApi(api)
+      .reportPlaybackProgress({ playbackProgressInfo: progressInfo })
+      .then(() => {
+        lastReportedProgressRef.current = streamPosition;
+      })
+      .catch((error) => {
+        console.error("Failed to report Chromecast progress:", error);
+      });
+  }, [
+    api,
+    user?.Id,
+    mediaStatus?.streamPosition,
+    mediaStatus?.mediaInfo?.contentId,
+  ]);
+
   // Android requires the cast button to be present for startDiscovery to work
   const AndroidCastButton = useCallback(
     () =>
@@ -66,7 +124,7 @@ export function Chromecast({
         className='mr-2'
         background={false}
         onPress={() => {
-          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+          if (mediaStatus?.currentItemId) router.push('/player/google-cast-player');
           else CastContext.showCastDialog();
         }}
         {...props}
@@ -80,7 +138,7 @@ export function Chromecast({
     <RoundButton
       size='large'
       onPress={() => {
-        if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+        if (mediaStatus?.currentItemId) router.push('/player/google-cast-player');
         else CastContext.showCastDialog();
       }}
       {...props}

components/ChromecastControls.tsx

@@ -0,0 +1,897 @@
+import React, { useMemo, useRef, useState } from "react";
+import { Alert, TouchableOpacity, View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { Feather, Ionicons } from "@expo/vector-icons";
+import { RoundButton } from "@/components/RoundButton";
+
+import {
+  CastButton,
+  CastContext,
+  MediaStatus,
+  RemoteMediaClient,
+  useStreamPosition,
+} from "react-native-google-cast";
+import { useCallback, useEffect } from "react";
+import { Platform } from "react-native";
+import { Image } from "expo-image";
+import { Slider } from "react-native-awesome-slider";
+import {
+  runOnJS,
+  SharedValue,
+  useAnimatedReaction,
+  useSharedValue,
+} from "react-native-reanimated";
+import { debounce } from "lodash";
+import { useSettings } from "@/utils/atoms/settings";
+import { useHaptic } from "@/hooks/useHaptic";
+import { writeToLog } from "@/utils/log";
+import { formatTimeString } from "@/utils/time";
+import SkipButton from "@/components/video-player/controls/SkipButton";
+import NextEpisodeCountDownButton from "@/components/video-player/controls/NextEpisodeCountDownButton";
+import { useIntroSkipper } from "@/hooks/useIntroSkipper";
+import { useCreditSkipper } from "@/hooks/useCreditSkipper";
+import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
+import { useTrickplay } from "@/hooks/useTrickplay";
+import { secondsToTicks } from "@/utils/secondsToTicks";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { chromecastLoadMedia } from "@/utils/chromecastLoadMedia";
+import { useAtomValue } from "jotai";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { chromecast as chromecastProfile } from "@/utils/profiles/chromecast";
+import { SelectedOptions } from "./ItemContent";
+import {
+  getDefaultPlaySettings,
+  previousIndexes,
+} from "@/utils/jellyfin/getDefaultPlaySettings";
+import { useQuery } from "@tanstack/react-query";
+import {
+  getPlaystateApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { useTranslation } from "react-i18next";
+import { Colors } from "@/constants/Colors";
+import { useRouter } from "expo-router";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { ItemImage } from "@/components/common/ItemImage";
+import { BitrateSelector } from "@/components/BitrateSelector";
+import { ItemHeader } from "@/components/ItemHeader";
+import { MediaSourceSelector } from "@/components/MediaSourceSelector";
+import { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
+import { ItemTechnicalDetails } from "@/components/ItemTechnicalDetails";
+import { OverviewText } from "@/components/OverviewText";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { PlayedStatus } from "./PlayedStatus";
+import { AddToFavorites } from "./AddToFavorites";
+
+export default function ChromecastControls({
+  mediaStatus,
+  client,
+  setWasMediaPlaying,
+  reportPlaybackStopedRef,
+}: {
+  mediaStatus: MediaStatus;
+  client: RemoteMediaClient;
+  setWasMediaPlaying: (wasPlaying: boolean) => void;
+  reportPlaybackStopedRef: React.MutableRefObject<() => void>;
+}) {
+  const lightHapticFeedback = useHaptic("light");
+
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+
+  const { settings } = useSettings();
+
+  const [currentTime, setCurrentTime] = useState(0);
+  const [remainingTime, setRemainingTime] = useState(Infinity);
+  const max = useSharedValue(mediaStatus.mediaInfo?.streamDuration || 0);
+
+  const streamPosition = useStreamPosition();
+  const progress = useSharedValue(streamPosition || 0);
+
+  const wasPlayingRef = useRef(false);
+
+  const isSeeking = useSharedValue(false);
+  const isPlaying = useMemo(
+    () => mediaStatus.playerState === "playing",
+    [mediaStatus.playerState]
+  );
+  const isBufferingOrLoading = useMemo(
+    () =>
+      mediaStatus.playerState === null ||
+      mediaStatus.playerState === "buffering" ||
+      mediaStatus.playerState === "loading",
+    [mediaStatus.playerState]
+  );
+
+  // request update of media status every player state change
+  useEffect(() => {
+    client.requestStatus();
+  }, [mediaStatus.playerState]);
+
+  // update max progress
+  useEffect(() => {
+    if (mediaStatus.mediaInfo?.streamDuration)
+      max.value = mediaStatus.mediaInfo?.streamDuration;
+  }, [mediaStatus.mediaInfo?.streamDuration]);
+
+  const updateTimes = useCallback(
+    (currentProgress: number, maxValue: number) => {
+      setCurrentTime(currentProgress);
+      setRemainingTime(maxValue - currentProgress);
+    },
+    []
+  );
+
+  useAnimatedReaction(
+    () => ({
+      progress: progress.value,
+      max: max.value,
+      isSeeking: isSeeking.value,
+    }),
+    (result) => {
+      if (result.isSeeking === false) {
+        runOnJS(updateTimes)(result.progress, result.max);
+      }
+    },
+    [updateTimes]
+  );
+
+  const { mediaMetadata, itemId, streamURL } = useMemo(
+    () => ({
+      mediaMetadata: mediaStatus.mediaInfo?.metadata,
+      itemId: mediaStatus.mediaInfo?.contentId,
+      streamURL: mediaStatus.mediaInfo?.contentUrl,
+    }),
+    [mediaStatus]
+  );
+
+  const type = useMemo(
+    () => mediaMetadata?.type || "generic",
+    [mediaMetadata?.type]
+  );
+  const images = useMemo(
+    () => mediaMetadata?.images || [],
+    [mediaMetadata?.images]
+  );
+
+  const { playbackOptions, sessionId, mediaSourceId } = useMemo(() => {
+    const mediaCustomData = mediaStatus.mediaInfo?.customData as
+      | {
+          playbackOptions: SelectedOptions;
+          sessionId?: string;
+          mediaSourceId?: string;
+        }
+      | undefined;
+
+    return (
+      mediaCustomData || {
+        playbackOptions: undefined,
+        sessionId: undefined,
+        mediaSourceId: undefined,
+      }
+    );
+  }, [mediaStatus.mediaInfo?.customData]);
+
+  const {
+    data: item,
+    // currently nothing is indicating that item is loading, because most of the time it loads very fast
+    isLoading: isLoadingItem,
+    isError: isErrorItem,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ["item", itemId],
+    queryFn: async () => {
+      if (!itemId) return;
+      const res = await getUserLibraryApi(api!).getItem({
+        itemId,
+        userId: user?.Id,
+      });
+
+      return res.data;
+    },
+    enabled: !!itemId,
+    staleTime: 0,
+  });
+
+  const onProgress = useCallback(
+    async (progressInTicks: number, isPlaying: boolean) => {
+      if (!item?.Id || !streamURL) return;
+
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item.Id,
+        audioStreamIndex: playbackOptions?.audioIndex,
+        subtitleStreamIndex: playbackOptions?.subtitleIndex,
+        mediaSourceId,
+        positionTicks: Math.floor(progressInTicks),
+        isPaused: !isPlaying,
+        playMethod: streamURL.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: sessionId,
+      });
+    },
+    [api, item, playbackOptions, mediaSourceId, streamURL, sessionId]
+  );
+
+  // update progess on stream position change
+  useEffect(() => {
+    if (streamPosition) {
+      progress.value = streamPosition;
+      onProgress(secondsToTicks(streamPosition), isPlaying);
+    }
+  }, [streamPosition, isPlaying]);
+
+  const reportPlaybackStart = useCallback(async () => {
+    if (!streamURL) return;
+
+    await getPlaystateApi(api!).onPlaybackStart({
+      itemId: item?.Id!,
+      audioStreamIndex: playbackOptions?.audioIndex,
+      subtitleStreamIndex: playbackOptions?.subtitleIndex,
+      mediaSourceId,
+      playMethod: streamURL.includes("m3u8") ? "Transcode" : "DirectStream",
+      playSessionId: sessionId,
+    });
+  }, [api, item, playbackOptions, mediaSourceId, streamURL, sessionId]);
+
+  // report playback started
+  useEffect(() => {
+    setWasMediaPlaying(true);
+    reportPlaybackStart();
+  }, [reportPlaybackStart]);
+
+  // update the reportPlaybackStoppedRef
+  useEffect(() => {
+    reportPlaybackStopedRef.current = async () => {
+      if (!streamURL) return;
+
+      await getPlaystateApi(api!).onPlaybackStopped({
+        itemId: item?.Id!,
+        mediaSourceId,
+        positionTicks: secondsToTicks(progress.value),
+        playSessionId: sessionId,
+      });
+    };
+  }, [
+    api,
+    item,
+    playbackOptions,
+    progress,
+    mediaSourceId,
+    streamURL,
+    sessionId,
+  ]);
+
+  const { previousItem, nextItem } = useAdjacentItems({
+    item: {
+      Id: itemId,
+      SeriesId: item?.SeriesId,
+      Type: item?.Type,
+    },
+  });
+
+  const goToItem = useCallback(
+    async (item: BaseItemDto) => {
+      if (!api) {
+        console.warn("Failed to go to item: No api!");
+        return;
+      }
+
+      const previousIndexes: previousIndexes = {
+        subtitleIndex: playbackOptions?.subtitleIndex || undefined,
+        audioIndex: playbackOptions?.audioIndex || undefined,
+      };
+
+      const {
+        mediaSource,
+        audioIndex: defaultAudioIndex,
+        subtitleIndex: defaultSubtitleIndex,
+      } = getDefaultPlaySettings(item, settings, previousIndexes, undefined);
+
+      // Get a new URL with the Chromecast device profile:
+      const data = await getStreamUrl({
+        api,
+        item,
+        deviceProfile: chromecastProfile,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+        userId: user?.Id,
+        audioStreamIndex: defaultAudioIndex,
+        // maxStreamingBitrate: playbackOptions.bitrate?.value,   // TODO handle bitrate limit
+        subtitleStreamIndex: defaultSubtitleIndex,
+        mediaSourceId: mediaSource?.Id,
+      });
+
+      if (!data?.url) {
+        console.warn("No URL returned from getStreamUrl", data);
+        Alert.alert("Client error", "Could not create stream for Chromecast");
+        return;
+      }
+
+      await chromecastLoadMedia({
+        client,
+        item,
+        contentUrl: data.url,
+        sessionId: data.sessionId || undefined,
+        mediaSourceId: data.mediaSource?.Id || undefined,
+        playbackOptions,
+        images: [
+          {
+            url: getParentBackdropImageUrl({
+              api,
+              item,
+              quality: 90,
+              width: 2000,
+            })!,
+          },
+        ],
+      });
+
+      await client.requestStatus();
+    },
+    [client, api]
+  );
+
+  const goToNextItem = useCallback(() => {
+    if (!nextItem) {
+      console.warn("Failed to skip to next item: No next item!");
+      return;
+    }
+    lightHapticFeedback();
+    goToItem(nextItem);
+  }, [nextItem, lightHapticFeedback]);
+
+  const goToPreviousItem = useCallback(() => {
+    if (!previousItem) {
+      console.warn("Failed to skip to next item: No next item!");
+      return;
+    }
+    lightHapticFeedback();
+    goToItem(previousItem);
+  }, [previousItem, lightHapticFeedback]);
+
+  const pause = useCallback(() => {
+    client.pause();
+  }, [client]);
+
+  const play = useCallback(() => {
+    client.play();
+  }, [client]);
+
+  const seek = useCallback(
+    (time: number) => {
+      // skip to next episode if seeking to end (for credit skipping)
+      // with 1 second room to react
+      if (nextItem && time >= max.value - 1) {
+        goToNextItem();
+        return;
+      }
+      client.seek({
+        position: time,
+      });
+    },
+    [client, goToNextItem, nextItem, max]
+  );
+
+  const togglePlay = useCallback(() => {
+    if (isPlaying) pause();
+    else play();
+  }, [isPlaying, play, pause]);
+
+  const handleSkipBackward = useCallback(async () => {
+    if (!settings?.rewindSkipTime) return;
+    wasPlayingRef.current = isPlaying;
+    lightHapticFeedback();
+    try {
+      const curr = progress.value;
+      if (curr !== undefined) {
+        const newTime = Math.max(0, curr - settings.rewindSkipTime);
+        seek(newTime);
+        if (wasPlayingRef.current === true) play();
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video backwards", error);
+    }
+  }, [settings, isPlaying]);
+
+  const handleSkipForward = useCallback(async () => {
+    if (!settings?.forwardSkipTime) return;
+    wasPlayingRef.current = isPlaying;
+    lightHapticFeedback();
+    try {
+      const curr = progress.value;
+      if (curr !== undefined) {
+        const newTime = curr + settings.forwardSkipTime;
+        seek(Math.max(0, newTime));
+        if (wasPlayingRef.current === true) play();
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video forwards", error);
+    }
+  }, [settings, isPlaying]);
+
+  const { showSkipButton, skipIntro } = useIntroSkipper(
+    itemId,
+    currentTime,
+    seek,
+    play,
+    false
+  );
+
+  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
+    itemId,
+    currentTime,
+    seek,
+    play,
+    false
+  );
+
+  // Android requires the cast button to be present for startDiscovery to work
+  const AndroidCastButton = useCallback(
+    () =>
+      Platform.OS === "android" ? (
+        <CastButton tintColor="transparent" />
+      ) : (
+        <></>
+      ),
+    [Platform.OS]
+  );
+
+  const TrickplaySliderMemoized = useMemo(
+    () => (
+      <TrickplaySlider
+        item={item}
+        progress={progress}
+        wasPlayingRef={wasPlayingRef}
+        isPlaying={isPlaying}
+        isSeeking={isSeeking}
+        range={{ max }}
+        play={play}
+        pause={pause}
+        seek={seek}
+      />
+    ),
+    [
+      item,
+      progress,
+      wasPlayingRef,
+      isPlaying,
+      isSeeking,
+      max,
+      play,
+      pause,
+      seek,
+    ]
+  );
+
+  const NextEpisodeButtonMemoized = useMemo(
+    () => (
+      <NextEpisodeCountDownButton
+        show={nextItem !== null && max.value > 0 && remainingTime < 10}
+        onFinish={goToNextItem}
+        onPress={goToNextItem}
+      />
+    ),
+    [nextItem, max, remainingTime, goToNextItem]
+  );
+
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const insets = useSafeAreaInsets();
+
+  const [loadingLogo, setLoadingLogo] = useState(true);
+  const [headerHeight, setHeaderHeight] = useState(350);
+
+  const logoUrl = useMemo(() => images[0]?.url, [images]);
+
+  if (isErrorItem) {
+    return (
+      <View className="w-full h-full flex flex-col items-center justify-center bg-black">
+        <View className="p-12 flex gap-4">
+          <Text className="text-center font-semibold text-red-500 text-lg">
+            {t("chromecast.error_loading_item")}
+          </Text>
+          {error && (
+            <Text className="text-center opacity-80">{error.message}</Text>
+          )}
+        </View>
+        <View className="flex gap-2 mt-auto mb-20">
+          <TouchableOpacity
+            className="flex flex-row items-center justify-center gap-2"
+            onPress={() => refetch()}
+          >
+            <Ionicons name="reload" size={24} color={Colors.primary} />
+            <Text className="ml-2 text-purple-600 text-lg">
+              {t("chromecast.retry_load_item")}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            className="flex flex-row items-center justify-center gap-2"
+            onPress={() => {
+              router.push("/(auth)/(home)/");
+            }}
+          >
+            <Ionicons name="home" size={16} color={Colors.text} />
+            <Text className="ml-2 text-white text-sm underline">
+              {t("chromecast.go_home")}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+
+  if (!item) {
+    return <Text>Do something when item is undefined</Text>;
+  }
+
+  if (!playbackOptions) {
+    return <Text>Do something when playbackOptions is undefined</Text>;
+  }
+
+  return (
+    <View
+      className="flex-1 relative"
+      style={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      {/* TODO do navigation header properly */}
+      <View
+        className="flex flex-row justify-between absolute w-full top-2 z-50"
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        }}
+      >
+        <RoundButton size="large" icon="arrow-back" />
+        {item.Type !== "Program" && (
+          <View className="flex flex-row items-center space-x-2">
+            <RoundButton
+              size="large"
+              onPress={() => {
+                CastContext.showCastDialog();
+              }}
+            >
+              <AndroidCastButton />
+              <Feather name="cast" size={24} color={"white"} />
+            </RoundButton>
+            <PlayedStatus items={[item]} size="large" />
+            <AddToFavorites item={item} />
+          </View>
+        )}
+      </View>
+      <ParallaxScrollView
+        className={`flex-1 ${loadingLogo ? "opacity-0" : "opacity-100"}`}
+        headerHeight={headerHeight}
+        headerImage={
+          <View style={[{ flex: 1 }]}>
+            <ItemImage
+              variant={
+                item.Type === "Movie" && logoUrl ? "Backdrop" : "Primary"
+              }
+              item={item}
+              style={{
+                width: "100%",
+                height: "100%",
+              }}
+            />
+          </View>
+        }
+        logo={
+          <>
+            {logoUrl ? (
+              <Image
+                source={{
+                  uri: logoUrl,
+                }}
+                style={{
+                  height: 130,
+                  width: "100%",
+                  resizeMode: "contain",
+                }}
+                onLoad={() => setLoadingLogo(false)}
+                onError={() => setLoadingLogo(false)}
+              />
+            ) : null}
+          </>
+        }
+      >
+        <View className="flex flex-col bg-transparent shrink">
+          <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
+            <ItemHeader item={item} className="mb-4" />
+            {item.Type !== "Program" && !Platform.isTV && (
+              <View className="flex flex-row items-center justify-start w-full h-16">
+                <BitrateSelector
+                  className="mr-1"
+                  onChange={(val) =>
+                    // setSelectedOptions(
+                    //   (prev) => prev && { ...prev, bitrate: val }
+                    // )
+                    console.log("new selected options", val)
+                  }
+                  selected={playbackOptions.bitrate}
+                />
+                <MediaSourceSelector
+                  className="mr-1"
+                  item={item}
+                  onChange={(val) =>
+                    // setSelectedOptions((prev) =>
+                    //   prev && {
+                    //     ...prev,
+                    //     mediaSource: val,
+                    //   }
+                    // )
+                    console.log("new selected options", val)
+                  }
+                  selected={playbackOptions.mediaSource}
+                />
+                <AudioTrackSelector
+                  className="mr-1"
+                  source={playbackOptions.mediaSource}
+                  onChange={(val) => {
+                    // setSelectedOptions((prev) =>
+                    //   prev && {
+                    //     ...prev,
+                    //     audioIndex: val,
+                    //   }
+                    // );
+                    console.log("new selected options", val);
+                  }}
+                  selected={playbackOptions.audioIndex}
+                />
+                <SubtitleTrackSelector
+                  source={playbackOptions.mediaSource}
+                  onChange={(val) =>
+                    // setSelectedOptions(
+                    //   (prev) =>
+                    //     prev && {
+                    //       ...prev,
+                    //       subtitleIndex: val,
+                    //     }
+                    // )
+                    console.log("new selected options", val)
+                  }
+                  selected={playbackOptions.subtitleIndex}
+                />
+              </View>
+            )}
+          </View>
+          <ItemTechnicalDetails source={playbackOptions.mediaSource} />
+          <OverviewText text={item.Overview} className="px-4 mb-4" />
+        </View>
+      </ParallaxScrollView>
+      <View className="pt-2">
+        {TrickplaySliderMemoized}
+        <View className="flex flex-row items-center justify-between mt-2">
+          <Text className="text-[12px] text-neutral-400">
+            {formatTimeString(currentTime, "s")}
+          </Text>
+          <Text className="text-[12px] text-neutral-400">
+            -{formatTimeString(remainingTime, "s")}
+          </Text>
+        </View>
+        <View className="flex flex-row w-full items-center justify-evenly mt-2 mb-10">
+          <TouchableOpacity onPress={goToPreviousItem} disabled={!previousItem}>
+            <Ionicons
+              name="play-skip-back-outline"
+              size={30}
+              color={previousItem ? "white" : "gray"}
+            />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={handleSkipBackward}>
+            <Ionicons name="play-back-outline" size={30} color="white" />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => togglePlay()}
+            className="flex w-14 h-14 items-center justify-center"
+          >
+            {!isBufferingOrLoading ? (
+              <Ionicons
+                name={isPlaying ? "pause" : "play"}
+                size={50}
+                color="white"
+              />
+            ) : (
+              <Loader size={"large"} />
+            )}
+          </TouchableOpacity>
+          <TouchableOpacity onPress={handleSkipForward}>
+            <Ionicons name="play-forward-outline" size={30} color="white" />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={goToNextItem} disabled={!nextItem}>
+            <Ionicons
+              name="play-skip-forward-outline"
+              size={30}
+              color={nextItem ? "white" : "gray"}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+      {/* TODO find proper placement for these buttons */}
+      {/* <View className="flex flex-row w-full justify-end px-6 pb-6">
+        <SkipButton
+          showButton={showSkipButton}
+          onPress={skipIntro}
+          buttonText="Skip Intro"
+        />
+        <SkipButton
+          showButton={showSkipCreditButton}
+          onPress={skipCredit}
+          buttonText="Skip Credits"
+        />
+        {NextEpisodeButtonMemoized}
+      </View> */}
+    </View>
+  );
+}
+
+type TrickplaySliderProps = {
+  item?: BaseItemDto;
+  progress: SharedValue<number>;
+  wasPlayingRef: React.MutableRefObject<boolean>;
+  isPlaying: boolean;
+  isSeeking: SharedValue<boolean>;
+  range: { min?: SharedValue<number>; max: SharedValue<number> };
+  play: () => void;
+  pause: () => void;
+  seek: (time: number) => void;
+};
+
+function TrickplaySlider({
+  item,
+  progress,
+  wasPlayingRef,
+  isPlaying,
+  isSeeking,
+  range,
+  play,
+  pause,
+  seek,
+}: TrickplaySliderProps) {
+  const [isSliding, setIsSliding] = useState(false);
+  const lastProgressRef = useRef<number>(0);
+
+  const min = useSharedValue(range.min?.value || 0);
+
+  const {
+    trickPlayUrl,
+    calculateTrickplayUrl,
+    trickplayInfo,
+    prefetchAllTrickplayImages,
+  } = useTrickplay(
+    {
+      Id: item?.Id,
+      RunTimeTicks: secondsToTicks(progress.value),
+      Trickplay: item?.Trickplay,
+    },
+    true
+  );
+
+  useEffect(() => {
+    prefetchAllTrickplayImages();
+  }, []);
+
+  const handleSliderStart = useCallback(() => {
+    setIsSliding(true);
+    wasPlayingRef.current = isPlaying;
+    lastProgressRef.current = progress.value;
+
+    pause();
+    isSeeking.value = true;
+  }, [isPlaying]);
+
+  const handleSliderComplete = useCallback(async (value: number) => {
+    isSeeking.value = false;
+    progress.value = value;
+    setIsSliding(false);
+
+    seek(Math.max(0, Math.floor(value)));
+    if (wasPlayingRef.current === true) play();
+  }, []);
+
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+  const handleSliderChange = useCallback(
+    debounce((value: number) => {
+      calculateTrickplayUrl(secondsToTicks(value));
+      const progressInSeconds = Math.floor(value);
+      const hours = Math.floor(progressInSeconds / 3600);
+      const minutes = Math.floor((progressInSeconds % 3600) / 60);
+      const seconds = progressInSeconds % 60;
+      setTime({ hours, minutes, seconds });
+    }, 3),
+    []
+  );
+
+  const memoizedRenderBubble = useCallback(() => {
+    if (!trickPlayUrl || !trickplayInfo) {
+      return null;
+    }
+    const { x, y, url } = trickPlayUrl;
+    const tileWidth = 150;
+    const tileHeight = 150 / trickplayInfo.aspectRatio!;
+
+    return (
+      <View
+        style={{
+          position: "absolute",
+          left: -62,
+          bottom: 0,
+          paddingTop: 30,
+          paddingBottom: 5,
+          width: tileWidth * 1.5,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <View
+          style={{
+            width: tileWidth,
+            height: tileHeight,
+            alignSelf: "center",
+            transform: [{ scale: 1.4 }],
+            borderRadius: 5,
+          }}
+          className="bg-neutral-800 overflow-hidden"
+        >
+          <Image
+            cachePolicy={"memory-disk"}
+            style={{
+              width: 150 * trickplayInfo?.data.TileWidth!,
+              height:
+                (150 / trickplayInfo.aspectRatio!) *
+                trickplayInfo?.data.TileHeight!,
+              transform: [
+                { translateX: -x * tileWidth },
+                { translateY: -y * tileHeight },
+              ],
+              resizeMode: "cover",
+            }}
+            source={{ uri: url }}
+            contentFit="cover"
+          />
+        </View>
+        <Text
+          style={{
+            marginTop: 30,
+            fontSize: 16,
+          }}
+        >
+          {`${time.hours > 0 ? `${time.hours}:` : ""}${
+            time.minutes < 10 ? `0${time.minutes}` : time.minutes
+          }:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`}
+        </Text>
+      </View>
+    );
+  }, [trickPlayUrl, trickplayInfo, time]);
+
+  return (
+    <Slider
+      theme={{
+        maximumTrackTintColor: "rgba(255,255,255,0.2)",
+        minimumTrackTintColor: "#fff",
+        cacheTrackTintColor: "rgba(255,255,255,0.3)",
+        bubbleBackgroundColor: "#fff",
+        bubbleTextColor: "#666",
+        heartbeatColor: "#999",
+      }}
+      renderThumb={() => null}
+      onSlidingStart={handleSliderStart}
+      onSlidingComplete={handleSliderComplete}
+      onValueChange={handleSliderChange}
+      containerStyle={{
+        borderRadius: 100,
+      }}
+      renderBubble={() => isSliding && memoizedRenderBubble()}
+      sliderHeight={10}
+      thumbWidth={0}
+      progress={progress}
+      minimumValue={min}
+      maximumValue={range.max}
+    />
+  );
+}

components/ExampleGlobalModalUsage.tsx

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

components/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/seerr-logo.svg")}
+                source={require("@/assets/icons/jellyseerr-logo.svg")}
                 style={{
                   width: 50,
                   height: 50,
                 }}
               />
               <View className='shrink ml-2'>
-                <Text className='font-bold mb-1'>Seerr</Text>
+                <Text className='font-bold mb-1'>Jellyseerr</Text>
                 <Text className='shrink text-xs'>
-                  {t("home.intro.seerr_feature_description")}
+                  {t("home.intro.jellyseerr_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.centralized_settings_plugin_title")}
+                  {t("home.intro.centralised_settings_plugin_title")}
                 </Text>
                 <View className='flex-row flex-wrap items-baseline'>
                   <Text className='shrink text-xs'>
                     {t(
-                      "home.intro.centralized_settings_plugin_description",
+                      "home.intro.centralised_settings_plugin_description",
                     )}{" "}
                   </Text>
                   <TouchableOpacity

components/MoreMoviesWithActor.tsx

@@ -11,11 +11,9 @@ 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/PlayButton.tsx

@@ -1,14 +1,20 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
+import { useSettings } from "@/utils/atoms/settings";
+import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import ios from "@/utils/profiles/ios";
+import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
-import { Feather, Ionicons } from "@expo/vector-icons";
-import { BottomSheetView } from "@gorhom/bottom-sheet";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { Alert, Platform, TouchableOpacity, View } from "react-native";
+import { Alert, TouchableOpacity, View } from "react-native";
 import CastContext, {
   CastButton,
-  MediaStreamType,
   PlayServicesState,
   useMediaStatus,
   useRemoteMediaClient,
@@ -23,29 +29,16 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import useRouter from "@/hooks/useAppRouter";
-import { useHaptic } from "@/hooks/useHaptic";
-import type { ThemeColors } from "@/hooks/useImageColorsReturn";
-import { getDownloadedItemById } from "@/providers/Downloads/database";
-import { useGlobalModal } from "@/providers/GlobalModalProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useOfflineMode } from "@/providers/OfflineModeProvider";
-import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
-import { useSettings } from "@/utils/atoms/settings";
-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";
-import { runtimeTicksToMinutes } from "@/utils/time";
 import { Button } from "./Button";
-import { Text } from "./common/Text";
-import type { SelectedOptions } from "./ItemContent";
+import { SelectedOptions } from "./ItemContent";
+import { chromecastProfile } from "@/utils/profiles/chromecast";
+import { useTranslation } from "react-i18next";
+import { useHaptic } from "@/hooks/useHaptic";
+import { chromecastLoadMedia } from "@/utils/chromecastLoadMedia";
 
-interface Props extends React.ComponentProps<typeof TouchableOpacity> {
+interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
   selectedOptions: SelectedOptions;
-  colors?: ThemeColors;
 }
 
 const ANIMATION_DURATION = 500;
@@ -54,60 +47,56 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({
   item,
   selectedOptions,
-  colors,
+  ...props
 }: Props) => {
-  const isOffline = useOfflineMode();
   const { showActionSheetWithOptions } = useActionSheet();
   const client = useRemoteMediaClient();
   const mediaStatus = useMediaStatus();
   const { t } = useTranslation();
-  const { showModal, hideModal } = useGlobalModal();
 
-  const [globalColorAtom] = useAtom(itemThemeColorAtom);
+  const [colorAtom] = useAtom(itemThemeColorAtom);
   const api = useAtomValue(apiAtom);
   const user = useAtomValue(userAtom);
 
-  // Use colors prop if provided, otherwise fallback to global atom
-  const effectiveColors = colors || globalColorAtom;
-
   const router = useRouter();
 
   const startWidth = useSharedValue(0);
   const targetWidth = useSharedValue(0);
-  const endColor = useSharedValue(effectiveColors);
-  const startColor = useSharedValue(effectiveColors);
+  const endColor = useSharedValue(colorAtom);
+  const startColor = useSharedValue(colorAtom);
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
-  const { settings, updateSettings } = useSettings();
+  const { settings } = useSettings();
   const lightHapticFeedback = useHaptic("light");
 
   const goToPlayer = useCallback(
-    (q: string) => {
-      if (settings.maxAutoPlayEpisodeCount.value !== -1) {
-        updateSettings({ autoPlayEpisodeCount: 0 });
+    (q: string, bitrateValue: number | undefined) => {
+      if (!bitrateValue) {
+        router.push(`/player/direct-player?${q}`);
+        return;
       }
-      router.push(`/player/direct-player?${q}`);
+      router.push(`/player/transcoding-player?${q}`);
     },
-    [router, isOffline],
+    [router]
   );
 
-  const handleNormalPlayFlow = useCallback(async () => {
+  const onPress = useCallback(async () => {
     if (!item) return;
 
+    lightHapticFeedback();
+
     const queryParams = new URLSearchParams({
       itemId: item.Id!,
       audioIndex: selectedOptions.audioIndex?.toString() ?? "",
       subtitleIndex: selectedOptions.subtitleIndex?.toString() ?? "",
       mediaSourceId: selectedOptions.mediaSource?.Id ?? "",
       bitrateValue: selectedOptions.bitrate?.value?.toString() ?? "",
-      playbackPosition: item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-      offline: isOffline ? "true" : "false",
     });
 
     const queryString = queryParams.toString();
 
     if (!client) {
-      goToPlayer(queryString);
+      goToPlayer(queryString, selectedOptions.bitrate?.value);
       return;
     }
 
@@ -127,155 +116,65 @@ export const PlayButton: React.FC<Props> = ({
         switch (selectedIndex) {
           case 0:
             await CastContext.getPlayServicesState().then(async (state) => {
-              if (state && state !== PlayServicesState.SUCCESS) {
+              if (state && state !== PlayServicesState.SUCCESS)
                 CastContext.showPlayServicesErrorDialog(state);
-              } else {
-                // Check if user wants H265 for Chromecast
-                const enableH265 = settings.enableH265ForChromecast;
+              else {
+                // Get a new URL with the Chromecast device profile:
+                const data = await getStreamUrl({
+                  api,
+                  item,
+                  deviceProfile: chromecastProfile,
+                  startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+                  userId: user?.Id,
+                  audioStreamIndex: selectedOptions.audioIndex,
+                  maxStreamingBitrate: selectedOptions.bitrate?.value,
+                  mediaSourceId: selectedOptions.mediaSource?.Id,
+                  subtitleStreamIndex: selectedOptions.subtitleIndex,
+                });
 
-                // Validate required parameters before calling getStreamUrl
-                if (!api) {
-                  console.warn("API not available for Chromecast streaming");
+                if (!data?.url) {
+                  console.warn("No URL returned from getStreamUrl", data);
                   Alert.alert(
                     t("player.client_error"),
-                    t("player.missing_parameters"),
-                  );
-                  return;
-                }
-                if (!user?.Id) {
-                  console.warn(
-                    "User not authenticated for Chromecast streaming",
-                  );
-                  Alert.alert(
-                    t("player.client_error"),
-                    t("player.missing_parameters"),
-                  );
-                  return;
-                }
-                if (!item?.Id) {
-                  console.warn("Item not available for Chromecast streaming");
-                  Alert.alert(
-                    t("player.client_error"),
-                    t("player.missing_parameters"),
+                    t("player.could_not_create_stream_for_chromecast")
                   );
                   return;
                 }
 
-                // Get a new URL with the Chromecast device profile
-                try {
-                  const data = await getStreamUrl({
-                    api,
-                    item,
-                    deviceProfile: enableH265 ? chromecasth265 : chromecast,
-                    startTimeTicks: item?.UserData?.PlaybackPositionTicks ?? 0,
-                    userId: user.Id,
-                    audioStreamIndex: selectedOptions.audioIndex,
-                    maxStreamingBitrate: selectedOptions.bitrate?.value,
-                    mediaSourceId: selectedOptions.mediaSource?.Id,
-                    subtitleStreamIndex: selectedOptions.subtitleIndex,
-                  });
-
-                  console.log("URL: ", data?.url, enableH265);
-
-                  if (!data?.url) {
-                    console.warn("No URL returned from getStreamUrl", data);
-                    Alert.alert(
-                      t("player.client_error"),
-                      t("player.could_not_create_stream_for_chromecast"),
-                    );
+                chromecastLoadMedia({
+                  client,
+                  item,
+                  contentUrl: data.url,
+                  sessionId: data.sessionId || undefined,
+                  mediaSourceId: data.mediaSource?.Id || undefined,
+                  playbackOptions: selectedOptions,
+                  images: [
+                    {
+                      url: getParentBackdropImageUrl({
+                        api,
+                        item,
+                        quality: 90,
+                        width: 2000,
+                      })!,
+                    },
+                  ],
+                }).then(() => {
+                  // state is already set when reopening current media, so skip it here.
+                  if (isOpeningCurrentlyPlayingMedia) {
                     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: {
-                        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(() => {
-                      // state is already set when reopening current media, so skip it here.
-                      if (isOpeningCurrentlyPlayingMedia) {
-                        return;
-                      }
-                      CastContext.showExpandedControls();
-                    });
-                } catch (e) {
-                  console.log(e);
-                }
+                  router.push("/player/google-cast-player");
+                });
               }
             });
             break;
           case 1:
-            goToPlayer(queryString);
+            goToPlayer(queryString, selectedOptions.bitrate?.value);
             break;
           case cancelButtonIndex:
             break;
         }
-      },
+      }
     );
   }, [
     item,
@@ -287,140 +186,16 @@ export const PlayButton: React.FC<Props> = ({
     showActionSheetWithOptions,
     mediaStatus,
     selectedOptions,
-    goToPlayer,
-    isOffline,
-    t,
-  ]);
-
-  const onPress = useCallback(async () => {
-    if (!item) return;
-
-    lightHapticFeedback();
-
-    // Check if item is downloaded
-    const downloadedItem = item.Id ? getDownloadedItemById(item.Id) : undefined;
-
-    // If already in offline mode, play downloaded file directly
-    if (isOffline && downloadedItem) {
-      const queryParams = new URLSearchParams({
-        itemId: item.Id!,
-        offline: "true",
-        playbackPosition:
-          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-      });
-      goToPlayer(queryParams.toString());
-      return;
-    }
-
-    // If online but file is downloaded, ask user which version to play
-    if (downloadedItem) {
-      if (Platform.OS === "android") {
-        // Show bottom sheet for Android
-        showModal(
-          <BottomSheetView>
-            <View className='px-4 mt-4 mb-12'>
-              <View className='pb-6'>
-                <Text className='text-2xl font-bold mb-2'>
-                  {t("player.downloaded_file_title")}
-                </Text>
-                <Text className='opacity-70 text-base'>
-                  {t("player.downloaded_file_message")}
-                </Text>
-              </View>
-              <View className='space-y-3'>
-                <Button
-                  onPress={() => {
-                    hideModal();
-                    const queryParams = new URLSearchParams({
-                      itemId: item.Id!,
-                      offline: "true",
-                      playbackPosition:
-                        item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-                    });
-                    goToPlayer(queryParams.toString());
-                  }}
-                  color='purple'
-                >
-                  {Platform.OS === "android"
-                    ? "Play downloaded file"
-                    : t("player.downloaded_file_yes")}
-                </Button>
-                <Button
-                  onPress={() => {
-                    hideModal();
-                    handleNormalPlayFlow();
-                  }}
-                  color='white'
-                  variant='border'
-                >
-                  {Platform.OS === "android"
-                    ? "Stream file"
-                    : t("player.downloaded_file_no")}
-                </Button>
-              </View>
-            </View>
-          </BottomSheetView>,
-          {
-            snapPoints: ["35%"],
-            enablePanDownToClose: true,
-          },
-        );
-      } else {
-        // Show alert for iOS
-        Alert.alert(
-          t("player.downloaded_file_title"),
-          t("player.downloaded_file_message"),
-          [
-            {
-              text: t("player.downloaded_file_yes"),
-              onPress: () => {
-                const queryParams = new URLSearchParams({
-                  itemId: item.Id!,
-                  offline: "true",
-                  playbackPosition:
-                    item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-                });
-                goToPlayer(queryParams.toString());
-              },
-              isPreferred: true,
-            },
-            {
-              text: t("player.downloaded_file_no"),
-              onPress: () => {
-                handleNormalPlayFlow();
-              },
-            },
-            {
-              text: t("player.downloaded_file_cancel"),
-              style: "cancel",
-            },
-          ],
-        );
-      }
-      return;
-    }
-
-    // If not downloaded, proceed with normal flow
-    handleNormalPlayFlow();
-  }, [
-    item,
-    lightHapticFeedback,
-    handleNormalPlayFlow,
-    goToPlayer,
-    t,
-    showModal,
-    hideModal,
-    effectiveColors,
   ]);
 
   const derivedTargetWidth = useDerivedValue(() => {
     if (!item || !item.RunTimeTicks) return 0;
     const userData = item.UserData;
-    if (userData?.PlaybackPositionTicks) {
+    if (userData && userData.PlaybackPositionTicks) {
       return userData.PlaybackPositionTicks > 0
         ? Math.max(
             (userData.PlaybackPositionTicks / item.RunTimeTicks) * 100,
-            MIN_PLAYBACK_WIDTH,
+            MIN_PLAYBACK_WIDTH
           )
         : 0;
     }
@@ -437,11 +212,11 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.7, 0, 0.3, 1.0),
       });
     },
-    [item],
+    [item]
   );
 
   useAnimatedReaction(
-    () => effectiveColors,
+    () => colorAtom,
     (newColor) => {
       endColor.value = newColor;
       colorChangeProgress.value = 0;
@@ -450,19 +225,19 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.9, 0, 0.31, 0.99),
       });
     },
-    [effectiveColors],
+    [colorAtom]
   );
 
   useEffect(() => {
     const timeout_2 = setTimeout(() => {
-      startColor.value = effectiveColors;
+      startColor.value = colorAtom;
       startWidth.value = targetWidth.value;
     }, ANIMATION_DURATION);
 
     return () => {
       clearTimeout(timeout_2);
     };
-  }, [effectiveColors, item]);
+  }, [colorAtom, item]);
 
   /**
    * ANIMATED STYLES
@@ -471,7 +246,7 @@ export const PlayButton: React.FC<Props> = ({
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.primary, endColor.value.primary],
+      [startColor.value.primary, endColor.value.primary]
     ),
   }));
 
@@ -479,7 +254,7 @@ export const PlayButton: React.FC<Props> = ({
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.primary, endColor.value.primary],
+      [startColor.value.primary, endColor.value.primary]
     ),
   }));
 
@@ -487,7 +262,7 @@ export const PlayButton: React.FC<Props> = ({
     width: `${interpolate(
       widthProgress.value,
       [0, 1],
-      [startWidth.value, targetWidth.value],
+      [startWidth.value, targetWidth.value]
     )}%`,
   }));
 
@@ -495,61 +270,83 @@ export const PlayButton: React.FC<Props> = ({
     color: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.text, endColor.value.text],
+      [startColor.value.text, endColor.value.text]
     ),
   }));
+  /**
+   * *********************
+   */
 
   return (
-    <TouchableOpacity
-      disabled={!item}
-      accessibilityLabel='Play button'
-      accessibilityHint='Tap to play the media'
-      onPress={onPress}
-      className={"relative flex-1"}
-    >
-      <View className='absolute w-full h-full top-0 left-0 rounded-full z-10 overflow-hidden'>
-        <Animated.View
-          style={[
-            animatedPrimaryStyle,
-            animatedWidthStyle,
-            {
-              height: "100%",
-            },
-          ]}
-        />
-      </View>
-
-      <Animated.View
-        style={[animatedAverageStyle, { opacity: 0.5 }]}
-        className='absolute w-full h-full top-0 left-0 rounded-full'
-      />
-      <View
-        style={{
-          borderWidth: 1,
-          borderColor: effectiveColors.primary,
-          borderStyle: "solid",
-        }}
-        className='flex flex-row items-center justify-center bg-transparent rounded-full z-20 h-12 w-full '
+    <View>
+      <TouchableOpacity
+        disabled={!item}
+        accessibilityLabel="Play button"
+        accessibilityHint="Tap to play the media"
+        onPress={onPress}
+        className={`relative`}
+        {...props}
       >
-        <View className='flex flex-row items-center space-x-2'>
-          <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
-            {runtimeTicksToMinutes(
-              (item?.RunTimeTicks || 0) -
-                (item?.UserData?.PlaybackPositionTicks || 0),
-            )}
-            {(item?.UserData?.PlaybackPositionTicks || 0) > 0 && " left"}
-          </Animated.Text>
-          <Animated.Text style={animatedTextStyle}>
-            <Ionicons name='play-circle' size={24} />
-          </Animated.Text>
-          {client && (
-            <Animated.Text style={animatedTextStyle}>
-              <Feather name='cast' size={22} />
-              <CastButton tintColor='transparent' />
-            </Animated.Text>
-          )}
+        <View className="absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden">
+          <Animated.View
+            style={[
+              animatedPrimaryStyle,
+              animatedWidthStyle,
+              {
+                height: "100%",
+              },
+            ]}
+          />
         </View>
-      </View>
-    </TouchableOpacity>
+
+        <Animated.View
+          style={[animatedAverageStyle, { opacity: 0.5 }]}
+          className="absolute w-full h-full top-0 left-0 rounded-xl"
+        />
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: colorAtom.primary,
+            borderStyle: "solid",
+          }}
+          className="flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full "
+        >
+          <View className="flex flex-row items-center space-x-2">
+            <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
+              {runtimeTicksToMinutes(item?.RunTimeTicks)}
+            </Animated.Text>
+            <Animated.Text style={animatedTextStyle}>
+              <Ionicons name="play-circle" size={24} />
+            </Animated.Text>
+            {client && (
+              <Animated.Text style={animatedTextStyle}>
+                <Feather name="cast" size={22} />
+                <CastButton tintColor="transparent" />
+              </Animated.Text>
+            )}
+            {!client && settings?.openInVLC && (
+              <Animated.Text style={animatedTextStyle}>
+                <MaterialCommunityIcons
+                  name="vlc"
+                  size={18}
+                  color={animatedTextStyle.color}
+                />
+              </Animated.Text>
+            )}
+          </View>
+        </View>
+      </TouchableOpacity>
+      {/* <View className="mt-2 flex flex-row items-center">
+        <Ionicons
+          name="information-circle"
+          size={12}
+          className=""
+          color={"#9BA1A6"}
+        />
+        <Text className="text-neutral-500 ml-1">
+          {directStream ? "Direct stream" : "Transcoded stream"}
+        </Text>
+      </View> */}
+    </View>
   );
 };

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 { useSeerr } from "@/hooks/useSeerr";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
 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 SeerrRatings: React.FC<{
+export const JellyserrRatings: React.FC<{
   result: MovieResult | TvResult | TvDetails | MovieDetails;
 }> = ({ result }) => {
-  const { seerrApi, getMediaType } = useSeerr();
+  const { jellyseerrApi, getMediaType } = useJellyseerr();
 
   const mediaType = useMemo(() => getMediaType(result), [result]);
 
   const { data, isLoading } = useQuery({
-    queryKey: ["seerr", result.id, mediaType, "ratings"],
+    queryKey: ["jellyseerr", result.id, mediaType, "ratings"],
     queryFn: async () => {
       return mediaType === MediaType.MOVIE
-        ? seerrApi?.movieRatings(result.id)
-        : seerrApi?.tvRatings(result.id);
+        ? jellyseerrApi?.movieRatings(result.id)
+        : jellyseerrApi?.tvRatings(result.id);
     },
     staleTime: (5).minutesToMilliseconds(),
     retry: false,
-    enabled: !!seerrApi,
+    enabled: !!jellyseerrApi,
   });
 
   return (

components/SimilarItems.tsx

@@ -6,11 +6,8 @@ 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, streamType],
+    [source],
   );
 
   const selectedSteam = useMemo(

components/common/JellyseerrItemRouter.tsx

@@ -21,7 +21,7 @@ interface Props extends TouchableOpacityProps {
   mediaType: MediaType;
 }
 
-export const TouchableSeerrRouter: React.FC<PropsWithChildren<Props>> = ({
+export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
   result,
   mediaTitle,
   releaseYear,
@@ -42,24 +42,18 @@ export const TouchableSeerrRouter: React.FC<PropsWithChildren<Props>> = ({
         onPress={() => {
           if (!result) return;
 
-          // 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({
+            pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+            // @ts-expect-error
+            params: {
+              ...result,
+              mediaTitle,
+              releaseYear,
+              canRequest: canRequest.toString(),
+              posterSrc,
+              mediaType,
+            },
           });
-
-          router.push(
-            `/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/seerr/page?${params.toString()}`,
-          );
         }}
         {...props}
       >

components/common/LargePoster.tsx

@@ -0,0 +1,20 @@
+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/VerticalSkeleton.tsx

@@ -0,0 +1,28 @@
+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,31 +569,29 @@ export const HomeWithCarousel = () => {
               settings.streamyStatsSeriesRecommendations ||
               settings.streamyStatsPromotedWatchlists;
             const streamystatsSections =
-              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;
+              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;
 
             if (section.type === "InfiniteScrollingCollectionList") {
               return (

components/home/StreamystatsPromotedWatchlists.tsx

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

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

components/jellyseerr/GridSkeleton.tsx

@@ -1,10 +1,16 @@
-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.memo(() => {
+export const GridSkeleton: React.FC<Props> = ({ index }) => {
   return (
-    <View className='flex flex-col mr-2 h-auto' style={{ width: "30.5%" }}>
+    <View
+      key={index}
+      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' />
@@ -12,4 +18,4 @@ export const GridSkeleton = React.memo(() => {
       </View>
     </View>
   );
-});
+};

components/jellyseerr/JellyseerrIndexPage.tsx

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

components/jellyseerr/JellyseerrMediaIcon.tsx

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

components/jellyseerr/JellyseerrStatusIcon.tsx

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

components/jellyseerr/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} />
+                      <GridSkeleton key={i} index={i} />
                     ))}
                   </View>
                 </View>

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

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

components/jellyseerr/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/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 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 { 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,6 +23,7 @@ const Discover: React.FC<Props> = ({ sliders }) => {
       sortBy(
         (sliders ?? []).filter((s) => s.enabled),
         "order",
+        "asc",
       ),
     [sliders],
   );

components/jellyseerr/discover/GenericSlideCard.tsx

@@ -1,6 +1,6 @@
 import { Image, type ImageContentFit } from "expo-image";
 import { LinearGradient } from "expo-linear-gradient";
-import React from "react";
+import type 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 React.memo(GenericSlideCard);
+export default GenericSlideCard;

components/jellyseerr/discover/GenreSlide.tsx

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

components/jellyseerr/discover/MovieTvSlide.tsx

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

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

components/jellyseerr/discover/Slide.tsx

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

components/library/LibraryItemCard.tsx

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

components/music/MusicAlbumCard.tsx

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

components/music/MusicAlbumRowCard.tsx

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

components/music/MusicArtistCard.tsx

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

components/music/MusicPlaylistCard.tsx

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

components/music/TrackOptionsSheet.tsx

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

components/navigation/TabBarIcon.tsx

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

@@ -0,0 +1,63 @@
+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/JellyseerrPoster.tsx

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

components/posters/ParentPoster.tsx

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

components/series/CastAndCrew.tsx

@@ -8,11 +8,8 @@ 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";
-
-// Matches `w-28` poster cards (approx 112px wide, 10/15 aspect ratio) + 2 lines of text.
-const POSTER_CAROUSEL_HEIGHT = 220;
-
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { HorizontalScroll } from "../common/HorizontalScroll";

components/series/CurrentSeries.tsx

@@ -3,11 +3,8 @@ 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";
-
-// Matches `w-28` poster cards (approx 112px wide, 10/15 aspect ratio) + 2 lines of text.
-const POSTER_CAROUSEL_HEIGHT = 220;
-
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
 import { HorizontalScroll } from "../common/HorizontalScroll";

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

components/settings/Dashboard.tsx

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

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

components/settings/DownloadSettings.tv.tsx

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

components/settings/Jellyseerr.tsx

@@ -0,0 +1,181 @@
+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={t("library.options.options_title")}>
+          <OptionGroup title='Options'>
             <ToggleItem
               label={t("library.options.show_titles")}
               value={settings.showTitles}

components/settings/MpvSubtitleSettings.tsx

@@ -1,6 +1,5 @@
 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";
@@ -18,21 +17,20 @@ 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: t("player.alignment_left"),
-    center: t("player.alignment_center"),
-    right: t("player.alignment_right"),
+    left: "Left",
+    center: "Center",
+    right: "Right",
   };
 
   const alignYLabels: Record<AlignY, string> = {
-    top: t("player.alignment_top"),
-    center: t("player.alignment_center"),
-    bottom: t("player.alignment_bottom"),
+    top: "Top",
+    center: "Center",
+    bottom: "Bottom",
   };
 
   const alignXOptionGroups = useMemo(() => {
@@ -63,14 +61,14 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
   return (
     <View {...props}>
       <ListGroup
-        title={t("player.mpv_subtitle_settings_title")}
+        title='MPV Subtitle Settings'
         description={
           <Text className='text-[#8E8D91] text-xs'>
-            {t("player.mpv_subtitle_settings_description")}
+            Advanced subtitle customization for MPV player
           </Text>
         }
       >
-        <ListItem title={t("player.subtitle_scale")}>
+        <ListItem title='Subtitle Scale'>
           <Stepper
             value={settings.mpvSubtitleScale ?? 1.0}
             step={0.1}
@@ -82,7 +80,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
           />
         </ListItem>
 
-        <ListItem title={t("player.vertical_margin")}>
+        <ListItem title='Vertical Margin'>
           <Stepper
             value={settings.mpvSubtitleMarginY ?? 0}
             step={5}
@@ -92,7 +90,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
           />
         </ListItem>
 
-        <ListItem title={t("player.horizontal_alignment")}>
+        <ListItem title='Horizontal Alignment'>
           <PlatformDropdown
             groups={alignXOptionGroups}
             trigger={
@@ -107,11 +105,11 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                 />
               </View>
             }
-            title={t("player.horizontal_alignment")}
+            title='Horizontal Alignment'
           />
         </ListItem>
 
-        <ListItem title={t("player.vertical_alignment")}>
+        <ListItem title='Vertical Alignment'>
           <PlatformDropdown
             groups={alignYOptionGroups}
             trigger={
@@ -126,7 +124,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
                 />
               </View>
             }
-            title={t("player.vertical_alignment")}
+            title='Vertical Alignment'
           />
         </ListItem>
       </ListGroup>

components/settings/PluginSettings.tsx

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

components/settings/Seerr.tsx

@@ -1,174 +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 { 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/Controls.tsx

@@ -40,6 +40,7 @@ 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";
 
 interface Props {
   item: BaseItemDto;
@@ -57,6 +58,7 @@ interface Props {
   startPictureInPicture?: () => Promise<void>;
   play: () => void;
   pause: () => void;
+  aspectRatio?: AspectRatio;
   isZoomedToFill?: boolean;
   onZoomToggle?: () => void;
   api?: Api | null;
@@ -87,6 +89,7 @@ export const Controls: FC<Props> = ({
   showControls,
   setShowControls,
   mediaSource,
+  aspectRatio = "default",
   isZoomedToFill = false,
   onZoomToggle,
   api = null,
@@ -495,6 +498,7 @@ export const Controls: FC<Props> = ({
               goToNextItem={goToNextItem}
               previousItem={previousItem}
               nextItem={nextItem}
+              aspectRatio={aspectRatio}
               isZoomedToFill={isZoomedToFill}
               onZoomToggle={onZoomToggle}
               playbackSpeed={playbackSpeed}

components/video-player/controls/HeaderControls.tsx

@@ -14,6 +14,7 @@ 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 {
@@ -27,6 +28,7 @@ interface HeaderControlsProps {
   goToNextItem: (options: { isAutoPlay?: boolean }) => void;
   previousItem?: BaseItemDto | null;
   nextItem?: BaseItemDto | null;
+  aspectRatio?: AspectRatio;
   isZoomedToFill?: boolean;
   onZoomToggle?: () => void;
   // Playback speed props
@@ -48,6 +50,7 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
   goToNextItem,
   previousItem,
   nextItem,
+  aspectRatio: _aspectRatio = "default",
   isZoomedToFill = false,
   onZoomToggle,
   playbackSpeed = 1.0,

components/video-player/controls/VideoScalingModeSelector.tsx

@@ -0,0 +1,105 @@
+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,7 +1,6 @@
 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 {
@@ -46,7 +45,6 @@ const DropdownView = ({
   const { settings, updateSettings } = useSettings();
   const router = useRouter();
   const isOffline = useOfflineMode();
-  const { t } = useTranslation();
 
   const { subtitleIndex, audioIndex, bitrateValue, playbackPosition } =
     useLocalSearchParams<{
@@ -217,7 +215,7 @@ const DropdownView = ({
 
   return (
     <PlatformDropdown
-      title={t("player.playback_options_title")}
+      title='Playback Options'
       groups={optionGroups}
       trigger={trigger}
       expoUIConfig={{}}

constants/Languages.ts

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

@@ -0,0 +1,6 @@
+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/useAdjacentEpisodes.ts

@@ -0,0 +1,64 @@
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { useAtomValue } from "jotai";
+
+interface AdjacentEpisodesProps {
+  item?: BaseItemDto | null;
+}
+
+export const useAdjacentItems = ({ item }: AdjacentEpisodesProps) => {
+  const api = useAtomValue(apiAtom);
+
+  const { data: adjacentItems } = useQuery({
+    queryKey: ["adjacentItems", item?.Id, item?.SeriesId],
+    queryFn: async (): Promise<BaseItemDto[] | null> => {
+      if (!api || !item || !item.SeriesId) {
+        return null;
+      }
+
+      const res = await getTvShowsApi(api).getEpisodes({
+        seriesId: item.SeriesId,
+        adjacentTo: item.Id,
+        limit: 3,
+        fields: ["MediaSources", "MediaStreams", "ParentId"],
+      });
+
+      return res.data.Items || null;
+    },
+    enabled:
+      !!api &&
+      !!item?.Id &&
+      !!item?.SeriesId &&
+      (item?.Type === "Episode" || item?.Type === "Audio"),
+    staleTime: 0,
+  });
+
+  const previousItem = useMemo(() => {
+    if (!adjacentItems || adjacentItems.length <= 1) {
+      return null;
+    }
+
+    if (adjacentItems.length === 2) {
+      return adjacentItems[0].Id === item?.Id ? null : adjacentItems[0];
+    }
+
+    return adjacentItems[0];
+  }, [adjacentItems, item]);
+
+  const nextItem = useMemo(() => {
+    if (!adjacentItems || adjacentItems.length <= 1) {
+      return null;
+    }
+
+    if (adjacentItems.length === 2) {
+      return adjacentItems[1].Id === item?.Id ? null : adjacentItems[1];
+    }
+
+    return adjacentItems[2];
+  }, [adjacentItems, item]);
+
+  return { previousItem, nextItem };
+};

hooks/useControlsVisibility.ts

@@ -0,0 +1,37 @@
+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/useDownloadedFileOpener.ts

@@ -0,0 +1,35 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useCallback } from "react";
+import useRouter from "@/hooks/useAppRouter";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { writeToLog } from "@/utils/log";
+
+export const useDownloadedFileOpener = () => {
+  const router = useRouter();
+  const { setPlayUrl, setOfflineSettings } = usePlaySettings();
+
+  const openFile = useCallback(
+    async (item: BaseItemDto) => {
+      if (!item.Id) {
+        writeToLog("ERROR", "Attempted to open a file without an ID.");
+        console.error("Attempted to open a file without an ID.");
+        return;
+      }
+      const queryParams = new URLSearchParams({
+        itemId: item.Id,
+        offline: "true",
+        playbackPosition:
+          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
+      });
+      try {
+        router.push(`/player/direct-player?${queryParams.toString()}`);
+      } catch (error) {
+        writeToLog("ERROR", "Error opening file", error);
+        console.error("Error opening file:", error);
+      }
+    },
+    [setOfflineSettings, setPlayUrl, router],
+  );
+
+  return { openFile };
+};

hooks/useImageColors.ts

@@ -0,0 +1,120 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useAtom, useAtomValue } from "jotai";
+import { useEffect, useMemo } from "react";
+import { Platform } from "react-native";
+import type * as ImageColorsType from "react-native-image-colors";
+import { apiAtom } from "@/providers/JellyfinProvider";
+
+// Conditionally import react-native-image-colors only on non-TV platforms
+const ImageColors = Platform.isTV
+  ? null
+  : (require("react-native-image-colors") as typeof ImageColorsType);
+
+import {
+  adjustToNearBlack,
+  calculateTextColor,
+  isCloseToBlack,
+  itemThemeColorAtom,
+} from "@/utils/atoms/primaryColor";
+import { getItemImage } from "@/utils/getItemImage";
+import { storage } from "@/utils/mmkv";
+
+/**
+ * Custom hook to extract and manage image colors for a given item.
+ *
+ * @param item - The BaseItemDto object representing the item.
+ * @param disabled - A boolean flag to disable color extraction.
+ *
+ */
+export const useImageColors = ({
+  item,
+  url,
+  disabled,
+}: {
+  item?: BaseItemDto | null;
+  url?: string | null;
+  disabled?: boolean;
+}) => {
+  const api = useAtomValue(apiAtom);
+  const [, setPrimaryColor] = useAtom(itemThemeColorAtom);
+
+  const isTv = Platform.isTV;
+
+  const source = useMemo(() => {
+    if (!api) return;
+    if (url) return { uri: url };
+    if (item)
+      return getItemImage({
+        item,
+        api,
+        variant: "Primary",
+        quality: 80,
+        width: 300,
+      });
+    return null;
+  }, [api, item, url]);
+
+  useEffect(() => {
+    if (isTv) return;
+    if (disabled) return;
+    if (source?.uri) {
+      const _primary = storage.getString(`${source.uri}-primary`);
+      const _text = storage.getString(`${source.uri}-text`);
+
+      if (_primary && _text) {
+        setPrimaryColor({
+          primary: _primary,
+          text: _text,
+        });
+        return;
+      }
+
+      // Extract colors from the image
+      if (!ImageColors?.getColors) return;
+
+      ImageColors.getColors(source.uri, {
+        fallback: "#fff",
+        cache: false,
+      })
+        .then((colors: ImageColorsType.ImageColorsResult) => {
+          let primary = "#fff";
+          let text = "#000";
+          let backup = "#fff";
+
+          // Select the appropriate color based on the platform
+          if (colors.platform === "android") {
+            primary = colors.dominant;
+            backup = colors.vibrant;
+          } else if (colors.platform === "ios") {
+            primary = colors.detail;
+            backup = colors.primary;
+          }
+
+          // Adjust the primary color if it's too close to black
+          if (primary && isCloseToBlack(primary)) {
+            if (backup && !isCloseToBlack(backup)) primary = backup;
+            primary = adjustToNearBlack(primary);
+          }
+
+          // Calculate the text color based on the primary color
+          if (primary) text = calculateTextColor(primary);
+
+          setPrimaryColor({
+            primary,
+            text,
+          });
+
+          // Cache the colors in storage
+          if (source.uri && primary) {
+            storage.set(`${source.uri}-primary`, primary);
+            storage.set(`${source.uri}-text`, text);
+          }
+        })
+        .catch((error: any) => {
+          console.error("Error getting colors", error);
+        });
+    }
+  }, [isTv, source?.uri, setPrimaryColor, disabled]);
+
+  if (isTv) return;
+};

hooks/useJellyseerr.ts

@@ -2,7 +2,7 @@ import axios, { type AxiosError, type AxiosInstance } from "axios";
 import { atom } from "jotai";
 import { useAtom } from "jotai/index";
 import { inRange } from "lodash";
-import type { User as SeerrUser } from "@/utils/jellyseerr/server/entity/User";
+import type { User as JellyseerrUser } from "@/utils/jellyseerr/server/entity/User";
 import type {
   MovieResult,
   Results,
@@ -62,12 +62,12 @@ interface SearchResults {
   results: Results[];
 }
 
-const SEERR_USER = "SEERR_USER";
-const SEERR_COOKIES = "SEERR_COOKIES";
+const JELLYSEERR_USER = "JELLYSEERR_USER";
+const JELLYSEERR_COOKIES = "JELLYSEERR_COOKIES";
 
-export const clearSeerrStorageData = () => {
-  storage.remove(SEERR_USER);
-  storage.remove(SEERR_COOKIES);
+export const clearJellyseerrStorageData = () => {
+  storage.remove(JELLYSEERR_USER);
+  storage.remove(JELLYSEERR_COOKIES);
 };
 
 export enum Endpoints {
@@ -111,27 +111,12 @@ export type TestResult =
       isValid: false;
     };
 
-/**
- * Normalizes a URL by ensuring it has a protocol prefix (https:// or http://)
- * @param url - The URL to normalize
- * @returns The normalized URL with protocol prefix
- */
-function normalizeUrl(url: string): string {
-  const trimmed = url.trim().replace(/\/+$/, ""); // Remove trailing slashes
-  if (trimmed.match(/^https?:\/\//i)) {
-    return trimmed;
-  }
-  // Default to https if no protocol is specified
-  return `https://${trimmed}`;
-}
-
-export class SeerrApi {
+export class JellyseerrApi {
   axios: AxiosInstance;
 
   constructor(baseUrl: string) {
-    const normalizedUrl = normalizeUrl(baseUrl);
     this.axios = axios.create({
-      baseURL: normalizedUrl,
+      baseURL: baseUrl,
       withCredentials: true,
       withXSRFToken: true,
       xsrfHeaderName: "XSRF-TOKEN",
@@ -141,8 +126,8 @@ export class SeerrApi {
   }
 
   async test(): Promise<TestResult> {
-    const user = storage.get<SeerrUser>(SEERR_USER);
-    const cookies = storage.get<string[]>(SEERR_COOKIES);
+    const user = storage.get<JellyseerrUser>(JELLYSEERR_USER);
+    const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);
 
     if (user && cookies) {
       return Promise.resolve({
@@ -157,13 +142,15 @@ export class SeerrApi {
         const { status, headers, data } = response;
         if (inRange(status, 200, 299)) {
           if (data.version < "2.0.0") {
-            const error = t("seerr.toasts.seer_does_not_meet_requirements");
+            const error = t(
+              "jellyseerr.toasts.jellyseer_does_not_meet_requirements",
+            );
             toast.error(error);
             throw Error(error);
           }
 
           storage.setAny(
-            SEERR_COOKIES,
+            JELLYSEERR_COOKIES,
             headers["set-cookie"]?.flatMap((c) => c.split("; ")) ?? [],
           );
           return {
@@ -171,9 +158,9 @@ export class SeerrApi {
             requiresPass: true,
           };
         }
-        toast.error(t("seerr.toasts.seerr_test_failed"));
+        toast.error(t("jellyseerr.toasts.jellyseerr_test_failed"));
         writeErrorLog(
-          `Seerr returned a ${status} for url:\n${response.config.url}`,
+          `Jellyseerr returned a ${status} for url:\n${response.config.url}`,
           response.data,
         );
         return {
@@ -182,7 +169,7 @@ export class SeerrApi {
         };
       })
       .catch((e) => {
-        const msg = t("seerr.toasts.failed_to_test_seerr_server_url");
+        const msg = t("jellyseerr.toasts.failed_to_test_jellyseerr_server_url");
         toast.error(msg);
         console.error(msg, e);
         return {
@@ -192,9 +179,9 @@ export class SeerrApi {
       });
   }
 
-  async login(username: string, password: string): Promise<SeerrUser> {
+  async login(username: string, password: string): Promise<JellyseerrUser> {
     return this.axios
-      ?.post<SeerrUser>(Endpoints.API_V1 + Endpoints.AUTH_JELLYFIN, {
+      ?.post<JellyseerrUser>(Endpoints.API_V1 + Endpoints.AUTH_JELLYFIN, {
         username,
         password,
         email: username,
@@ -202,7 +189,7 @@ export class SeerrApi {
       .then((response) => {
         const user = response?.data;
         if (!user) throw Error("Login failed");
-        storage.setAny(SEERR_USER, user);
+        storage.setAny(JELLYSEERR_USER, user);
         return user;
       });
   }
@@ -377,7 +364,7 @@ export class SeerrApi {
         const issue = response.data;
 
         if (issue.status === IssueStatus.OPEN) {
-          toast.success(t("seerr.toasts.issue_submitted"));
+          toast.success(t("jellyseerr.toasts.issue_submitted"));
         }
         return issue;
       });
@@ -405,7 +392,7 @@ export class SeerrApi {
         const cookies = response.headers["set-cookie"];
         if (cookies) {
           storage.setAny(
-            SEERR_COOKIES,
+            JELLYSEERR_COOKIES,
             response.headers["set-cookie"]?.flatMap((c) => c.split("; ")),
           );
         }
@@ -413,11 +400,11 @@ export class SeerrApi {
       },
       (error: AxiosError) => {
         writeErrorLog(
-          `Seerr response error\nerror: ${error.toString()}\nurl: ${error?.config?.url}`,
+          `Jellyseerr response error\nerror: ${error.toString()}\nurl: ${error?.config?.url}`,
           error.response?.data,
         );
         if (error.response?.status === 403) {
-          clearSeerrStorageData();
+          clearJellyseerrStorageData();
         }
         return Promise.reject(error);
       },
@@ -425,7 +412,7 @@ export class SeerrApi {
 
     this.axios.interceptors.request.use(
       async (config) => {
-        const cookies = storage.get<string[]>(SEERR_COOKIES);
+        const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);
         if (cookies) {
           const headerName = this.axios.defaults.xsrfHeaderName!;
           const xsrfToken = cookies
@@ -438,77 +425,78 @@ export class SeerrApi {
         return config;
       },
       (error) => {
-        console.error("Seerr request error", error);
-        return Promise.reject(error);
+        console.error("Jellyseerr request error", error);
       },
     );
   }
 }
 
-const seerrUserAtom = atom(storage.get<SeerrUser>(SEERR_USER));
+const jellyseerrUserAtom = atom(storage.get<JellyseerrUser>(JELLYSEERR_USER));
 
-export const useSeerr = () => {
+export const useJellyseerr = () => {
   const { settings, updateSettings } = useSettings();
-  const [seerrUser, setSeerrUser] = useAtom(seerrUserAtom);
+  const [jellyseerrUser, setJellyseerrUser] = useAtom(jellyseerrUserAtom);
   const queryClient = useNetworkAwareQueryClient();
 
-  const seerrApi = useMemo(() => {
-    const cookies = storage.get<string[]>(SEERR_COOKIES);
-    if (settings?.seerrServerUrl && cookies && seerrUser) {
-      return new SeerrApi(settings?.seerrServerUrl);
+  const jellyseerrApi = useMemo(() => {
+    const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);
+    if (settings?.jellyseerrServerUrl && cookies && jellyseerrUser) {
+      return new JellyseerrApi(settings?.jellyseerrServerUrl);
     }
     return undefined;
-  }, [settings?.seerrServerUrl, seerrUser]);
+  }, [settings?.jellyseerrServerUrl, jellyseerrUser]);
 
-  const clearAllSeerrData = useCallback(async () => {
-    clearSeerrStorageData();
-    setSeerrUser(undefined);
-    updateSettings({ seerrServerUrl: undefined });
-  }, [setSeerrUser, updateSettings]);
+  const clearAllJellyseerData = useCallback(async () => {
+    clearJellyseerrStorageData();
+    setJellyseerrUser(undefined);
+    updateSettings({ jellyseerrServerUrl: undefined });
+  }, []);
 
   const requestMedia = useCallback(
     (title: string, request: MediaRequestBody, onSuccess?: () => void) => {
-      seerrApi?.request?.(request)?.then(async (mediaRequest) => {
+      jellyseerrApi?.request?.(request)?.then(async (mediaRequest) => {
         await queryClient.invalidateQueries({
-          queryKey: ["search", "seerr"],
+          queryKey: ["search", "jellyseerr"],
         });
 
         switch (mediaRequest.status) {
           case MediaRequestStatus.PENDING:
           case MediaRequestStatus.APPROVED:
-            toast.success(t("seerr.toasts.requested_item", { item: title }));
+            toast.success(
+              t("jellyseerr.toasts.requested_item", { item: title }),
+            );
             onSuccess?.();
             break;
           case MediaRequestStatus.DECLINED:
-            toast.error(t("seerr.toasts.you_dont_have_permission_to_request"));
+            toast.error(
+              t("jellyseerr.toasts.you_dont_have_permission_to_request"),
+            );
             break;
           case MediaRequestStatus.FAILED:
             toast.error(
-              t("seerr.toasts.something_went_wrong_requesting_media"),
+              t("jellyseerr.toasts.something_went_wrong_requesting_media"),
             );
             break;
         }
       });
     },
-    [seerrApi, queryClient],
+    [jellyseerrApi],
   );
 
-  const isSeerrMovieOrTvResult = useCallback(
-    (items: any | null | undefined): items is MovieResult | TvResult => {
-      return (
-        items &&
-        Object.hasOwn(items, "mediaType") &&
-        (items.mediaType === MediaType.MOVIE ||
-          items.mediaType === MediaType.TV)
-      );
-    },
-    [],
-  );
+  const isJellyseerrMovieOrTvResult = (
+    items: any | null | undefined,
+  ): items is MovieResult | TvResult => {
+    return (
+      items &&
+      Object.hasOwn(items, "mediaType") &&
+      (items.mediaType === MediaType.MOVIE || items.mediaType === MediaType.TV)
+    );
+  };
 
   const getTitle = (
     item?: TvResult | TvDetails | MovieResult | MovieDetails | PersonCreditCast,
   ) => {
-    return isSeerrMovieOrTvResult(item)
+    return isJellyseerrMovieOrTvResult(item)
       ? item.mediaType === MediaType.MOVIE
         ? item?.title
         : item?.name
@@ -521,7 +509,7 @@ export const useSeerr = () => {
     item?: TvResult | TvDetails | MovieResult | MovieDetails | PersonCreditCast,
   ) => {
     return new Date(
-      (isSeerrMovieOrTvResult(item)
+      (isJellyseerrMovieOrTvResult(item)
         ? item.mediaType === MediaType.MOVIE
           ? item?.releaseDate
           : item?.firstAirDate
@@ -534,35 +522,32 @@ export const useSeerr = () => {
   const getMediaType = (
     item?: TvResult | TvDetails | MovieResult | MovieDetails | PersonCreditCast,
   ): MediaType => {
-    return isSeerrMovieOrTvResult(item)
+    return isJellyseerrMovieOrTvResult(item)
       ? (item.mediaType as MediaType)
       : item?.mediaInfo?.mediaType;
   };
 
-  const seerrRegion = useMemo(
+  const jellyseerrRegion = useMemo(
     // streamingRegion and discoverRegion exists. region doesn't
-    () => seerrUser?.settings?.discoverRegion || "US",
-    [seerrUser],
+    () => jellyseerrUser?.settings?.discoverRegion || "US",
+    [jellyseerrUser],
   );
 
-  const seerrLocale = useMemo(() => {
-    const locale = seerrUser?.settings?.locale || "en";
-    // Use regex to check if locale already contains region code (e.g., zh-CN, pt-BR)
-    // If not, append the region to create a valid BCP 47 locale string
-    return /^[a-z]{2,3}-/i.test(locale) ? locale : `${locale}-${seerrRegion}`;
-  }, [seerrUser, seerrRegion]);
+  const jellyseerrLocale = useMemo(() => {
+    return jellyseerrUser?.settings?.locale || "en";
+  }, [jellyseerrUser]);
 
   return {
-    seerrApi,
-    seerrUser,
-    setSeerrUser,
-    clearAllSeerrData,
-    isSeerrMovieOrTvResult,
+    jellyseerrApi,
+    jellyseerrUser,
+    setJellyseerrUser,
+    clearAllJellyseerData,
+    isJellyseerrMovieOrTvResult,
     getTitle,
     getYear,
     getMediaType,
-    seerrRegion,
-    seerrLocale,
+    jellyseerrRegion,
+    jellyseerrLocale,
     requestMedia,
   };
 };

modules/mpv-player/src/MpvPlayerView.web.tsx

@@ -1,13 +1,11 @@
-import { useTranslation } from "react-i18next";
 import { MpvPlayerViewProps } from "./MpvPlayer.types";
 
 export default function MpvPlayerView(props: MpvPlayerViewProps) {
   const url = props.source?.url ?? "";
-  const { t } = useTranslation();
   return (
     <div>
       <iframe
-        title={t("player.mpv_player_title")}
+        title='MPV Player'
         style={{ flex: 1 }}
         src={url}
         onLoad={() => props.onLoad?.({ nativeEvent: { url } })}

package.json

@@ -94,7 +94,7 @@
     "react-native-ios-context-menu": "^3.2.1",
     "react-native-ios-utilities": "5.2.0",
     "react-native-mmkv": "4.1.1",
-    "react-native-nitro-modules": "0.32.1",
+    "react-native-nitro-modules": "0.33.1",
     "react-native-pager-view": "^6.9.1",
     "react-native-reanimated": "~4.1.1",
     "react-native-reanimated-carousel": "4.0.3",

providers/JellyfinProvider.tsx

@@ -23,7 +23,7 @@ import { getDeviceName } from "react-native-device-info";
 import uuid from "react-native-uuid";
 import useRouter from "@/hooks/useAppRouter";
 import { useInterval } from "@/hooks/useInterval";
-import { SeerrApi, useSeerr } from "@/hooks/useSeerr";
+import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
 import { useSettings } from "@/utils/atoms/settings";
 import { writeErrorLog, writeInfoLog } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
@@ -113,7 +113,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
   const [isPolling, setIsPolling] = useState<boolean>(false);
   const [secret, setSecret] = useState<string | null>(null);
   const { setPluginSettings, refreshStreamyfinPluginSettings } = useSettings();
-  const { clearAllSeerrData, setSeerrUser } = useSeerr();
+  const { clearAllJellyseerData, setJellyseerrUser } = useJellyseerr();
 
   const headers = useMemo(() => {
     if (!deviceId) return {};
@@ -147,7 +147,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
   }, [api, deviceId, headers]);
 
   const pollQuickConnect = useCallback(async () => {
-    if (!api || !secret) return;
+    if (!api || !secret || !jellyfin) return;
 
     try {
       const response = await api.axiosInstance.get(
@@ -169,8 +169,8 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
           );
 
           const { AccessToken, User } = authResponse.data;
-          api.accessToken = AccessToken;
           setUser(User);
+          setApi(jellyfin.createApi(api.basePath, AccessToken));
           storage.set("token", AccessToken);
           storage.set("user", JSON.stringify(User));
           return true;
@@ -186,7 +186,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       console.error("Error polling Quick Connect:", error);
       throw error;
     }
-  }, [api, secret, headers]);
+  }, [api, secret, headers, jellyfin]);
 
   useEffect(() => {
     (async () => {
@@ -290,13 +290,13 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
           }
 
           const recentPluginSettings = await refreshStreamyfinPluginSettings();
-          if (recentPluginSettings?.seerrServerUrl?.value) {
-            const seerrApi = new SeerrApi(
-              recentPluginSettings.seerrServerUrl.value,
+          if (recentPluginSettings?.jellyseerrServerUrl?.value) {
+            const jellyseerrApi = new JellyseerrApi(
+              recentPluginSettings.jellyseerrServerUrl.value,
             );
-            await seerrApi.test().then((result) => {
+            await jellyseerrApi.test().then((result) => {
               if (result.isValid && result.requiresPass) {
-                seerrApi.login(username, password).then(setSeerrUser);
+                jellyseerrApi.login(username, password).then(setJellyseerrUser);
               }
             });
           }
@@ -349,7 +349,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setUser(null);
       setApi(null);
       setPluginSettings(undefined);
-      await clearAllSeerrData();
+      await clearAllJellyseerData();
       // Note: We keep saved credentials for quick switching back
     },
     onError: (error) => {

scripts/check-unused-translations.js

@@ -1,121 +0,0 @@
-#!/usr/bin/env node
-/**
- * Check for unused translation keys in en.json
- * Usage: bun run scripts/check-unused-translations.js [--remove]
- */
-
-const fs = require("node:fs");
-const path = require("node:path");
-const { execSync } = require("node:child_process");
-
-const TRANSLATION_FILE = path.join(__dirname, "../translations/en.json");
-const REMOVE_UNUSED = process.argv.includes("--remove");
-
-// Read translation file
-const translations = JSON.parse(fs.readFileSync(TRANSLATION_FILE, "utf8"));
-
-// Flatten nested keys
-function flattenKeys(obj, prefix = "") {
-  let keys = [];
-  for (const [key, value] of Object.entries(obj)) {
-    const fullKey = prefix ? `${prefix}.${key}` : key;
-    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-      keys = keys.concat(flattenKeys(value, fullKey));
-    } else {
-      keys.push(fullKey);
-    }
-  }
-  return keys;
-}
-
-// Search for key usage in codebase
-function isKeyUsed(key) {
-  try {
-    // Escape special regex characters in the key
-    const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-
-    // Search in TypeScript/TSX files
-    const result = execSync(
-      `git grep -l "${escapedKey}" -- "*.ts" "*.tsx" 2>nul || echo ""`,
-      {
-        encoding: "utf8",
-        cwd: path.join(__dirname, ".."),
-        maxBuffer: 10 * 1024 * 1024,
-      },
-    ).trim();
-
-    return result.length > 0;
-  } catch (_error) {
-    // If grep fails, assume key is used to be safe
-    return true;
-  }
-}
-
-// Remove nested key from object
-function removeNestedKey(obj, keyPath) {
-  const keys = keyPath.split(".");
-  const lastKey = keys.pop();
-  let current = obj;
-
-  for (const key of keys) {
-    if (!current[key]) return false;
-    current = current[key];
-  }
-
-  if (current[lastKey] !== undefined) {
-    delete current[lastKey];
-
-    // Clean up empty parent objects
-    if (Object.keys(current).length === 0 && keys.length > 0) {
-      removeNestedKey(obj, keys.join("."));
-    }
-    return true;
-  }
-  return false;
-}
-
-console.log("🔍 Checking for unused translation keys...\n");
-
-const allKeys = flattenKeys(translations);
-const unusedKeys = [];
-
-for (const key of allKeys) {
-  if (!isKeyUsed(key)) {
-    unusedKeys.push(key);
-  }
-}
-
-if (unusedKeys.length === 0) {
-  console.log("✅ All translation keys are being used!");
-  process.exit(0);
-}
-
-console.log(`Found ${unusedKeys.length} unused translation keys:\n`);
-for (const key of unusedKeys) {
-  console.log(`  ❌ ${key}`);
-}
-
-if (REMOVE_UNUSED) {
-  console.log("\n🗑️  Removing unused keys...");
-
-  let removed = 0;
-  for (const key of unusedKeys) {
-    if (removeNestedKey(translations, key)) {
-      removed++;
-    }
-  }
-
-  // Write back to file
-  fs.writeFileSync(
-    TRANSLATION_FILE,
-    `${JSON.stringify(translations, null, 2)}\n`,
-    "utf8",
-  );
-
-  console.log(`✅ Removed ${removed} unused translation keys from en.json`);
-} else {
-  console.log("\n💡 Run with --remove flag to remove these keys from en.json");
-  console.log(
-    "   Example: bun run scripts/check-unused-translations.js --remove",
-  );
-}

scripts/typecheck.js

@@ -176,7 +176,7 @@ function runTypeCheck() {
   } catch (error) {
     const errorOutput = (error && (error.stderr || error.stdout)) || "";
 
-    // Filter out seerr utils errors - this is a third-party git submodule
+    // Filter out jellyseerr utils errors - this is a third-party git submodule
     // that generates a large volume of known type errors
     const filteredLines = errorOutput.split("\n").filter((line) => {
       const trimmedLine = line.trim();
@@ -227,7 +227,7 @@ function runTypeCheck() {
     }
 
     log(
-      `✅ ${colors.bold}TypeScript check passed${colors.reset} ${colors.gray}(seerr utils errors ignored)${colors.reset}`,
+      `✅ ${colors.bold}TypeScript check passed${colors.reset} ${colors.gray}(jellyseerr utils errors ignored)${colors.reset}`,
       colors.green,
     );
     return { ok: true };

translations/en.json

@@ -8,149 +8,60 @@
     "password_placeholder": "Password",
     "login_button": "Log in",
     "quick_connect": "Quick Connect",
-    "enter_code_to_login": "Enter code {{code}} to log in",
+    "enter_code_to_login": "Enter code {{code}} to login",
     "failed_to_initiate_quick_connect": "Failed to initiate Quick Connect",
-    "got_it": "Got It",
-    "connection_failed": "Connection Failed",
+    "got_it": "Got it",
+    "connection_failed": "Connection failed",
     "could_not_connect_to_server": "Could not connect to the server. Please check the URL and your network connection.",
     "an_unexpected_error_occured": "An unexpected error occurred",
-    "change_server": "Change Server",
-    "invalid_username_or_password": "Invalid Username or Password",
+    "change_server": "Change server",
+    "invalid_username_or_password": "Invalid username or password",
     "user_does_not_have_permission_to_log_in": "User does not have permission to log in",
     "server_is_taking_too_long_to_respond_try_again_later": "Server is taking too long to respond, try again later",
     "server_received_too_many_requests_try_again_later": "Server received too many requests, try again later.",
     "there_is_a_server_error": "There is a server error",
-    "an_unexpected_error_occured_did_you_enter_the_correct_url": "An unexpected error occurred. Did you enter the server URL correctly?",
-    "too_old_server_text": "Unsupported Jellyfin Server Discovered",
-    "too_old_server_description": "Please update Jellyfin to the latest version."
+    "an_unexpected_error_occured_did_you_enter_the_correct_url": "An unexpected error occurred. Did you enter the server URL correctly?"
   },
   "server": {
     "enter_url_to_jellyfin_server": "Enter the URL to your Jellyfin server",
     "server_url_placeholder": "http(s)://your-server.com",
     "connect_button": "Connect",
-    "previous_servers": "Previous Servers",
-    "clear_button": "Clear all",
-    "swipe_to_remove": "Swipe to remove",
-    "search_for_local_servers": "Search for Local Servers",
+    "previous_servers": "previous servers",
+    "clear_button": "Clear",
+    "search_for_local_servers": "Search for local servers",
     "searching": "Searching...",
-    "servers": "Servers",
-    "saved": "Saved",
-    "session_expired": "Session Expired",
-    "please_login_again": "Your saved session has expired. Please log in again.",
-    "remove_saved_login": "Remove Saved Login",
-    "remove_saved_login_description": "This will remove your saved credentials for this server. You'll need to enter your username and password again next time.",
-    "accounts_count": "{{count}} accounts",
-    "select_account": "Select Account",
-    "add_account": "Add Account",
-    "remove_account_description": "This will remove the saved credentials for {{username}}."
-  },
-  "save_account": {
-    "title": "Save Account",
-    "save_for_later": "Save this account",
-    "security_option": "Security Option",
-    "no_protection": "No protection",
-    "no_protection_desc": "Quick login without authentication",
-    "pin_code": "PIN code",
-    "pin_code_desc": "4-digit PIN required when switching",
-    "password": "Re-enter password",
-    "password_desc": "Password required when switching",
-    "save_button": "Save",
-    "cancel_button": "Cancel"
-  },
-  "pin": {
-    "enter_pin": "Enter PIN",
-    "enter_pin_for": "Enter PIN for {{username}}",
-    "enter_4_digits": "Enter 4 digits",
-    "invalid_pin": "Invalid PIN",
-    "setup_pin": "Set Up PIN",
-    "confirm_pin": "Confirm PIN",
-    "pins_dont_match": "PINs don't match",
-    "forgot_pin": "Forgot PIN?",
-    "forgot_pin_desc": "Your saved credentials will be removed"
-  },
-  "password": {
-    "enter_password": "Enter Password",
-    "enter_password_for": "Enter password for {{username}}",
-    "invalid_password": "Invalid password"
+    "servers": "Servers"
   },
   "home": {
-    "checking_server_connection": "Checking server connection...",
     "no_internet": "No Internet",
-    "no_items": "No Items",
+    "no_items": "No items",
     "no_internet_message": "No worries, you can still watch\ndownloaded content.",
-    "checking_server_connection_message": "Checking connection to server",
-    "go_to_downloads": "Go to Downloads",
-    "retry": "Retry",
-    "server_unreachable": "Server Unreachable",
-    "server_unreachable_message": "Could not reach the server.\nPlease check your network connection.",
+    "go_to_downloads": "Go to downloads",
     "oops": "Oops!",
     "error_message": "Something went wrong.\nPlease log out and in again.",
     "continue_watching": "Continue Watching",
     "next_up": "Next Up",
-    "continue_and_next_up": "Continue & Next Up",
-    "recently_added_in": "Recently added in {{libraryName}}",
+    "recently_added_in": "Recently Added in {{libraryName}}",
     "suggested_movies": "Suggested Movies",
     "suggested_episodes": "Suggested Episodes",
     "intro": {
       "welcome_to_streamyfin": "Welcome to Streamyfin",
-      "a_free_and_open_source_client_for_jellyfin": "A Free and Open-Source Client for Jellyfin",
+      "a_free_and_open_source_client_for_jellyfin": "A free and open-source client for Jellyfin.",
       "features_title": "Features",
-      "features_description": "Streamyfin offers many features and integrates with a wide array of software which you can find in the settings menu, including:",
-      "seerr_feature_description": "Connect to your Seerr instance and request movies directly in the app.",
+      "features_description": "Streamyfin has a bunch of features and integrates with a wide array of software which you can find in the settings menu, these include:",
+      "jellyseerr_feature_description": "Connect to your Jellyseerr instance and request movies directly in the app.",
       "downloads_feature_title": "Downloads",
-      "downloads_feature_description": "Download movies and TV shows to view offline.",
-      "chromecast_feature_description": "Cast movies and TV shows to your Chromecast devices.",
-      "centralized_settings_plugin_title": "Centralized Settings Plugin",
-      "centralized_settings_plugin_description": "Configure settings from a centralized location on your Jellyfin server. All client settings for all users will be synced automatically.",
+      "downloads_feature_description": "Download movies and tv-shows to view offline. Use either the default method or install the optimize server to download files in the background.",
+      "chromecast_feature_description": "Cast movies and tv-shows to your Chromecast devices.",
+      "centralised_settings_plugin_title": "Centralised Settings Plugin",
+      "centralised_settings_plugin_description": "Configure settings from a centralised location on your Jellyfin server. All client settings for all users will be synced automatically.",
       "done_button": "Done",
-      "go_to_settings_button": "Go to Settings",
-      "read_more": "Read More"
+      "go_to_settings_button": "Go to settings",
+      "read_more": "Read more"
     },
     "settings": {
       "settings_title": "Settings",
       "log_out_button": "Log out",
-      "categories": {
-        "title": "Categories"
-      },
-      "playback_controls": {
-        "title": "Playback & Controls"
-      },
-      "audio_subtitles": {
-        "title": "Audio & Subtitles"
-      },
-      "appearance": {
-        "title": "Appearance",
-        "merge_next_up_continue_watching": "Merge Continue Watching & Next Up",
-        "hide_remote_session_button": "Hide Remote Session Button"
-      },
-      "network": {
-        "title": "Network",
-        "local_network": "Local Network",
-        "auto_switch_enabled": "Auto-switch when at home",
-        "auto_switch_description": "Automatically switch to local URL when connected to home WiFi",
-        "local_url": "Local URL",
-        "local_url_hint": "Enter your local server address (e.g., http://192.168.1.100:8096)",
-        "local_url_placeholder": "http://192.168.1.100:8096",
-        "home_wifi_networks": "Home WiFi Networks",
-        "add_current_network": "Add \"{{ssid}}\"",
-        "not_connected_to_wifi": "Not connected to WiFi",
-        "no_networks_configured": "No networks configured",
-        "add_network_hint": "Add your home WiFi network to enable auto-switching",
-        "current_wifi": "Current WiFi",
-        "using_url": "Using",
-        "local": "Local URL",
-        "remote": "Remote URL",
-        "not_connected": "Not connected",
-        "current_server": "Current Server",
-        "remote_url": "Remote URL",
-        "active_url": "Active URL",
-        "not_configured": "Not configured",
-        "network_added": "Network added",
-        "network_already_added": "Network already added",
-        "no_wifi_connected": "Not connected to WiFi",
-        "permission_denied": "Location permission denied",
-        "permission_denied_explanation": "Location permission is required to detect WiFi network for auto-switching. Please enable it in Settings."
-      },
       "user_info": {
         "user_info_title": "User Info",
         "user": "User",
@@ -163,53 +74,32 @@
         "authorize_button": "Authorize Quick Connect",
         "enter_the_quick_connect_code": "Enter the quick connect code...",
         "success": "Success",
-        "quick_connect_autorized": "Quick Connect Authorized",
+        "quick_connect_autorized": "Quick Connect authorized",
         "error": "Error",
-        "invalid_code": "Invalid Code",
+        "invalid_code": "Invalid code",
         "authorize": "Authorize"
       },
       "media_controls": {
         "media_controls_title": "Media Controls",
-        "forward_skip_length": "Forward Skip Length",
-        "rewind_length": "Rewind Length",
+        "forward_skip_length": "Forward skip length",
+        "rewind_length": "Rewind length",
         "seconds_unit": "s"
       },
-      "gesture_controls": {
-        "gesture_controls_title": "Gesture Controls",
-        "horizontal_swipe_skip": "Horizontal Swipe to Skip",
-        "horizontal_swipe_skip_description": "Swipe left/right when controls are hidden to skip",
-        "left_side_brightness": "Left Side Brightness Control",
-        "left_side_brightness_description": "Swipe up/down on the left side to adjust brightness",
-        "right_side_volume": "Right Side Volume Control",
-        "right_side_volume_description": "Swipe up/down on the right side to adjust volume",
-        "hide_volume_slider": "Hide Volume Slider",
-        "hide_volume_slider_description": "Hide the volume slider in the video player",
-        "hide_brightness_slider": "Hide Brightness Slider",
-        "hide_brightness_slider_description": "Hide the brightness slider in the video player"
-      },
       "audio": {
         "audio_title": "Audio",
         "set_audio_track": "Set Audio Track From Previous Item",
-        "audio_language": "Audio Language",
+        "audio_language": "Audio language",
         "audio_hint": "Choose a default audio language.",
         "none": "None",
-        "language": "Language",
-        "transcode_mode": {
-          "title": "Audio Transcoding",
-          "description": "Controls how surround audio (7.1, TrueHD, DTS-HD) is handled",
-          "auto": "Auto",
-          "stereo": "Force Stereo",
-          "5_1": "Allow 5.1",
-          "passthrough": "Passthrough"
-        }
+        "language": "Language"
       },
       "subtitles": {
         "subtitle_title": "Subtitles",
-        "subtitle_hint": "Configure how subtitles look and behave.",
         "subtitle_language": "Subtitle language",
         "subtitle_mode": "Subtitle Mode",
         "set_subtitle_track": "Set Subtitle Track From Previous Item",
         "subtitle_size": "Subtitle Size",
+        "subtitle_hint": "Configure subtitle preference.",
         "none": "None",
         "language": "Language",
         "loading": "Loading",
@@ -218,286 +108,171 @@
           "Smart": "Smart",
           "Always": "Always",
           "None": "None",
-          "OnlyForced": "Only Forced"
-        },
-        "text_color": "Text Color",
-        "background_color": "Background Color",
-        "outline_color": "Outline Color",
-        "outline_thickness": "Outline Thickness",
-        "background_opacity": "Background Opacity",
-        "outline_opacity": "Outline Opacity",
-        "bold_text": "Bold Text",
-        "colors": {
-          "Black": "Black",
-          "Gray": "Gray",
-          "Silver": "Silver",
-          "White": "White",
-          "Maroon": "Maroon",
-          "Red": "Red",
-          "Fuchsia": "Fuchsia",
-          "Yellow": "Yellow",
-          "Olive": "Olive",
-          "Green": "Green",
-          "Teal": "Teal",
-          "Lime": "Lime",
-          "Purple": "Purple",
-          "Navy": "Navy",
-          "Blue": "Blue",
-          "Aqua": "Aqua"
-        },
-        "thickness": {
-          "None": "None",
-          "Thin": "Thin",
-          "Normal": "Normal",
-          "Thick": "Thick"
-        },
-        "subtitle_color": "Subtitle Color",
-        "subtitle_background_color": "Background Color",
-        "subtitle_font": "Subtitle Font"
+          "OnlyForced": "OnlyForced"
+        }
       },
       "other": {
         "other_title": "Other",
-        "video_orientation": "Video Orientation",
+        "auto_rotate": "Auto rotate",
+        "video_orientation": "Video orientation",
         "orientation": "Orientation",
         "orientations": {
-          "DEFAULT": "Follow Device Orientation",
+          "DEFAULT": "Default",
           "ALL": "All",
-          "PORTRAIT": "Portrait Auto",
+          "PORTRAIT": "Portrait",
           "PORTRAIT_UP": "Portrait Up",
           "PORTRAIT_DOWN": "Portrait Down",
-          "LANDSCAPE": "Landscape Auto",
+          "LANDSCAPE": "Landscape",
           "LANDSCAPE_LEFT": "Landscape Left",
           "LANDSCAPE_RIGHT": "Landscape Right",
           "OTHER": "Other",
           "UNKNOWN": "Unknown"
         },
-        "safe_area_in_controls": "Safe Area in Controls",
+        "safe_area_in_controls": "Safe area in controls",
         "show_custom_menu_links": "Show Custom Menu Links",
-        "show_large_home_carousel": "Show Large Home Carousel (beta)",
         "hide_libraries": "Hide Libraries",
-        "select_libraries_you_want_to_hide": "Select the libraries you want to hide from the Library tab and home page sections.",
-        "disable_haptic_feedback": "Disable Haptic Feedback",
-        "default_quality": "Default Quality",
-        "default_playback_speed": "Default Playback Speed",
-        "auto_play_next_episode": "Autoplay Next Episode",
-        "max_auto_play_episode_count": "Max Autoplay Episode Count",
-        "disabled": "Disabled"
+        "select_liraries_you_want_to_hide": "Select the libraries you want to hide from the Library tab and home page sections.",
+        "disable_haptic_feedback": "Disable Haptic Feedback"
       },
       "downloads": {
-        "downloads_title": "Downloads"
-      },
-      "music": {
-        "title": "Music",
-        "playback_title": "Playback",
-        "playback_description": "Configure how music is played.",
-        "prefer_downloaded": "Prefer Downloaded Songs",
-        "caching_title": "Caching",
-        "caching_description": "Automatically cache upcoming tracks for smoother playback.",
-        "lookahead_enabled": "Enable Look-Ahead Caching",
-        "lookahead_count": "Tracks to Pre-cache",
-        "max_cache_size": "Max Cache Size"
+        "downloads_title": "Downloads",
+        "download_method": "Download method",
+        "remux_max_download": "Remux max download",
+        "auto_download": "Auto download",
+        "optimized_versions_server": "Optimized versions server",
+        "save_button": "Save",
+        "optimized_server": "Optimized Server",
+        "optimized": "Optimized",
+        "default": "Default",
+        "optimized_version_hint": "Enter the URL for the optimize server. The URL should include http or https and optionally the port.",
+        "read_more_about_optimized_server": "Read more about the optimize server.",
+        "url": "URL",
+        "server_url_placeholder": "http(s)://domain.org:port"
       },
       "plugins": {
         "plugins_title": "Plugins",
-        "seerr": {
-          "seerr_warning": "This integration is in early development. Features may change.",
+        "jellyseerr": {
+          "jellyseerr_warning": "This integration is in its early stages. Expect things to change.",
           "server_url": "Server URL",
           "server_url_hint": "Example: http(s)://your-host.url\n(add port if required)",
-          "server_url_placeholder": "Seerr URL",
+          "server_url_placeholder": "Jellyseerr URL...",
           "password": "Password",
           "password_placeholder": "Enter password for Jellyfin user {{username}}",
+          "save_button": "Save",
+          "clear_button": "Clear",
           "login_button": "Login",
-          "total_media_requests": "Total Media Requests",
-          "movie_quota_limit": "Movie Quota Limit",
-          "movie_quota_days": "Movie Quota Days",
-          "tv_quota_limit": "TV Quota Limit",
-          "tv_quota_days": "TV Quota Days",
-          "reset_seerr_config_button": "Reset Seerr Config",
-          "unlimited": "Unlimited",
-          "plus_n_more": "+{{n}} more",
-          "order_by": {
-            "DEFAULT": "Default",
-            "VOTE_COUNT_AND_AVERAGE": "Vote count and average",
-            "POPULARITY": "Popularity"
-          }
+          "total_media_requests": "Total media requests",
+          "movie_quota_limit": "Movie quota limit",
+          "movie_quota_days": "Movie quota days",
+          "tv_quota_limit": "TV quota limit",
+          "tv_quota_days": "TV quota days",
+          "reset_jellyseerr_config_button": "Reset Jellyseerr config",
+          "unlimited": "Unlimited"
         },
         "marlin_search": {
-          "enable_marlin_search": "Enable Marlin Search",
+          "enable_marlin_search": "Enable Marlin Search ",
           "url": "URL",
           "server_url_placeholder": "http(s)://domain.org:port",
           "marlin_search_hint": "Enter the URL for the Marlin server. The URL should include http or https and optionally the port.",
           "read_more_about_marlin": "Read more about Marlin.",
           "save_button": "Save",
           "toasts": {
-            "saved": "Saved",
-            "refreshed": "Settings refreshed from server"
-          },
-          "refresh_from_server": "Refresh Settings from Server"
-        },
-        "streamystats": {
-          "enable_streamystats": "Enable Streamystats",
-          "disable_streamystats": "Disable Streamystats",
-          "enable_search": "Use for Search",
-          "url": "URL",
-          "server_url_placeholder": "http(s)://streamystats.example.com",
-          "streamystats_search_hint": "Enter the URL for your Streamystats server. The URL should include http or https and optionally the port.",
-          "read_more_about_streamystats": "Read more about Streamystats.",
-          "save_button": "Save",
-          "save": "Save",
-          "features_title": "Features",
-          "home_sections_title": "Home Sections",
-          "enable_movie_recommendations": "Movie Recommendations",
-          "enable_series_recommendations": "Series Recommendations",
-          "enable_promoted_watchlists": "Promoted Watchlists",
-          "hide_watchlists_tab": "Hide Watchlists Tab",
-          "home_sections_hint": "Show personalized recommendations and promoted watchlists from Streamystats on the home page.",
-          "recommended_movies": "Recommended Movies",
-          "recommended_series": "Recommended Series",
-          "toasts": {
-            "saved": "Saved",
-            "refreshed": "Settings refreshed from server",
-            "disabled": "Streamystats disabled"
-          },
-          "refresh_from_server": "Refresh Settings from Server"
-        },
-        "kefinTweaks": {
-          "watchlist_enabler": "Enable our Watchlist integration",
-          "watchlist_button": "Toggle Watchlist integration"
+            "saved": "Saved"
+          }
         }
       },
       "storage": {
         "storage_title": "Storage",
         "app_usage": "App {{usedSpace}}%",
-        "device_usage": "Device {{availableSpace}}%",
-        "size_used": "{{used}} of {{total}} Used",
-        "delete_all_downloaded_files": "Delete All Downloaded Files",
-        "music_cache_title": "Music Cache",
-        "music_cache_description": "Automatically cache songs as you listen for smoother playback and offline support",
-        "enable_music_cache": "Enable Music Cache",
-        "clear_music_cache": "Clear Music Cache",
-        "music_cache_size": "{{size}} cached",
-        "music_cache_cleared": "Music cache cleared",
-        "delete_all_downloaded_songs": "Delete All Downloaded Songs",
-        "downloaded_songs_size": "{{size}} downloaded",
-        "downloaded_songs_deleted": "Downloaded songs deleted"
+        "phone_usage": "Phone {{availableSpace}}%",
+        "size_used": "{{used}} of {{total}} used",
+        "delete_all_downloaded_files": "Delete All Downloaded Files"
       },
       "intro": {
-        "title": "Intro",
-        "show_intro": "Show Intro",
-        "reset_intro": "Reset Intro"
+        "show_intro": "Show intro",
+        "reset_intro": "Reset intro"
       },
       "logs": {
         "logs_title": "Logs",
-        "export_logs": "Export Logs",
-        "click_for_more_info": "Click for More Info",
-        "level": "Level",
-        "no_logs_available": "No Logs Available",
-        "delete_all_logs": "Delete All Logs"
+        "no_logs_available": "No logs available",
+        "delete_all_logs": "Delete all logs"
       },
       "languages": {
         "title": "Languages",
-        "app_language": "App Language",
+        "app_language": "App language",
+        "app_language_description": "Select the language for the app.",
         "system": "System"
       },
       "toasts": {
         "error_deleting_files": "Error deleting files",
         "background_downloads_enabled": "Background downloads enabled",
-        "background_downloads_disabled": "Background downloads disabled"
+        "background_downloads_disabled": "Background downloads disabled",
+        "connected": "Connected",
+        "could_not_connect": "Could not connect",
+        "invalid_url": "Invalid URL"
       }
     },
-    "sessions": {
-      "title": "Sessions",
-      "no_active_sessions": "No active sessions"
-    },
     "downloads": {
       "downloads_title": "Downloads",
-      "tvseries": "TV Series",
+      "tvseries": "TV-Series",
       "movies": "Movies",
       "queue": "Queue",
-      "other_media": "Other media",
       "queue_hint": "Queue and downloads will be lost on app restart",
-      "no_items_in_queue": "No Items in Queue",
-      "no_downloaded_items": "No Downloaded Items",
-      "delete_all_movies_button": "Delete All Movies",
-      "delete_all_tvseries_button": "Delete All TV Series",
-      "delete_all_button": "Delete All",
-      "delete_all_other_media_button": "Delete other media",
-      "active_download": "Active Download",
-      "no_active_downloads": "No Active Downloads",
-      "active_downloads": "Active Downloads",
+      "no_items_in_queue": "No items in queue",
+      "no_downloaded_items": "No downloaded items",
+      "delete_all_movies_button": "Delete all Movies",
+      "delete_all_tvseries_button": "Delete all TV-Series",
+      "delete_all_button": "Delete all",
+      "active_download": "Active download",
+      "no_active_downloads": "No active downloads",
+      "active_downloads": "Active downloads",
       "new_app_version_requires_re_download": "New app version requires re-download",
       "new_app_version_requires_re_download_description": "The new update requires content to be downloaded again. Please remove all downloaded content and try again.",
       "back": "Back",
       "delete": "Delete",
-      "something_went_wrong": "Something Went Wrong",
+      "something_went_wrong": "Something went wrong",
       "could_not_get_stream_url_from_jellyfin": "Could not get the stream URL from Jellyfin",
       "eta": "ETA {{eta}}",
+      "methods": "Methods",
       "toasts": {
         "you_are_not_allowed_to_download_files": "You are not allowed to download files.",
         "deleted_all_movies_successfully": "Deleted all movies successfully!",
         "failed_to_delete_all_movies": "Failed to delete all movies",
-        "deleted_all_tvseries_successfully": "Deleted all TV series successfully!",
-        "failed_to_delete_all_tvseries": "Failed to delete all TV series",
-        "deleted_media_successfully": "Deleted other media successfully!",
-        "failed_to_delete_media": "Failed to delete other media",
-        "download_deleted": "Download deleted",
+        "deleted_all_tvseries_successfully": "Deleted all TV-Series successfully!",
+        "failed_to_delete_all_tvseries": "Failed to delete all TV-Series",
         "download_cancelled": "Download cancelled",
-        "could_not_delete_download": "Could not delete download",
-        "download_paused": "Download paused",
-        "could_not_pause_download": "Could not pause download",
-        "download_resumed": "Download resumed",
-        "could_not_resume_download": "Could not resume download",
+        "could_not_cancel_download": "Could not cancel download",
         "download_completed": "Download completed",
-        "download_failed": "Download failed",
+        "download_started_for": "Download started for {{item}}",
+        "item_is_ready_to_be_downloaded": "{{item}} is ready to be downloaded",
+        "download_stated_for_item": "Download started for {{item}}",
         "download_failed_for_item": "Download failed for {{item}} - {{error}}",
         "download_completed_for_item": "Download completed for {{item}}",
-        "download_started_for_item": "Download started for {{item}}",
-        "failed_to_start_download": "Failed to start download",
-        "item_already_downloading": "{{item}} is already downloading",
-        "all_files_deleted": "All downloads deleted successfully",
-        "files_deleted_by_type": "{{count}} {{type}} deleted",
+        "queued_item_for_optimization": "Queued {{item}} for optimization",
+        "failed_to_start_download_for_item": "Failed to start downloading for {{item}}: {{message}}",
+        "server_responded_with_status_code": "Server responded with status {{statusCode}}",
+        "no_response_received_from_server": "No response received from the server",
+        "error_setting_up_the_request": "Error setting up the request",
+        "failed_to_start_download_for_item_unexpected_error": "Failed to start downloading for {{item}}: Unexpected error",
         "all_files_folders_and_jobs_deleted_successfully": "All files, folders, and jobs deleted successfully",
-        "failed_to_clean_cache_directory": "Failed to clean cache directory",
-        "could_not_get_download_url_for_item": "Could not get download URL for {{itemName}}",
-        "go_to_downloads": "Go to Downloads",
-        "file_deleted": "{{item}} deleted"
+        "an_error_occured_while_deleting_files_and_jobs": "An error occurred while deleting files and jobs",
+        "go_to_downloads": "Go to downloads"
       }
     }
   },
-  "common": {
-    "select": "Select",
-    "no_trailer_available": "No trailer available",
-    "video": "Video",
-    "audio": "Audio",
-    "subtitle": "Subtitle",
-    "play": "Play",
-    "none": "None",
-    "track": "Track",
-    "cancel": "Cancel",
-    "delete": "Delete",
-    "ok": "OK",
-    "remove": "Remove",
-    "next": "Next",
-    "back": "Back",
-    "continue": "Continue",
-    "verifying": "Verifying..."
-  },
   "search": {
+    "search_here": "Search here...",
     "search": "Search...",
-    "x_items": "{{count}} Items",
+    "x_items": "{{count}} items",
     "library": "Library",
     "discover": "Discover",
-    "no_results": "No Results",
+    "no_results": "No results",
     "no_results_found_for": "No results found for",
     "movies": "Movies",
     "series": "Series",
     "episodes": "Episodes",
     "collections": "Collections",
     "actors": "Actors",
-    "artists": "Artists",
-    "albums": "Albums",
-    "songs": "Songs",
-    "playlists": "Playlists",
     "request_movies": "Request Movies",
     "request_series": "Request Series",
     "recently_added": "Recently Added",
@@ -523,30 +298,29 @@
     "tmdb_tv_streaming_services": "TMDB TV Streaming Services"
   },
   "library": {
-    "no_results": "No Results",
-    "no_libraries_found": "No Libraries Found",
+    "no_items_found": "No items found",
+    "no_results": "No results",
+    "no_libraries_found": "No libraries found",
     "item_types": {
-      "movies": "Movies",
-      "series": "Series",
-      "boxsets": "Box Sets",
-      "items": "Items"
+      "movies": "movies",
+      "series": "series",
+      "boxsets": "box sets",
+      "items": "items"
     },
     "options": {
-      "options_title": "Options",
       "display": "Display",
       "row": "Row",
       "list": "List",
-      "image_style": "Image Style",
+      "image_style": "Image style",
       "poster": "Poster",
       "cover": "Cover",
-      "show_titles": "Show Titles",
-      "show_stats": "Show Stats"
+      "show_titles": "Show titles",
+      "show_stats": "Show stats"
     },
     "filters": {
       "genres": "Genres",
       "years": "Years",
       "sort_by": "Sort By",
-      "filter_by": "Filter By",
       "sort_order": "Sort Order",
       "tags": "Tags"
     }
@@ -556,46 +330,32 @@
     "movies": "Movies",
     "episodes": "Episodes",
     "videos": "Videos",
-    "boxsets": "Box Sets",
-    "playlists": "Playlists",
-    "noDataTitle": "No Favorites Yet",
-    "noData": "Mark items as favorites to see them appear here for quick access."
+    "boxsets": "Boxsets",
+    "playlists": "Playlists"
   },
   "custom_links": {
-    "no_links": "No Links"
+    "no_links": "No links"
   },
   "player": {
     "error": "Error",
     "failed_to_get_stream_url": "Failed to get the stream URL",
     "an_error_occured_while_playing_the_video": "An error occurred while playing the video. Check logs in settings.",
-    "client_error": "Client Error",
+    "client_error": "Client error",
     "could_not_create_stream_for_chromecast": "Could not create a stream for Chromecast",
-    "message_from_server": "Message from Server: {{message}}",
+    "message_from_server": "Message from server: {{message}}",
+    "video_has_finished_playing": "Video has finished playing!",
+    "no_video_source": "No video source...",
     "next_episode": "Next Episode",
-    "continue_watching": "Continue Watching",
-    "go_back": "Go Back",
-    "downloaded_file_title": "You have this file downloaded",
-    "downloaded_file_message": "Do you want to play the downloaded file?",
-    "downloaded_file_yes": "Yes",
-    "downloaded_file_no": "No",
-    "downloaded_file_cancel": "Cancel",
-    "playback_options_title": "Playback Options",
-    "mpv_subtitle_settings_title": "MPV Subtitle Settings",
-    "mpv_subtitle_settings_description": "Advanced subtitle customization for MPV player",
-    "subtitle_scale": "Subtitle Scale",
-    "vertical_margin": "Vertical Margin",
-    "horizontal_alignment": "Horizontal Alignment",
-    "vertical_alignment": "Vertical Alignment",
-    "alignment_left": "Left",
-    "alignment_center": "Center",
-    "alignment_right": "Right",
-    "alignment_top": "Top",
-    "alignment_bottom": "Bottom",
-    "mpv_player_title": "MPV Player"
+    "refresh_tracks": "Refresh Tracks",
+    "subtitle_tracks": "Subtitle Tracks:",
+    "audio_tracks": "Audio Tracks:",
+    "playback_state": "Playback State:",
+    "no_data_available": "No data available",
+    "index": "Index:"
   },
   "item_card": {
-    "next_up": "Next Up",
-    "no_items_to_display": "No Items to Display",
+    "next_up": "Next up",
+    "no_items_to_display": "No items to display",
     "cast_and_crew": "Cast & Crew",
     "series": "Series",
     "seasons": "Seasons",
@@ -603,17 +363,16 @@
     "no_episodes_for_this_season": "No episodes for this season",
     "overview": "Overview",
     "more_with": "More with {{name}}",
-    "similar_items": "Similar Items",
-    "no_similar_items_found": "No Similar Items Found",
+    "similar_items": "Similar items",
+    "no_similar_items_found": "No similar items found",
     "video": "Video",
-    "more_details": "More Details",
-    "media_options": "Media Options",
+    "more_details": "More details",
     "quality": "Quality",
     "audio": "Audio",
-    "subtitles": "Subtitles",
-    "show_more": "Show More",
-    "show_less": "Show Less",
-    "appeared_in": "Appeared In",
+    "subtitles": "Subtitle",
+    "show_more": "Show more",
+    "show_less": "Show less",
+    "appeared_in": "Appeared in",
     "could_not_load_item": "Could not load item",
     "none": "None",
     "download": {
@@ -621,36 +380,38 @@
       "download_series": "Download Series",
       "download_episode": "Download Episode",
       "download_movie": "Download Movie",
-      "download_x_item": "Download {{item_count}} Items",
-      "download_unwatched_only": "Unwatched Only",
-      "download_button": "Download"
+      "download_x_item": "Download {{item_count}} items",
+      "download_button": "Download",
+      "using_optimized_server": "Using optimized server",
+      "using_default_method": "Using default method"
     }
   },
   "live_tv": {
     "next": "Next",
     "previous": "Previous",
-    "coming_soon": "Coming Soon",
-    "on_now": "On Now",
+    "live_tv": "Live TV",
+    "coming_soon": "Coming soon",
+    "on_now": "On now",
     "shows": "Shows",
     "movies": "Movies",
     "sports": "Sports",
     "for_kids": "For Kids",
     "news": "News"
   },
-  "seerr": {
+  "jellyseerr": {
     "confirm": "Confirm",
     "cancel": "Cancel",
     "yes": "Yes",
     "whats_wrong": "What's wrong?",
-    "issue_type": "Issue Type",
-    "select_an_issue": "Select an Issue",
+    "issue_type": "Issue type",
+    "select_an_issue": "Select an issue",
     "types": "Types",
-    "describe_the_issue": "(Optional) Describe the Issue...",
+    "describe_the_issue": "(optional) Describe the issue...",
     "submit_button": "Submit",
-    "report_issue_button": "Report Issue",
+    "report_issue_button": "Report issue",
     "request_button": "Request",
     "are_you_sure_you_want_to_request_all_seasons": "Are you sure you want to request all seasons?",
-    "failed_to_login": "Failed to log in",
+    "failed_to_login": "Failed to login",
     "cast": "Cast",
     "details": "Details",
     "status": "Status",
@@ -665,33 +426,25 @@
     "production_country": "Production Country",
     "studios": "Studios",
     "network": "Network",
-    "currently_streaming_on": "Currently Streaming On",
+    "currently_streaming_on": "Currently Streaming on",
     "advanced": "Advanced",
     "request_as": "Request As",
     "tags": "Tags",
     "quality_profile": "Quality Profile",
     "root_folder": "Root Folder",
-    "season_all": "Season (All)",
+    "season_x": "Season {{seasons}}",
     "season_number": "Season {{season_number}}",
     "number_episodes": "{{episode_number}} Episodes",
     "born": "Born",
     "appearances": "Appearances",
-    "approve": "Approve",
-    "decline": "Decline",
-    "requested_by": "Requested by {{user}}",
-    "unknown_user": "Unknown User",
     "toasts": {
-      "seerr_does_not_meet_requirements": "Seerr server does not meet minimum version requirements! Please update to at least 2.0.0",
-      "seerr_test_failed": "Seerr test failed. Please try again.",
-      "failed_to_test_seerr_server_url": "Failed to test Seerr server URL",
-      "issue_submitted": "Issue Submitted!",
+      "jellyseer_does_not_meet_requirements": "Jellyseerr server does not meet minimum version requirements! Please update to at least 2.0.0",
+      "jellyseerr_test_failed": "Jellyseerr test failed. Please try again.",
+      "failed_to_test_jellyseerr_server_url": "Failed to test jellyseerr server url",
+      "issue_submitted": "Issue submitted!",
       "requested_item": "Requested {{item}}!",
       "you_dont_have_permission_to_request": "You don't have permission to request!",
-      "something_went_wrong_requesting_media": "Something went wrong requesting media!",
-      "request_approved": "Request Approved!",
-      "request_declined": "Request Declined!",
-      "failed_to_approve_request": "Failed to approve request",
-      "failed_to_decline_request": "Failed to decline request"
+      "something_went_wrong_requesting_media": "Something went wrong requesting media!"
     }
   },
   "tabs": {
@@ -701,128 +454,14 @@
     "custom_links": "Custom Links",
     "favorites": "Favorites"
   },
-  "music": {
-    "title": "Music",
-    "tabs": {
-      "suggestions": "Suggestions",
-      "albums": "Albums",
-      "artists": "Artists",
-      "playlists": "Playlists",
-      "tracks": "Tracks"
-    },
-    "filters": {
-      "all": "All"
-    },
-    "recently_added": "Recently Added",
-    "recently_played": "Recently Played",
-    "frequently_played": "Frequently Played",
-    "explore": "Explore",
-    "top_tracks": "Top Tracks",
-    "play": "Play",
-    "shuffle": "Shuffle",
-    "play_top_tracks": "Play Top Tracks",
-    "no_suggestions": "No suggestions available",
-    "no_albums": "No albums found",
-    "no_artists": "No artists found",
-    "no_playlists": "No playlists found",
-    "album_not_found": "Album not found",
-    "artist_not_found": "Artist not found",
-    "playlist_not_found": "Playlist not found",
-    "track_options": {
-      "play_next": "Play Next",
-      "add_to_queue": "Add to Queue",
-      "add_to_playlist": "Add to Playlist",
-      "download": "Download",
-      "downloaded": "Downloaded",
-      "downloading": "Downloading...",
-      "cached": "Cached",
-      "delete_download": "Delete Download",
-      "delete_cache": "Remove from Cache",
-      "go_to_artist": "Go to Artist",
-      "go_to_album": "Go to Album",
-      "add_to_favorites": "Add to Favorites",
-      "remove_from_favorites": "Remove from Favorites",
-      "remove_from_playlist": "Remove from Playlist"
-    },
-    "playlists": {
-      "create_playlist": "Create Playlist",
-      "playlist_name": "Playlist Name",
-      "enter_name": "Enter playlist name",
-      "create": "Create",
-      "search_playlists": "Search playlists...",
-      "added_to": "Added to {{name}}",
-      "added": "Added to playlist",
-      "removed_from": "Removed from {{name}}",
-      "removed": "Removed from playlist",
-      "created": "Playlist created",
-      "create_new": "Create New Playlist",
-      "failed_to_add": "Failed to add to playlist",
-      "failed_to_remove": "Failed to remove from playlist",
-      "failed_to_create": "Failed to create playlist",
-      "delete_playlist": "Delete Playlist",
-      "delete_confirm": "Are you sure you want to delete \"{{name}}\"? This action cannot be undone.",
-      "deleted": "Playlist deleted",
-      "failed_to_delete": "Failed to delete playlist"
-    },
-    "sort": {
-      "title": "Sort By",
-      "alphabetical": "Alphabetical",
-      "date_created": "Date Created"
-    }
-  },
-  "watchlists": {
-    "title": "Watchlists",
-    "my_watchlists": "My Watchlists",
-    "public_watchlists": "Public Watchlists",
-    "create_title": "Create Watchlist",
-    "edit_title": "Edit Watchlist",
-    "create_button": "Create Watchlist",
-    "save_button": "Save Changes",
-    "delete_button": "Delete",
-    "remove_button": "Remove",
-    "cancel_button": "Cancel",
-    "name_label": "Name",
-    "name_placeholder": "Enter watchlist name",
-    "description_label": "Description",
-    "description_placeholder": "Enter description (optional)",
-    "is_public_label": "Public Watchlist",
-    "is_public_description": "Allow others to view this watchlist",
-    "allowed_type_label": "Content Type",
-    "sort_order_label": "Default Sort Order",
-    "empty_title": "No Watchlists",
-    "empty_description": "Create your first watchlist to start organizing your media",
-    "empty_watchlist": "This watchlist is empty",
-    "empty_watchlist_hint": "Add items from your library to this watchlist",
-    "not_configured_title": "Streamystats Not Configured",
-    "not_configured_description": "Configure Streamystats in settings to use watchlists",
-    "go_to_settings": "Go to Settings",
-    "add_to_watchlist": "Add to Watchlist",
-    "remove_from_watchlist": "Remove from Watchlist",
-    "select_watchlist": "Select Watchlist",
-    "create_new": "Create New Watchlist",
-    "item": "item",
-    "items": "items",
-    "public": "Public",
-    "private": "Private",
-    "you": "You",
-    "by_owner": "By another user",
-    "not_found": "Watchlist not found",
-    "delete_confirm_title": "Delete Watchlist",
-    "delete_confirm_message": "Are you sure you want to delete \"{{name}}\"? This action cannot be undone.",
-    "remove_item_title": "Remove from Watchlist",
-    "remove_item_message": "Remove \"{{name}}\" from this watchlist?",
-    "loading": "Loading watchlists...",
-    "no_compatible_watchlists": "No compatible watchlists",
-    "create_one_first": "Create a watchlist that accepts this content type"
-  },
-  "playback_speed": {
-    "title": "Playback Speed",
-    "apply_to": "Apply To",
-    "speed": "Speed",
-    "scope": {
-      "media": "This media only",
-      "show": "This show",
-      "all": "All media (default)"
-    }
+  "chromecast": {
+    "no_devices_available": "No Google Cast devices available.",
+    "are_you_on_same_network": "Are you on the same network?",
+    "no_device_selected": "No device selected",
+    "click_icon_to_connect": "Click icon to connect.",
+    "establishing_connection": "Establishing connection...",
+    "no_media_selected": "No media selected.",
+    "start_playing": "Start playing any media",
+    "go_home": "Go Home"
   }
 }

utils/_jellyseerr/useJellyseerrCanRequest.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useSeerr } from "@/hooks/useSeerr";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
 import {
   MediaRequestStatus,
   MediaStatus,
@@ -18,13 +18,13 @@ import type MediaRequest from "../jellyseerr/server/entity/MediaRequest";
 import type { MovieDetails } from "../jellyseerr/server/models/Movie";
 import type { TvDetails } from "../jellyseerr/server/models/Tv";
 
-export const useSeerrCanRequest = (
+export const useJellyseerrCanRequest = (
   item?: MovieResult | TvResult | MovieDetails | TvDetails | PersonCreditCast,
 ) => {
-  const { seerrUser } = useSeerr();
+  const { jellyseerrUser } = useJellyseerr();
 
   const canRequest = useMemo(() => {
-    if (!seerrUser || !item) return false;
+    if (!jellyseerrUser || !item) return false;
 
     const canNotRequest =
       item?.mediaInfo?.requests?.some(
@@ -46,22 +46,22 @@ export const useSeerrCanRequest = (
           ? Permission.REQUEST_MOVIE
           : Permission.REQUEST_TV,
       ],
-      seerrUser.permissions,
+      jellyseerrUser.permissions,
       { type: "or" },
     );
 
     return userHasPermission && !canNotRequest;
-  }, [item, seerrUser]);
+  }, [item, jellyseerrUser]);
 
   const hasAdvancedRequestPermission = useMemo(() => {
-    if (!seerrUser) return false;
+    if (!jellyseerrUser) return false;
 
     return hasPermission(
       [Permission.REQUEST_ADVANCED, Permission.MANAGE_REQUESTS],
-      seerrUser.permissions,
+      jellyseerrUser.permissions,
       { type: "or" },
     );
-  }, [seerrUser]);
+  }, [jellyseerrUser]);
 
   return [canRequest, hasAdvancedRequestPermission];
 };

utils/atoms/settings.ts

@@ -174,7 +174,7 @@ export type Settings = {
   disableHapticFeedback: boolean;
   subtitleSize: number;
   safeAreaInControlsEnabled: boolean;
-  seerrServerUrl?: string;
+  jellyseerrServerUrl?: string;
   useKefinTweaks: boolean;
   hiddenLibraries?: string[];
   enableH265ForChromecast: boolean;
@@ -259,7 +259,7 @@ export const defaultValues: Settings = {
   disableHapticFeedback: false,
   subtitleSize: 100, // Scale value * 100, so 100 = 1.0x
   safeAreaInControlsEnabled: true,
-  seerrServerUrl: undefined,
+  jellyseerrServerUrl: undefined,
   useKefinTweaks: false,
   hiddenLibraries: [],
   enableH265ForChromecast: false,

utils/bToMb.ts

@@ -0,0 +1,18 @@
+/**
+ * Convert bits to megabits or gigabits
+ *
+ * Return nice looking string
+ * If under 1000Mb, return XXXMB, else return X.XGB
+ */
+
+export function convertBitsToMegabitsOrGigabits(bits?: number | null): string {
+  if (!bits) return "0MB";
+
+  const megabits = bits / 1000000;
+
+  if (megabits < 1000) {
+    return `${Math.round(megabits)}MB`;
+  }
+  const gigabits = megabits / 1000;
+  return `${gigabits.toFixed(1)}GB`;
+}

utils/chromecastLoadMedia.ts

@@ -0,0 +1,60 @@
+import { SelectedOptions } from "@/components/ItemContent";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { RemoteMediaClient, WebImage } from "react-native-google-cast";
+import { ticksToSeconds } from "./time";
+
+export function chromecastLoadMedia({
+  client,
+  item,
+  contentUrl,
+  sessionId,
+  mediaSourceId,
+  images,
+  playbackOptions,
+}: {
+  client: RemoteMediaClient;
+  item: BaseItemDto;
+  contentUrl: string;
+  sessionId?: string;
+  mediaSourceId?: string;
+  images: WebImage[];
+  playbackOptions: SelectedOptions;
+}) {
+  return client.loadMedia({
+    mediaInfo: {
+      contentId: item.Id,
+      contentUrl,
+      contentType: "video/mp4",
+      customData: {
+        item,
+        playbackOptions,
+        sessionId,
+        mediaSourceId,
+      },
+      metadata:
+        item.Type === "Episode"
+          ? {
+              type: "tvShow",
+              title: item.Name || "",
+              episodeNumber: item.IndexNumber || 0,
+              seasonNumber: item.ParentIndexNumber || 0,
+              seriesTitle: item.SeriesName || "",
+              images,
+            }
+          : item.Type === "Movie"
+          ? {
+              type: "movie",
+              title: item.Name || "",
+              subtitle: item.Overview || "",
+              images,
+            }
+          : {
+              type: "generic",
+              title: item.Name || "",
+              subtitle: item.Overview || "",
+              images,
+            },
+    },
+    startTime: ticksToSeconds(item.UserData?.PlaybackPositionTicks) || 0,
+  });
+}

utils/collectionTypeToItemType.ts

@@ -0,0 +1,47 @@
+import {
+  BaseItemKind,
+  CollectionType,
+} from "@jellyfin/sdk/lib/generated-client";
+
+/**
+ * Converts a ColletionType to a BaseItemKind (also called ItemType)
+ *
+ * CollectionTypes
+ *  readonly Unknown: "unknown";
+    readonly Movies: "movies";
+    readonly Tvshows: "tvshows";
+    readonly Trailers: "trailers";
+    readonly Homevideos: "homevideos";
+    readonly Boxsets: "boxsets";
+    readonly Books: "books";
+    readonly Photos: "photos";
+    readonly Livetv: "livetv";
+    readonly Playlists: "playlists";
+    readonly Folders: "folders";
+ */
+export const colletionTypeToItemType = (
+  collectionType?: CollectionType | null,
+): BaseItemKind | undefined => {
+  if (!collectionType) return undefined;
+
+  switch (collectionType) {
+    case CollectionType.Movies:
+      return BaseItemKind.Movie;
+    case CollectionType.Tvshows:
+      return BaseItemKind.Series;
+    case CollectionType.Homevideos:
+      return BaseItemKind.Video;
+    case CollectionType.Books:
+      return BaseItemKind.Book;
+    case CollectionType.Playlists:
+      return BaseItemKind.Playlist;
+    case CollectionType.Folders:
+      return BaseItemKind.Folder;
+    case CollectionType.Photos:
+      return BaseItemKind.Photo;
+    case CollectionType.Trailers:
+      return BaseItemKind.Trailer;
+  }
+
+  return undefined;
+};

utils/hls/parseM3U8ForSubtitles.ts

@@ -0,0 +1,56 @@
+import axios from "axios";
+
+export interface SubtitleTrack {
+  index: number;
+  name: string;
+  uri: string;
+  language: string;
+  default: boolean;
+  forced: boolean;
+  autoSelect: boolean;
+}
+
+export async function parseM3U8ForSubtitles(
+  url: string,
+): Promise<SubtitleTrack[]> {
+  try {
+    const response = await axios.get(url, { responseType: "text" });
+    const lines = response.data.split(/\r?\n/);
+    const subtitleTracks: SubtitleTrack[] = [];
+    let index = 0;
+
+    lines.forEach((line: string) => {
+      if (line.startsWith("#EXT-X-MEDIA:TYPE=SUBTITLES")) {
+        const attributes = parseAttributes(line);
+        const track: SubtitleTrack = {
+          index: index++,
+          name: attributes.NAME || "",
+          uri: attributes.URI || "",
+          language: attributes.LANGUAGE || "",
+          default: attributes.DEFAULT === "YES",
+          forced: attributes.FORCED === "YES",
+          autoSelect: attributes.AUTOSELECT === "YES",
+        };
+        subtitleTracks.push(track);
+      }
+    });
+
+    return subtitleTracks;
+  } catch (error) {
+    console.error("Failed to fetch or parse the M3U8 file:", error);
+    throw error;
+  }
+}
+
+function parseAttributes(line: string): { [key: string]: string } {
+  const attributes: { [key: string]: string } = {};
+  const regex = /([A-Z-]+)=(?:"([^"]*)"|([^,]*))/g;
+
+  for (const match of line.matchAll(regex)) {
+    const key = match[1];
+    const value = match[2] ?? match[3]; // quoted or unquoted
+    attributes[key] = value;
+  }
+
+  return attributes;
+}