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

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>
+  );
+};

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>
+    )
+}

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)

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>
+      </>
+    );
+};

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(() => {

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;

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;

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;

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

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,