wip

components/DownloadItem.tsx

@@ -40,7 +40,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
   const [user] = useAtom(userAtom);
   const [queue, setQueue] = useAtom(queueAtom);
   const [settings] = useSettings();
-  const { process, startBackgroundDownload } = useDownload();
+  const { processes, startBackgroundDownload } = useDownload();
   const { startRemuxing, cancelRemuxing } = useRemuxHlsToMp4(item);
 
   const [selectedMediaSource, setSelectedMediaSource] =
@@ -188,6 +188,12 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
     []
   );
 
+  const process = useMemo(() => {
+    if (!processes) return null;
+
+    return processes.find((process) => process.item.Id === item.Id);
+  }, [processes, item.Id]);
+
   return (
     <View
       className="bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"

components/downloads/ActiveDownload.tsx

@@ -1,95 +0,0 @@
-import { TouchableOpacity, View, ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useRouter } from "expo-router";
-import { checkForExistingDownloads } from "@kesha-antonov/react-native-background-downloader";
-import { Ionicons } from "@expo/vector-icons";
-import { useEffect, useState } from "react";
-import { useDownload } from "@/providers/DownloadProvider";
-import { useMutation } from "@tanstack/react-query";
-import axios from "axios";
-import { toast } from "sonner-native";
-import { useSettings } from "@/utils/atoms/settings";
-import { FFmpegKit } from "ffmpeg-kit-react-native";
-
-interface Props extends ViewProps {}
-
-export const ActiveDownload: React.FC<Props> = ({ ...props }) => {
-  const router = useRouter();
-  const { clearProcess, process } = useDownload();
-  const [settings] = useSettings();
-
-  const cancelJobMutation = useMutation({
-    mutationFn: async () => {
-      if (!process) throw new Error("No active download");
-
-      if (settings?.downloadMethod === "optimized") {
-        await axios.delete(
-          settings?.optimizedVersionsServerUrl + "cancel-job/" + process.id,
-          {
-            headers: {
-              Authorization: `Bearer ${settings?.optimizedVersionsAuthHeader}`,
-            },
-          }
-        );
-        const tasks = await checkForExistingDownloads();
-        for (const task of tasks) task.stop();
-        clearProcess();
-      } else {
-        FFmpegKit.cancel();
-        clearProcess();
-      }
-    },
-    onSuccess: () => {
-      toast.success("Download canceled");
-    },
-    onError: (e) => {
-      console.log(e);
-      toast.error("Failed to cancel download");
-      clearProcess();
-    },
-  });
-
-  if (!process)
-    return (
-      <View {...props}>
-        <Text className="text-2xl font-bold mb-2">Active download</Text>
-        <Text className="opacity-50">No active downloads</Text>
-      </View>
-    );
-
-  return (
-    <View {...props}>
-      <Text className="text-2xl font-bold mb-2">Active download</Text>
-      <TouchableOpacity
-        onPress={() => router.push(`/(auth)/items/page?id=${process.item.Id}`)}
-        className="relative bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden"
-      >
-        <View
-          className={`
-            bg-purple-600 h-1 absolute bottom-0 left-0
-            `}
-          style={{
-            width: process.progress
-              ? `${Math.max(5, process.progress)}%`
-              : "5%",
-          }}
-        ></View>
-        <View className="p-4 flex flex-row items-center justify-between w-full">
-          <View>
-            <Text className="font-semibold">{process.item.Name}</Text>
-            <Text className="text-xs opacity-50">{process.item.Type}</Text>
-            <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
-              <Text className="text-xs">{process.progress.toFixed(0)}%</Text>
-            </View>
-            <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
-              <Text className="text-xs capitalize">{process.state}</Text>
-            </View>
-          </View>
-          <TouchableOpacity onPress={() => cancelJobMutation.mutate()}>
-            <Ionicons name="close" size={24} color="red" />
-          </TouchableOpacity>
-        </View>
-      </TouchableOpacity>
-    </View>
-  );
-};

components/downloads/ActiveDownloads.tsx

@@ -0,0 +1,101 @@
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import { useRouter } from "expo-router";
+import { checkForExistingDownloads } from "@kesha-antonov/react-native-background-downloader";
+import { Ionicons } from "@expo/vector-icons";
+import { useEffect, useState } from "react";
+import { useDownload } from "@/providers/DownloadProvider";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { toast } from "sonner-native";
+import { useSettings } from "@/utils/atoms/settings";
+import { FFmpegKit } from "ffmpeg-kit-react-native";
+
+interface Props extends ViewProps {}
+
+export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
+  const router = useRouter();
+  const { removeProcess, processes } = useDownload();
+  const [settings] = useSettings();
+
+  const cancelJobMutation = useMutation({
+    mutationFn: async (id: string) => {
+      if (!process) throw new Error("No active download");
+
+      try {
+        if (settings?.downloadMethod === "optimized") {
+          await axios.delete(
+            settings?.optimizedVersionsServerUrl + "cancel-job/" + id,
+            {
+              headers: {
+                Authorization: `Bearer ${settings?.optimizedVersionsAuthHeader}`,
+              },
+            }
+          );
+          const tasks = await checkForExistingDownloads();
+          for (const task of tasks) task.stop();
+        } else {
+          FFmpegKit.cancel();
+        }
+      } catch (e) {
+        throw e;
+      } finally {
+        removeProcess(id);
+      }
+    },
+    onSuccess: () => {
+      toast.success("Download canceled");
+    },
+    onError: (e) => {
+      console.log(e);
+      toast.error("Failed to cancel download");
+    },
+  });
+
+  if (processes.length === 0)
+    return (
+      <View {...props} className="bg-neutral-900 p-4 rounded-2xl">
+        <Text className="text-lg font-bold">Active download</Text>
+        <Text className="opacity-50">No active downloads</Text>
+      </View>
+    );
+
+  return (
+    <View {...props} className="bg-neutral-900 p-4 rounded-2xl">
+      <Text className="text-lg font-bold mb-2">Active downloads</Text>
+      <View className="space-y-2">
+        {processes.map((p) => (
+          <TouchableOpacity
+            key={p.id}
+            onPress={() => router.push(`/(auth)/items/page?id=${p.item.Id}`)}
+            className="relative bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden"
+          >
+            <View
+              className={`
+            bg-purple-600 h-1 absolute bottom-0 left-0
+            `}
+              style={{
+                width: p.progress ? `${Math.max(5, p.progress)}%` : "5%",
+              }}
+            ></View>
+            <View className="p-4 flex flex-row items-center justify-between w-full">
+              <View>
+                <Text className="font-semibold">{p.item.Name}</Text>
+                <Text className="text-xs opacity-50">{p.item.Type}</Text>
+                <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
+                  <Text className="text-xs">{p.progress.toFixed(0)}%</Text>
+                </View>
+                <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
+                  <Text className="text-xs capitalize">{p.state}</Text>
+                </View>
+              </View>
+              <TouchableOpacity onPress={() => cancelJobMutation.mutate(p.id)}>
+                <Ionicons name="close" size={24} color="red" />
+              </TouchableOpacity>
+            </View>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};

components/downloads/SeriesCard.tsx

@@ -25,7 +25,7 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
   return (
     <View>
       <View className="flex flex-row items-center justify-between">
-        <Text className="text-2xl font-bold shrink">{items[0].SeriesName}</Text>
+        <Text className="text-lg font-bold shrink">{items[0].SeriesName}</Text>
         <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
           <Text className="text-xs font-bold">{items.length}</Text>
         </View>