Merge branch 'master' into feat/i18n

2025-08-20 18:37:18 +02:00 · 2024-12-31 12:24:28 -05:00
parent fe9c73a8f0 a0391b484d
commit 3e8e8e1163
33 changed files with 1223 additions and 703 deletions
--- a/README.md
+++ b/README.md
@@ -15,10 +15,10 @@ Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Exp

 - 🚀 **Skp intro / credits support**
 - 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking.
- 📺 **Picture in Picture** (iPhone only): Watch movies in PiP mode on your iPhone.
 - 🔊 **Background audio**: Stream music in the background, even when locking the phone.
 - 📥 **Download media** (Experimental): Save your media locally and watch it offline.
 - 📡 **Chromecast** (Experimental): Cast your media to any Chromecast-enabled device.
+- 🤖 **Jellyseerr integration**: Request media directly in the app.

 ## 🧪 Experimental Features

@@ -70,11 +70,9 @@ Or download the APKs [here on GitHub](https://github.com/fredrikburmester/stream

 ### Beta testing

-Get the latest updates by using the TestFlight version of the app.
+To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and i'll know that you have subscribed. This is where i'll post APKs and IPAs. This won't give automatic access to the TestFlight however, so you need to send me a DM with the email you use for Apple so that i can manually add you.

-<a href="https://testflight.apple.com/join/CWBaAAK2">
-  <img height=75 alt="Get the beta on TestFlight" src="./assets/Get_the_beta_on_Testflight.svg"/>
-</a>
+ **Note**: Everyone who is actively contributing to the source code of Streamyfin will have automatic access to the betas.

 ## 🚀 Getting Started

@@ -89,36 +87,10 @@ We welcome any help to make Streamyfin better. If you'd like to contribute, plea

 ### Development info

-1. Use node `20`
-2. Install dependencies `bun i`
-3. Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`.
-
-## Extended chromecast controls
-
-Add this to AppDelegate.mm:
-
-```
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
-{
-// @generated begin react-native-google-cast-didFinishLaunchingWithOptions - expo prebuild (DO NOT MODIFY) sync-8901be60b982d2ae9c658b1e8c50634d61bb5091
-#if __has_include(<GoogleCast/GoogleCast.h>)
-...
-
-[GCKCastContext sharedInstance].useDefaultExpandedMediaControls = true;`
-#endif
-```
-
-Add this to Info.plist:
-
-```
-<key>NSBonjourServices</key>
-<array>
-  <string>_googlecast._tcp</string>
-  <string>_CC1AD845._googlecast._tcp</string>
-</array>
-<key>NSLocalNetworkUsageDescription</key>
-<string>${PRODUCT_NAME} uses the local network to discover Cast-enabled devices on your WiFi network.</string>
-```
+1. Use node `>20`
+2. Install dependencies `bun i && bun run submodule-reload`
+3. Make sure you have xcode and/or android studio installed.
+4. Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`. This will open a simulator on you computer and run the app.

 ## 📄 License

@@ -153,6 +125,7 @@ I'd like to thank the following people and projects for their contributions to S

 - [Reiverr](https://github.com/aleksilassila/reiverr) for great help with understanding the Jellyfin API.
 - [Jellyfin TS SDK](https://github.com/jellyfin/jellyfin-sdk-typescript) for the TypeScript SDK.
+- [Jellyseerr](https://github.com/Fallenbagel/jellyseerr) for enabling API integration with their project.
 - The Jellyfin devs for always being helpful in the Discord.

 ## Star History
--- a/app/(auth)/(tabs)/(home,libraries,search)/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/jellyseerr/page.tsx
@@ -1,40 +1,62 @@
-import React, {useCallback, useRef, useState} from "react";
-import {useLocalSearchParams} from "expo-router";
-import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
-import {Text} from "@/components/common/Text";
-import {ParallaxScrollView} from "@/components/ParallaxPage";
-import {Image} from "expo-image";
-import {TouchableOpacity, View} from "react-native";
-import {Ionicons} from "@expo/vector-icons";
-import {useSafeAreaInsets} from "react-native-safe-area-context";
-import {OverviewText} from "@/components/OverviewText";
-import {GenreTags} from "@/components/GenreTags";
-import {MediaType} from "@/utils/jellyseerr/server/constants/media";
-import {useQuery} from "@tanstack/react-query";
-import {useJellyseerr} from "@/hooks/useJellyseerr";
-import {Button} from "@/components/Button";
-import {BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModal, BottomSheetView} from "@gorhom/bottom-sheet";
-import {IssueType, IssueTypeName} from "@/utils/jellyseerr/server/constants/issue";
+import React, { useCallback, useRef, useState } from "react";
+import { useLocalSearchParams } from "expo-router";
+import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
+import { Text } from "@/components/common/Text";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { Image } from "expo-image";
+import { TouchableOpacity, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { OverviewText } from "@/components/OverviewText";
+import { GenreTags } from "@/components/GenreTags";
+import { MediaType } from "@/utils/jellyseerr/server/constants/media";
+import { useQuery } from "@tanstack/react-query";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { Button } from "@/components/Button";
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import {
+  IssueType,
+  IssueTypeName,
+} from "@/utils/jellyseerr/server/constants/issue";
 import * as DropdownMenu from "zeego/dropdown-menu";
-import {Input} from "@/components/common/Input";
-import {TvDetails} from "@/utils/jellyseerr/server/models/Tv";
+import { Input } from "@/components/common/Input";
+import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
-import {JellyserrRatings} from "@/components/Ratings";
+import { JellyserrRatings } from "@/components/Ratings";

 const Page: React.FC = () => {
  const insets = useSafeAreaInsets();
  const params = useLocalSearchParams();
-  const {mediaTitle, releaseYear, canRequest: canRequestString, posterSrc, ...result} =
-    params as unknown as {mediaTitle: string, releaseYear: number, canRequest: string, posterSrc: string} & Partial<MovieResult |  TvResult>;
+  const {
+    mediaTitle,
+    releaseYear,
+    canRequest: canRequestString,
+    posterSrc,
+    ...result
+  } = params as unknown as {
+    mediaTitle: string;
+    releaseYear: number;
+    canRequest: string;
+    posterSrc: string;
+  } & Partial<MovieResult | TvResult>;

  const canRequest = canRequestString === "true";
-  const {jellyseerrApi, requestMedia} = useJellyseerr();
+  const { jellyseerrApi, requestMedia } = useJellyseerr();

  const [issueType, setIssueType] = useState<IssueType>();
  const [issueMessage, setIssueMessage] = useState<string>();
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

-  const {data: details, isLoading} = useQuery({
+  const {
+    data: details,
+    isFetching,
+    isLoading,
+  } = useQuery({
    enabled: !!jellyseerrApi && !!result && !!result.id,
    queryKey: ["jellyseerr", "detail", result.mediaType, result.id],
    staleTime: 0,
@@ -45,8 +67,8 @@ const Page: React.FC = () => {
    queryFn: async () => {
      return result.mediaType === MediaType.MOVIE
        ? jellyseerrApi?.movieDetails(result.id!!)
-        : jellyseerrApi?.tvDetails(result.id!!)
-    }
+        : jellyseerrApi?.tvDetails(result.id!!);
+    },
  });

  const renderBackdrop = useCallback(
@@ -62,23 +84,30 @@ const Page: React.FC = () => {

  const submitIssue = useCallback(() => {
    if (result.id && issueType && issueMessage && details) {
-      jellyseerrApi?.submitIssue(details.mediaInfo.id, Number(issueType), issueMessage)
+      jellyseerrApi
+        ?.submitIssue(details.mediaInfo.id, Number(issueType), issueMessage)
        .then(() => {
-          setIssueType(undefined)
-          setIssueMessage(undefined)
-          bottomSheetModalRef?.current?.close()
-        })
+          setIssueType(undefined);
+          setIssueMessage(undefined);
+          bottomSheetModalRef?.current?.close();
+        });
    }
-  }, [jellyseerrApi, details, result, issueType, issueMessage])
+  }, [jellyseerrApi, details, result, issueType, issueMessage]);

-  const request = useCallback(() => requestMedia(mediaTitle, {
-    mediaId: Number(result.id!!),
-    mediaType: result.mediaType!!,
-    tvdbId: details?.externalIds?.tvdbId,
-    seasons: (details as TvDetails)?.seasons.filter(s => s.seasonNumber !== 0).map(s => s.seasonNumber)
-  }), [details, result, requestMedia]);
+  const request = useCallback(
+    () =>
+      requestMedia(mediaTitle, {
+        mediaId: Number(result.id!!),
+        mediaType: result.mediaType!!,
+        tvdbId: details?.externalIds?.tvdbId,
+        seasons: (details as TvDetails)?.seasons
+          ?.filter?.((s) => s.seasonNumber !== 0)
+          ?.map?.((s) => s.seasonNumber),
+      }),
+    [details, result, requestMedia]
+  );

-  return  (
+  return (
    <View
      className="flex-1 relative"
      style={{
@@ -115,7 +144,7 @@ const Page: React.FC = () => {
                  name="image-outline"
                  size={24}
                  color="white"
-                  style={{opacity: 0.4}}
+                  style={{ opacity: 0.4 }}
                />
              </View>
            )}
@@ -123,12 +152,18 @@ const Page: React.FC = () => {
        }
      >
        <View className="flex flex-col">
-          <View className="p-4 space-y-4">
-            <>
+          <View className="space-y-4">
+            <View className="px-4">
              <View className="flex flex-row justify-between w-full">
                <View className="flex flex-col w-56">
-                  <JellyserrRatings result={(result as MovieResult | TvResult)}/>
-                  <Text uiTextView selectable className="font-bold text-2xl mb-1">{mediaTitle}</Text>
+                  <JellyserrRatings result={result as MovieResult | TvResult} />
+                  <Text
+                    uiTextView
+                    selectable
+                    className="font-bold text-2xl mb-1"
+                  >
+                    {mediaTitle}
+                  </Text>
                  <Text className="opacity-50">{releaseYear}</Text>
                </View>
                <Image
@@ -140,34 +175,39 @@ const Page: React.FC = () => {
                  }}
                />
              </View>
-            </>
-            <GenreTags genres={details?.genres?.map(g => g.name) || []} />
-            {canRequest ?
-              <Button color="purple" onPress={request}>Request</Button>
-              :
-              <Button
-                className="bg-yellow-500/50 border-yellow-400 ring-yellow-400 text-yellow-100"
-                color="transparent"
-                onPress={() => bottomSheetModalRef?.current?.present()}
-                iconLeft={
-                  <Ionicons name="warning-outline" size={24} color="white"/>
-                }
-                style={{
-                  borderWidth: 1,
-                  borderStyle: "solid",
-                }}>
-                Report issue
-              </Button>
-            }
-            <OverviewText text={result.overview} className="mb-4" />
+              <View className="mb-4">
+                <GenreTags genres={details?.genres?.map((g) => g.name) || []} />
+              </View>
+              {canRequest ? (
+                <Button color="purple" onPress={request}>
+                  Request
+                </Button>
+              ) : (
+                <Button
+                  className="bg-yellow-500/50 border-yellow-400 ring-yellow-400 text-yellow-100"
+                  color="transparent"
+                  onPress={() => bottomSheetModalRef?.current?.present()}
+                  iconLeft={
+                    <Ionicons name="warning-outline" size={24} color="white" />
+                  }
+                  style={{
+                    borderWidth: 1,
+                    borderStyle: "solid",
+                  }}
+                >
+                  Report issue
+                </Button>
+              )}
+              <OverviewText text={result.overview} className="mt-4" />
+            </View>

-            {result.mediaType === MediaType.TV &&
-                <JellyseerrSeasons
-                    isLoading={isLoading}
-                    result={result as TvResult}
-                    details={details as TvDetails}
-                />
-            }
+            {result.mediaType === MediaType.TV && (
+              <JellyseerrSeasons
+                isLoading={isLoading || isFetching}
+                result={result as TvResult}
+                details={details as TvDetails}
+              />
+            )}
          </View>
        </View>
      </ParallaxScrollView>
@@ -185,17 +225,23 @@ const Page: React.FC = () => {
        <BottomSheetView>
          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
            <View>
-              <Text className="font-bold text-2xl text-neutral-100">Whats wrong?</Text>
+              <Text className="font-bold text-2xl text-neutral-100">
+                Whats wrong?
+              </Text>
            </View>
            <View className="flex flex-col space-y-2 items-start">
              <View className="flex flex-col">
                <DropdownMenu.Root>
                  <DropdownMenu.Trigger>
                    <View className="flex flex-col">
-                      <Text className="opacity-50 mb-1 text-xs">Issue Type</Text>
+                      <Text className="opacity-50 mb-1 text-xs">
+                        Issue Type
+                      </Text>
                      <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
                        <Text style={{}} className="" numberOfLines={1}>
-                          {issueType ? IssueTypeName[issueType] : 'Select an issue' }
+                          {issueType
+                            ? IssueTypeName[issueType]
+                            : "Select an issue"}
                        </Text>
                      </TouchableOpacity>
                    </View>
@@ -210,14 +256,20 @@ const Page: React.FC = () => {
                    sideOffset={0}
                  >
                    <DropdownMenu.Label>Types</DropdownMenu.Label>
-                    {Object.entries(IssueTypeName).reverse().map(([key, value], idx) => (
-                      <DropdownMenu.Item
-                        key={value}
-                        onSelect={() => setIssueType(key as unknown as IssueType)}
-                      >
-                        <DropdownMenu.ItemTitle>{value}</DropdownMenu.ItemTitle>
-                      </DropdownMenu.Item>
-                    ))}
+                    {Object.entries(IssueTypeName)
+                      .reverse()
+                      .map(([key, value], idx) => (
+                        <DropdownMenu.Item
+                          key={value}
+                          onSelect={() =>
+                            setIssueType(key as unknown as IssueType)
+                          }
+                        >
+                          <DropdownMenu.ItemTitle>
+                            {value}
+                          </DropdownMenu.ItemTitle>
+                        </DropdownMenu.Item>
+                      ))}
                  </DropdownMenu.Content>
                </DropdownMenu.Root>
              </View>
@@ -234,11 +286,7 @@ const Page: React.FC = () => {
                onChangeText={setIssueMessage}
              />
            </View>
-            <Button
-              className="mt-auto"
-              onPress={submitIssue}
-              color="purple"
-            >
+            <Button className="mt-auto" onPress={submitIssue} color="purple">
              Submit
            </Button>
          </View>
@@ -246,6 +294,6 @@ const Page: React.FC = () => {
      </BottomSheetModal>
    </View>
  );
-}
+};

-export default Page;
+export default Page;
--- a/app/(auth)/(tabs)/(home,libraries,search)/series/[id].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/series/[id].tsx
@@ -1,8 +1,11 @@
 import { Text } from "@/components/common/Text";
 import { DownloadItems } from "@/components/DownloadItem";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { Ratings } from "@/components/Ratings";
 import { NextUp } from "@/components/series/NextUp";
 import { SeasonPicker } from "@/components/series/SeasonPicker";
+import { SeriesActions } from "@/components/series/SeriesActions";
+import { SeriesHeader } from "@/components/series/SeriesHeader";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
@@ -70,6 +73,7 @@ const page: React.FC = () => {
      });
      return res?.data.Items || [];
    },
+    staleTime: 60,
    enabled: !!api && !!user?.Id && !!item?.Id,
  });

@@ -133,10 +137,7 @@ const page: React.FC = () => {
      }
    >
      <View className="flex flex-col pt-4">
-        <View className="px-4 py-4">
-          <Text className="text-3xl font-bold">{item?.Name}</Text>
-          <Text className="">{item?.Overview}</Text>
-        </View>
+        <SeriesHeader item={item} />
        <View className="mb-4">
          <NextUp seriesId={seriesId} />
        </View>
--- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
+++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
@@ -144,8 +144,6 @@ const Page = () => {
    }): Promise<BaseItemDtoQueryResult | null> => {
      if (!api || !library) return null;

-      console.log("[libraryId] ~", library);
-
      let itemType: BaseItemKind | undefined;

      // This fix makes sure to only return 1 type of items, if defined.
--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/app/(auth)/(tabs)/(search)/index.tsx
@@ -30,16 +30,16 @@ import React, {
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDebounce } from "use-debounce";
-import {useJellyseerr} from "@/hooks/useJellyseerr";
-import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
-import {MediaType} from "@/utils/jellyseerr/server/constants/media";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
+import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import {Tag} from "@/components/GenreTags";
+import { Tag } from "@/components/GenreTags";
 import DiscoverSlide from "@/components/jellyseerr/DiscoverSlide";
-import {sortBy} from "lodash";
 import { useTranslation } from "react-i18next";
+import {sortBy} from "lodash";

-type SearchType = 'Library' | 'Discover';
+type SearchType = "Library" | "Discover";

 const exampleSearches = [
  "Lord of the rings",
@@ -155,29 +155,41 @@ export default function search() {
      const response = await jellyseerrApi?.search({
        query: new URLSearchParams(debouncedSearch).toString(),
        page: 1, // todo: maybe rework page & page-size if first results are not enough...
-        language: 'en'
-      })
+        language: "en",
+      });

      return response?.results;
    },
-    enabled: !!jellyseerrApi && searchType === "Discover" && debouncedSearch.length > 0,
+    enabled:
+      !!jellyseerrApi &&
+      searchType === "Discover" &&
+      debouncedSearch.length > 0,
  });

  const { data: jellyseerrDiscoverSettings, isFetching: j2 } = useQuery({
    queryKey: ["search", "jellyseerrDiscoverSettings", debouncedSearch],
    queryFn: async () => jellyseerrApi?.discoverSettings(),
-    enabled: !!jellyseerrApi && searchType === "Discover" && debouncedSearch.length == 0,
+    enabled:
+      !!jellyseerrApi &&
+      searchType === "Discover" &&
+      debouncedSearch.length == 0,
  });

-  const jellyseerrMovieResults: MovieResult[] | undefined = useMemo(() =>
-      jellyseerrResults?.filter(r => r.mediaType === MediaType.MOVIE) as MovieResult[],
+  const jellyseerrMovieResults: MovieResult[] | undefined = useMemo(
+    () =>
+      jellyseerrResults?.filter(
+        (r) => r.mediaType === MediaType.MOVIE
+      ) as MovieResult[],
    [jellyseerrResults]
-  )
+  );

-  const jellyseerrTvResults: TvResult[] | undefined = useMemo(() =>
-      jellyseerrResults?.filter(r => r.mediaType === MediaType.TV) as TvResult[],
+  const jellyseerrTvResults: TvResult[] | undefined = useMemo(
+    () =>
+      jellyseerrResults?.filter(
+        (r) => r.mediaType === MediaType.TV
+      ) as TvResult[],
    [jellyseerrResults]
-  )
+  );

  const { data: series, isFetching: l2 } = useQuery({
    queryKey: ["search", "series", debouncedSearch],
@@ -262,7 +274,17 @@ export default function search() {
      jellyseerrMovieResults?.length ||
      jellyseerrTvResults?.length
    );
-  }, [artists, episodes, albums, songs, movies, series, collections, actors, jellyseerrResults]);
+  }, [
+    artists,
+    episodes,
+    albums,
+    songs,
+    movies,
+    series,
+    collections,
+    actors,
+    jellyseerrResults,
+  ]);

  const loading = useMemo(() => {
    return l1 || l2 || l3 || l4 || l5 || l6 || l7 || l8 || j1 || j2;
@@ -292,14 +314,24 @@ export default function search() {
            </View>
          )}
          {jellyseerrApi && (
-            <View className="flex flex-row flex-wrap space-x-2 px-4">
-              <TouchableOpacity onPress={() => setSearchType('Library')}>
-                <Tag text="Library" textClass="p-1"
-                     className={searchType === "Library" ? "bg-neutral-600" : undefined}/>
+            <View className="flex flex-row flex-wrap space-x-2 px-4 mb-2">
+              <TouchableOpacity onPress={() => setSearchType("Library")}>
+                <Tag
+                  text="Library"
+                  textClass="p-1"
+                  className={
+                    searchType === "Library" ? "bg-neutral-600" : undefined
+                  }
+                />
              </TouchableOpacity>
-              <TouchableOpacity onPress={() => setSearchType('Discover')}>
-                <Tag text="Discover" textClass="p-1"
-                     className={searchType === "Discover" ? "bg-neutral-600" : undefined}/>
+              <TouchableOpacity onPress={() => setSearchType("Discover")}>
+                <Tag
+                  text="Discover"
+                  textClass="p-1"
+                  className={
+                    searchType === "Discover" ? "bg-neutral-600" : undefined
+                  }
+                />
              </TouchableOpacity>
            </View>
          )}
@@ -321,7 +353,7 @@ export default function search() {
                    className="flex flex-col w-28 mr-2"
                    item={item}
                  >
-                    <MoviePoster item={item} key={item.Id}/>
+                    <MoviePoster item={item} key={item.Id} />
                    <Text numberOfLines={2} className="mt-2">
                      {item.Name}
                    </Text>
@@ -340,7 +372,7 @@ export default function search() {
                    item={item}
                    className="flex flex-col w-28 mr-2"
                  >
-                    <SeriesPoster item={item} key={item.Id}/>
+                    <SeriesPoster item={item} key={item.Id} />
                    <Text numberOfLines={2} className="mt-2">
                      {item.Name}
                    </Text>
@@ -359,8 +391,8 @@ export default function search() {
                    key={item.Id}
                    className="flex flex-col w-44 mr-2"
                  >
-                    <ContinueWatchingPoster item={item}/>
-                    <ItemCardText item={item}/>
+                    <ContinueWatchingPoster item={item} />
+                    <ItemCardText item={item} />
                  </TouchableItemRouter>
                )}
              />
@@ -373,7 +405,7 @@ export default function search() {
                    item={item}
                    className="flex flex-col w-28 mr-2"
                  >
-                    <MoviePoster item={item} key={item.Id}/>
+                    <MoviePoster item={item} key={item.Id} />
                    <Text numberOfLines={2} className="mt-2">
                      {item.Name}
                    </Text>
@@ -389,8 +421,8 @@ export default function search() {
                    key={item.Id}
                    className="flex flex-col w-28 mr-2"
                  >
-                    <MoviePoster item={item}/>
-                    <ItemCardText item={item}/>
+                    <MoviePoster item={item} />
+                    <ItemCardText item={item} />
                  </TouchableItemRouter>
                )}
              />
@@ -403,8 +435,8 @@ export default function search() {
                    key={item.Id}
                    className="flex flex-col w-28 mr-2"
                  >
-                    <AlbumCover id={item.Id}/>
-                    <ItemCardText item={item}/>
+                    <AlbumCover id={item.Id} />
+                    <ItemCardText item={item} />
                  </TouchableItemRouter>
                )}
              />
@@ -417,8 +449,8 @@ export default function search() {
                    key={item.Id}
                    className="flex flex-col w-28 mr-2"
                  >
-                    <AlbumCover id={item.Id}/>
-                    <ItemCardText item={item}/>
+                    <AlbumCover id={item.Id} />
+                    <ItemCardText item={item} />
                  </TouchableItemRouter>
                )}
              />
@@ -431,8 +463,8 @@ export default function search() {
                    key={item.Id}
                    className="flex flex-col w-28 mr-2"
                  >
-                    <AlbumCover id={item.AlbumId}/>
-                    <ItemCardText item={item}/>
+                    <AlbumCover id={item.AlbumId} />
+                    <ItemCardText item={item} />
                  </TouchableItemRouter>
                )}
              />
@@ -444,14 +476,14 @@ export default function search() {
                header="Request Movies"
                items={jellyseerrMovieResults}
                renderItem={(item: MovieResult) => (
-                  <JellyseerrPoster item={item} key={item.id}/>
+                  <JellyseerrPoster item={item} key={item.id} />
                )}
              />
              <SearchItemWrapper
                header="Request Series"
                items={jellyseerrTvResults}
                renderItem={(item: TvResult) => (
-                  <JellyseerrPoster item={item} key={item.id}/>
+                  <JellyseerrPoster item={item} key={item.id} />
                )}
              />
            </>
@@ -470,7 +502,7 @@ export default function search() {
                "{debouncedSearch}"
              </Text>
            </View>
-          ) : debouncedSearch.length === 0 && searchType === 'Library' ? (
+          ) : debouncedSearch.length === 0 && searchType === "Library" ? (
            <View className="mt-4 flex flex-col items-center space-y-2">
              {exampleSearches.map((e) => (
                <TouchableOpacity
@@ -482,11 +514,14 @@ export default function search() {
                </TouchableOpacity>
              ))}
            </View>
-          ) : debouncedSearch.length === 0 && searchType === 'Discover' ? (
-            <View className="mt-4 flex flex-col space-y-2 px-2">
-              {sortBy?.(jellyseerrDiscoverSettings?.filter(s => s.enabled), 'order')
-                .map((slide) => <DiscoverSlide key={slide.id} slide={slide}/>)
-              }
+          ) : debouncedSearch.length === 0 && searchType === "Discover" ? (
+            <View className="flex flex-col px-4">
+              {sortBy?.(
+                jellyseerrDiscoverSettings?.filter((s) => s.enabled),
+                "order"
+              ).map((slide) => (
+                <DiscoverSlide key={slide.id} slide={slide} />
+              ))}
            </View>
          ) : null}
        </View>
@@ -502,7 +537,12 @@ type Props<T> = {
  header?: string;
 };

-const SearchItemWrapper = <T extends unknown> ({ ids, items, renderItem, header }: PropsWithChildren<Props<T>>) => {
+const SearchItemWrapper = <T extends unknown>({
+  ids,
+  items,
+  renderItem,
+  header,
+}: PropsWithChildren<Props<T>>) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);

@@ -542,14 +582,11 @@ const SearchItemWrapper = <T extends unknown> ({ ids, items, renderItem, header
        className="px-4 mb-2"
        showsHorizontalScrollIndicator={false}
      >
-        {
-          data && data?.length > 0
-            ? data.map((item) => renderItem(item))
-            :
-          items && items?.length > 0
-            ? items.map(i => renderItem(i))
-            : undefined
-        }
+        {data && data?.length > 0
+          ? data.map((item) => renderItem(item))
+          : items && items?.length > 0
+          ? items.map((i) => renderItem(i))
+          : undefined}
      </ScrollView>
    </>
  );
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -282,13 +282,6 @@ export default function page() {

      if (!item?.Id || !stream) return;

-      console.log(
-        "onProgress ~",
-        currentTimeInTicks,
-        isPlaying,
-        `AUDIO index: ${audioIndex} SUB index" ${subtitleIndex}`
-      );
-
      await getPlaystateApi(api!).onPlaybackProgress({
        itemId: item.Id,
        audioStreamIndex: audioIndex ? audioIndex : undefined,
--- a/app/(auth)/trailer/page.tsx
+++ b/app/(auth)/trailer/page.tsx
@@ -0,0 +1,53 @@
+import { useGlobalSearchParams, useNavigation } from "expo-router";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { Button, Dimensions } from "react-native";
+import { Alert, View } from "react-native";
+import YoutubePlayer, { PLAYER_STATES } from "react-native-youtube-iframe";
+
+export default function page() {
+  const searchParams = useGlobalSearchParams();
+  const navigation = useNavigation();
+  console.log(searchParams);
+
+  const { url } = searchParams as { url: string };
+
+  const videoId = useMemo(() => {
+    return url.split("v=")[1];
+  }, [url]);
+
+  const [playing, setPlaying] = useState(false);
+
+  const onStateChange = useCallback((state: PLAYER_STATES) => {
+    if (state === "ended") {
+      setPlaying(false);
+      Alert.alert("video has finished playing!");
+    }
+  }, []);
+
+  const togglePlaying = useCallback(() => {
+    setPlaying((prev) => !prev);
+  }, []);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+
+    togglePlaying();
+  }, []);
+
+  const screenWidth = Dimensions.get("screen").width;
+  const screenHeight = Dimensions.get("screen").height;
+
+  return (
+    <View className="flex flex-col bg-black items-center justify-center h-full">
+      <YoutubePlayer
+        height={300}
+        play={playing}
+        videoId={videoId}
+        onChangeState={onStateChange}
+        width={screenWidth}
+      />
+    </View>
+  );
+}
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -348,6 +348,13 @@ function Layout() {
                                header: () => null,
                              }}
                            />
