Jellyseerr Integration

## Note this is early stages of said integration. Things will change! series and season working - added jellyseerr git submodule - augmentations - working jellyseerr search integration - working jellyseerr requests & updated interceptors to persist cookies from every response
2024-12-21 20:26:25 -05:00
parent 78b7425c6b
commit 9f12ee027f
24 changed files with 1368 additions and 52 deletions
--- a/.gitmodules
+++ b/.gitmodules
@@ -0,0 +1,4 @@
+[submodule "utils/jellyseerr"]
+	path = utils/jellyseerr
+	url = https://github.com/herrrta/jellyseerr
+	branch = models
--- a/app/(auth)/(tabs)/(home)/settings.tsx
+++ b/app/(auth)/(tabs)/(home)/settings.tsx
@@ -2,7 +2,7 @@ import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { ListItem } from "@/components/ListItem";
 import { SettingToggles } from "@/components/settings/SettingToggles";
-import { bytesToReadable, useDownload } from "@/providers/DownloadProvider";
+import {useDownload} from "@/providers/DownloadProvider";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import { clearLogs, useLog } from "@/utils/log";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
@@ -122,7 +122,7 @@ export default function settings() {
        <View className="flex flex-col space-y-2">
          <Text className="font-bold text-lg mb-2">Storage</Text>
          <View className="mb-4 space-y-2">
-            {size && <Text>App usage: {bytesToReadable(size.app)}</Text>}
+            {size && <Text>App usage: {size.app.bytesToReadable()}</Text>}
            <Progress.Bar
              className="bg-gray-100/10"
              indeterminate={appSizeLoading}
@@ -135,8 +135,8 @@ export default function settings() {
            />
            {size && (
              <Text>
-                Available: {bytesToReadable(size.remaining)}, Total:{" "}
-                {bytesToReadable(size.total)}
+                Available: {size.remaining?.bytesToReadable()}, Total:{" "}
+                {size.total?.bytesToReadable()}
              </Text>
            )}
          </View>
--- a/app/(auth)/(tabs)/(home,libraries,search)/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/jellyseerr/page.tsx
@@ -0,0 +1,251 @@
+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 JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
+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 canRequest = canRequestString === "true";
+  const {jellyseerrApi, requestMedia} = useJellyseerr();
+
+  const [issueType, setIssueType] = useState<IssueType>();
+  const [issueMessage, setIssueMessage] = useState<string>();
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+
+  const {data: details, isLoading} = useQuery({
+    enabled: !!jellyseerrApi && !!result && !!result.id,
+    queryKey: ["jellyseerr", "detail", result.mediaType, result.id],
+    staleTime: 0,
+    refetchOnMount: true,
+    refetchOnReconnect: true,
+    refetchOnWindowFocus: true,
+    retryOnMount: true,
+    queryFn: async () => {
+      return result.mediaType === MediaType.MOVIE
+        ? jellyseerrApi?.movieDetails(result.id!!)
+        : jellyseerrApi?.tvDetails(result.id!!)
+    }
+  });
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    []
+  );
+
+  const submitIssue = useCallback(() => {
+    if (result.id && issueType && issueMessage && details) {
+      jellyseerrApi?.submitIssue(details.mediaInfo.id, Number(issueType), issueMessage)
+        .then(() => {
+          setIssueType(undefined)
+          setIssueMessage(undefined)
+          bottomSheetModalRef?.current?.close()
+        })
+    }
+  }, [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]);
+
+  return  (
+    <View
+      className="flex-1 relative"
+      style={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <ParallaxScrollView
+        className="flex-1 opacity-100"
+        headerHeight={300}
+        headerImage={
+          <View>
+            {result.backdropPath ? (
+              <Image
+                cachePolicy={"memory-disk"}
+                transition={300}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                }}
+                source={{
+                  uri: `https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${result.backdropPath}`,
+                }}
+              />
+            ) : (
+              <View
+                style={{
+                  width: "100%",
+                  height: "100%",
+                }}
+                className="flex flex-col 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="flex flex-col">
+          <View className="p-4 space-y-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>
+                  <Text className="opacity-50">{releaseYear}</Text>
+                </View>
+                <Image
+                  className="absolute bottom-1 right-1 rounded-lg w-28 aspect-[10/15] border-2 border-neutral-800/50 drop-shadow-2xl"
+                  cachePolicy={"memory-disk"}
+                  transition={300}
+                  source={{
+                    uri: posterSrc,
+                  }}
+                />
+              </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" />
+
+            {result.mediaType === MediaType.TV &&
+                <JellyseerrSeasons
+                    isLoading={isLoading}
+                    result={result as TvResult}
+                    details={details as TvDetails}
+                />
+            }
+          </View>
+        </View>
+      </ParallaxScrollView>
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing
+        handleIndicatorStyle={{
+          backgroundColor: "white",
+        }}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        backdropComponent={renderBackdrop}
+      >
+        <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>
+            </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>
+                      <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' }
+                        </Text>
+                      </TouchableOpacity>
+                    </View>
+                  </DropdownMenu.Trigger>
+                  <DropdownMenu.Content
+                    loop={false}
+                    side="bottom"
+                    align="center"
+                    alignOffset={0}
+                    avoidCollisions={true}
+                    collisionPadding={0}
+                    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>
+                    ))}
+                  </DropdownMenu.Content>
+                </DropdownMenu.Root>
+              </View>
+
+              <Input
+                className="w-full"
+                placeholder="(optional) Describe the issue..."
+                value={issueMessage}
+                keyboardType="default"
+                returnKeyType="done"
+                autoCapitalize="none"
+                textContentType="none"
+                maxLength={254}
+                onChangeText={setIssueMessage}
+              />
+            </View>
+            <Button
+              className="mt-auto"
+              onPress={submitIssue}
+              color="purple"
+            >
+              Submit
+            </Button>
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
+    </View>
+  );
+}
+
+export default Page;
--- a/app/(auth)/(tabs)/(search)/_layout.tsx
+++ b/app/(auth)/(tabs)/(search)/_layout.tsx
@@ -1,4 +1,4 @@
-import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
+import {commonScreenOptions, nestedTabPageScreenOptions} from "@/components/stacks/NestedTabPageStack";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";

