# Add Button to download whole series/Season

- Refactored DownloadItem.tsx to be compatible with multiple items
- Updated queueActions.enqueue signature to be compatible with array of jobs
- Added download button beside season dropdown to download entire season
- Added download button to series page to download entire series

components/DownloadItem.tsx

@@ -6,7 +6,6 @@ import { useSettings } from "@/utils/atoms/settings";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { saveDownloadItemInfoToDiskTmp } from "@/utils/optimize-server";
-import native from "@/utils/profiles/native";
 import download from "@/utils/profiles/download";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import {
@@ -21,7 +20,7 @@ import {
 } from "@jellyfin/sdk/lib/generated-client/models";
 import {Href, router, useFocusEffect} from "expo-router";
 import { useAtom } from "jotai";
-import { useCallback, useMemo, useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { Alert, TouchableOpacity, View, ViewProps } from "react-native";
 import { toast } from "sonner-native";
 import { AudioTrackSelector } from "./AudioTrackSelector";
@@ -34,45 +33,34 @@ import ProgressCircle from "./ProgressCircle";
 import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
 
 interface DownloadProps extends ViewProps {
-  item: BaseItemDto;
+  items: BaseItemDto[];
+  MissingDownloadIconComponent: () =>  React.ReactElement;
+  DownloadedIconComponent: () =>  React.ReactElement;
 }
 
-export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
+export const DownloadItems: React.FC<DownloadProps> = ({
+  items,
+  MissingDownloadIconComponent,
+  DownloadedIconComponent,
+  ...props
+}) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const [queue, setQueue] = useAtom(queueAtom);
   const [settings] = useSettings();
-  const { processes, startBackgroundDownload } = useDownload();
+  const { processes, startBackgroundDownload, downloadedFiles } = useDownload();
   const { startRemuxing } = useRemuxHlsToMp4();
 
-  const [selectedMediaSource, setSelectedMediaSource] = useState<
-    MediaSourceInfo | undefined | null
-  >(undefined);
+  const [selectedMediaSource, setSelectedMediaSource] = useState<MediaSourceInfo | undefined | null>(undefined);
   const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-  const [selectedSubtitleStream, setSelectedSubtitleStream] =
-    useState<number>(0);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] = useState<number>(0);
   const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
     key: "Max",
     value: undefined,
   });
 
-  useFocusEffect(
-    useCallback(() => {
-      if (!settings) return;
-      const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-        getDefaultPlaySettings(item, settings);
-
-      // 4. Set states
-      setSelectedMediaSource(mediaSource ?? undefined);
-      setSelectedAudioStream(audioIndex ?? 0);
-      setSelectedSubtitleStream(subtitleIndex ?? -1);
-      setMaxBitrate(bitrate);
-    }, [item, settings])
-  );
-
-  const userCanDownload = useMemo(() => {
-    return user?.Policy?.EnableContentDownloading;
-  }, [user]);
+  const userCanDownload = useMemo(() => user?.Policy?.EnableContentDownloading, [user]);
+  const usingOptimizedServer = useMemo(() => settings?.downloadMethod === "optimized", [settings]);
 
   /**
    * Bottom sheet
@@ -89,70 +77,154 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
     bottomSheetModalRef.current?.dismiss();
   }, []);
 
+  // region computed
+  const itemIds = useMemo(() => items.map(i => i.Id), [items]);
+  const pendingItems = useMemo(() =>
+    items.filter(i => !downloadedFiles?.some(f => f.item.Id === i.Id)),
+    [items, downloadedFiles]
+  );
+  const isDownloaded = useMemo(() => {
+    if (!downloadedFiles)
+      return false;
+    return pendingItems.length == 0;
+  }, [downloadedFiles, pendingItems]);
+
+  const itemsProcesses = useMemo(() =>
+    processes?.filter(p => itemIds.includes(p.item.Id)),
+    [processes, itemIds]
+  );
+
+  const progress = useMemo(() => {
+      if (itemIds.length == 1)
+        return itemsProcesses.reduce((acc, p) => acc + p.progress, 0)
+      return ((itemIds.length - queue.filter(q => itemIds.includes(q.item.Id)).length) / itemIds.length) * 100
+    },
+    [queue, itemsProcesses, itemIds]
+  );
+
+  const itemsQueued = useMemo(() => {
+      return pendingItems.length > 0 && pendingItems.every(p => queue.some(q => p.Id == q.item.Id))
+    },
+    [queue, pendingItems]
+  );
+  // endregion computed
+
+  // region helper functions
+  const navigateToDownloads = () => router.push("/downloads");
+
+  const onDownloadedPress = () => {
+    const firstItem = items?.[0]
+    router.push(
+      firstItem.Type !== "Episode"
+        ? "/downloads"
+        : {
+          pathname: `/downloads/${firstItem.SeriesId}`,
+          params: {
+            episodeSeasonIndex: firstItem.ParentIndexNumber
+          }
+        } as Href
+    );
+  }
+
+  const acceptDownloadOptions = useCallback(() => {
+    if (userCanDownload === true) {
+      if (pendingItems.some(i => !i.Id)) {
+        throw new Error("No item id");
+      }
+      closeModal();
+
+      if (usingOptimizedServer)
+        initiateDownload(...pendingItems);
+      else {
+        queueActions.enqueue(
+          queue,
+          setQueue,
+          ...pendingItems.map(item => ({
+            id: item.Id!,
+            execute: async () => await initiateDownload(item),
+            item,
+          }))
+        )
+      }
+    } else {
+      toast.error("You are not allowed to download files.");
+    }
+  }, [
+    queue,
+    setQueue,
+    pendingItems,
+    usingOptimizedServer,
+    userCanDownload,
+
+    // Need to be reference at the time async lambda is created for initiateDownload
+    maxBitrate,
+    selectedMediaSource,
+    selectedAudioStream,
+    selectedSubtitleStream
+  ])
+
   /**
    * Start download
    */