+                            <Stack.Screen
+                              name="(auth)/trailer/page"
+                              options={{
+                                presentation: "modal",
+                                title: "",
+                              }}
+                            />
                            <Stack.Screen
                              name="login"
                              options={{
--- a/assets/images/not-rotten-tomatoes.svg
+++ b/assets/images/not-rotten-tomatoes.svg
@@ -0,0 +1,65 @@
+<svg
+  type="certified"
+  viewBox="0 0 80 80"
+  preserveAspectRatio="xMidYMid"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <g transform="translate(2.29, 0)">
+    <path
+      d="M42.1942857,18.8022857 C44.3794286,18.608 49.1565714,18.7177143 51.4902857,21.0057143 C51.6297143,21.1451429 51.5085714,21.4605714 51.3097143,21.408 C47.8902857,20.4868571 42.5577143,25.0217143 39.1017143,22.0891429 C39.008,22.9485714 38.2331429,27.0857143 32.3314286,26.4731429 C32.192,26.4594286 32.1371429,26.304 32.24,26.2171429 C33.1542857,25.44 34.2765714,23.2891429 33.3142857,21.9154286 C30.3108571,23.9085714 28.7565714,23.9954286 23.2182857,21.5954286 C23.0377143,21.5177143 23.1451429,21.2228571 23.3577143,21.1748571 C24.5074286,20.9165714 27.2434286,19.9222857 29.696,19.4582857 C30.1645714,19.3691429 30.624,19.3165714 31.0674286,19.312 C28.528,18.7062857 27.4217143,18.1805714 25.7485714,18.1874286 C25.5657143,18.1897143 25.4742857,17.9611429 25.6068571,17.8354286 C28.224,15.3188571 32.9691429,15.1885714 35.2548571,17.0628571 L33.2068571,12.7862857 L35.696,12.4114286 C35.696,12.4114286 36.3451429,14.6925714 36.9257143,16.7428571 C39.5177143,13.904 43.5268571,14.192 44.8777143,16.672 C44.9577143,16.8182857 44.8251429,16.992 44.6605714,16.9622857 C43.3005714,16.7314286 42.3702857,17.8628571 42.1737143,18.7977143 L42.1942857,18.8022857"
+      id="Fill-2"
+      fill="#00912D"
+    ></path>
+    <mask id="mask-2" fill="white">
+      <polygon
+        points="0.137142857 0.921142857 75.0534777 0.921142857 75.0534777 79.8628571 0.137142857 79.8628571"
+      ></polygon>
+    </mask>
+    <path
+      d="M13.0491429,59.1817143 C9.90628571,55.3554286 7.86971429,50.576 7.51771429,44.9622857 C6.912,35.2342857 10.2354286,26.0845714 23.1794286,21.4834286 C23.1908571,21.5245714 23.1725714,21.5748571 23.2182857,21.5954286 C23.0377143,21.5177143 23.1451429,21.2228571 23.3577143,21.1748571 C24.5074286,20.9165714 27.2434286,19.92 29.696,19.4582857 C30.1645714,19.3691429 30.624,19.3165714 31.0674286,19.3097143 C28.528,18.7062857 27.4217143,18.1805714 25.7485714,18.1874286 C25.5657143,18.1897143 25.4742857,17.9611429 25.6068571,17.8331429 C28.224,15.3165714 32.9691429,15.1885714 35.2548571,17.0628571 L33.2068571,12.784 L35.696,12.4114286 C35.696,12.4114286 36.3451429,14.6902857 36.9257143,16.7428571 C39.5177143,13.904 43.5268571,14.192 44.8777143,16.672 C44.9577143,16.8182857 44.8251429,16.992 44.6605714,16.9622857 C43.3005714,16.7314286 42.3702857,17.8628571 42.1737143,18.7977143 L42.1942857,18.8022857 C44.3794286,18.608 49.1565714,18.7177143 51.4902857,21.0057143 C51.328,20.8502857 51.1337143,20.7245714 50.9508571,20.5874286 C60.2765714,23.504 66.7474286,30.1531429 67.44,41.2251429 C67.8811429,48.2948571 65.5702857,54.3885714 61.568,59.1154286 C62.784,59.2891429 63.9931429,59.4925714 65.2045714,59.6937143 C70.304,53.4537143 73.2502857,45.5428571 73.2502857,37.056 C73.2502857,17.7165714 57.5337143,2.56685714 37.472,2.56685714 C17.4102857,2.56685714 1.69371429,17.7165714 1.69371429,37.056 C1.69371429,45.5565714 4.64,53.472 9.744,59.7097143 C10.8434286,59.5268571 11.9451429,59.3462857 13.0491429,59.1817143"
+      fill="#FFD700"
+      mask="url(#mask-2)"
+    ></path>
+    <path
+      d="M9.744,59.7097143 C4.64,53.472 1.69371429,45.5565714 1.69371429,37.056 C1.69371429,17.7165714 17.4102857,2.56685714 37.472,2.56685714 C57.5337143,2.56685714 73.2502857,17.7165714 73.2502857,37.056 C73.2502857,45.5428571 70.304,53.4537143 65.2045714,59.6937143 C65.8125714,59.7942857 66.4205714,59.8742857 67.0285714,59.984 C71.9497143,53.6457143 74.8937143,45.6982857 74.8937143,37.056 C74.8937143,16.3862857 58.1394286,0.921142857 37.472,0.921142857 C16.8022857,0.921142857 0.048,16.3862857 0.048,37.056 C0.048,45.7074286 2.99885714,53.6594286 7.92914286,59.9977143 C8.53257143,59.8902857 9.13828571,59.8102857 9.744,59.7097143"
+      fill="#FA6E0F"
+      mask="url(#mask-2)"
+    ></path>
+    <path
+      d="M58.2857143,74.9394286 C62.3748571,75.1954286 65.7874286,77.2137143 67.8468571,79.9474286 C67.9131429,80.0182857 68.0114286,80.016 68.0411429,79.9382857 C68.7451429,77.0971429 68.9394286,74.0662857 68.5851429,71.0125714 C68.5874286,70.9805714 68.6125714,70.9577143 68.6537143,70.9485714 C70.576,70.3428571 72.7017143,70.0137143 74.9645714,70.0457143 C75.0857143,70.0594286 75.0834286,69.9405714 74.9554286,69.8194286 C72.5577143,67.4994286 69.6297143,65.6914286 66.416,64.5417143 C65.3051429,67.68 64.2217143,70.816 63.1565714,73.9634286 C63.136,74.0228571 63.0514286,74.0594286 62.9645714,74.0434286 L58.2857143,74.9394286"
+      fill="#0AC855"
+      mask="url(#mask-2)"
+    ></path>
+    <path
+      d="M62.9645714,74.0434286 L58.2857143,74.9394286 C58.2857143,74.9394286 58.3451429,74.512 58.528,73.3325714 C60.9417143,73.6754286 62.9645714,74.0434286 62.9645714,74.0434286"
+      fill="#0B4902"
+    ></path>
+    <g transform="translate(0, 20.57)">
+      <mask id="mask-4" fill="white">
+        <polygon
+          points="0.137142857 0.016 67.4935952 0.016 67.4935952 59.2914286 0.137142857 59.2914286"
+        ></polygon>
+      </mask>
+      <path
+        d="M13.0765714,38.6057143 C29.1177143,36.2605714 45.5222857,36.2354286 61.568,38.544 C65.5702857,33.8171429 67.8811429,27.7234286 67.44,20.6537143 C66.7474286,9.58171429 60.2765714,2.93257143 50.9508571,0.016 C51.1337143,0.153142857 51.328,0.278857143 51.4902857,0.434285714 C51.6297143,0.573714286 51.5085714,0.889142857 51.3097143,0.836571429 C47.8902857,-0.0845714286 42.5577143,4.45028571 39.1017143,1.51771429 C39.008,2.37485714 38.2331429,6.51428571 32.3314286,5.90171429 C32.192,5.888 32.1371429,5.73257143 32.24,5.64571429 C33.1542857,4.86857143 34.2765714,2.71542857 33.3142857,1.344 C30.3108571,3.33714286 28.7565714,3.424 23.2182857,1.024 C23.1725714,1.00342857 23.1908571,0.953142857 23.1794286,0.912 C10.2354286,5.51314286 6.912,14.6628571 7.51771429,24.3908571 C7.86971429,30.0091429 9.93142857,34.7748571 13.0765714,38.6057143"
+        fill="#FA3200"
+        mask="url(#mask-4)"
+      ></path>
+      <path
+        d="M12.0868571,53.472 C12,53.488 11.9154286,53.4514286 11.8948571,53.392 C10.8274286,50.2445714 9.73485714,47.0971429 8.62171429,43.9611429 C5.41028571,45.1108571 2.49371429,46.9302857 0.0982857143,49.248 C-0.0297142857,49.3691429 -0.032,49.488 0.0891428571,49.4742857 C2.352,49.4422857 4.47771429,49.7714286 6.4,50.3771429 C6.44114286,50.3862857 6.46628571,50.4091429 6.46857143,50.4411429 C6.11428571,53.4948571 6.30857143,56.5257143 7.01257143,59.3668571 C7.04228571,59.4445714 7.14057143,59.4468571 7.20685714,59.376 C9.26628571,56.6422857 12.6742857,54.624 16.7657143,54.368 L12.0868571,53.472"
+        fill="#0AC855"
+        mask="url(#mask-4)"
+      ></path>
+    </g>
+    <path
+      d="M62.9645714,74.0434286 C46.192,71.104 28.8571429,71.104 12.0868571,74.0434286 C12,74.0594286 11.9154286,74.0228571 11.8948571,73.9634286 C10.3428571,69.3851429 8.74285714,64.8182857 7.09257143,60.2628571 C7.06971429,60.1988571 7.14057143,60.1257143 7.248,60.1074286 C27.1885714,56.464 47.8605714,56.464 67.8034286,60.1074286 C67.9108571,60.1257143 67.9817143,60.1988571 67.9565714,60.2628571 C66.3085714,64.8182857 64.7085714,69.3851429 63.1565714,73.9634286 C63.136,74.0228571 63.0514286,74.0594286 62.9645714,74.0434286"
+      fill="#00912D"
+    ></path>
+    <path
+      d="M12.0868571,74.0434286 L16.7657143,74.9394286 C16.7657143,74.9394286 16.704,74.512 16.5211429,73.3325714 C14.1074286,73.6754286 12.0868571,74.0434286 12.0868571,74.0434286"
+      fill="#0B4902"
+    ></path>
+  </g>
+</svg>
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -47,7 +47,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
    <TouchableOpacity
      className={`
        p-3 rounded-xl items-center justify-center
-        ${loading || (disabled && "opacity-50")}
+        ${(loading || disabled) && "opacity-50"}
        ${colorClasses}
        ${className}
      `}
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -68,7 +68,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(

    // Needs to automatically change the selected to the default values for default indexes.
    useEffect(() => {
-      console.log(defaultAudioIndex, defaultSubtitleIndex);
      setSelectedOptions(() => ({
        bitrate: defaultBitrate,
        mediaSource: defaultMediaSource,
@@ -220,7 +219,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                    className="mr-1"
                    source={selectedOptions.mediaSource}
                    onChange={(val) => {
-                      console.log(val);
                      setSelectedOptions(
                        (prev) =>
                          prev && {
--- a/components/ListItem.tsx
+++ b/components/ListItem.tsx
@@ -24,7 +24,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
      <View className="flex flex-col overflow-visible">
        <Text className="font-bold ">{title}</Text>
        {subTitle && (
-          <Text uiTextView selectable className="text-xs">
+          <Text uiTextView selectable className="text-xs text-neutral-400">
            {subTitle}
          </Text>
        )}
--- a/components/Ratings.tsx
+++ b/components/Ratings.tsx
@@ -3,10 +3,10 @@ import { View, ViewProps } from "react-native";
 import { Badge } from "./Badge";
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
-import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
-import {useJellyseerr} from "@/hooks/useJellyseerr";
-import {useQuery} from "@tanstack/react-query";
-import {MediaType} from "@/utils/jellyseerr/server/constants/media";
+import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { useQuery } from "@tanstack/react-query";
+import { MediaType } from "@/utils/jellyseerr/server/constants/media";

 interface Props extends ViewProps {
  item?: BaseItemDto | null;
@@ -21,7 +21,7 @@ export const Ratings: React.FC<Props> = ({ item, ...props }) => {
      )}
      {item.CommunityRating && (
        <Badge
-          text={item.CommunityRating}
+          text={item.CommunityRating.toFixed(1)}
          variant="gray"
          iconLeft={<Ionicons name="star" size={14} color="gold" />}
        />
@@ -32,7 +32,11 @@ export const Ratings: React.FC<Props> = ({ item, ...props }) => {
          variant="gray"
          iconLeft={
            <Image
-              source={require("@/assets/images/rotten-tomatoes.png")}
+              source={
+                item.CriticRating < 60
+                  ? require("@/assets/images/rotten-tomatoes.png")
+                  : require("@/assets/images/not-rotten-tomatoes.svg")
+              }
              style={{
                width: 14,
                height: 14,
@@ -45,22 +49,25 @@ export const Ratings: React.FC<Props> = ({ item, ...props }) => {
  );
 };

-
-export const JellyserrRatings: React.FC<{result: MovieResult | TvResult}> = ({ result }) => {
-  const {jellyseerrApi} = useJellyseerr();
+export const JellyserrRatings: React.FC<{ result: MovieResult | TvResult }> = ({
+  result,
+}) => {
+  const { jellyseerrApi } = useJellyseerr();
  const { data, isLoading } = useQuery({
-    queryKey: ['jellyseerr', result.id, result.mediaType, 'ratings'],
+    queryKey: ["jellyseerr", result.id, result.mediaType, "ratings"],
    queryFn: async () => {
      return result.mediaType === MediaType.MOVIE
        ? jellyseerrApi?.movieRatings(result.id)
-        : jellyseerrApi?.tvRatings(result.id)
+        : jellyseerrApi?.tvRatings(result.id);
    },
    staleTime: (5).minutesToMilliseconds(),
    retry: false,
    enabled: !!jellyseerrApi,
  });

-  return (isLoading || !!result.voteCount ||
+  return (
+    (isLoading ||
+      !!result.voteCount ||
      (data?.criticsRating && !!data?.criticsScore) ||
      (data?.audienceRating && !!data?.audienceScore)) && (
      <View className="flex flex-row flex-wrap space-x-1">
@@ -72,7 +79,7 @@ export const JellyserrRatings: React.FC<{result: MovieResult | TvResult}> = ({ r
              <Image
                className="mr-1"
                source={
-                  data?.criticsRating === 'Rotten'
+                  data?.criticsRating === "Rotten"
                    ? require("@/utils/jellyseerr/src/assets/rt_rotten.svg")
                    : require("@/utils/jellyseerr/src/assets/rt_fresh.svg")
                }
@@ -92,7 +99,7 @@ export const JellyserrRatings: React.FC<{result: MovieResult | TvResult}> = ({ r
              <Image
                className="mr-1"
                source={
-                  data?.audienceRating === 'Spilled'
+                  data?.audienceRating === "Spilled"
                    ? require("@/utils/jellyseerr/src/assets/rt_aud_rotten.svg")
                    : require("@/utils/jellyseerr/src/assets/rt_aud_fresh.svg")
                }
@@ -122,4 +129,5 @@ export const JellyserrRatings: React.FC<{result: MovieResult | TvResult}> = ({ r
        )}
      </View>
    )
-}
+  );
+};
--- a/components/jellyseerr/DiscoverSlide.tsx
+++ b/components/jellyseerr/DiscoverSlide.tsx
@@ -1,26 +1,31 @@
-import React, {useMemo} from "react";
+import React, { useMemo } from "react";
 import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
-import {DiscoverSliderType} from "@/utils/jellyseerr/server/constants/discover";
-import {DiscoverEndpoint, Endpoints, useJellyseerr} from "@/hooks/useJellyseerr";
-import {useInfiniteQuery} from "@tanstack/react-query";
-import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
+import {
+  DiscoverEndpoint,
+  Endpoints,
+  useJellyseerr,
+} from "@/hooks/useJellyseerr";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import {Text} from "@/components/common/Text";
-import {FlashList} from "@shopify/flash-list";
+import { Text } from "@/components/common/Text";
+import { FlashList } from "@shopify/flash-list";
+import { View } from "react-native";

 interface Props {
-  slide: DiscoverSlider
+  slide: DiscoverSlider;
 }
-const DiscoverSlide: React.FC<Props> = ({slide}) => {
-  const {jellyseerrApi} = useJellyseerr();
+const DiscoverSlide: React.FC<Props> = ({ slide }) => {
+  const { jellyseerrApi } = useJellyseerr();

-  const {data, isFetching, fetchNextPage, hasNextPage} = useInfiniteQuery({
+  const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
    queryKey: ["jellyseerr", "discover", slide.id],
    queryFn: async ({ pageParam }) => {
      let endpoint: DiscoverEndpoint | undefined = undefined;
      let params: any = {
-        page: Number(pageParam)
-      }
+        page: Number(pageParam),
+      };

      switch (slide.type) {
        case DiscoverSliderType.TRENDING:
@@ -28,48 +33,68 @@ const DiscoverSlide: React.FC<Props> = ({slide}) => {
          break;
        case DiscoverSliderType.POPULAR_MOVIES:
        case DiscoverSliderType.UPCOMING_MOVIES:
-          endpoint = Endpoints.DISCOVER_MOVIES
+          endpoint = Endpoints.DISCOVER_MOVIES;
          if (slide.type === DiscoverSliderType.UPCOMING_MOVIES)
-            params = { ...params, primaryReleaseDateGte: new Date().toISOString().split('T')[0]}
+            params = {
+              ...params,
+              primaryReleaseDateGte: new Date().toISOString().split("T")[0],
+            };
          break;
        case DiscoverSliderType.POPULAR_TV:
        case DiscoverSliderType.UPCOMING_TV:
-          endpoint = Endpoints.DISCOVER_TV
+          endpoint = Endpoints.DISCOVER_TV;
          if (slide.type === DiscoverSliderType.UPCOMING_TV)
-            params = {...params, firstAirDateGte: new Date().toISOString().split('T')[0]}
+            params = {
+              ...params,
+              firstAirDateGte: new Date().toISOString().split("T")[0],
+            };
          break;
      }

      return endpoint ? jellyseerrApi?.discover(endpoint, params) : null;
    },
    initialPageParam: 1,
-    getNextPageParam: (lastPage, pages) => ((lastPage?.page || pages?.findLast(p => p?.results.length)?.page) || 1) + 1,
+    getNextPageParam: (lastPage, pages) =>
+      (lastPage?.page || pages?.findLast((p) => p?.results.length)?.page || 1) +
+      1,
    enabled: !!jellyseerrApi,
-    staleTime: 0
+    staleTime: 0,
  });

-  const flatData = useMemo(() => data?.pages?.filter(p => p?.results.length).flatMap(p => p?.results), [data])
+  const flatData = useMemo(
+    () =>
+      data?.pages?.filter((p) => p?.results.length).flatMap((p) => p?.results),
+    [data]
+  );

  return (
-    (flatData && flatData?.length > 0) && <>
-      <Text className="font-bold text-lg mb-2">{DiscoverSliderType[slide.type].toString().toTitle()}</Text>
-      <FlashList
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        keyExtractor={item => item!!.id.toString()}
-        estimatedItemSize={250}
-        data={flatData}
-        onEndReachedThreshold={1}
-        onEndReached={() => {
-          if (hasNextPage)
-            fetchNextPage()
-        }}
-        renderItem={({item}) =>
-          (item ? <JellyseerrPoster item={item as MovieResult | TvResult} /> : <></>)
-      }
-      />
-    </>
-  )
-}
+    flatData &&
+    flatData?.length > 0 && (
+      <View className="mb-4">
+        <Text className="font-bold text-lg mb-2">
+          {DiscoverSliderType[slide.type].toString().toTitle()}
+        </Text>
+        <FlashList
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          keyExtractor={(item) => item!!.id.toString()}
+          estimatedItemSize={250}
+          data={flatData}
+          onEndReachedThreshold={1}
+          onEndReached={() => {
+            if (hasNextPage) fetchNextPage();
+          }}
+          renderItem={({ item }) =>
+            item ? (
+              <JellyseerrPoster item={item as MovieResult | TvResult} />
+            ) : (
+              <></>
+            )
+          }
+        />
+      </View>
+    )
+  );
+};

-export default DiscoverSlide;
+export default DiscoverSlide;
--- a/components/series/JellyseerrSeasons.tsx
+++ b/components/series/JellyseerrSeasons.tsx
@@ -1,33 +1,37 @@
-import {Text} from "@/components/common/Text";
-import React, {useCallback, useMemo, useState} from "react";
-import {Alert, TouchableOpacity, View} from "react-native";
-import {TvDetails} from "@/utils/jellyseerr/server/models/Tv";
-import {FlashList} from "@shopify/flash-list";
-import {orderBy} from "lodash";
-import {Tags} from "@/components/GenreTags";
+import { Text } from "@/components/common/Text";
+import React, { useCallback, useMemo, useState } from "react";
+import { Alert, TouchableOpacity, View } from "react-native";
+import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
+import { FlashList } from "@shopify/flash-list";
+import { orderBy } from "lodash";
+import { Tags } from "@/components/GenreTags";
 import JellyseerrIconStatus from "@/components/icons/JellyseerrIconStatus";
 import Season from "@/utils/jellyseerr/server/entity/Season";
-import {MediaStatus, MediaType} from "@/utils/jellyseerr/server/constants/media";
-import {Ionicons} from "@expo/vector-icons";
-import {RoundButton} from "@/components/RoundButton";
-import {useJellyseerr} from "@/hooks/useJellyseerr";
-import {TvResult} from "@/utils/jellyseerr/server/models/Search";
-import {useQuery} from "@tanstack/react-query";
-import {HorizontalScroll} from "@/components/common/HorrizontalScroll";
-import {Image} from "expo-image";
+import {
+  MediaStatus,
+  MediaType,
+} from "@/utils/jellyseerr/server/constants/media";
+import { Ionicons } from "@expo/vector-icons";
+import { RoundButton } from "@/components/RoundButton";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { TvResult } from "@/utils/jellyseerr/server/models/Search";
+import { useQuery } from "@tanstack/react-query";
+import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
+import { Image } from "expo-image";
 import MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
+import { Loader } from "../Loader";

-const JellyseerrSeasonEpisodes: React.FC<{details: TvDetails, seasonNumber: number}> = ({
-  details,
-  seasonNumber
-}) => {
-  const {jellyseerrApi} = useJellyseerr();
+const JellyseerrSeasonEpisodes: React.FC<{
+  details: TvDetails;
+  seasonNumber: number;
+}> = ({ details, seasonNumber }) => {
+  const { jellyseerrApi } = useJellyseerr();

-  const {data: seasonWithEpisodes, isLoading} = useQuery({
+  const { data: seasonWithEpisodes, isLoading } = useQuery({
    queryKey: ["jellyseerr", details.id, "season", seasonNumber],
    queryFn: async () => jellyseerrApi?.tvSeason(details.id, seasonNumber),
-    enabled: details.seasons.filter(s => s.seasonNumber !== 0).length > 0
-  })
+    enabled: details.seasons.filter((s) => s.seasonNumber !== 0).length > 0,
+  });

  return (
    <HorizontalScroll
@@ -37,86 +41,102 @@ const JellyseerrSeasonEpisodes: React.FC<{details: TvDetails, seasonNumber: numb
      estimatedItemSize={50}
      data={seasonWithEpisodes?.episodes}
      keyExtractor={(item) => item.id}
-      ItemSeparatorComponent={() => <View className="w-2"/>}
      renderItem={(item, index) => (
-        <View className="flex flex-col mt-2 w-44">
-          {item.stillPath && (
-            <View
-              className="relative aspect-video rounded-lg overflow-hidden border border-neutral-800"
-            >
-              <Image
-                key={item.id}
-                id={item.id}
-                source={{
-                  uri: jellyseerrApi?.tvStillImageProxy(item.stillPath),
-                }}
-                cachePolicy={"memory-disk"}
-                contentFit="cover"
-                className="w-full h-full"
-              />
-            </View>
-          )}
-            <View className="shrink">
-              <Text numberOfLines={2} className="">
-                {item?.name}
-              </Text>
-              <Text numberOfLines={1} className="text-xs text-neutral-500">
-                {`S${item?.seasonNumber}:E${item?.episodeNumber}`}
-              </Text>
-            </View>
-
-          <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">
-            {item?.overview}
-          </Text>
-        </View>
+        <RenderItem key={index} item={item} index={index} />
      )}
    />
-  )
-}
+  );
+};
+
+const RenderItem = ({ item, index }: any) => {
+  const { jellyseerrApi } = useJellyseerr();
+  const [imageError, setImageError] = useState(false);
+
+  return (
+    <View className="flex flex-col w-44 mt-2">
+      <View className="relative aspect-video rounded-lg overflow-hidden border border-neutral-800">
+        {!imageError ? (
+          <Image
+            key={item.id}
+            id={item.id}
+            source={{
+              uri: jellyseerrApi?.tvStillImageProxy(item.stillPath),
+            }}
+            cachePolicy={"memory-disk"}
+            contentFit="cover"
+            className="w-full h-full"
+            onError={(e) => {
+              setImageError(true);
+            }}
+          />
+        ) : (
+          <View className="flex flex-col w-full h-full items-center justify-center border border-neutral-800 bg-neutral-900">
+            <Ionicons
+              name="image-outline"
+              size={24}
+              color="white"
+              style={{ opacity: 0.4 }}
+            />
+          </View>
+        )}
+      </View>
+      <View className="shrink mt-1">
+        <Text numberOfLines={2} className="">
+          {item.name}
+        </Text>
+        <Text numberOfLines={1} className="text-xs text-neutral-500">
+          {`S${item.seasonNumber}:E${item.episodeNumber}`}
+        </Text>
+      </View>
+
+      <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">
+        {item.overview}
+      </Text>
+    </View>
+  );
+};

 const JellyseerrSeasons: React.FC<{
-  isLoading: boolean,
-  result?: TvResult,
-  details?: TvDetails
-}> = ({
-  isLoading,
-  result,
-  details,
-}) => {
-  if (!details)
-    return null;
+  isLoading: boolean;
+  result?: TvResult;
+  details?: TvDetails;
+}> = ({ isLoading, result, details }) => {
+  if (!details) return null;

-  const {jellyseerrApi, requestMedia} = useJellyseerr();
-  const [seasonStates, setSeasonStates] = useState<{[key: number]: boolean}>();
+  const { jellyseerrApi, requestMedia } = useJellyseerr();
+  const [seasonStates, setSeasonStates] = useState<{
+    [key: number]: boolean;
+  }>();
  const seasons = useMemo(() => {
-      const mediaInfoSeasons = details?.mediaInfo?.seasons?.filter((s: Season) => s.seasonNumber !== 0)
-      const requestedSeasons = details?.mediaInfo?.requests?.flatMap((r: MediaRequest) => r.seasons)
-      return details.seasons?.map((season) => {
-        return {
-          ...season,
-          status:
-            // What our library status is
-            mediaInfoSeasons
-              ?.find((mediaSeason: Season) => mediaSeason.seasonNumber === season.seasonNumber)
-              ?.status
-            ??
-            // What our request status is
-            requestedSeasons
-              ?.find((s: Season) => s.seasonNumber === season.seasonNumber)
-              ?.status
-            ??
-            // Otherwise set it as unknown
-              MediaStatus.UNKNOWN
-        }
-      })
-    },
-    [details]
-  );
+    const mediaInfoSeasons = details?.mediaInfo?.seasons?.filter(
+      (s: Season) => s.seasonNumber !== 0
+    );
+    const requestedSeasons = details?.mediaInfo?.requests?.flatMap(
+      (r: MediaRequest) => r.seasons
+    );
+    return details.seasons?.map((season) => {
+      return {
+        ...season,
+        status:
+          // What our library status is
+          mediaInfoSeasons?.find(
+            (mediaSeason: Season) =>
+              mediaSeason.seasonNumber === season.seasonNumber
+          )?.status ??
+          // What our request status is
+          requestedSeasons?.find(
+            (s: Season) => s.seasonNumber === season.seasonNumber
+          )?.status ??
+          // Otherwise set it as unknown
+          MediaStatus.UNKNOWN,
+      };
+    });
+  }, [details]);

-  const allSeasonsAvailable = useMemo(() =>
-      seasons?.every(season => season.status === MediaStatus.AVAILABLE),
+  const allSeasonsAvailable = useMemo(
+    () => seasons?.every((season) => season.status === MediaStatus.AVAILABLE),
    [seasons]
-  )
+  );

  const requestAll = useCallback(() => {
    if (details && jellyseerrApi) {
@@ -125,48 +145,73 @@ const JellyseerrSeasons: React.FC<{
        mediaType: MediaType.TV,
        tvdbId: details.externalIds?.tvdbId,
        seasons: seasons
-            .filter(s => s.status === MediaStatus.UNKNOWN && s.seasonNumber !== 0)
-            .map(s => s.seasonNumber)
-      })
+          .filter(
+            (s) => s.status === MediaStatus.UNKNOWN && s.seasonNumber !== 0
+          )
+          .map((s) => s.seasonNumber),
+      });
    }
-  }, [jellyseerrApi, seasons, details])
+  }, [jellyseerrApi, seasons, details]);

-  const promptRequestAll = useCallback(() => (
-    Alert.alert('Request all?', 'Are you sure you want to request all seasons?', [
-      {
-        text: 'Cancel',
-        style: 'cancel',
-      },
-      {
-        text: 'YES',
-        onPress: requestAll
-      },
-    ])), [requestAll]);
+  const promptRequestAll = useCallback(
+    () =>
+      Alert.alert("Confirm", "Are you sure you want to request all seasons?", [
+        {
+          text: "Cancel",
+          style: "cancel",
+        },
+        {
+          text: "Yes",
+          onPress: requestAll,
+        },
+      ]),
+    [requestAll]
+  );
+
+  if (isLoading)
+    return (
+      <View>
+        <View className="flex flex-row justify-between items-end px-4">
+          <Text className="text-lg font-bold mb-2">Seasons</Text>
+          {!allSeasonsAvailable && (
+            <RoundButton className="mb-2 pa-2" onPress={promptRequestAll}>
+              <Ionicons name="bag-add" color="white" size={26} />
+            </RoundButton>
+          )}
+        </View>
+        <Loader />
+      </View>
+    );

  return (
    <FlashList
-      data={orderBy(details.seasons.filter(s => s.seasonNumber !== 0), 'seasonNumber', 'desc')}
+      data={orderBy(
+        details.seasons.filter((s) => s.seasonNumber !== 0),
+        "seasonNumber",
+        "desc"
+      )}
      ListHeaderComponent={() => (
-        <View className="flex flex-row justify-between items-end">
+        <View className="flex flex-row justify-between items-end px-4">
          <Text className="text-lg font-bold mb-2">Seasons</Text>
          {!allSeasonsAvailable && (
-            <RoundButton
-              className="mb-2 pa-2"
-              onPress={promptRequestAll}
-            >
-              <Ionicons name="bag-add" color="white" size={26}/>
+            <RoundButton className="mb-2 pa-2" onPress={promptRequestAll}>
+              <Ionicons name="bag-add" color="white" size={26} />
            </RoundButton>
          )}
        </View>
      )}
      ItemSeparatorComponent={() => <View className="h-2" />}
      estimatedItemSize={250}
-      renderItem={({item: season}) => (
+      renderItem={({ item: season }) => (
        <>
          <TouchableOpacity
-            onPress={() => setSeasonStates((prevState) => (
-              {...prevState, [season.seasonNumber]: !prevState?.[season.seasonNumber]}
-            ))}
+            onPress={() =>
+              setSeasonStates((prevState) => ({
+                ...prevState,
+                [season.seasonNumber]: !prevState?.[season.seasonNumber],
+              }))
+            }
+            className="px-4"
          >
            <View
              className="flex flex-row justify-between items-center bg-gray-100/10 rounded-xl z-20 h-12 w-full px-4"
@@ -174,27 +219,43 @@ const JellyseerrSeasons: React.FC<{
            >
              <Tags
                textClass=""
-                tags={[`Season ${season.seasonNumber}`, `${season.episodeCount} Episodes`]}
+                tags={[
+                  `Season ${season.seasonNumber}`,
+                  `${season.episodeCount} Episodes`,
+                ]}
              />
              {[0].map(() => {
-                const canRequest = seasons?.find(s => s.seasonNumber === season.seasonNumber)?.status === MediaStatus.UNKNOWN
-                return <JellyseerrIconStatus
-                  key={0}
-                  onPress={canRequest ? () =>
-                    requestMedia(
-                      `${result?.name!!}, Season ${season.seasonNumber}`,
-                      {
-                        mediaId: details.id,
-                        mediaType: MediaType.TV,
-                        tvdbId: details.externalIds?.tvdbId,
-                        seasons: [season.seasonNumber]
-                      }
-                    ) : undefined
-                  }
-                  className={canRequest ? 'bg-gray-700/40' : undefined}
-                  mediaStatus={seasons?.find(s => s.seasonNumber === season.seasonNumber)?.status}
-                  showRequestIcon={canRequest}
-                />
+                const canRequest =
+                  seasons?.find((s) => s.seasonNumber === season.seasonNumber)
+                    ?.status === MediaStatus.UNKNOWN;
+                return (
+                  <JellyseerrIconStatus
+                    key={0}
+                    onPress={
+                      canRequest
+                        ? () =>
+                            requestMedia(
+                              `${result?.name!!}, Season ${
+                                season.seasonNumber
+                              }`,
+                              {
+                                mediaId: details.id,
+                                mediaType: MediaType.TV,
+                                tvdbId: details.externalIds?.tvdbId,
+                                seasons: [season.seasonNumber],
+                              }
+                            )
+                        : undefined
+                    }
+                    className={canRequest ? "bg-gray-700/40" : undefined}
+                    mediaStatus={
+                      seasons?.find(
+                        (s) => s.seasonNumber === season.seasonNumber
+                      )?.status
+                    }
+                    showRequestIcon={canRequest}
+                  />
+                );
              })}
            </View>
          </TouchableOpacity>
@@ -206,10 +267,9 @@ const JellyseerrSeasons: React.FC<{
            />
          )}
        </>
-      )
-    }
+      )}
    />
-  )
-}
+  );
+};

-export default JellyseerrSeasons;
+export default JellyseerrSeasons;
--- a/components/series/NextUp.tsx
+++ b/components/series/NextUp.tsx
@@ -11,6 +11,7 @@ import { Text } from "../common/Text";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import { FlashList } from "@shopify/flash-list";

 export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
  const [user] = useAtom(userAtom);
@@ -43,10 +44,14 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {

  return (
    <View>
-      <Text className="text-lg font-bold mb-2 px-4">Next up</Text>
-      <HorizontalScroll
+      <Text className="text-lg font-bold px-4 mb-2">Next up</Text>
+      <FlashList
+        contentContainerStyle={{ paddingLeft: 16 }}
+        horizontal
+        estimatedItemSize={172}
+        showsHorizontalScrollIndicator={false}
        data={items}
-        renderItem={(item, index) => (
+        renderItem={({ item, index }) => (
          <TouchableItemRouter
            item={item}
            key={index}
--- a/components/series/SeasonDropdown.tsx
+++ b/components/series/SeasonDropdown.tsx
@@ -19,7 +19,7 @@ type SeasonKeys = {
 };

 export type SeasonIndexState = {
-  [seriesId: string]: number | null | undefined;
+  [seriesId: string]: number | string | null | undefined;
 };

 export const SeasonDropdown: React.FC<Props> = ({
--- a/components/series/SeasonPicker.tsx
+++ b/components/series/SeasonPicker.tsx
@@ -30,7 +30,10 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
  const [user] = useAtom(userAtom);
  const [seasonIndexState, setSeasonIndexState] = useAtom(seasonIndexAtom);

-  const seasonIndex = seasonIndexState[item.Id ?? ""];
+  const seasonIndex = useMemo(
+    () => seasonIndexState[item.Id ?? ""],
+    [item, seasonIndexState]
+  );

  const { data: seasons } = useQuery({
    queryKey: ["seasons", item.Id],
@@ -53,19 +56,28 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {

      return response.data.Items;
    },
+    staleTime: 60,
    enabled: !!api && !!user?.Id && !!item.Id,
  });

-  const selectedSeasonId: string | null = useMemo(
-    () =>
-      seasons?.find((season: any) => season.IndexNumber === seasonIndex)?.Id,
-    [seasons, seasonIndex]
-  );
+  const selectedSeasonId: string | null = useMemo(() => {
+    const season: BaseItemDto = seasons?.find(
+      (s: BaseItemDto) =>
+        s.IndexNumber === seasonIndex || s.Name === seasonIndex
+    );
+
+    if (!season?.Id) return null;
+
+    return season.Id!;
+  }, [seasons, seasonIndex]);

  const { data: episodes, isFetching } = useQuery({
    queryKey: ["episodes", item.Id, selectedSeasonId],
    queryFn: async () => {
-      if (!api || !user?.Id || !item.Id || !selectedSeasonId) return [];
+      if (!api || !user?.Id || !item.Id || !selectedSeasonId) {
+        return [];
+      }
+
      const res = await getTvShowsApi(api).getEpisodes({
        seriesId: item.Id,
        userId: user.Id,
@@ -74,6 +86,12 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
        fields: ["MediaSources", "MediaStreams", "Overview"],
      });

+      if (res.data.TotalRecordCount === 0)
+        console.warn(
+          "No episodes found for season with ID ~",
+          selectedSeasonId
+        );
+
      return res.data.Items;
    },
    enabled: !!api && !!user?.Id && !!item.Id && !!selectedSeasonId,
@@ -118,25 +136,28 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
          seasons={seasons}
          state={seasonIndexState}
          onSelect={(season) => {
+            if (!item.Id) return;
            setSeasonIndexState((prev) => ({
              ...prev,
-              [item.Id ?? ""]: season.IndexNumber,
+              [item.Id!]: season.IndexNumber ?? season.Name,
            }));
          }}
        />
-        <DownloadItems
-          title="Download Season"
-          className="ml-2"
-          items={episodes || []}
-          MissingDownloadIconComponent={() => (
-            <Ionicons name="download" size={20} color="white" />
-          )}
-          DownloadedIconComponent={() => (
-            <Ionicons name="download" size={20} color="#9333ea" />
-          )}
-        />
+        {episodes?.length || 0 > 0 ? (
+          <DownloadItems
+            title="Download Season"
+            className="ml-2"
+            items={episodes || []}
+            MissingDownloadIconComponent={() => (
+              <Ionicons name="download" size={20} color="white" />
+            )}
+            DownloadedIconComponent={() => (
+              <Ionicons name="download" size={20} color="#9333ea" />
+            )}
+          />
+        ) : null}
      </View>
-      <View className="px-4 flex flex-col my-4">
+      <View className="px-4 flex flex-col mt-4">
        {isFetching ? (
          <View
            style={{
@@ -186,6 +207,13 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
            </TouchableItemRouter>
          ))
        )}
+        {(episodes?.length || 0) === 0 ? (
+          <View className="flex flex-col">
+            <Text className="text-neutral-500">
+              No episodes for this season
+            </Text>
+          </View>
+        ) : null}
      </View>
    </View>
  );
--- a/components/series/SeriesActions.tsx
+++ b/components/series/SeriesActions.tsx
@@ -0,0 +1,32 @@
+import { Ionicons } from "@expo/vector-icons";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useRouter } from "expo-router";
+import { useCallback, useMemo } from "react";
+import { View, TouchableOpacity, ViewProps } from "react-native";
+
+interface Props extends ViewProps {
+  item: BaseItemDto;
+}
+
+export const SeriesActions = ({ item, ...props }: Props) => {
+  const router = useRouter();
+
+  const trailerLink = useMemo(() => item.RemoteTrailers?.[0]?.Url, [item]);
+
+  const openTrailer = useCallback(async () => {
+    if (!trailerLink) return;
+
+    const encodedTrailerLink = encodeURIComponent(trailerLink);
+    router.push(`/trailer/page?url=${encodedTrailerLink}`);
+  }, [router, trailerLink]);
+
+  return (
+    <View className="" {...props}>
+      {trailerLink && (
+        <TouchableOpacity onPress={openTrailer}>
+          <Ionicons name="film-outline" size={24} color="white" />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
--- a/components/series/SeriesHeader.tsx
+++ b/components/series/SeriesHeader.tsx
@@ -0,0 +1,64 @@
+import { View } from "react-native";
+import { Text } from "../common/Text";
+import { Ratings } from "../Ratings";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useMemo } from "react";
+import { SeriesActions } from "./SeriesActions";
+
+interface Props {
+  item: BaseItemDto;
+}
+
+export const SeriesHeader = ({ item }: Props) => {
+  const startYear = useMemo(() => {
+    if (item?.StartDate) {
+      return new Date(item.StartDate)
+        .toLocaleDateString("sv-SE", {
+          calendar: "gregory",
+          year: "numeric",
+        })
+        .toString()
+        .trim();
+    }
+    return item.ProductionYear?.toString().trim();
+  }, [item]);
+
+  const endYear = useMemo(() => {
+    if (item.EndDate) {
+      return new Date(item.EndDate)
+        .toLocaleDateString("sv-SE", {
+          calendar: "gregory",
+          year: "numeric",
+        })
+        .toString()
+        .trim();
+    }
+    return "";
+  }, [item]);
+
+  const yearString = useMemo(() => {
+    if (startYear && endYear) {
+      if (startYear === endYear) return startYear;
+      return `${startYear} - ${endYear}`;
+    }
+    if (startYear) {
+      return startYear;
+    }
+    if (endYear) {
+      return endYear;
+    }
+    return "";
+  }, [startYear, endYear]);
+
+  return (
+    <View className="px-4 py-4">
+      <Text className="text-3xl font-bold">{item?.Name}</Text>
+      <Text className="">{yearString}</Text>
+      <View className="flex flex-row items-center justify-between">
+        <Ratings item={item} className="mb-2" />
+        <SeriesActions item={item} />
+      </View>
+      <Text className="">{item?.Overview}</Text>
+    </View>
+  );
+};
--- a/components/settings/Jellyseerr.tsx
+++ b/components/settings/Jellyseerr.tsx
@@ -0,0 +1,207 @@
+import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
+import { View } from "react-native";
+import { Text } from "../common/Text";
+import { useCallback, useRef, useState } from "react";
+import { Input } from "../common/Input";
+import { ListItem } from "../ListItem";
+import { Loader } from "../Loader";
+import { useSettings } from "@/utils/atoms/settings";
+import { Button } from "../Button";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useAtom } from "jotai";
+import { toast } from "sonner-native";
+import { useMutation } from "@tanstack/react-query";
+
+export const JellyseerrSettings = () => {
+  const {
+    jellyseerrApi,
+    jellyseerrUser,
+    setJellyseerrUser,
+    clearAllJellyseerData,
+  } = useJellyseerr();
+
+  const [user] = useAtom(userAtom);
+  const [settings, updateSettings] = useSettings();
+
+  const [promptForJellyseerrPass, setPromptForJellyseerrPass] =
+    useState<boolean>(false);
+
+  const [jellyseerrPassword, setJellyseerrPassword] = useState<
+    string | undefined
+  >(undefined);
+
+  const [jellyseerrServerUrl, setjellyseerrServerUrl] = useState<
+    string | undefined
+  >(settings?.jellyseerrServerUrl || undefined);
+
+  const loginToJellyseerrMutation = useMutation({
+    mutationFn: async () => {
+      if (!jellyseerrServerUrl || !user?.Name || !jellyseerrPassword) {
+        throw new Error("Missing required information for login");
+      }
+      const jellyseerrTempApi = new JellyseerrApi(jellyseerrServerUrl);
+      return jellyseerrTempApi.login(user.Name, jellyseerrPassword);
+    },
+    onSuccess: (user) => {
+      setJellyseerrUser(user);
+      updateSettings({ jellyseerrServerUrl });
+    },
+    onError: () => {
+      toast.error("Failed to login");
+    },
+    onSettled: () => {
+      setJellyseerrPassword(undefined);
+    },
+  });
+
+  const testJellyseerrServerUrlMutation = useMutation({
+    mutationFn: async () => {
+      if (!jellyseerrServerUrl || jellyseerrApi) return null;
+      const jellyseerrTempApi = new JellyseerrApi(jellyseerrServerUrl);
+      return jellyseerrTempApi.test();
+    },
+    onSuccess: (result) => {
+      if (result && result.isValid) {
+        if (result.requiresPass) {
+          setPromptForJellyseerrPass(true);
+        } else {
+          updateSettings({ jellyseerrServerUrl });
+        }
+      } else {
+        setPromptForJellyseerrPass(false);
+        setjellyseerrServerUrl(undefined);
+        clearAllJellyseerData();
+      }
+    },
+  });
+
+  const clearData = () => {
+    clearAllJellyseerData().finally(() => {
+      setjellyseerrServerUrl(undefined);
+      setPromptForJellyseerrPass(false);
+    });
+  };
+
+  return (
+    <View className="mt-4">
+      <Text className="text-lg font-bold mb-2">Jellyseerr</Text>
+      <View>
+        {jellyseerrUser ? (
+          <View className="flex flex-col rounded-xl overflow-hidden bg-neutral-900 pt-0 divide-y divide-neutral-800">
+            <ListItem
+              title="Total media requests"
+              subTitle={jellyseerrUser?.requestCount?.toString()}
+            />
+            <ListItem
+              title="Movie quota limit"
+              subTitle={
+                jellyseerrUser?.movieQuotaLimit?.toString() ?? "Unlimited"
+              }
+            />
+            <ListItem
+              title="Movie quota days"
+              subTitle={
+                jellyseerrUser?.movieQuotaDays?.toString() ?? "Unlimited"
+              }
+            />
+            <ListItem
+              title="TV quota limit"
+              subTitle={jellyseerrUser?.tvQuotaLimit?.toString() ?? "Unlimited"}
+            />
+            <ListItem
+              title="TV quota days"
+              subTitle={jellyseerrUser?.tvQuotaDays?.toString() ?? "Unlimited"}
+            />
+            <View className="p-4">
+              <Button color="red" onPress={clearData}>
+                Reset Jellyseerr config
+              </Button>
+            </View>
+          </View>
+        ) : (
+          <View className="flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900">
+            <Text className="text-xs text-red-600 mb-2">
+              This integration is in its early stages. Expect things to change.
+            </Text>
+            <Text className="font-bold mb-1">Server URL</Text>
+            <View className="flex flex-col shrink mb-2">
+              <Text className="text-xs text-gray-600">
+                Example: http(s)://your-host.url
+              </Text>
+              <Text className="text-xs text-gray-600">
+                (add port if required)
+              </Text>
+            </View>
+            <Input
+              placeholder="Jellyseerr URL..."
+              value={settings?.jellyseerrServerUrl ?? jellyseerrServerUrl}
+              defaultValue={
+                settings?.jellyseerrServerUrl ?? jellyseerrServerUrl
+              }
+              keyboardType="url"
+              returnKeyType="done"
+              autoCapitalize="none"
+              textContentType="URL"
+              onChangeText={setjellyseerrServerUrl}
+              editable={!testJellyseerrServerUrlMutation.isPending}
+            />
+
+            <Button
+              loading={testJellyseerrServerUrlMutation.isPending}
+              disabled={testJellyseerrServerUrlMutation.isPending}
+              color={promptForJellyseerrPass ? "red" : "purple"}
+              className="h-12 mt-2"
+              onPress={() => {
+                if (promptForJellyseerrPass) {
+                  clearData();
+                  return;
+                }
+
+                testJellyseerrServerUrlMutation.mutate();
+              }}
+              style={{
+                marginBottom: 8,
+              }}
+            >
+              {promptForJellyseerrPass ? "Clear" : "Save"}
+            </Button>
+
+            <View
+              pointerEvents={promptForJellyseerrPass ? "auto" : "none"}
+              style={{
+                opacity: promptForJellyseerrPass ? 1 : 0.5,
+              }}
+            >
+              <Text className="font-bold mb-2">Password</Text>
+              <Input
+                autoFocus={true}
+                focusable={true}
+                placeholder={`Enter password for Jellyfin user ${user?.Name}`}
+                value={jellyseerrPassword}
+                keyboardType="default"
+                secureTextEntry={true}
+                returnKeyType="done"
+                autoCapitalize="none"
+                textContentType="password"
+                onChangeText={setJellyseerrPassword}
+                editable={
+                  !loginToJellyseerrMutation.isPending &&
+                  promptForJellyseerrPass
+                }
+              />
+              <Button
+                loading={loginToJellyseerrMutation.isPending}
+                disabled={loginToJellyseerrMutation.isPending}
+                color="purple"
+                className="h-12 mt-2"
+                onPress={() => loginToJellyseerrMutation.mutate()}
+              >
+                Login
+              </Button>
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
--- a/components/settings/MediaContext.tsx
+++ b/components/settings/MediaContext.tsx
@@ -57,8 +57,6 @@ export const MediaProvider = ({ children }: { children: ReactNode }) => {

    updateSettings(update);

-    console.log("update", update);
-
    let updatePayload = {
      SubtitleMode: update?.subtitleMode ?? settings?.subtitleMode,
      PlayDefaultAudioTrack:
@@ -84,8 +82,6 @@ export const MediaProvider = ({ children }: { children: ReactNode }) => {
          settings?.defaultSubtitleLanguage?.ThreeLetterISOLanguageName ||
          "";

-    console.log("updatePayload", updatePayload);
-
    updateUserConfiguration(updatePayload);
  };

--- a/components/settings/SettingToggles.tsx
+++ b/components/settings/SettingToggles.tsx
@@ -21,9 +21,8 @@ import * as BackgroundFetch from "expo-background-fetch";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as TaskManager from "expo-task-manager";
 import { useAtom } from "jotai";
-import React, {useCallback, useEffect, useState} from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
-  Alert,
  Linking,
  Switch,
  TouchableOpacity,
@@ -41,32 +40,23 @@ import { Stepper } from "@/components/inputs/Stepper";
 import { MediaProvider } from "./MediaContext";
 import { SubtitleToggles } from "./SubtitleToggles";
 import { AudioToggles } from "./AudioToggles";
-import {JellyseerrApi, useJellyseerr} from "@/hooks/useJellyseerr";
-import {ListItem} from "@/components/ListItem";
+import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
+import { ListItem } from "@/components/ListItem";
+import { JellyseerrSettings } from "./Jellyseerr";

 interface Props extends ViewProps {}

 export const SettingToggles: React.FC<Props> = ({ ...props }) => {
  const [settings, updateSettings] = useSettings();
  const { setProcesses } = useDownload();
-  const {
-    jellyseerrApi,
-    jellyseerrUser,
-    setJellyseerrUser ,
-    clearAllJellyseerData
-  } = useJellyseerr();

  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);

  const [marlinUrl, setMarlinUrl] = useState<string>("");
-  const [jellyseerrPassword, setJellyseerrPassword] = useState<string | undefined>(undefined);
  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
    useState<string>(settings?.optimizedVersionsServerUrl || "");

-  const [jellyseerrServerUrl, setjellyseerrServerUrl] =
-    useState<string | undefined>(settings?.jellyseerrServerUrl || undefined);
-
  const queryClient = useQueryClient();

  /********************
@@ -121,54 +111,6 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
    staleTime: 0,
  });

-  const promptForJellyseerrLogin = useCallback(() =>
-    Alert.prompt(
-      'Enter jellyfin password',
-      `Enter password for jellyfin user ${user?.Name}`,
-      (input) => setJellyseerrPassword(input),
-      'secure-text'
-    ),
-    [user, setJellyseerrPassword]
-  );
-
-  const testJellyseerrServerUrl = useCallback(async () => {
-    if (!jellyseerrServerUrl || jellyseerrApi)
-      return;
-
-    const jellyseerrTempApi = new JellyseerrApi(jellyseerrServerUrl);
-
-    jellyseerrTempApi.test().then(result => {
-      if (result.isValid) {
-
-        if (result.requiresPass)
-          promptForJellyseerrLogin()
-        else
-          updateSettings({jellyseerrServerUrl})
-      }
-      else {
-        setjellyseerrServerUrl(undefined);
-        clearAllJellyseerData();
-      }
-    })
-  }, [jellyseerrServerUrl])
-
-  useEffect(() => {
-    if (jellyseerrServerUrl && user?.Name && jellyseerrPassword) {
-      const jellyseerrTempApi = new JellyseerrApi(jellyseerrServerUrl);
-      jellyseerrTempApi.login(user?.Name, jellyseerrPassword)
-        .then(user => {
-          setJellyseerrUser(user);
-          updateSettings({jellyseerrServerUrl})
-        })
-        .catch(() => {
-          toast.error("Failed to login to jellyseerr!")
-        })
-        .finally(() => {
-          setJellyseerrPassword(undefined);
-        })
-    }
-  }, [user, jellyseerrServerUrl, jellyseerrPassword]);
-
  if (!settings) return null;

  return (
@@ -695,66 +637,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
        </View>
      </View>

-      <View className="mt-4">
-        <Text className="text-lg font-bold mb-2">Jellyseerr</Text>
-        <View className="flex flex-col rounded-xl overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
-          {jellyseerrUser && <>
-              <View className="flex flex-col overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
-                  <ListItem title="Total media requests" subTitle={jellyseerrUser?.requestCount?.toString()}/>
-                  <ListItem title="Movie quota limit" subTitle={jellyseerrUser?.movieQuotaLimit?.toString() ?? "Unlimited"}/>
-                  <ListItem title="Movie quota days" subTitle={jellyseerrUser?.movieQuotaDays?.toString() ?? "Unlimited"}/>
-                  <ListItem title="TV quota limit" subTitle={jellyseerrUser?.tvQuotaLimit?.toString() ?? "Unlimited"}/>
-                  <ListItem title="TV quota days" subTitle={jellyseerrUser?.tvQuotaDays?.toString() ?? "Unlimited"}/>
-              </View>
-          </>}
-          <View
-            pointerEvents={
-              !jellyseerrUser || jellyseerrPassword ? "auto" : "none"
-            }
-            className={`
-              ${
-              !jellyseerrUser || jellyseerrPassword
-                ? "opacity-100"
-                : "opacity-50"
-            }`}
-          >
-            <View className="flex flex-col bg-neutral-900 px-4 py-4">
-              <View className="flex flex-col shrink mb-2">
-                <View className="flex flex-row justify-between items-center">
-                  <Text className="font-semibold">
-                    Server URL
-                  </Text>
-                </View>
-                <Text className="text-xs opacity-50">
-                  Set the URL for your jellyseerr instance.
-                </Text>
-                <Text className="text-xs text-gray-600">Example: http(s)://your-host.url</Text>
-                <Text className="text-xs text-gray-600 mb-1">(add port if required)</Text>
-                <Text className="text-xs text-red-600">This integration is in its early stages. Expect things to change.</Text>
-              </View>
-              <Input
-                placeholder="Jellyseerrs server URL..."
-                value={settings?.jellyseerrServerUrl ?? jellyseerrServerUrl}
-                keyboardType="url"
-                returnKeyType="done"
-                autoCapitalize="none"
-                textContentType="URL"
-                onChangeText={setjellyseerrServerUrl}
-              />
-            </View>
-          </View>
-          <Button
-            color="purple"
-            className="h-12 mt-2"
-            onPress={() => jellyseerrUser
-              ? clearAllJellyseerData().finally(() => setjellyseerrServerUrl(undefined))
-              : testJellyseerrServerUrl()
-            }
-          >
-            {jellyseerrUser ? "Clear jellyseerr data" : "Save"}
-          </Button>
-        </View>
-      </View>
+      <JellyseerrSettings />
    </View>
  );
 };
--- a/components/video-player/controls/AudioSlider.tsx
+++ b/components/video-player/controls/AudioSlider.tsx
@@ -20,7 +20,6 @@ const AudioSlider: React.FC<AudioSliderProps> = ({ setVisibility }) => {
    const fetchInitialVolume = async () => {
      try {
        const { volume: initialVolume } = await VolumeManager.getVolume();
-        console.log("initialVolume", initialVolume);
        volume.value = initialVolume * 100;
      } catch (error) {
        console.error("Error fetching initial volume:", error);
@@ -39,7 +38,6 @@ const AudioSlider: React.FC<AudioSliderProps> = ({ setVisibility }) => {

  const handleValueChange = async (value: number) => {
    volume.value = value;
-    console.log("volume through slider", value);
    await VolumeManager.setVolume(value / 100);

    // Re-call showNativeVolumeUI to ensure the setting is applied on iOS
@@ -48,7 +46,6 @@ const AudioSlider: React.FC<AudioSliderProps> = ({ setVisibility }) => {

  useEffect(() => {
    const volumeListener = VolumeManager.addVolumeListener((result) => {
-      console.log("Volume through device", result.volume);
      volume.value = result.volume * 100;
      setVisibility(true);

--- a/components/video-player/controls/BrightnessSlider.tsx
+++ b/components/video-player/controls/BrightnessSlider.tsx
@@ -14,7 +14,6 @@ const BrightnessSlider = () => {
  useEffect(() => {
    const fetchInitialBrightness = async () => {
      const initialBrightness = await Brightness.getBrightnessAsync();
-      console.log("initialBrightness", initialBrightness);
      brightness.value = initialBrightness * 100;
    };
    fetchInitialBrightness();
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -240,8 +240,6 @@ export const Controls: React.FC<Props> = ({
        ? maxValue - currentProgress
        : ticksToSeconds(maxValue - currentProgress);

-      console.log("remaining: ", remaining);
-
      setCurrentTime(current);
      setRemainingTime(remaining);
    },
@@ -349,7 +347,6 @@ export const Controls: React.FC<Props> = ({
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    try {
      const curr = progress.value;
-      console.log(curr);
      if (curr !== undefined) {
        const newTime = isVlc
          ? curr + secondsToMs(settings.forwardSkipTime)
@@ -375,8 +372,6 @@ export const Controls: React.FC<Props> = ({
    const tileWidth = 150;
    const tileHeight = 150 / trickplayInfo.aspectRatio!;

-    console.log("time, ", time);
-
    return (
      <View
        style={{
--- a/components/video-player/controls/NextEpisodeCountDownButton.tsx
+++ b/components/video-player/controls/NextEpisodeCountDownButton.tsx
@@ -35,7 +35,6 @@ const NextEpisodeCountDownButton: React.FC<NextEpisodeCountDownButtonProps> = ({
        },
        (finished) => {
          if (finished && onFinish) {
-            console.log("finish");
            runOnJS(onFinish)();
          }
        }
--- a/components/video-player/controls/dropdown/DropdownViewDirect.tsx
+++ b/components/video-player/controls/dropdown/DropdownViewDirect.tsx
@@ -106,19 +106,12 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
                  if ("deliveryUrl" in sub && sub.deliveryUrl) {
                    setSubtitleURL &&
                      setSubtitleURL(api?.basePath + sub.deliveryUrl, sub.name);
-
-                    console.log(
-                      "Set external subtitle: ",
-                      api?.basePath + sub.deliveryUrl
-                    );
                  } else {
-                    console.log("Set sub index: ", sub.index);
                    setSubtitleTrack && setSubtitleTrack(sub.index);
                  }
                  router.setParams({
                    subtitleIndex: sub.index.toString(),
                  });
-                  console.log("Subtitle: ", sub);
                }}
              >
                <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
--- a/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
+++ b/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
@@ -66,7 +66,6 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {

      const sortedSubtitles = subtitleHelper.getSortedSubtitles(textSubtitles);

-      console.log("sortedSubtitles", sortedSubtitles);
      return [disableSubtitle, ...sortedSubtitles];
    }

@@ -104,7 +103,6 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {

  const ChangeTranscodingAudio = useCallback(
    (audioIndex: number) => {
-      console.log("ChangeTranscodingAudio", subtitleIndex, audioIndex);
      const queryParams = new URLSearchParams({
        itemId: item.Id ?? "", // Ensure itemId is a string
        audioIndex: audioIndex?.toString() ?? "",
@@ -167,7 +165,6 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
                    }
                    key={`subtitle-item-${idx}`}
                    onValueChange={() => {
-                      console.log("sub", sub);
                      if (
                        subtitleIndex ===
                        (isOnTextSubtitle && sub.IsTextSubtitleStream
@@ -216,7 +213,6 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
                  value={audioIndex === track.index.toString()}
                  onValueChange={() => {
                    if (audioIndex === track.index.toString()) return;
-                    console.log("Setting audio track to: ", track.index);
                    router.setParams({
                      audioIndex: track.index.toString(),
                    });
--- a/hooks/useIntroSkipper.ts
+++ b/hooks/useIntroSkipper.ts
@@ -76,7 +76,6 @@ export const useIntroSkipper = (
  }, [introTimestamps, currentTime]);

  const skipIntro = useCallback(() => {
-    console.log("skipIntro");
    if (!introTimestamps) return;
    try {
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
--- a/hooks/useJellyseerr.ts
+++ b/hooks/useJellyseerr.ts
@@ -1,45 +1,54 @@
-import axios, {AxiosError, AxiosInstance} from "axios";
-import {Results} from "@/utils/jellyseerr/server/models/Search";
+import axios, { AxiosError, AxiosInstance } from "axios";
+import { Results } from "@/utils/jellyseerr/server/models/Search";
 import { storage } from "@/utils/mmkv";
-import {inRange} from "lodash";
-import {User as JellyseerrUser} from "@/utils/jellyseerr/server/entity/User";
-import {atom} from "jotai";
-import {useAtom} from "jotai/index";
+import { inRange } from "lodash";
+import { User as JellyseerrUser } from "@/utils/jellyseerr/server/entity/User";
+import { atom } from "jotai";
+import { useAtom } from "jotai/index";
 import "@/augmentations";
-import {useCallback, useMemo} from "react";
-import {useSettings} from "@/utils/atoms/settings";
-import {toast} from "sonner-native";
-import {MediaRequestStatus, MediaType} from "@/utils/jellyseerr/server/constants/media";
+import { useCallback, useMemo } from "react";
+import { useSettings } from "@/utils/atoms/settings";
+import { toast } from "sonner-native";
+import {
+  MediaRequestStatus,
+  MediaType,
+} from "@/utils/jellyseerr/server/constants/media";
 import MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
-import {MediaRequestBody} from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
-import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie";
-import {SeasonWithEpisodes, TvDetails} from "@/utils/jellyseerr/server/models/Tv";
-import {IssueStatus, IssueType} from "@/utils/jellyseerr/server/constants/issue";
+import { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
+import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
+import {
+  SeasonWithEpisodes,
+  TvDetails,
+} from "@/utils/jellyseerr/server/models/Tv";
+import {
+  IssueStatus,
+  IssueType,
+} from "@/utils/jellyseerr/server/constants/issue";
 import Issue from "@/utils/jellyseerr/server/entity/Issue";
-import {RTRating} from "@/utils/jellyseerr/server/api/rating/rottentomatoes";
-import {writeErrorLog} from "@/utils/log";
+import { RTRating } from "@/utils/jellyseerr/server/api/rating/rottentomatoes";
+import { writeErrorLog } from "@/utils/log";
 import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";

 interface SearchParams {
-  query: string,
-  page: number,
+  query: string;
+  page: number;
  language: string;
 }

 interface SearchResults {
-  page: number,
-  totalPages: number,
+  page: number;
+  totalPages: number;
  totalResults: number;
  results: Results[];
 }

-const JELLYSEERR_USER = "JELLYSEERR_USER"
-const JELLYSEERR_COOKIES = "JELLYSEERR_COOKIES"
+const JELLYSEERR_USER = "JELLYSEERR_USER";
+const JELLYSEERR_COOKIES = "JELLYSEERR_COOKIES";

 export const clearJellyseerrStorageData = () => {
  storage.delete(JELLYSEERR_USER);
  storage.delete(JELLYSEERR_COOKIES);
-}
+};

 export enum Endpoints {
  STATUS = "/status",
@@ -58,24 +67,29 @@ export enum Endpoints {
  AUTH_JELLYFIN = "/auth/jellyfin",
 }

-export type DiscoverEndpoint = Endpoints.DISCOVER_TRENDING | Endpoints.DISCOVER_MOVIES | Endpoints.DISCOVER_TV;
+export type DiscoverEndpoint =
+  | Endpoints.DISCOVER_TRENDING
+  | Endpoints.DISCOVER_MOVIES
+  | Endpoints.DISCOVER_TV;

-export type TestResult = {
-  isValid: true;
-  requiresPass: boolean;
-} | {
-  isValid: false;
-};
+export type TestResult =
+  | {
+      isValid: true;
+      requiresPass: boolean;
+    }
+  | {
+      isValid: false;
+    };

 export class JellyseerrApi {
  axios: AxiosInstance;

-  constructor (baseUrl: string) {
+  constructor(baseUrl: string) {
    this.axios = axios.create({
      baseURL: baseUrl,
      withCredentials: true,
      withXSRFToken: true,
-      xsrfHeaderName: "XSRF-TOKEN"
+      xsrfHeaderName: "XSRF-TOKEN",
    });

    this.setInterceptors();
@@ -86,132 +100,169 @@ export class JellyseerrApi {
    const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);

    if (user && cookies) {
-      console.log("User & cookies data exist for jellyseerr")
      return Promise.resolve({
        isValid: true,
-        requiresPass: false
+        requiresPass: false,
      });
    }

-    console.log("Testing jellyseerr connection")
-    return await this.axios.get(Endpoints.API_V1 + Endpoints.STATUS)
+    return await this.axios
+      .get(Endpoints.API_V1 + Endpoints.STATUS)
      .then((response) => {
-        const {status, headers, data} = response;
+        const { status, headers, data } = response;
        if (inRange(status, 200, 299)) {
          if (data.version < "2.0.0") {
-            const error = "Jellyseerr server does not meet minimum version requirements! Please update to at least 2.0.0";
+            const error =
+              "Jellyseerr server does not meet minimum version requirements! Please update to at least 2.0.0";
            toast.error(error);
            throw Error(error);
          }

-          console.log("Jellyseerr connecting successfully tested!");
-          storage.setAny(JELLYSEERR_COOKIES, headers["set-cookie"]?.flatMap(c => c.split("; ")) ?? []);
+          storage.setAny(
+            JELLYSEERR_COOKIES,
+            headers["set-cookie"]?.flatMap((c) => c.split("; ")) ?? []
+          );
          return {
            isValid: true,
-            requiresPass: true
+            requiresPass: true,
          };
        }
        toast.error(`Jellyseerr test failed. Please try again.`);
        writeErrorLog(
          `Jellyseerr returned a ${status} for url:\n` +
-          response.config.url + '\n' +
-          JSON.stringify(response.data)
+            response.config.url +
+            "\n" +
+            JSON.stringify(response.data)
        );
        return {
          isValid: false,
-          requiresPass: false
+          requiresPass: false,
        };
      })
      .catch((e) => {
        const msg = "Failed to test jellyseerr server url";
-        toast.error(msg)
-        console.error(msg, e)
+        toast.error(msg);
+        console.error(msg, e);
        return {
          isValid: false,
-          requiresPass: false
+          requiresPass: false,
        };
-      })
+      });
  }

  async login(username: string, password: string): Promise<JellyseerrUser> {
-    return this.axios?.post<JellyseerrUser>(Endpoints.API_V1 + Endpoints.AUTH_JELLYFIN, {
-      username,
-      password,
-      email: username
-    }).then(response => {
-      const user = response?.data;
-      if (!user)
-        throw Error("Login failed")
-      storage.setAny(JELLYSEERR_USER, user);
-      return user
-    })
+    return this.axios
+      ?.post<JellyseerrUser>(Endpoints.API_V1 + Endpoints.AUTH_JELLYFIN, {
+        username,
+        password,
+        email: username,
+      })
+      .then((response) => {
+        const user = response?.data;
+        if (!user) throw Error("Login failed");
+        storage.setAny(JELLYSEERR_USER, user);
+        return user;
+      });
  }

  async discoverSettings(): Promise<DiscoverSlider[]> {
-    return this.axios?.get<DiscoverSlider[]>(Endpoints.API_V1 + Endpoints.SETTINGS + Endpoints.DISCOVER)
-      .then(({data}) => data)
+    return this.axios
+      ?.get<DiscoverSlider[]>(
+        Endpoints.API_V1 + Endpoints.SETTINGS + Endpoints.DISCOVER
+      )
+      .then(({ data }) => data);
  }

-  async discover(endpoint: DiscoverEndpoint, params: any): Promise<SearchResults> {
-    return this.axios?.get<SearchResults>(Endpoints.API_V1 + endpoint, { params })
-      .then(({data}) => data)
+  async discover(
+    endpoint: DiscoverEndpoint,
+    params: any
+  ): Promise<SearchResults> {
+    return this.axios
+      ?.get<SearchResults>(Endpoints.API_V1 + endpoint, { params })
+      .then(({ data }) => data);
  }

  async search(params: SearchParams): Promise<SearchResults> {
-    const response = await this.axios?.get<SearchResults>(Endpoints.API_V1 + Endpoints.SEARCH, {params})
-    return response?.data
+    const response = await this.axios?.get<SearchResults>(
+      Endpoints.API_V1 + Endpoints.SEARCH,
+      { params }
+    );
+    return response?.data;
  }

  async request(request: MediaRequestBody): Promise<MediaRequest> {
-    return this.axios?.post<MediaRequest>(Endpoints.API_V1 + Endpoints.REQUEST, request)
-      .then(({data}) => data)
+    return this.axios
+      ?.post<MediaRequest>(Endpoints.API_V1 + Endpoints.REQUEST, request)
+      .then(({ data }) => data);
  }

  async movieDetails(id: number) {
-    return this.axios?.get<MovieDetails>(Endpoints.API_V1 + Endpoints.MOVIE + `/${id}`).then(response => {
-      return response?.data
-    })
+    return this.axios
+      ?.get<MovieDetails>(Endpoints.API_V1 + Endpoints.MOVIE + `/${id}`)
+      .then((response) => {
+        return response?.data;
+      });
  }

-
  async movieRatings(id: number) {
-    return this.axios?.get<RTRating>(`${Endpoints.API_V1}${Endpoints.MOVIE}/${id}${Endpoints.RATINGS}`)
-      .then(({data}) => data)
+    return this.axios
+      ?.get<RTRating>(
+        `${Endpoints.API_V1}${Endpoints.MOVIE}/${id}${Endpoints.RATINGS}`
+      )
+      .then(({ data }) => data);
  }

  async tvDetails(id: number) {
-    return this.axios?.get<TvDetails>(`${Endpoints.API_V1}${Endpoints.TV}/${id}`).then(response => {
-      return response?.data
-    })
+    return this.axios
+      ?.get<TvDetails>(`${Endpoints.API_V1}${Endpoints.TV}/${id}`)
+      .then((response) => {
+        return response?.data;
+      });
  }

  async tvRatings(id: number) {
-    return this.axios?.get<RTRating>(`${Endpoints.API_V1}${Endpoints.TV}/${id}${Endpoints.RATINGS}`)
-      .then(({data}) => data)
+    return this.axios
+      ?.get<RTRating>(
+        `${Endpoints.API_V1}${Endpoints.TV}/${id}${Endpoints.RATINGS}`
+      )
+      .then(({ data }) => data);
  }

  async tvSeason(id: number, seasonId: number) {
-    return this.axios?.get<SeasonWithEpisodes>(`${Endpoints.API_V1}${Endpoints.TV}/${id}/season/${seasonId}`).then(response => {
-      console.log(response.data.episodes)
-      return response?.data
-    })
+    return this.axios
+      ?.get<SeasonWithEpisodes>(
+        `${Endpoints.API_V1}${Endpoints.TV}/${id}/season/${seasonId}`
+      )
+      .then((response) => {
+        return response?.data;
+      });
  }

  tvStillImageProxy(path: string, width: number = 1920, quality: number = 75) {
-    return this.axios.defaults.baseURL + `/_next/image?` + new URLSearchParams(`url=https://image.tmdb.org/t/p/original/${path}&w=${width}&q=${quality}`).toString()
+    return (
+      this.axios.defaults.baseURL +
+      `/_next/image?` +
+      new URLSearchParams(
+        `url=https://image.tmdb.org/t/p/original/${path}&w=${width}&q=${quality}`
+      ).toString()
+    );
  }

  async submitIssue(mediaId: number, issueType: IssueType, message: string) {
-    return this.axios?.post<Issue>(Endpoints.API_V1 +  Endpoints.ISSUE, {
-      mediaId, issueType, message
-    }).then((response) => {
-      const issue = response.data
+    return this.axios
+      ?.post<Issue>(Endpoints.API_V1 + Endpoints.ISSUE, {
+        mediaId,
+        issueType,
+        message,
+      })
+      .then((response) => {
+        const issue = response.data;

-      if (issue.status === IssueStatus.OPEN) {
-        toast.success("Issue submitted!")
-      }
-      return issue
-    })
+        if (issue.status === IssueStatus.OPEN) {
+          toast.success("Issue submitted!");
+        }
+        return issue;
+      });
  }

  private setInterceptors() {
@@ -219,7 +270,10 @@ export class JellyseerrApi {
      async (response) => {
        const cookies = response.headers["set-cookie"];
        if (cookies) {
-          storage.setAny(JELLYSEERR_COOKIES, response.headers["set-cookie"]?.flatMap(c => c.split("; ")));
+          storage.setAny(
+            JELLYSEERR_COOKIES,
+            response.headers["set-cookie"]?.flatMap((c) => c.split("; "))
+          );
        }
        return response;
      },
@@ -227,16 +281,17 @@ export class JellyseerrApi {
        const errorMsg = "Jellyseerr response error";
        console.error(errorMsg, error, error.response?.data);
        writeErrorLog(
-          errorMsg + `\n` +
-          `error: ${error.toString()}\n` +
-          `url: ${error?.config?.url}\n` +
-          `data:\n` +
-          JSON.stringify(error.response?.data)
+          errorMsg +
+            `\n` +
+            `error: ${error.toString()}\n` +
+            `url: ${error?.config?.url}\n` +
+            `data:\n` +
+            JSON.stringify(error.response?.data)
        );
        if (error.status === 403) {
-          clearJellyseerrStorageData()
+          clearJellyseerrStorageData();
        }
-        return Promise.reject(error)
+        return Promise.reject(error);
      }
    );

@@ -246,22 +301,22 @@ export class JellyseerrApi {
        if (cookies) {
          const headerName = this.axios.defaults.xsrfHeaderName!!;
          const xsrfToken = cookies
-            .find(c => c.includes(headerName))
-            ?.split(headerName + "=")?.[1]
+            .find((c) => c.includes(headerName))
+            ?.split(headerName + "=")?.[1];
          if (xsrfToken) {
            config.headers[headerName] = xsrfToken;
          }
        }
-        return config
+        return config;
      },
      (error) => {
-        console.error("Jellyseerr request error", error)
+        console.error("Jellyseerr request error", error);
      }
    );
  }
 }

-const jellyseerrUserAtom = atom(storage.get<JellyseerrUser>(JELLYSEERR_USER))
+const jellyseerrUserAtom = atom(storage.get<JellyseerrUser>(JELLYSEERR_USER));

 export const useJellyseerr = () => {
  const [jellyseerrUser, setJellyseerrUser] = useAtom(jellyseerrUserAtom);
@@ -270,43 +325,47 @@ export const useJellyseerr = () => {
  const jellyseerrApi = useMemo(() => {
    const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);
    if (settings?.jellyseerrServerUrl && cookies && jellyseerrUser) {
-      return new JellyseerrApi(settings?.jellyseerrServerUrl)
+      return new JellyseerrApi(settings?.jellyseerrServerUrl);
    }
-    return undefined
-  }, [settings?.jellyseerrServerUrl, jellyseerrUser])
+    return undefined;
+  }, [settings?.jellyseerrServerUrl, jellyseerrUser]);

  const clearAllJellyseerData = useCallback(async () => {
-    clearJellyseerrStorageData()
+    clearJellyseerrStorageData();
    setJellyseerrUser(undefined);
-    updateSettings({jellyseerrServerUrl: undefined})
+    updateSettings({ jellyseerrServerUrl: undefined });
  }, []);

-  const requestMedia = useCallback((
-    title: string,
-    request: MediaRequestBody,
-  ) => {
-    jellyseerrApi?.request?.(request)?.then((mediaRequest) => {
-      switch (mediaRequest.status) {
-        case MediaRequestStatus.PENDING:
-        case MediaRequestStatus.APPROVED:
-          toast.success(`Requested ${title}!`)
-          break;
-        case MediaRequestStatus.DECLINED:
-          toast.error(`You don't have permission to request!`)
-          break;
-        case MediaRequestStatus.FAILED:
-          toast.error(`Something went wrong requesting media!`)
-          break;
-      }
-    })
-  }, [jellyseerrApi])
+  const requestMedia = useCallback(
+    (title: string, request: MediaRequestBody) => {
+      jellyseerrApi?.request?.(request)?.then((mediaRequest) => {
+        switch (mediaRequest.status) {
+          case MediaRequestStatus.PENDING:
+          case MediaRequestStatus.APPROVED:
+            toast.success(`Requested ${title}!`);
+            break;
+          case MediaRequestStatus.DECLINED:
+            toast.error(`You don't have permission to request!`);
+            break;
+          case MediaRequestStatus.FAILED:
+            toast.error(`Something went wrong requesting media!`);
+            break;
+        }
+      });
+    },
+    [jellyseerrApi]
+  );

-  const isJellyseerrResult = (items: any[] | null | undefined): items is Results[] => {
+  const isJellyseerrResult = (
+    items: any[] | null | undefined
+  ): items is Results[] => {
    return (
      !items ||
-      items.length >= 0 && Object.hasOwn(items[0], "mediaType") && Object.values(MediaType).includes(items[0]['mediaType'])
-    )
-  }
+      (items.length >= 0 &&
+        Object.hasOwn(items[0], "mediaType") &&
+        Object.values(MediaType).includes(items[0]["mediaType"]))
+    );
+  };

  return {
    jellyseerrApi,
@@ -314,6 +373,6 @@ export const useJellyseerr = () => {
    setJellyseerrUser,
    clearAllJellyseerData,
    isJellyseerrResult,
-    requestMedia
-  }
+    requestMedia,
+  };
 };
--- a/package.json
+++ b/package.json
@@ -101,6 +101,8 @@
    "react-native-video": "^6.7.0",
    "react-native-volume-manager": "^1.10.0",
    "react-native-web": "~0.19.13",
+    "react-native-webview": "^13.12.5",
+    "react-native-youtube-iframe": "^2.3.0",
    "sonner-native": "^0.14.2",
    "tailwindcss": "3.3.2",
    "use-debounce": "^10.0.4",