@@ -29,6 +29,10 @@ export default function SearchLayout() {
          headerShadowVisible: false,
        }}
      />
+      <Stack.Screen
+        name="jellyseerr/page"
+        options={commonScreenOptions}
+      />
    </Stack>
  );
 }
--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/app/(auth)/(tabs)/(search)/index.tsx
@@ -20,6 +20,7 @@ import axios from "axios";
 import { Href, router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, {
+  PropsWithChildren,
  useCallback,
  useEffect,
  useLayoutEffect,
@@ -29,6 +30,10 @@ 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 JellyseerrPoster from "@/components/posters/JellyseerrPoster";

 const exampleSearches = [
  "Lord of the rings",
@@ -53,6 +58,7 @@ export default function search() {
  const [user] = useAtom(userAtom);

  const [settings] = useSettings();
+  const { jellyseerrApi } = useJellyseerr();

  const searchEngine = useMemo(() => {
    return settings?.searchEngine || "Jellyfin";
@@ -135,6 +141,30 @@ export default function search() {
    enabled: debouncedSearch.length > 0,
  });

+  const { data: jellyseerrResults, isFetching: r1 } = useQuery({
+    queryKey: ["search", "jellyseerrResults", debouncedSearch],
+    queryFn: async () => {
+      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'
+      })
+
+      return response?.results;
+    },
+    enabled: !!jellyseerrApi && debouncedSearch.length > 0,
+  });
+
+  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[],
+    [jellyseerrResults]
+  )
+
  const { data: series, isFetching: l2 } = useQuery({
    queryKey: ["search", "series", debouncedSearch],
    queryFn: () =>
@@ -214,9 +244,11 @@ export default function search() {
      episodes?.length ||
      series?.length ||
      collections?.length ||
-      actors?.length
+      actors?.length ||
+      jellyseerrMovieResults?.length ||
+      jellyseerrTvResults?.length
    );
-  }, [artists, episodes, albums, songs, movies, series, collections, actors]);
+  }, [artists, episodes, albums, songs, movies, series, collections, actors, jellyseerrResults]);

  const loading = useMemo(() => {
    return l1 || l2 || l3 || l4 || l5 || l6 || l7 || l8;
@@ -255,7 +287,7 @@ export default function search() {
          <SearchItemWrapper
            header="Movies"
            ids={movies?.map((m) => m.Id!)}
-            renderItem={(item) => (
+            renderItem={(item: BaseItemDto) => (
              <TouchableItemRouter
                key={item.Id}
                className="flex flex-col w-28 mr-2"
@@ -271,10 +303,17 @@ export default function search() {
              </TouchableItemRouter>
            )}
          />
+          <SearchItemWrapper
+            header="Request Movies"
+            items={jellyseerrMovieResults}
+            renderItem={(item: MovieResult) => (
+              <JellyseerrPoster item={item} key={item.id} />
+            )}
+          />
          <SearchItemWrapper
            ids={series?.map((m) => m.Id!)}
            header="Series"
-            renderItem={(item) => (
+            renderItem={(item: BaseItemDto) => (
              <TouchableItemRouter
                key={item.Id}
                item={item}
@@ -290,10 +329,17 @@ export default function search() {
              </TouchableItemRouter>
            )}
          />
+          <SearchItemWrapper
+            header="Request Series"
+            items={jellyseerrTvResults}
+            renderItem={(item: TvResult) => (
+              <JellyseerrPoster item={item} key={item.id} />
+            )}
+          />
          <SearchItemWrapper
            ids={episodes?.map((m) => m.Id!)}
            header="Episodes"
-            renderItem={(item) => (
+            renderItem={(item: BaseItemDto) => (
              <TouchableItemRouter
                item={item}
                key={item.Id}
@@ -307,7 +353,7 @@ export default function search() {
          <SearchItemWrapper
            ids={collections?.map((m) => m.Id!)}
            header="Collections"
-            renderItem={(item) => (
+            renderItem={(item: BaseItemDto) => (
              <TouchableItemRouter
                key={item.Id}
                item={item}
@@ -323,7 +369,7 @@ export default function search() {
          <SearchItemWrapper
            ids={actors?.map((m) => m.Id!)}
            header="Actors"
-            renderItem={(item) => (
+            renderItem={(item: BaseItemDto) => (
              <TouchableItemRouter
                item={item}
                key={item.Id}
@@ -337,7 +383,7 @@ export default function search() {
          <SearchItemWrapper
            ids={artists?.map((m) => m.Id!)}
            header="Artists"
-            renderItem={(item) => (
+            renderItem={(item: BaseItemDto) => (
              <TouchableItemRouter
                item={item}
                key={item.Id}
@@ -351,7 +397,7 @@ export default function search() {
          <SearchItemWrapper
            ids={albums?.map((m) => m.Id!)}
            header="Albums"
-            renderItem={(item) => (
+            renderItem={(item: BaseItemDto) => (
              <TouchableItemRouter
                item={item}
                key={item.Id}
@@ -365,7 +411,7 @@ export default function search() {
          <SearchItemWrapper
            ids={songs?.map((m) => m.Id!)}
            header="Songs"
-            renderItem={(item) => (
+            renderItem={(item: BaseItemDto) => (
              <TouchableItemRouter
                item={item}
                key={item.Id}
@@ -408,13 +454,14 @@ export default function search() {
  );
 }

-type Props = {
+type Props<T> = {
  ids?: string[] | null;
-  renderItem: (item: BaseItemDto) => React.ReactNode;
+  items?: T[];
+  renderItem: (item: any) => React.ReactNode;
  header?: string;
 };

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

@@ -444,7 +491,7 @@ const SearchItemWrapper: React.FC<Props> = ({ ids, renderItem, header }) => {
    staleTime: Infinity,
  });

-  if (!data) return null;
+  if (!data && (!items || items.length === 0)) return null;

  return (
    <>
@@ -454,7 +501,14 @@ const SearchItemWrapper: React.FC<Props> = ({ ids, renderItem, header }) => {
        className="px-4 mb-2"
        showsHorizontalScrollIndicator={false}
      >
-        {data.map((item) => renderItem(item))}
+        {
+          data && data?.length > 0
+            ? data.map((item) => renderItem(item))
+            :
+          items && items?.length > 0
+            ? items.map(i => renderItem(i))
+            : undefined
+        }
      </ScrollView>
    </>
  );
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,3 +1,4 @@
+import "@/augmentations";
 import { DownloadProvider } from "@/providers/DownloadProvider";
 import {
  getOrSetDeviceId,
--- a/augmentations/index.ts
+++ b/augmentations/index.ts
@@ -0,0 +1,2 @@
+export * from "./number";
+export * from "./mmkv";
--- a/augmentations/mmkv.ts
+++ b/augmentations/mmkv.ts
@@ -0,0 +1,17 @@
+import {MMKV} from "react-native-mmkv";
+
+declare module "react-native-mmkv" {
+  interface MMKV {
+    get<T>(key: string): T | undefined
+    setAny(key: string, value: any | undefined): void
+  }
+}
+
+MMKV.prototype.get = function <T> (key: string): T | undefined {
+  const serializedItem = this.getString(key);
+  return serializedItem ? JSON.parse(serializedItem) : undefined;
+}
+
+MMKV.prototype.setAny = function (key: string, value: any | undefined): void {
+  this.set(key, JSON.stringify(value));
+}
--- a/augmentations/number.ts
+++ b/augmentations/number.ts
@@ -0,0 +1,22 @@
+declare global {
+  interface Number {
+    bytesToReadable(): string;
+  }
+}
+
+Number.prototype.bytesToReadable = function () {
+  const bytes = this.valueOf();
+  const gb = bytes / 1e9;
+
+  if (gb >= 1) return `${gb.toFixed(2)} GB`;
+
+  const mb = bytes / 1024.0 / 1024.0;
+  if (mb >= 1) return `${mb.toFixed(2)} MB`;
+
+  const kb = bytes / 1024.0;
+  if (kb >= 1) return `${kb.toFixed(2)} KB`;
+
+  return `${bytes.toFixed(2)} B`;
+}
+
+export {};
--- a/components/GenreTags.tsx
+++ b/components/GenreTags.tsx
@@ -1,22 +1,31 @@
 // GenreTags.tsx
 import React from "react";
-import { View } from "react-native";
+import {View, ViewProps} from "react-native";
 import { Text } from "./common/Text";

-interface GenreTagsProps {
-  genres?: string[];
+interface TagProps {
+  tags?: string[];
+  textClass?: ViewProps["className"]
 }

-export const GenreTags: React.FC<GenreTagsProps> = ({ genres }) => {
-  if (!genres || genres.length === 0) return null;
+export const Tags: React.FC<TagProps & ViewProps> = ({ tags, textClass = "text-xs", ...props }) => {
+  if (!tags || tags.length === 0) return null;

  return (
-    <View className="flex flex-row flex-wrap mt-2">
-      {genres.map((genre, idx) => (
-        <View key={idx} className="bg-neutral-800 rounded-full px-2 py-1 mr-1">
-          <Text className="text-xs">{genre}</Text>
+    <View className={`flex flex-row flex-wrap gap-1 ${props.className}`} {...props}>
+      {tags.map((genre, idx) => (
+        <View key={idx} className="bg-neutral-800 rounded-full px-2 py-1">
+          <Text className={textClass}>{genre}</Text>
        </View>
      ))}
    </View>
  );
 };
+
+export const GenreTags: React.FC<{ genres?: string[]}> = ({ genres }) => {
+  return (
+    <View className="mt-2">
+      <Tags tags={genres}/>
+    </View>
+  );
+};
--- a/components/Ratings.tsx
+++ b/components/Ratings.tsx
@@ -3,6 +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";

 interface Props extends ViewProps {
  item?: BaseItemDto | null;
@@ -40,3 +44,80 @@ export const Ratings: React.FC<Props> = ({ item, ...props }) => {
    </View>
  );
 };
+
+
+export const JellyserrRatings: React.FC<{result: MovieResult | TvResult}> = ({ result }) => {
+  const {jellyseerrApi} = useJellyseerr();
+  const { data, isLoading } = useQuery({
+    queryKey: ['jellyseerr', result.id, result.mediaType, 'ratings'],
+    queryFn: async () => {
+      return result.mediaType === MediaType.MOVIE
+        ? jellyseerrApi?.movieRatings(result.id)
+        : jellyseerrApi?.tvRatings(result.id)
+    },
+    enabled: !!jellyseerrApi
+  });
+
+  return (isLoading || !!result.voteCount ||
+      (data?.criticsRating && !!data?.criticsScore) ||
+      (data?.audienceRating && !!data?.audienceScore)) && (
+      <View className="flex flex-row flex-wrap space-x-1">
+        {data?.criticsRating && !!data?.criticsScore && (
+          <Badge
+            text={`${data.criticsScore}%`}
+            variant="gray"
+            iconLeft={
+              <Image
+                className="mr-1"
+                source={
+                  data?.criticsRating === 'Rotten'
+                    ? require("@/utils/jellyseerr/src/assets/rt_rotten.svg")
+                    : require("@/utils/jellyseerr/src/assets/rt_fresh.svg")
+                }
+                style={{
+                  width: 14,
+                  height: 14,
+                }}
+              />
+            }
+          />
+        )}
+        {data?.audienceRating && !!data?.audienceScore && (
+          <Badge
+            text={`${data.audienceScore}%`}
+            variant="gray"
+            iconLeft={
+              <Image
+                className="mr-1"
+                source={
+                  data?.audienceRating === 'Spilled'
+                    ? require("@/utils/jellyseerr/src/assets/rt_aud_rotten.svg")
+                    : require("@/utils/jellyseerr/src/assets/rt_aud_fresh.svg")
+                }
+                style={{
+                  width: 14,
+                  height: 14,
+                }}
+              />
+            }
+          />
+        )}
+        {!!result.voteCount && (
+          <Badge
+            text={`${Math.round(result.voteAverage * 10)}%`}
+            variant="gray"
+            iconLeft={
+              <Image
+                className="mr-1"
+                source={require("@/utils/jellyseerr/src/assets/tmdb_logo.svg")}
+                style={{
+                  width: 14,
+                  height: 14,
+                }}
+              />
+            }
+          />
+        )}
+      </View>
+    )
+}
--- a/components/RoundButton.tsx
+++ b/components/RoundButton.tsx
@@ -9,7 +9,7 @@ import {
 import * as Haptics from "expo-haptics";

 interface Props extends TouchableOpacityProps {
-  onPress: () => void;
+  onPress?: () => void,
  icon?: keyof typeof Ionicons.glyphMap;
  background?: boolean;
  size?: "default" | "large";
@@ -34,7 +34,7 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
    if (hapticFeedback) {
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    }
-    onPress();
+    onPress?.();
  };

  if (fillColor)
--- a/components/common/JellyseerrItemRouter.tsx
+++ b/components/common/JellyseerrItemRouter.tsx
@@ -0,0 +1,103 @@
+import {useRouter, useSegments} from "expo-router";
+import React, {PropsWithChildren, useCallback, useMemo} from "react";
+import {TouchableOpacity, TouchableOpacityProps} from "react-native";
+import * as ContextMenu from "zeego/context-menu";
+import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import {useJellyseerr} from "@/hooks/useJellyseerr";
+import {hasPermission, Permission} from "@/utils/jellyseerr/server/lib/permissions";
+import {MediaType} from "@/utils/jellyseerr/server/constants/media";
+
+interface Props extends TouchableOpacityProps {
+  result: MovieResult | TvResult;
+  mediaTitle: string;
+  releaseYear: number;
+  canRequest: boolean;
+  posterSrc: string;
+}
+
+export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
+  result,
+  mediaTitle,
+  releaseYear,
+  canRequest,
+  posterSrc,
+  children,
+  ...props
+}) => {
+  const router = useRouter();
+  const segments = useSegments();
+  const {jellyseerrApi, jellyseerrUser, requestMedia} = useJellyseerr()
+
+  const from = segments[2];
+
+  const autoApprove = useMemo(() => {
+    return jellyseerrUser && hasPermission(
+      Permission.AUTO_APPROVE,
+      jellyseerrUser.permissions,
+      {type: 'or'}
+    )
+  }, [jellyseerrApi, jellyseerrUser])
+
+  const request = useCallback(() =>
+      requestMedia(mediaTitle, {
+        mediaId: result.id,
+        mediaType: result.mediaType
+      }
+    ),
+    [jellyseerrApi, result]
+  )
+
+  if (from === "(home)" || from === "(search)" || from === "(libraries)")
+    return (
+      <>
+        <ContextMenu.Root>
+          <ContextMenu.Trigger>
+            <TouchableOpacity
+              onPress={() => {
+                // @ts-ignore
+                router.push({pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`, params: {...result, mediaTitle, releaseYear, canRequest, posterSrc}});
+              }}
+              {...props}
+            >
+              {children}
+            </TouchableOpacity>
+          </ContextMenu.Trigger>
+          <ContextMenu.Content
+            avoidCollisions
+            alignOffset={0}
+            collisionPadding={0}
+            loop={false}
+            key={"content"}
+          >
+            <ContextMenu.Label key="label-1">Actions</ContextMenu.Label>
+            {canRequest && result.mediaType === MediaType.MOVIE && (
+                <ContextMenu.Item
+                  key="item-1"
+                  onSelect={() => {
+                    if (autoApprove) {
+                      request()
+                    }
+                  }}
+                  shouldDismissMenuOnSelect
+                >
+                  <ContextMenu.ItemTitle key="item-1-title">Request</ContextMenu.ItemTitle>
+                  <ContextMenu.ItemIcon
+                    ios={{
+                      name: "arrow.down.to.line",
+                      pointSize: 18,
+                      weight: "semibold",
+                      scale: "medium",
+                      hierarchicalColor: {
+                        dark: "purple",
+                        light: "purple",
+                      },
+                    }}
+                    androidIconName="download"
+                  />
+                </ContextMenu.Item>
+              )}
+          </ContextMenu.Content>
+        </ContextMenu.Root>
+      </>
+    );
+};
--- a/components/downloads/DownloadSize.tsx
+++ b/components/downloads/DownloadSize.tsx
@@ -1,5 +1,5 @@
 import { Text } from "@/components/common/Text";
-import { bytesToReadable, useDownload } from "@/providers/DownloadProvider";
+import { useDownload } from "@/providers/DownloadProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import React, { useEffect, useMemo, useState } from "react";
 import { TextProps } from "react-native";
@@ -29,7 +29,7 @@ export const DownloadSize: React.FC<DownloadSizeProps> = ({
        s += size;
      }
    }
-    setSize(bytesToReadable(s));
+    setSize(s.bytesToReadable());
  }, [itemIds]);

  const sizeText = useMemo(() => {
--- a/components/icons/JellyseerrIconStatus.tsx
+++ b/components/icons/JellyseerrIconStatus.tsx
@@ -0,0 +1,72 @@
+import {useEffect, useState} from "react";
+import {MediaStatus} from "@/utils/jellyseerr/server/constants/media";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+import {TouchableOpacity, View, ViewProps} from "react-native";
+import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
+
+interface Props {
+  mediaStatus?: MediaStatus;
+  showRequestIcon: boolean;
+  onPress?: () => void;
+}
+
+const JellyseerrIconStatus: React.FC<Props & ViewProps> = ({
+  mediaStatus,
+  showRequestIcon,
+  onPress,
+  ...props
+}) => {
+  const [badgeIcon, setBadgeIcon] = useState<keyof typeof MaterialCommunityIcons.glyphMap>();
+  const [badgeStyle, setBadgeStyle] = useState<string>();
+
+  // Match similar to what Jellyseerr is currently using
+  // https://github.com/Fallenbagel/jellyseerr/blob/8a097d5195749c8d1dca9b473b8afa96a50e2fe2/src/components/Common/StatusBadgeMini/index.tsx#L33C1-L62C4
+  useEffect(() => {
+    switch (mediaStatus) {
+      case MediaStatus.PROCESSING:
+        setBadgeStyle('bg-indigo-500 border-indigo-400 ring-indigo-400 text-indigo-100');
+        setBadgeIcon('clock');
+        break;
+      case MediaStatus.AVAILABLE:
+        setBadgeStyle('bg-purple-500 border-green-400 ring-green-400 text-green-100');
+        setBadgeIcon('check')
+        break;
+      case MediaStatus.PENDING:
+        setBadgeStyle('bg-yellow-500 border-yellow-400 ring-yellow-400 text-yellow-100');
+        setBadgeIcon('bell')
+        break;
+      case MediaStatus.BLACKLISTED:
+        setBadgeStyle('bg-red-500 border-white-400 ring-white-400 text-white');
+        setBadgeIcon('eye-off')
+        break;
+      case MediaStatus.PARTIALLY_AVAILABLE:
+        setBadgeStyle('bg-green-500 border-green-400 ring-green-400 text-green-100');
+        setBadgeIcon("minus");
+        break;
+      default:
+        if (showRequestIcon) {
+          setBadgeStyle('bg-green-600');
+          setBadgeIcon("plus")
+        }
+        break;
+    }
+  }, [mediaStatus, showRequestIcon, setBadgeStyle, setBadgeIcon])
+
+  return (
+    badgeIcon &&
+    <TouchableOpacity onPress={onPress} disabled={onPress == undefined}>
+        <View
+            className={`${badgeStyle ?? 'bg-purple-600'} rounded-full h-6 w-6 flex items-center justify-center ${props.className}`}
+            {...props}
+        >
+            <MaterialCommunityIcons
+                name={badgeIcon}
+                size={18}
+                color="white"
+            />
+        </View>
+    </TouchableOpacity>
+  )
+}
+
+export default JellyseerrIconStatus;
--- a/components/posters/JellyseerrPoster.tsx
+++ b/components/posters/JellyseerrPoster.tsx
@@ -0,0 +1,92 @@
+import {View, ViewProps} from "react-native";
+import {Image} from "expo-image";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+import {Text} from "@/components/common/Text";
+import {useEffect, useMemo, useState} from "react";
+import {MovieResult, Results, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import {MediaStatus, MediaType} from "@/utils/jellyseerr/server/constants/media";
+import {useJellyseerr} from "@/hooks/useJellyseerr";
+import {hasPermission, Permission} from "@/utils/jellyseerr/server/lib/permissions";
+import {TouchableJellyseerrRouter} from "@/components/common/JellyseerrItemRouter";
+import JellyseerrIconStatus from "@/components/icons/JellyseerrIconStatus";
+interface Props extends ViewProps {
+  item: MovieResult | TvResult;
+}
+
+const JellyseerrPoster: React.FC<Props> = ({
+  item,
+  ...props
+}) => {
+  const {jellyseerrUser, jellyseerrApi} = useJellyseerr();
+  // const imageSource =
+
+  const imageSrc = useMemo(() =>
+      item.posterPath ?
+        `https://image.tmdb.org/t/p/w300_and_h450_face${item.posterPath}`
+        : jellyseerrApi?.axios?.defaults.baseURL + `/images/overseerr_poster_not_found_logo_top.png`,
+    [item, jellyseerrApi]
+  )
+  const title = useMemo(() => item.mediaType === MediaType.MOVIE ? item.title : item.name, [item])
+  const releaseYear = useMemo(() =>
+    new Date(item.mediaType === MediaType.MOVIE ? item.releaseDate : item.firstAirDate).getFullYear(),
+    [item]
+  )
+
+  const showRequestButton = useMemo(() =>
+    jellyseerrUser && hasPermission(
+      [
+        Permission.REQUEST,
+        item.mediaType === 'movie'
+          ? Permission.REQUEST_MOVIE
+          : Permission.REQUEST_TV,
+      ],
+      jellyseerrUser.permissions,
+      {type: 'or'}
+    ),
+    [item, jellyseerrUser]
+  )
+
+  const canRequest = useMemo(() => {
+    const status = item?.mediaInfo?.status
+    return showRequestButton && !status || status === MediaStatus.UNKNOWN
+  }, [item])
+
+  return (
+    <TouchableJellyseerrRouter
+      result={item}
+      mediaTitle={title}
+      releaseYear={releaseYear}
+      canRequest={canRequest}
+      posterSrc={imageSrc}
+    >
+      <View className="flex flex-col w-28 mr-2">
+        <View className="relative rounded-lg overflow-hidden border border-neutral-900 w-28 aspect-[10/15]">
+          <Image
+            key={item.id}
+            id={item.id.toString()}
+            source={{uri: imageSrc}}
+            cachePolicy={"memory-disk"}
+            contentFit="cover"
+            style={{
+              aspectRatio: "10/15",
+              width: "100%",
+            }}
+          />
+          <JellyseerrIconStatus
+            className="absolute bottom-1 right-1"
+            showRequestIcon={canRequest}
+            mediaStatus={item?.mediaInfo?.status}
+          />
+
+        </View>
+        <View className="mt-2 flex flex-col">
+          <Text numberOfLines={2}>{title}</Text>
+          <Text className="text-xs opacity-50">{releaseYear}</Text>
+        </View>
+      </View>
+    </TouchableJellyseerrRouter>
+  )
+}
+
+
+export default JellyseerrPoster;
--- a/components/series/JellyseerrSeasons.tsx
+++ b/components/series/JellyseerrSeasons.tsx
@@ -0,0 +1,215 @@
+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 MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
+
+const JellyseerrSeasonEpisodes: React.FC<{details: TvDetails, seasonNumber: number}> = ({
+  details,
+  seasonNumber
+}) => {
+  const {jellyseerrApi} = useJellyseerr();
+
+  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
+  })
+
+  return (
+    <HorizontalScroll
+      horizontal
+      loading={isLoading}
+      showsHorizontalScrollIndicator={false}
+      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>
+      )}
+    />
+  )
+}
+
+const JellyseerrSeasons: React.FC<{
+  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 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 allSeasonsAvailable = useMemo(() =>
+      seasons?.every(season => season.status === MediaStatus.AVAILABLE),
+    [seasons]
+  )
+
+  const requestAll = useCallback(() => {
+    if (details && jellyseerrApi) {
+      requestMedia(result?.name!!, {
+        mediaId: details.id,
+        mediaType: MediaType.TV,
+        tvdbId: details.externalIds?.tvdbId,
+        seasons: seasons
+            .filter(s => s.status === MediaStatus.UNKNOWN && s.seasonNumber !== 0)
+            .map(s => s.seasonNumber)
+      })
+    }
+  }, [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]);
+
+  return (
+    <FlashList
+      data={orderBy(details.seasons.filter(s => s.seasonNumber !== 0), 'seasonNumber', 'desc')}
+      ListHeaderComponent={() => (
+        <View className="flex flex-row justify-between items-end">
+          <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>
+      )}
+      ItemSeparatorComponent={() => <View className="h-2" />}
+      estimatedItemSize={250}
+      renderItem={({item: season}) => (
+        <>
+          <TouchableOpacity
+            onPress={() => setSeasonStates((prevState) => (
+              {...prevState, [season.seasonNumber]: !prevState?.[season.seasonNumber]}
+            ))}
+          >
+            <View
+              className="flex flex-row justify-between items-center bg-gray-100/10 rounded-xl z-20 h-12 w-full px-4"
+              key={season.id}
+            >
+              <Tags
+                textClass=""
+                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}
+                />
+              })}
+            </View>
+          </TouchableOpacity>
+          {seasonStates?.[season.seasonNumber] && (
+            <JellyseerrSeasonEpisodes
+              key={season.seasonNumber}
+              details={details}
+              seasonNumber={season.seasonNumber}
+            />
+          )}
+        </>
+      )
+    }
+    />
+  )
+}
+
+export default JellyseerrSeasons;
--- a/components/settings/SettingToggles.tsx
+++ b/components/settings/SettingToggles.tsx
@@ -21,8 +21,9 @@ 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 { useEffect, useState } from "react";
+import React, {useCallback, useEffect, useState} from "react";
 import {
+  Alert,
  Linking,
  Switch,
  TouchableOpacity,
@@ -40,20 +41,32 @@ 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";

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

  /********************
@@ -108,6 +121,51 @@ 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})
+        })
+        .finally(() => {
+          setJellyseerrPassword(undefined);
+        })
+    }
+  }, [user, jellyseerrServerUrl, jellyseerrPassword]);
+
  if (!settings) return null;

  return (
@@ -633,6 +691,65 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
          </View>
        </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-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>
    </View>
  );
 };
--- a/components/stacks/NestedTabPageStack.tsx
+++ b/components/stacks/NestedTabPageStack.tsx
@@ -9,7 +9,7 @@ type ICommonScreenOptions =
      navigation: any;
    }) => NativeStackNavigationOptions);

-const commonScreenOptions: ICommonScreenOptions = {
+export const commonScreenOptions: ICommonScreenOptions = {
  title: "",
  headerShown: true,
  headerTransparent: true,
--- a/hooks/useJellyseerr.ts
+++ b/hooks/useJellyseerr.ts
@@ -0,0 +1,281 @@
+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 "@/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 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 Issue from "@/utils/jellyseerr/server/entity/Issue";
+import {RTRating} from "@/utils/jellyseerr/server/api/rating/rottentomatoes";
+
+interface SearchParams {
+  query: string,
+  page: number,
+  language: string;
+}
+
+interface SearchResults {
+  page: number,
+  total_pages: number,
+  total_results: number;
+  results: Results[];
+}
+
+const JELLYSEERR_USER = "JELLYSEERR_USER"
+const JELLYSEERR_COOKIES = "JELLYSEERR_COOKIES"
+
+export const clearJellyseerrStorageData = () => {
+  storage.delete(JELLYSEERR_USER);
+  storage.delete(JELLYSEERR_COOKIES);
+}
+
+enum Endpoints {
+  STATUS = "/status",
+  API_V1 = "/api/v1",
+  SEARCH = "/search",
+  REQUEST = "/request",
+  MOVIE = "/movie",
+  RATINGS = "/ratings",
+  ISSUE = "/issue",
+  TV = "/tv",
+  AUTH_JELLYFIN = "/auth/jellyfin",
+}
+
+export type TestResult = {
+  isValid: true;
+  requiresPass: boolean;
+} | {
+  isValid: false;
+};
+
+export class JellyseerrApi {
+  axios: AxiosInstance;
+
+  constructor (baseUrl: string) {
+    this.axios = axios.create({
+      baseURL: baseUrl,
+      withCredentials: true,
+      withXSRFToken: true,
+      xsrfHeaderName: "XSRF-TOKEN"
+    });
+
+    this.setInterceptors();
+  }
+
+  async test(): Promise<TestResult> {
+    const user = storage.get<JellyseerrUser>(JELLYSEERR_USER);
+    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
+      });
+    }
+
+    console.log("Testing jellyseerr connection")
+    return await this.axios.get(Endpoints.API_V1 + Endpoints.STATUS)
+      .then((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";
+            toast.error(error);
+            throw Error(error);
+          }
+
+          console.log("Jellyseerr connecting successfully tested!");
+          storage.setAny(JELLYSEERR_COOKIES, headers["set-cookie"]?.flatMap(c => c.split("; ")));
+          return {
+            isValid: true,
+            requiresPass: true
+          };
+        }
+        return {
+          isValid: false,
+          requiresPass: false
+        };
+      })
+      .catch((e) => {
+        console.error("Failed to test jellyseerr server url", e)
+        return {
+          isValid: 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;
+      storage.setAny(JELLYSEERR_USER, user);
+      return user
+    })
+  }
+
+  async search(params: SearchParams): Promise<SearchResults> {
+    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)
+  }
+
+  async movieDetails(id: number) {
+    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)
+  }
+
+  async tvDetails(id: number) {
+    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)
+  }
+
+  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
+    })
+  }
+
+  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()
+  }
+
+  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
+
+      if (issue.status === IssueStatus.OPEN) {
+        toast.success("Issue submitted!")
+      }
+      return issue
+    })
+  }
+
+  private setInterceptors() {
+    this.axios.interceptors.request.use(
+      async (config) => {
+        const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);
+        if (config.method !== "head" && cookies) {
+          const headerName = this.axios.defaults.xsrfHeaderName!!;
+          const xsrfToken = cookies
+            .find(c => c.includes(headerName))
+            ?.split(headerName + "=")?.[1]
+          if (xsrfToken) {
+            config.headers[headerName] = xsrfToken;
+          }
+        }
+        return config
+      },
+      (error) => {
+        console.error("Jellyseerr request error", error)
+      }
+    );
+
+    this.axios.interceptors.response.use(
+      async (response) => {
+        const cookies = response.headers["set-cookie"];
+        if (cookies) {
+          storage.setAny(JELLYSEERR_COOKIES, response.headers["set-cookie"]?.flatMap(c => c.split("; ")));
+        }
+        return response;
+      },
+      (error: AxiosError) => {
+        console.error("Jellyseerr response error:", error,error.response?.data)
+        if (error.status === 403) {
+          clearJellyseerrStorageData()
+        }
+      }
+    );
+  }
+}
+
+const jellyseerrUserAtom = atom(storage.get<JellyseerrUser>(JELLYSEERR_USER))
+
+export const useJellyseerr = () => {
+  const [jellyseerrUser, setJellyseerrUser] = useAtom(jellyseerrUserAtom);
+  const [settings, updateSettings] = useSettings();
+
+  const jellyseerrApi = useMemo(() => {
+    const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);
+    if (settings?.jellyseerrServerUrl && cookies && jellyseerrUser) {
+      return new JellyseerrApi(settings?.jellyseerrServerUrl)
+    }
+    return undefined
+  }, [settings?.jellyseerrServerUrl, jellyseerrUser])
+
+  const clearAllJellyseerData = useCallback(async () => {
+    clearJellyseerrStorageData()
+    setJellyseerrUser(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 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'])
+    )
+  }
+
+  return {
+    jellyseerrApi,
+    jellyseerrUser,
+    setJellyseerrUser,
+    clearAllJellyseerData,
+    isJellyseerrResult,
+    requestMedia
+  }
+};
--- a/package.json
+++ b/package.json
@@ -3,11 +3,12 @@
  "main": "./index",
  "version": "1.0.0",
  "scripts": {
-    "start": "expo start",
+    "submodule-reload": "git submodule update --init --remote --recursive",
+    "start": "bun run submodule-reload && expo start",
    "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
-    "web": "expo start --web",
+    "android": "bun run submodule-reload && expo run:android",
+    "ios": "bun run submodule-reload && expo run:ios",
+    "web": "bun run submodule-reload && expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint",
    "postinstall": "patch-package"
--- a/providers/DownloadProvider.tsx
+++ b/providers/DownloadProvider.tsx
@@ -711,16 +711,3 @@ export function useDownload() {
  }
  return context;
 }
-
-export function bytesToReadable(bytes: number): string {
-  const gb = bytes / 1e9;
-
-  if (gb >= 1) return `${gb.toFixed(2)} GB`;
-
-  const mb = bytes / 1024.0 / 1024.0;
-  if (mb >= 1) return `${mb.toFixed(2)} MB`;
-
-  const kb = bytes / 1024.0;
-  if (kb >= 1) return `${kb.toFixed(2)} KB`;
-  return `${bytes.toFixed(2)} B`;
-}
--- a/utils/atoms/settings.ts
+++ b/utils/atoms/settings.ts
@@ -87,6 +87,7 @@ export type Settings = {
  subtitleSize: number;
  remuxConcurrentLimit: 1 | 2 | 3 | 4;
  safeAreaInControlsEnabled: boolean;
+  jellyseerrServerUrl?: string;
 };

 const loadSettings = (): Settings => {
@@ -124,6 +125,7 @@ const loadSettings = (): Settings => {
    subtitleSize: Platform.OS === "ios" ? 60 : 100,
    remuxConcurrentLimit: 1,
    safeAreaInControlsEnabled: true,
+    jellyseerrServerUrl: undefined,
  };

  try {
--- a/utils/jellyseerr
+++ b/utils/jellyseerr