-  const initiateDownload = useCallback(async () => {
-    if (!api || !user?.Id || !item.Id || !selectedMediaSource?.Id) {
-      throw new Error(
-        "DownloadItem ~ initiateDownload: No api or user or item"
-      );
+  const initiateDownload = useCallback(async (...items: BaseItemDto[]) => {
+    if (!api || !user?.Id || items.some(p => !p.Id) || (pendingItems.length === 1 && !selectedMediaSource?.Id)) {
+      throw new Error("DownloadItem ~ initiateDownload: No api or user or item");
     }
+    let mediaSource = selectedMediaSource
+    let audioIndex: number | undefined = selectedAudioStream
+    let subtitleIndex: number | undefined = selectedSubtitleStream
 
-    const res = await getStreamUrl({
-      api,
-      item,
-      startTimeTicks: 0,
-      userId: user?.Id,
-      audioStreamIndex: selectedAudioStream,
-      maxStreamingBitrate: maxBitrate.value,
-      mediaSourceId: selectedMediaSource.Id,
-      subtitleStreamIndex: selectedSubtitleStream,
-      deviceProfile: download,
-    });
+    for (const item of items) {
+      if (pendingItems.length > 1) {
+        ({ mediaSource, audioIndex, subtitleIndex } = getDefaultPlaySettings(item, settings!));
+      }
 
-    if (!res) {
-      Alert.alert(
-        "Something went wrong",
-        "Could not get stream url from Jellyfin"
-      );
-      return;
-    }
+      const res = await getStreamUrl({
+        api,
+        item,
+        startTimeTicks: 0,
+        userId: user?.Id,
+        audioStreamIndex: audioIndex,
+        maxStreamingBitrate: maxBitrate.value,
+        mediaSourceId: mediaSource?.Id,
+        subtitleStreamIndex: subtitleIndex,
+        deviceProfile: download,
+      });
 
-    const { mediaSource, url } = res;
+      if (!res) {
+        Alert.alert(
+          "Something went wrong",
+          "Could not get stream url from Jellyfin"
+        );
+        continue;
+      }
 
-    if (!url || !mediaSource) throw new Error("No url");
+      const {mediaSource: source, url} = res;
 
-    saveDownloadItemInfoToDiskTmp(item, mediaSource, url);
+      if (!url || !source) throw new Error("No url");
 
-    if (settings?.downloadMethod === "optimized") {
-      return await startBackgroundDownload(url, item, mediaSource);
-    } else {
-      return await startRemuxing(item, url, mediaSource);
+      saveDownloadItemInfoToDiskTmp(item, source, url);
+
+      if (usingOptimizedServer) {
+        await startBackgroundDownload(url, item, source);
+      } else {
+        await startRemuxing(item, url, source);
+      }
     }
   }, [
     api,
-    item,
-    startBackgroundDownload,
     user?.Id,
+    pendingItems,
     selectedMediaSource,
     selectedAudioStream,
     selectedSubtitleStream,
+    settings,
     maxBitrate,
-    settings?.downloadMethod,
+    usingOptimizedServer,
+    startBackgroundDownload,
+    startRemuxing,
   ]);
 
-  /**
-   * Check if item is downloaded
-   */
-  const { downloadedFiles } = useDownload();
-
-  const isDownloaded = useMemo(() => {
-    if (!downloadedFiles) return false;
-
-    return downloadedFiles.some((file) => file.item.Id === item.Id);
-  }, [downloadedFiles, item.Id]);
-
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop
@@ -163,31 +235,38 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
     ),
     []
   );
+  // endregion helper functions
 
-  const process = useMemo(() => {
-    if (!processes) return null;
+  // Allow to select & set settings for single download
+  useFocusEffect(
+    useCallback(() => {
+      if (!settings) return;
+      if (pendingItems.length !== 1) return;
+      const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+        getDefaultPlaySettings(items[0], settings);
 
-    return processes.find((process) => process?.item?.Id === item.Id);
-  }, [processes, item.Id]);
+      // 4. Set states
+      setSelectedMediaSource(mediaSource ?? undefined);
+      setSelectedAudioStream(audioIndex ?? 0);
+      setSelectedSubtitleStream(subtitleIndex ?? -1);
+      setMaxBitrate(bitrate);
+    }, [items, pendingItems, settings])
+  );
 
   return (
     <View
       className="bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"
       {...props}
     >
-      {process && process?.item.Id === item.Id ? (
-        <TouchableOpacity
-          onPress={() => {
-            router.push("/downloads");
-          }}
-        >
-          {process.progress === 0 ? (
+      {processes && itemsProcesses.length > 0 ? (
+        <TouchableOpacity onPress={navigateToDownloads}>
+          {progress === 0 ? (
             <Loader />
           ) : (
             <View className="-rotate-45">
               <ProgressCircle
                 size={24}
-                fill={process.progress}
+                fill={progress}
                 width={4}
                 tintColor="#9334E9"
                 backgroundColor="#bdc3c7"
@@ -195,34 +274,17 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
             </View>
           )}
         </TouchableOpacity>
-      ) : queue.some((i) => i.id === item.Id) ? (
-        <TouchableOpacity
-          onPress={() => {
-            router.push("/downloads");
-          }}
-        >
+      ) : itemsQueued ? (
+        <TouchableOpacity onPress={navigateToDownloads}>
           <Ionicons name="hourglass" size={24} color="white" />
         </TouchableOpacity>
       ) : isDownloaded ? (
-        <TouchableOpacity
-          onPress={() => {
-            router.push(
-              item.Type !== "Episode"
-                ? "/downloads"
-                : {
-                  pathname: `/downloads/${item.SeriesId}`,
-                  params: {
-                    episodeSeasonIndex: item.ParentIndexNumber
-                }
-              } as Href
-            );
-          }}
-        >
-          <Ionicons name="cloud-download" size={26} color="#9333ea" />
+        <TouchableOpacity onPress={onDownloadedPress}>
+          {DownloadedIconComponent()}
         </TouchableOpacity>
       ) : (
         <TouchableOpacity onPress={handlePresentModalPress}>
-          <Ionicons name="cloud-download-outline" size={24} color="white" />
+          {MissingDownloadIconComponent()}
         </TouchableOpacity>
       )}
       <BottomSheetModal
@@ -245,62 +307,44 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
             <View className="flex flex-col space-y-2 w-full items-start">
               <BitrateSelector
                 inverted
-                onChange={(val) => setMaxBitrate(val)}
+                onChange={setMaxBitrate}
                 selected={maxBitrate}
               />
-              <MediaSourceSelector
-                item={item}
-                onChange={setSelectedMediaSource}
-                selected={selectedMediaSource}
-              />
-              {selectedMediaSource && (
-                <View className="flex flex-col space-y-2">
-                  <AudioTrackSelector
-                    source={selectedMediaSource}
-                    onChange={setSelectedAudioStream}
-                    selected={selectedAudioStream}
+              {pendingItems.length === 1 && (
+                <>
+                  <MediaSourceSelector
+                    item={items[0]}
+                    onChange={setSelectedMediaSource}
+                    selected={selectedMediaSource}
                   />
-                  <SubtitleTrackSelector
-                    source={selectedMediaSource}
-                    onChange={setSelectedSubtitleStream}
-                    selected={selectedSubtitleStream}
-                  />
-                </View>
+                  {selectedMediaSource && (
+                    <View className="flex flex-col space-y-2">
+                      <AudioTrackSelector
+                        source={selectedMediaSource}
+                        onChange={setSelectedAudioStream}
+                        selected={selectedAudioStream}
+                      />
+                      <SubtitleTrackSelector
+                        source={selectedMediaSource}
+                        onChange={setSelectedSubtitleStream}
+                        selected={selectedSubtitleStream}
+                      />
+                    </View>
+                  )}
+                </>
               )}
             </View>
             <Button
               className="mt-auto"
-              onPress={() => {
-                if (userCanDownload === true) {
-                  if (!item.Id) {
-                    throw new Error("No item id");
-                  }
-                  closeModal();
-                  if (settings?.downloadMethod === "remux") {
-                    queueActions.enqueue(queue, setQueue, {
-                      id: item.Id,
-                      execute: async () => {
-                        await initiateDownload();
-                      },
-                      item,
-                    });
-                  } else {
-                    initiateDownload();
-                  }
-                } else {
-                  toast.error("You are not allowed to download files.");
-                }
-              }}
+              onPress={acceptDownloadOptions}
               color="purple"
             >
               Download
             </Button>
             <View className="opacity-70 text-center w-full flex items-center">
-              {settings?.downloadMethod === "optimized" ? (
-                <Text className="text-xs">Using optimized server</Text>
-              ) : (
-                <Text className="text-xs">Using default method</Text>
-              )}
+              <Text className="text-xs">
+                {usingOptimizedServer ? "Using optimized server" : "Using default method"}
+              </Text>
             </View>
           </View>
         </BottomSheetView>
@@ -308,3 +352,17 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
     </View>
   );
 };
+
+export const DownloadSingleItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
+  return (
+    <DownloadItems
+      items={[item]}
+      MissingDownloadIconComponent={() => (
+        <Ionicons name="cloud-download-outline" size={24} color="white" />
+      )}
+      DownloadedIconComponent={() => (
+        <Ionicons name="cloud-download" size={26} color="#9333ea" />
+      )}
+    />
+  )
+}