WIP

Refresh jellyseerr page when media is requested

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

@@ -11,6 +11,9 @@ export default function SearchLayout() {
           headerShown: true,
           headerLargeTitle: true,
           headerTitle: "Favorites",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,

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

@@ -1,4 +1,5 @@
 import { Chromecast } from "@/components/Chromecast";
+import { Text } from "@/components/common/Text";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
@@ -15,6 +16,9 @@ export default function IndexLayout() {
           headerLargeTitle: true,
           headerTitle: "Home",
           headerBlurEffect: "prominent",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
           headerRight: () => (

app/(auth)/(tabs)/(home)/downloads/index.tsx

@@ -6,16 +6,21 @@ import { DownloadedItem, useDownload } from "@/providers/DownloadProvider";
 import { queueAtom } from "@/utils/atoms/queue";
 import { useSettings } from "@/utils/atoms/settings";
 import { Ionicons } from "@expo/vector-icons";
-import {useNavigation, useRouter} from "expo-router";
+import { useNavigation, useRouter } from "expo-router";
 import { useAtom } from "jotai";
-import React, {useEffect, useMemo, useRef} from "react";
-import {Alert, ScrollView, TouchableOpacity, View} from "react-native";
+import React, { useEffect, useMemo, useRef } from "react";
+import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
 import { Button } from "@/components/Button";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import {DownloadSize} from "@/components/downloads/DownloadSize";
-import {BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModal, BottomSheetView} from "@gorhom/bottom-sheet";
-import {toast} from "sonner-native";
-import {writeToLog} from "@/utils/log";
+import { DownloadSize } from "@/components/downloads/DownloadSize";
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import { toast } from "sonner-native";
+import { writeToLog } from "@/utils/log";
 
 export default function page() {
   const navigation = useNavigation();
@@ -56,28 +61,29 @@ export default function page() {
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <TouchableOpacity
-          onPress={bottomSheetModalRef.current?.present}
-        >
-          <DownloadSize items={downloadedFiles?.map(f => f.item) || []}/>
+        <TouchableOpacity onPress={bottomSheetModalRef.current?.present}>
+          <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
         </TouchableOpacity>
-      )
-    })
+      ),
+    });
   }, [downloadedFiles]);
 
