Merge branch 'pr/233'

app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx

@@ -83,8 +83,8 @@ export default function page() {
         </View>
       </View>}
       <ScrollView key={seasonIndex}>
-        {groupBySeason.map((episode) => (
-          <View className="px-4 flex flex-col my-4">
+        {groupBySeason.map((episode, index) => (
+          <View className="px-4 flex flex-col my-4" key={index}>
             <EpisodeCard item={episode}/>
           </View>
         ))}

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

@@ -63,12 +63,13 @@ export default function page() {
                 Queue and downloads will be lost on app restart
               </Text>
               <View className="flex flex-col space-y-2 mt-2">
-                {queue.map((q) => (
+                {queue.map((q, index) => (
                   <TouchableOpacity
                     onPress={() =>
                       router.push(`/(auth)/items/page?id=${q.item.Id}`)
                     }
                     className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
+                    key={index}
                   >
                     <View>
                       <Text className="font-semibold">{q.item.Name}</Text>

app/(auth)/(tabs)/(home,libraries,search)/series/[id].tsx

@@ -8,13 +8,17 @@ import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById"
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useLocalSearchParams } from "expo-router";
+import {useLocalSearchParams, useNavigation} from "expo-router";
 import { useAtom } from "jotai";
-import React from "react";
-import { useEffect, useMemo } from "react";
+import React, {useEffect} from "react";
+import { useMemo } from "react";
 import { View } from "react-native";
+import {DownloadItems} from "@/components/DownloadItem";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+import {getTvShowsApi} from "@jellyfin/sdk/lib/utils/api";
 
 const page: React.FC = () => {
+  const navigation = useNavigation();
   const params = useLocalSearchParams();
   const { id: seriesId, seasonIndex } = params as {
     id: string;
@@ -56,7 +60,43 @@ const page: React.FC = () => {
     [item]
   );
 
-  if (!item || !backdropUrl) return null;
+  const {data: allEpisodes, isLoading} = useQuery({
+    queryKey: ["AllEpisodes", item?.Id],
+    queryFn: async () => {
+      const res = await getTvShowsApi(api!).getEpisodes({
+        seriesId: item?.Id!,
+        userId: user?.Id!,
+        enableUserData: true,
+        fields: ["MediaSources", "MediaStreams", "Overview"],
+      });
+      return res?.data.Items || []
+    },
+    enabled: !!api && !!user?.Id && !!item?.Id
+  });
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        (!isLoading && allEpisodes && allEpisodes.length > 0) && (
+          <View className="flex flex-row items-center space-x-2">
+            <DownloadItems
+              items={allEpisodes || []}
+              MissingDownloadIconComponent={() => (
+                <MaterialCommunityIcons name="folder-download" size={24} color="white"/>
+              )}
+              DownloadedIconComponent={() => (
+                <MaterialCommunityIcons name="folder-check" size={26} color="#9333ea"/>
+              )}
+            />
+          </View>
+        )
+      )
+    })
+  }, [allEpisodes, isLoading]);
+
+  if (!item || !backdropUrl)
+    return null;
+
 
   return (
     <ParallaxScrollView