-  const deleteMovies = () => deleteFileByType("Movie")
-    .then(() => toast.success("Deleted all movies successfully!"))
-    .catch((reason) => {
-      writeToLog("ERROR", reason);
-      toast.error("Failed to delete all movies");
-    });
-  const deleteShows = () => deleteFileByType("Episode")
-    .then(() => toast.success("Deleted all TV-Series successfully!"))
-    .catch((reason) => {
-      writeToLog("ERROR", reason);
-      toast.error("Failed to delete all TV-Series");
-    });
-  const deleteAllMedia = async () => await Promise.all([deleteMovies(), deleteShows()])
+  const deleteMovies = () =>
+    deleteFileByType("Movie")
+      .then(() => toast.success("Deleted all movies successfully!"))
+      .catch((reason) => {
+        writeToLog("ERROR", reason);
+        toast.error("Failed to delete all movies");
+      });
+  const deleteShows = () =>
+    deleteFileByType("Episode")
+      .then(() => toast.success("Deleted all TV-Series successfully!"))
+      .catch((reason) => {
+        writeToLog("ERROR", reason);
+        toast.error("Failed to delete all TV-Series");
+      });
+  const deleteAllMedia = async () =>
+    await Promise.all([deleteMovies(), deleteShows()]);
 
   return (
     <>
@@ -94,7 +100,7 @@ export default function page() {
               <View className="bg-neutral-900 p-4 rounded-2xl">
                 <Text className="text-lg font-bold">Queue</Text>
                 <Text className="text-xs opacity-70 text-red-600">
-                  Queue and downloads will be lost on app restart
+                  Queue and active downloads will be lost on app restart
                 </Text>
                 <View className="flex flex-col space-y-2 mt-2">
                   {queue.map((q, index) => (
@@ -107,7 +113,9 @@ export default function page() {
                     >
                       <View>
                         <Text className="font-semibold">{q.item.Name}</Text>
-                        <Text className="text-xs opacity-50">{q.item.Type}</Text>
+                        <Text className="text-xs opacity-50">
+                          {q.item.Type}
+                        </Text>
                       </View>
                       <TouchableOpacity
                         onPress={() => {
@@ -118,7 +126,7 @@ export default function page() {
                           });
                         }}
                       >
-                        <Ionicons name="close" size={24} color="red"/>
+                        <Ionicons name="close" size={24} color="red" />
                       </TouchableOpacity>
                     </TouchableOpacity>
                   ))}
@@ -130,7 +138,7 @@ export default function page() {
               </View>
             )}
 
-            <ActiveDownloads/>
+            <ActiveDownloads />
           </View>
 
           {movies.length > 0 && (
@@ -145,7 +153,7 @@ export default function page() {
                 <View className="px-4 flex flex-row">
                   {movies?.map((item) => (
                     <View className="mb-2 last:mb-0" key={item.item.Id}>
-                      <MovieCard item={item.item}/>
+                      <MovieCard item={item.item} />
                     </View>
                   ))}
                 </View>
@@ -157,13 +165,18 @@ export default function page() {
               <View className="flex flex-row items-center justify-between mb-2 px-4">
                 <Text className="text-lg font-bold">TV-Series</Text>
                 <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
-                  <Text className="text-xs font-bold">{groupedBySeries?.length}</Text>
+                  <Text className="text-xs font-bold">
+                    {groupedBySeries?.length}
+                  </Text>
                 </View>
               </View>
               <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                 <View className="px-4 flex flex-row">
                   {groupedBySeries?.map((items) => (
-                    <View className="mb-2 last:mb-0" key={items[0].item.SeriesId}>
+                    <View
+                      className="mb-2 last:mb-0"
+                      key={items[0].item.SeriesId}
+                    >
                       <SeriesCard
                         items={items.map((i) => i.item)}
                         key={items[0].item.SeriesId}
@@ -200,9 +213,15 @@ export default function page() {
       >
         <BottomSheetView>
           <View className="p-4 space-y-4 mb-4">
-            <Button color="purple" onPress={deleteMovies}>Delete all Movies</Button>
-            <Button color="purple" onPress={deleteShows}>Delete all TV-Series</Button>
-            <Button color="red" onPress={deleteAllMedia}>Delete all</Button>
+            <Button color="purple" onPress={deleteMovies}>
+              Delete all Movies
+            </Button>
+            <Button color="purple" onPress={deleteShows}>
+              Delete all TV-Series
+            </Button>
+            <Button color="red" onPress={deleteAllMedia}>
+              Delete all
+            </Button>
           </View>
         </BottomSheetView>
       </BottomSheetModal>

app/(auth)/(tabs)/(home)/settings/popular-lists/page.tsx

@@ -52,7 +52,7 @@ export default function page() {
 
   return (
     <View className="px-4 pt-4">
-      <ListGroup title={"Enable plugin"} className="mb-4">
+      <ListGroup title={"Enable plugin"} className="">
         <ListItem
           title={"Enable Popular Lists"}
           onPress={() => {
@@ -68,41 +68,6 @@ export default function page() {
           />
         </ListItem>
       </ListGroup>
-
-      {settings.usePopularPlugin && (
-        <ListGroup title="Media List Collections">
-          {mediaListCollections?.map((mlc) => (
-            <ListItem key={mlc.Id} title={mlc.Name}>
-              <Switch
-                value={settings.mediaListCollectionIds?.includes(mlc.Id!)}
-                onValueChange={(value) => {
-                  if (!settings.mediaListCollectionIds) {
-                    updateSettings({
-                      mediaListCollectionIds: [mlc.Id!],
-                    });
-                    return;
-                  }
-
-                  updateSettings({
-                    mediaListCollectionIds:
-                      settings.mediaListCollectionIds.includes(mlc.Id!)
-                        ? settings.mediaListCollectionIds.filter(
-                            (id) => id !== mlc.Id
-                          )
-                        : [...settings.mediaListCollectionIds, mlc.Id!],
-                  });
-                }}
-              />
-            </ListItem>
-          ))}
-          {isLoadingMediaListCollections && <Loader />}
-          {mediaListCollections?.length === 0 && (
-            <Text className="text-xs opacity-50 p-4">
-              No collections found. Add some in Jellyfin.
-            </Text>
-          )}
-        </ListGroup>
-      )}
       <Text className="px-4 text-xs text-neutral-500 mt-1">
         Popular Lists is a plugin that enables you to show custom Jellyfin lists
         on the Streamyfin home page.{" "}
@@ -110,6 +75,61 @@ export default function page() {
           Read more about Popular Lists.
         </Text>
       </Text>
+
+      {settings.usePopularPlugin && (
+        <>
+          {!isLoadingMediaListCollections ? (
+            <>
+              {mediaListCollections?.length === 0 ? (
+                <Text className="text-xs opacity-50 p-4">
+                  No collections found. Add some in Jellyfin.
+                </Text>
+              ) : (
+                <>
+                  <ListGroup title="Media List Collections" className="mt-4">
+                    {mediaListCollections?.map((mlc) => (
+                      <ListItem key={mlc.Id} title={mlc.Name}>
+                        <Switch
+                          value={settings.mediaListCollectionIds?.includes(
+                            mlc.Id!
+                          )}
+                          onValueChange={(value) => {
+                            if (!settings.mediaListCollectionIds) {
+                              updateSettings({
+                                mediaListCollectionIds: [mlc.Id!],
+                              });
+                              return;
+                            }
+
+                            updateSettings({
+                              mediaListCollectionIds:
+                                settings.mediaListCollectionIds.includes(
+                                  mlc.Id!
+                                )
+                                  ? settings.mediaListCollectionIds.filter(
+                                      (id) => id !== mlc.Id
+                                    )
+                                  : [
+                                      ...settings.mediaListCollectionIds,
+                                      mlc.Id!,
+                                    ],
+                            });
+                          }}
+                        />
+                      </ListItem>
+                    ))}
+                  </ListGroup>
+                  <Text className="px-4 text-xs text-neutral-500 mt-1">
+                    Select the lists you want displayed on the home screen.
+                  </Text>
+                </>
+              )}
+            </>
+          ) : (
+            <Loader />
+          )}
+        </>
+      )}
     </View>
   );
 }

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

@@ -55,6 +55,7 @@ const Page: React.FC = () => {
     data: details,
     isFetching,
     isLoading,
+    refetch
   } = useQuery({
     enabled: !!jellyseerrApi && !!result && !!result.id,
     queryKey: ["jellyseerr", "detail", result.mediaType, result.id],
@@ -63,6 +64,7 @@ const Page: React.FC = () => {
     refetchOnReconnect: true,
     refetchOnWindowFocus: true,
     retryOnMount: true,
+    refetchInterval: 0,
     queryFn: async () => {
       return result.mediaType === MediaType.MOVIE
         ? jellyseerrApi?.movieDetails(result.id!!)
@@ -94,15 +96,18 @@ const Page: React.FC = () => {
   }, [jellyseerrApi, details, result, issueType, issueMessage]);
 
   const request = useCallback(
-    () =>
+    async () => {
       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),
-      }),
+          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),
+        },
+        refetch
+      )
+    },
     [details, result, requestMedia]
   );
 
@@ -205,6 +210,7 @@ const Page: React.FC = () => {
                 isLoading={isLoading || isFetching}
                 result={result as TvResult}
                 details={details as TvDetails}
+                refetch={refetch}
               />
             )}
           </View>

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -150,6 +150,8 @@ const Page = () => {
         itemType = "Series";
       } else if (library.CollectionType === "boxsets") {
         itemType = "BoxSet";
+      } else if (library.CollectionType === "music") {
+        itemType = "MusicAlbum";
       }
 
       const response = await getItemsApi(api).getItems({

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

@@ -19,6 +19,9 @@ export default function IndexLayout() {
           headerLargeTitle: true,
           headerTitle: "Library",
           headerBlurEffect: "prominent",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
           headerRight: () => (

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

@@ -1,4 +1,7 @@
-import {commonScreenOptions, nestedTabPageScreenOptions} from "@/components/stacks/NestedTabPageStack";
+import {
+  commonScreenOptions,
+  nestedTabPageScreenOptions,
+} from "@/components/stacks/NestedTabPageStack";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";
 
@@ -11,6 +14,9 @@ export default function SearchLayout() {
           headerShown: true,
           headerLargeTitle: true,
           headerTitle: "Search",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
@@ -29,10 +35,7 @@ export default function SearchLayout() {
           headerShadowVisible: false,
         }}
       />
-      <Stack.Screen
-        name="jellyseerr/page"
-        options={commonScreenOptions}
-      />
+      <Stack.Screen name="jellyseerr/page" options={commonScreenOptions} />
     </Stack>
   );
 }

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

@@ -96,7 +96,6 @@ export default function search() {
         } else {
           if (!settings?.marlinServerUrl) return [];
 
-          console.log(settings.marlinServerUrl);
           const url = `${
             settings.marlinServerUrl
           }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
@@ -105,8 +104,6 @@ export default function search() {
 
           const response1 = await axios.get(url);
 
-          console.log(response1.statusText);
-
           const ids = response1.data.ids;
 
           if (!ids || !ids.length) return [];

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

@@ -104,7 +104,6 @@ export default function page() {
   } = useQuery({
     queryKey: ["item", itemId],
     queryFn: async () => {
-      console.log("Offline:", offline);
       if (offline) {
         const item = await getDownloadedItem(itemId);
         if (item) return item.item;
@@ -128,7 +127,6 @@ export default function page() {
   } = useQuery({
     queryKey: ["stream-url", itemId, mediaSourceId, bitrateValue],
     queryFn: async () => {
-      console.log("Offline:", offline);
       if (offline) {
         const data = await getDownloadedItem(itemId);
         if (!data?.mediaSource) return null;
@@ -195,8 +193,6 @@ export default function page() {
           playSessionId: stream.sessionId,
         });
       }
-
-      console.log("Actually marked as paused");
     } else {
       videoRef.current?.play();
       if (!offline && stream) {
@@ -339,7 +335,6 @@ export default function page() {
     React.useCallback(() => {
       return async () => {
         stop();
-        console.log("Unmounted");
       };
     }, [])
   );
@@ -349,10 +344,8 @@ export default function page() {
   useEffect(() => {
     const handleAppStateChange = (nextAppState: AppStateStatus) => {
       if (appState.match(/inactive|background/) && nextAppState === "active") {
-        console.log("App has come to the foreground!");
         // Handle app coming to the foreground
       } else if (nextAppState.match(/inactive|background/)) {
-        console.log("App has gone to the background!");
         // Handle app going to the background
         if (videoRef.current && videoRef.current.pause) {
           videoRef.current.pause();

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

@@ -169,18 +169,15 @@ export default function page() {
   );
 
   const play = useCallback(() => {
-    console.log("play");
     videoRef.current?.resume();
     reportPlaybackStart();
   }, [videoRef]);
 
   const pause = useCallback(() => {
-    console.log("play");
     videoRef.current?.pause();
   }, [videoRef]);
 
   const stop = useCallback(() => {
-    console.log("stop");
     setIsPlaybackStopped(true);
     videoRef.current?.pause();
     reportPlaybackStopped();

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

@@ -260,13 +260,6 @@ const Player = () => {
       progress.value = ticks;
       cacheProgress.value = secondsToTicks(data.playableDuration);
 
-      console.log(
-        "onProgress ~",
-        ticks,
-        isPlaying,
-        `AUDIO index: ${audioIndex} SUB index" ${subtitleIndex}`
-      );
-
       // TODO: Use this when streaming with HLS url, but NOT when direct playing
       // TODO: since playable duration is always 0 then.
       setIsBuffering(data.playableDuration === 0);
@@ -339,11 +332,7 @@ const Player = () => {
 
       // Most likely the subtitle is burned in.
       if (embeddedTrackIndex === -1) return;
-      console.log(
-        "Setting selected text track",
-        subtitleIndex,
-        embeddedTrackIndex
-      );
+
       setSelectedTextTrack({
         type: SelectedTrackType.INDEX,
         value: embeddedTrackIndex,
@@ -439,7 +428,6 @@ const Player = () => {
                 setIsBuffering(e.isBuffering);
               }}
               onAudioTracks={(e) => {
-                console.log("onAudioTracks: ", e.audioTracks);
                 setAudioTracks(
                   e.audioTracks.map((t) => ({
                     index: t.index,
@@ -493,7 +481,6 @@ const Player = () => {
           }}
           getAudioTracks={getAudioTracks}
           setAudioTrack={(i) => {
-            console.log("setAudioTrack ~", i);
             setSelectedAudioTrack({
               type: SelectedTrackType.INDEX,
               value: i,

app/(auth)/trailer/page.tsx

@@ -5,7 +5,6 @@ import YoutubePlayer, { PLAYER_STATES } from "react-native-youtube-iframe";
 
 export default function page() {
   const searchParams = useGlobalSearchParams();
-  console.log(searchParams);
 
   const { url } = searchParams as { url: string };
 

app/_layout.tsx

@@ -13,7 +13,7 @@ import { orientationAtom } from "@/utils/atoms/orientation";
 import { Settings, useSettings } from "@/utils/atoms/settings";
 import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
 import { LogProvider, writeToLog } from "@/utils/log";
-import { storage } from "@/utils/mmkv";
+import { formatItemName, storage } from "@/utils/mmkv";
 import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
@@ -385,18 +385,15 @@ function Layout() {
 function saveDownloadedItemInfo(item: BaseItemDto) {
   try {
     const downloadedItems = storage.getString("downloadedItems");
-    let items: BaseItemDto[] = downloadedItems
+    let items: { [key: string]: BaseItemDto } = downloadedItems
       ? JSON.parse(downloadedItems)
-      : [];
+      : {};
 
-    const existingItemIndex = items.findIndex((i) => i.Id === item.Id);
-    if (existingItemIndex !== -1) {
-      items[existingItemIndex] = item;
-    } else {
-      items.push(item);
+    if (item.Id) {
+      item.Path = `${FileSystem.documentDirectory}${formatItemName(item)}.mp4`;
+      items[item.Id] = item;
+      storage.set("downloadedItems", JSON.stringify(items));
     }
-
-    storage.set("downloadedItems", JSON.stringify(items));
   } catch (error) {
     writeToLog("ERROR", "Failed to save downloaded item information:", error);
     console.error("Failed to save downloaded item information:", error);

app/login.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
+import { PreviousServersList } from "@/components/PreviousServersList";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
 import { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
@@ -8,7 +9,7 @@ import { getSystemApi } from "@jellyfin/sdk/lib/utils/api";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import {
   Alert,
   KeyboardAvoidingView,
@@ -120,7 +121,7 @@ const Login: React.FC = () => {
    * - Sets loadingServerCheck state to true at the beginning and false at the end.
    * - Logs errors and timeout information to the console.
    */
-  async function checkUrl(url: string) {
+  const checkUrl = useCallback(async (url: string) => {
     setLoadingServerCheck(true);
 
     try {
@@ -130,6 +131,7 @@ const Login: React.FC = () => {
 
       if (response.ok) {
         const data = (await response.json()) as PublicSystemInfo;
+
         setServerName(data.ServerName || "");
         return url;
       }
@@ -138,7 +140,7 @@ const Login: React.FC = () => {
     } finally {
       setLoadingServerCheck(false);
     }
-  }
+  }, []);
 
   /**
    * Handles the connection attempt to a Jellyfin server.
@@ -156,7 +158,7 @@ const Login: React.FC = () => {
    * - Sets the server address using `setServer` if the connection is successful.
    *
    */
-  const handleConnect = async (url: string) => {
+  const handleConnect = useCallback(async (url: string) => {
     url = url.trim();
 
     const result = await checkUrl(url);
@@ -170,7 +172,7 @@ const Login: React.FC = () => {
     }
 
     setServer({ address: url });
-  };
+  }, []);
 
   const handleQuickConnect = async () => {
     try {
@@ -208,7 +210,7 @@ const Login: React.FC = () => {
                     ) : null}
                   </>
                 </Text>
-                <Text className="text-xs text-neutral-400">{serverURL}</Text>
+                <Text className="text-xs text-neutral-400">{api.basePath}</Text>
                 <Input
                   placeholder="Username"
                   onChangeText={(text) =>
@@ -294,9 +296,14 @@ const Login: React.FC = () => {
               textContentType="URL"
               maxLength={500}
             />
-            <Text className="text-xs text-neutral-500">
+            <Text className="text-xs text-neutral-500 ml-4">
               Make sure to include http or https
             </Text>
+            <PreviousServersList
+              onServerSelect={(s) => {
+                handleConnect(s.address);
+              }}
+            />
           </View>
           <View className="mb-2 absolute bottom-0 left-0 w-full px-4">
             <Button

components/GenreTags.tsx

@@ -26,7 +26,7 @@ export const Tags: React.FC<TagProps & ViewProps> = ({ tags, textClass = "text-x
   return (
     <View className={`flex flex-row flex-wrap gap-1 ${props.className}`} {...props}>
       {tags.map((tag, idx) => (
-        <View>
+        <View key={idx}>
           <Tag key={idx} textClass={textClass} text={tag}/>
         </View>
       ))}

components/PreviousServersList.tsx

@@ -0,0 +1,48 @@
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { useMMKVString } from "react-native-mmkv";
+import { ListGroup } from "./list/ListGroup";
+import { ListItem } from "./list/ListItem";
+
+interface Server {
+  address: string;
+}
+
+interface PreviousServersListProps {
+  onServerSelect: (server: Server) => void;
+}
+
+export const PreviousServersList: React.FC<PreviousServersListProps> = ({
+  onServerSelect,
+}) => {
+  const [_previousServers, setPreviousServers] =
+    useMMKVString("previousServers");
+
+  const previousServers = useMemo(() => {
+    return JSON.parse(_previousServers || "[]") as Server[];
+  }, [_previousServers]);
+
+  if (!previousServers.length) return null;
+
+  return (
+    <View>
+      <ListGroup title="previous servers" className="mt-4">
+        {previousServers.map((s) => (
+          <ListItem
+            key={s.address}
+            onPress={() => onServerSelect(s)}
+            title={s.address}
+            showArrow
+          />
+        ))}
+        <ListItem
+          onPress={() => {
+            setPreviousServers("[]");
+          }}
+          title={"Clear"}
+          textColor="red"
+        />
+      </ListGroup>
+    </View>
+  );
+};

components/common/TouchableItemRouter.tsx

@@ -16,7 +16,7 @@ export const itemRouter = (
   item: BaseItemDto | BaseItemPerson,
   from: string
 ) => {
-  console.log(item.Type);
+  console.log(item.Type, item?.CollectionType);
 
   if ("CollectionType" in item && item.CollectionType === "livetv") {
     return `/(auth)/(tabs)/${from}/livetv`;

components/home/LargeMovieCarousel.tsx

@@ -84,21 +84,27 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
 
   const width = Dimensions.get("screen").width;
 
+  if (settings?.usePopularPlugin === false) return null;
   if (l1 || l2) return null;
   if (!popularItems) return null;
 
   return (
-    <View className="flex flex-col items-center" {...props}>
+    <View className="flex flex-col items-center mt-2" {...props}>
       <Carousel
-        autoPlay={true}
-        autoPlayInterval={3000}
-        loop={true}
         ref={ref}
+        autoPlay={false}
+        loop={true}
+        snapEnabled={true}
+        mode="parallax"
+        modeConfig={{
+          parallaxScrollingScale: 0.86,
+          parallaxScrollingOffset: 100,
+        }}
         width={width}
         height={204}
         data={popularItems}
         onProgressChange={progress}
-        renderItem={({ item, index }) => <RenderItem item={item} />}
+        renderItem={({ item, index }) => <RenderItem key={index} item={item} />}
       />
       <Pagination.Basic
         progress={progress}

components/library/LibraryItemCard.tsx

@@ -5,6 +5,7 @@ import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { Ionicons } from "@expo/vector-icons";
 import {
   BaseItemDto,
+  BaseItemKind,
   CollectionType,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
@@ -50,18 +51,52 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
     [library]
   );
 
+  const itemType = useMemo(() => {
+    let _itemType: BaseItemKind | undefined;
+
+    if (library.CollectionType === "movies") {
+      _itemType = "Movie";
+    } else if (library.CollectionType === "tvshows") {
+      _itemType = "Series";
+    } else if (library.CollectionType === "boxsets") {
+      _itemType = "BoxSet";
+    } else if (library.CollectionType === "music") {
+      _itemType = "MusicAlbum";
+    }
+
+    return _itemType;
+  }, [library.CollectionType]);
+
+  const itemTypeName = useMemo(() => {
+    let nameStr: string;
+
+    if (library.CollectionType === "movies") {
+      nameStr = "movies";
+    } else if (library.CollectionType === "tvshows") {
+      nameStr = "series";
+    } else if (library.CollectionType === "boxsets") {
+      nameStr = "box sets";
+    } else if (library.CollectionType === "music") {
+      nameStr = "albums";
+    } else {
+      nameStr = "items";
+    }
+
+    return nameStr;
+  }, [library.CollectionType]);
+
   const { data: itemsCount } = useQuery({
     queryKey: ["library-count", library.Id],
     queryFn: async () => {
-      if (!api) return null;
-      const response = await getItemsApi(api).getItems({
+      const response = await getItemsApi(api!).getItems({
         userId: user?.Id,
         parentId: library.Id,
+        recursive: true,
         limit: 0,
+        includeItemTypes: itemType ? [itemType] : undefined,
       });
       return response.data.TotalRecordCount;
     },
-    staleTime: 1000 * 60 * 60,
   });
 
   if (!url) return null;
@@ -80,7 +115,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
           </Text>
           {settings?.libraryOptions?.showStats && (
             <Text className="font-bold text-xs text-neutral-500 text-start ml-auto">
-              {itemsCount} items
+              {itemsCount} {itemTypeName}
             </Text>
           )}
         </View>
@@ -109,6 +144,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
                 width: "100%",
                 height: "100%",
               }}
+              cachePolicy={"memory-disk"}
             />
             <View
               style={{
@@ -128,7 +164,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
           )}
           {settings?.libraryOptions?.showStats && (
             <Text className="font-bold text-xs  text-start px-4">
-              {itemsCount} items
+              {itemsCount} {itemTypeName}
             </Text>
           )}
         </View>
@@ -145,7 +181,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
           </Text>
           {settings?.libraryOptions?.showStats && (
             <Text className="font-bold text-xs text-neutral-500 text-start px-4">
-              {itemsCount} items
+              {itemsCount} {itemTypeName}
             </Text>
           )}
         </View>

components/list/ListGroup.tsx

@@ -23,14 +23,13 @@ export const ListGroup: React.FC<PropsWithChildren<Props>> = ({
   const childrenArray = Children.toArray(children);
 
   return (
-    <View>
+    <View {...props}>
       <Text className="ml-4 mb-1 uppercase text-[#8E8D91] text-xs">
         {title}
       </Text>
       <View
         style={[]}
         className="flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900"
-        {...props}
       >
         {Children.map(childrenArray, (child, index) => {
           if (isValidElement<{ style?: ViewStyle }>(child)) {

components/series/JellyseerrSeasons.tsx

@@ -15,11 +15,12 @@ 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 {QueryObserverResult, RefetchOptions, 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";
+import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie";
 
 const JellyseerrSeasonEpisodes: React.FC<{
   details: TvDetails;
@@ -100,7 +101,8 @@ const JellyseerrSeasons: React.FC<{
   isLoading: boolean;
   result?: TvResult;
   details?: TvDetails;
-}> = ({ isLoading, result, details }) => {
+  refetch:  (options?: (RefetchOptions | undefined)) => Promise<QueryObserverResult<TvDetails | MovieDetails | undefined, Error>>;
+}> = ({ isLoading, result, details, refetch }) => {
   if (!details) return null;
 
   const { jellyseerrApi, requestMedia } = useJellyseerr();
@@ -168,6 +170,21 @@ const JellyseerrSeasons: React.FC<{
     [requestAll]
   );
 
+  const requestSeason = useCallback(async (canRequest: Boolean, seasonNumber: number) => {
+    if (canRequest) {
+      requestMedia(
+        `${result?.name!!}, Season ${seasonNumber}`,
+        {
+          mediaId: details.id,
+          mediaType: MediaType.TV,
+          tvdbId: details.externalIds?.tvdbId,
+          seasons: [seasonNumber],
+        },
+        refetch
+      )
+    }
+  }, [requestMedia]);
+
   if (isLoading)
     return (
       <View>
@@ -231,22 +248,7 @@ const JellyseerrSeasons: React.FC<{
                 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
-                    }
+                    onPress={() => requestSeason(canRequest, season.seasonNumber)}
                     className={canRequest ? "bg-gray-700/40" : undefined}
                     mediaStatus={
                       seasons?.find(

components/settings/Jellyseerr.tsx

@@ -1,17 +1,16 @@
 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 "../list/ListItem";
-import { Loader } from "../Loader";
+import { userAtom } from "@/providers/JellyfinProvider";
 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";
+import { useAtom } from "jotai";
+import { useState } from "react";
+import { View } from "react-native";
+import { toast } from "sonner-native";
+import { Button } from "../Button";
+import { Input } from "../common/Input";
+import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
 
 export const JellyseerrSettings = () => {
   const {

components/settings/PluginSettings.tsx

@@ -16,7 +16,7 @@ export const PluginSettings = () => {
       <ListGroup title="Plugins">
         <ListItem
           onPress={() => router.push("/settings/jellyseerr/page")}
-          title={"Jellyseerr Settings"}
+          title={"Jellyseerr"}
           showArrow
         />
         <ListItem

components/settings/QuickConnect.tsx

@@ -1,59 +1,113 @@
-import { Alert, View, ViewProps } from "react-native";
-import { Text } from "../common/Text";
-import { ListItem } from "../list/ListItem";
-import { Button } from "../Button";
-import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
-import { useAtom } from "jotai";
-import Constants from "expo-constants";
-import Application from "expo-application";
-import { ListGroup } from "../list/ListGroup";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetTextInput,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
 import * as Haptics from "expo-haptics";
+import { useAtom } from "jotai";
+import React, { useCallback, useRef, useState } from "react";
+import { Alert, View, ViewProps } from "react-native";
+import { Button } from "../Button";
+import { Text } from "../common/Text";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
 
 interface Props extends ViewProps {}
 
 export const QuickConnect: React.FC<Props> = ({ ...props }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
+  const [quickConnectCode, setQuickConnectCode] = useState<string>();
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
-  const openQuickConnectAuthCodeInput = () => {
-    Alert.prompt(
-      "Quick connect",
-      "Enter the quick connect code",
-      async (text) => {
-        if (text) {
-          try {
-            const res = await getQuickConnectApi(api!).authorizeQuickConnect({
-              code: text,
-              userId: user?.Id,
-            });
-            if (res.status === 200) {
-              Haptics.notificationAsync(
-                Haptics.NotificationFeedbackType.Success
-              );
-              Alert.alert("Success", "Quick connect authorized");
-            } else {
-              Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-              Alert.alert("Error", "Invalid code");
-            }
-          } catch (e) {
-            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-            Alert.alert("Error", "Invalid code");
-          }
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    []
+  );
+
+  const authorizeQuickConnect = useCallback(async () => {
+    if (quickConnectCode) {
+      try {
+        const res = await getQuickConnectApi(api!).authorizeQuickConnect({
+          code: quickConnectCode,
+          userId: user?.Id,
+        });
+        if (res.status === 200) {
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+          Alert.alert("Success", "Quick connect authorized");
+          setQuickConnectCode(undefined);
+          bottomSheetModalRef?.current?.close();
+        } else {
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+          Alert.alert("Error", "Invalid code");
         }
+      } catch (e) {
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        Alert.alert("Error", "Invalid code");
       }
-    );
-  };
+    }
+  }, [api, user, quickConnectCode]);
 
   return (
     <View {...props}>
       <ListGroup title={"Quick Connect"}>
         <ListItem
-          onPress={openQuickConnectAuthCodeInput}
+          onPress={() => bottomSheetModalRef?.current?.present()}
           title="Authorize Quick Connect"
           textColor="blue"
-        ></ListItem>
+        />
       </ListGroup>
+
+      <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">
+                Quick Connect
+              </Text>
+            </View>
+            <View className="flex flex-col space-y-2">
+              <View className="p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full">
+                <BottomSheetTextInput
+                  style={{ color: "white" }}
+                  clearButtonMode="always"
+                  placeholder="Enter the quick connect code..."
+                  placeholderTextColor="#9CA3AF"
+                  value={quickConnectCode}
+                  onChangeText={setQuickConnectCode}
+                />
+              </View>
+            </View>
+            <Button
+              className="mt-auto"
+              onPress={authorizeQuickConnect}
+              color="purple"
+            >
+              Authorize
+            </Button>
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
     </View>
   );
 };

components/settings/UserInfo.tsx

@@ -14,7 +14,10 @@ export const UserInfo: React.FC<Props> = ({ ...props }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
-  const version = Application?.nativeApplicationVersion || "N/A";
+  const version =
+    Application?.nativeApplicationVersion ||
+    Application?.nativeBuildVersion ||
+    "N/A";
 
   return (
     <View {...props}>

hooks/useDownloadedFileOpener.ts

@@ -1,5 +1,6 @@
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { writeToLog } from "@/utils/log";
+import { getFilePathFromItemId } from "@/utils/mmkv";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
@@ -17,13 +18,13 @@ export const getDownloadedFileUrl = async (itemId: string): Promise<string> => {
   }
 
   const files = await FileSystem.readDirectoryAsync(directory);
-  const path = itemId!;
-  const matchingFile = files.find((file) => file.startsWith(path));
+  const filePath = getFilePathFromItemId(itemId);
+
+  const matchingFile = files.find((file) => file === filePath);
 
   if (!matchingFile) {
-    throw new Error(`No file found for item ${path}`);
+    throw new Error(`No file found for item ${filePath}`);
   }
-
   return `${directory}${matchingFile}`;
 };
 

hooks/useJellyseerr.ts

@@ -337,12 +337,13 @@ export const useJellyseerr = () => {
   }, []);
 
   const requestMedia = useCallback(
-    (title: string, request: MediaRequestBody) => {
+    (title: string, request: MediaRequestBody, onSuccess?: () => void) => {
       jellyseerrApi?.request?.(request)?.then((mediaRequest) => {
         switch (mediaRequest.status) {
           case MediaRequestStatus.PENDING:
           case MediaRequestStatus.APPROVED:
             toast.success(`Requested ${title}!`);
+            onSuccess?.()
             break;
           case MediaRequestStatus.DECLINED:
             toast.error(`You don't have permission to request!`);

hooks/useRemuxHlsToMp4.ts

@@ -18,6 +18,7 @@ import useDownloadHelper from "@/utils/download";
 import { Api } from "@jellyfin/sdk";
 import { useSettings } from "@/utils/atoms/settings";
 import { JobStatus } from "@/utils/optimize-server";
+import { formatItemName } from "@/utils/mmkv";
 
 const createFFmpegCommand = (url: string, output: string) => [
   "-y", // overwrite output files without asking
@@ -53,7 +54,12 @@ export const useRemuxHlsToMp4 = () => {
   const [settings] = useSettings();
   const { saveImage } = useImageStorage();
   const { saveSeriesPrimaryImage } = useDownloadHelper();
-  const { saveDownloadedItemInfo, setProcesses, processes, APP_CACHE_DOWNLOAD_DIRECTORY } = useDownload();
+  const {
+    saveDownloadedItemInfo,
+    setProcesses,
+    processes,
+    APP_CACHE_DOWNLOAD_DIRECTORY,
+  } = useDownload();
 
   const onSaveAssets = async (api: Api, item: BaseItemDto) => {
     await saveSeriesPrimaryImage(item);
@@ -73,13 +79,12 @@ export const useRemuxHlsToMp4 = () => {
       try {
         console.log("completeCallback");
         const returnCode = await session.getReturnCode();
-
         if (returnCode.isValueSuccess()) {
           const stat = await session.getLastReceivedStatistics();
           await FileSystem.moveAsync({
-              from: `${APP_CACHE_DOWNLOAD_DIRECTORY}${item.Id}.mp4`,
-              to: `${FileSystem.documentDirectory}${item.Id}.mp4`
-          })
+            from: `${APP_CACHE_DOWNLOAD_DIRECTORY}${item.Id}.mp4`,
+            to: `${FileSystem.documentDirectory}${formatItemName(item)}.mp4`,
+          });
           await queryClient.invalidateQueries({
             queryKey: ["downloadedItems"],
           });
@@ -131,12 +136,16 @@ export const useRemuxHlsToMp4 = () => {
 
   const startRemuxing = useCallback(
     async (item: BaseItemDto, url: string, mediaSource: MediaSourceInfo) => {
-      const cacheDir = await FileSystem.getInfoAsync(APP_CACHE_DOWNLOAD_DIRECTORY);
+      const cacheDir = await FileSystem.getInfoAsync(
+        APP_CACHE_DOWNLOAD_DIRECTORY
+      );
       if (!cacheDir.exists) {
-        await FileSystem.makeDirectoryAsync(APP_CACHE_DOWNLOAD_DIRECTORY, {intermediates: true})
+        await FileSystem.makeDirectoryAsync(APP_CACHE_DOWNLOAD_DIRECTORY, {
+          intermediates: true,
+        });
       }
 
-      const output = APP_CACHE_DOWNLOAD_DIRECTORY + `${item.Id}.mp4`
+      const output = APP_CACHE_DOWNLOAD_DIRECTORY + `${item.Id}.mp4`;
 
       if (!api) throw new Error("API is not defined");
       if (!item.Id) throw new Error("Item must have an Id");

package.json

@@ -24,7 +24,7 @@
     "@futurejj/react-native-visibility-sensor": "^1.3.5",
     "@gorhom/bottom-sheet": "^4.6.4",
     "@jellyfin/sdk": "^0.11.0",
-    "@kesha-antonov/react-native-background-downloader": "^3.2.1",
+    "@kesha-antonov/react-native-background-downloader": "3.1.2",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/netinfo": "11.3.1",
     "@react-native-menu/menu": "^1.1.6",
@@ -87,7 +87,7 @@
     "react-native-pager-view": "6.3.0",
     "react-native-progress": "^5.0.1",
     "react-native-reanimated": "~3.10.1",
-    "react-native-reanimated-carousel": "4.0.0-canary.15",
+    "react-native-reanimated-carousel": "4.0.0-canary.22",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
@@ -98,7 +98,7 @@
     "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-webview": "13.8.6",
     "react-native-youtube-iframe": "^2.3.0",
     "sonner-native": "^0.14.2",
     "tailwindcss": "3.3.2",

providers/DownloadProvider.tsx

@@ -19,14 +19,7 @@ import {
   download,
   setConfig,
 } from "@kesha-antonov/react-native-background-downloader";
-import MMKV from "react-native-mmkv";
-import {
-  focusManager,
-  QueryClient,
-  QueryClientProvider,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
+import { focusManager, useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
@@ -45,7 +38,7 @@ import { apiAtom } from "./JellyfinProvider";
 import * as Notifications from "expo-notifications";
 import { getItemImage } from "@/utils/getItemImage";
 import useImageStorage from "@/hooks/useImageStorage";
-import { storage } from "@/utils/mmkv";
+import { formatItemName, saveItemMapping, storage } from "@/utils/mmkv";
 import useDownloadHelper from "@/utils/download";
 import { FileInfo } from "expo-file-system";
 import * as Haptics from "expo-haptics";
@@ -54,8 +47,11 @@ import * as Application from "expo-application";
 export type DownloadedItem = {
   item: Partial<BaseItemDto>;
   mediaSource: MediaSourceInfo;
+  fileSize: number;
 };
 
+export type DownloadedItem2 = {};
+
 export const processesAtom = atom<JobStatus[]>([]);
 
 function onAppStateChange(status: AppStateStatus) {
@@ -512,8 +508,10 @@ function useDownloadProvider() {
 
       const downloadedItems = storage.getString("downloadedItems");
       if (downloadedItems) {
-        let items = JSON.parse(downloadedItems) as DownloadedItem[];
-        items = items.filter((item) => item.item.Id !== id);
+        let items: { [key: string]: BaseItemDto } = downloadedItems
+          ? JSON.parse(downloadedItems)
+          : {};
+        delete items[id];
         storage.set("downloadedItems", JSON.stringify(items));
       }
 
@@ -586,7 +584,7 @@ function useDownloadProvider() {
   const appSizeUsage = useMemo(async () => {
     const sizes: number[] =
       downloadedFiles?.map((d) => {
-        return getDownloadedItemSize(d.item.Id!!);
+        return d.fileSize;
       }) || [];
 
     await forEveryDocumentDirFile(
@@ -608,8 +606,10 @@ function useDownloadProvider() {
     try {
       const downloadedItems = storage.getString("downloadedItems");
       if (downloadedItems) {
-        const items: DownloadedItem[] = JSON.parse(downloadedItems);
-        const item = items.find((i) => i.item.Id === itemId);
+        const items: { [key: string]: BaseItemDto } = downloadedItems
+          ? JSON.parse(downloadedItems)
+          : {};
+        const item = items[itemId] as DownloadedItem;
         return item || null;
       }
       return null;
@@ -623,7 +623,7 @@ function useDownloadProvider() {
     try {
       const downloadedItems = storage.getString("downloadedItems");
       if (downloadedItems) {
-        return JSON.parse(downloadedItems) as DownloadedItem[];
+        return Object.values(JSON.parse(downloadedItems)) as DownloadedItem[];
       } else {
         return [];
       }
@@ -636,11 +636,11 @@ function useDownloadProvider() {
   function saveDownloadedItemInfo(item: BaseItemDto, size: number = 0) {
     try {
       const downloadedItems = storage.getString("downloadedItems");
-      let items: DownloadedItem[] = downloadedItems
+      const items: { [key: string]: BaseItemDto } = downloadedItems
         ? JSON.parse(downloadedItems)
-        : [];
+        : {};
 
-      const existingItemIndex = items.findIndex((i) => i.item.Id === item.Id);
+      const chosenItem = items[item.Id!] || {};
 
       const data = getDownloadItemInfoFromDiskTmp(item.Id!);
 
@@ -651,12 +651,6 @@ function useDownloadProvider() {
 
       const newItem = { item, mediaSource: data.mediaSource };
 
-      if (existingItemIndex !== -1) {
-        items[existingItemIndex] = newItem;
-      } else {
-        items.push(newItem);
-      }
-
       deleteDownloadItemInfoFromDiskTmp(item.Id!);
 
       storage.set("downloadedItems", JSON.stringify(items));

providers/JellyfinProvider.tsx

@@ -19,6 +19,7 @@ import React, {
 import { Platform } from "react-native";
 import uuid from "react-native-uuid";
 import { getDeviceName } from "react-native-device-info";
+import { toast } from "sonner-native";
 
 interface Server {
   address: string;
@@ -179,6 +180,19 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setApi(apiInstance);
       storage.set("serverUrl", server.address);
     },
+    onSuccess: (_, server) => {
+      const previousServers = JSON.parse(
+        storage.getString("previousServers") || "[]"
+      );
+      const updatedServers = [
+        server,
+        ...previousServers.filter((s: Server) => s.address !== server.address),
+      ];
+      storage.set(
+        "previousServers",
+        JSON.stringify(updatedServers.slice(0, 5))
+      );
+    },
     onError: (error) => {
       console.error("Failed to set server:", error);
     },

utils/mmkv.ts

@@ -1,3 +1,30 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { MMKV } from "react-native-mmkv";
 
-export const storage = new MMKV();
+const storage = new MMKV();
+
+const saveItemMapping = (itemId: string | undefined, fileName: string) => {
+  if (!itemId) return;
+  storage.set(itemId, fileName);
+};
+
+const getFilePathFromItemId = (itemId: string): string | undefined => {
+  return storage.getString(itemId);
+};
+
+const formatItemName = (item: BaseItemDto) => {
+  if (item.Type === "Episode") {
+    const formattedParentIndexNumber = (item.ParentIndexNumber ?? 0)
+      .toString()
+      .padStart(2, "0");
+    const formattedIndexNumber = (item.IndexNumber ?? 0)
+      .toString()
+      .padStart(2, "0");
+
+    const formattedString = `S${formattedParentIndexNumber}E${formattedIndexNumber}`;
+    return `${item.SeriesName} - ${formattedString} - ${item.Name}`;
+  }
+  return item.Name;
+};
+
+export { saveItemMapping, getFilePathFromItemId, storage, formatItemName };