fix: keep track of local download progress

components/downloads/ActiveDownloads.tsx

@@ -2,26 +2,56 @@ import { Text } from "@/components/common/Text";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { cancelJobById, JobStatus } from "@/utils/optimize-server";
+import { JobStatus } from "@/utils/optimize-server";
 import { formatTimeString } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
 import { checkForExistingDownloads } from "@kesha-antonov/react-native-background-downloader";
-import { useMutation } from "@tanstack/react-query";
-import axios from "axios";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
 import { FFmpegKit } from "ffmpeg-kit-react-native";
 import { useAtom } from "jotai";
-import { useCallback } from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import {
+  ActivityIndicator,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
 import { toast } from "sonner-native";
 
 interface Props extends ViewProps {}
 
 export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
+  const { processes } = useDownload();
+  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) => (
+          <DownloadCard key={p.id} process={p} />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+interface DownloadCardProps extends TouchableOpacityProps {
+  process: JobStatus;
+}
+
+const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
   const router = useRouter();
-  const { removeProcess, processes, setProcesses } = useDownload();
+  const { removeProcess, setProcesses } = useDownload();
   const [settings] = useSettings();
-  const [api] = useAtom(apiAtom);
+  const queryClient = useQueryClient();
 
   const cancelJobMutation = useMutation({
     mutationFn: async (id: string) => {
@@ -32,13 +62,14 @@ export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
           const tasks = await checkForExistingDownloads();
           for (const task of tasks) {
             if (task.id === id) {
-              await task.stop();
+              task.stop();
             }
           }
         } catch (e) {
           throw e;
         } finally {
-          removeProcess(id);
+          await removeProcess(id);
+          await queryClient.refetchQueries({ queryKey: ["jobs"] });
         }
       } else {
         FFmpegKit.cancel();
@@ -54,69 +85,58 @@ export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
     },
   });
 
-  const eta = useCallback(
-    (p: JobStatus) => {
-      if (!p.speed || !p.progress) return null;
+  const eta = (p: JobStatus) => {
+    if (!p.speed || !p.progress) return null;
 
-      const length = p?.item?.RunTimeTicks || 0;
-      const timeLeft = (length - length * (p.progress / 100)) / p.speed;
-      return formatTimeString(timeLeft, true);
-    },
-    [process]
-  );
-
-  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>
-    );
+    const length = p?.item?.RunTimeTicks || 0;
+    const timeLeft = (length - length * (p.progress / 100)) / p.speed;
+    return formatTimeString(timeLeft, true);
+  };
 
   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">
+    <TouchableOpacity
+      onPress={() => router.push(`/(auth)/items/page?id=${process.item.Id}`)}
+      className="relative bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden"
+      {...props}
+    >
+      <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 className="shrink">
+          <Text className="font-semibold shrink">{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>
+            {process.speed && (
+              <Text className="text-xs">{process.speed?.toFixed(2)}x</Text>
+            )}
+            {eta(process) && (
               <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>
-                  {p.speed && (
-                    <Text className="text-xs">{p.speed?.toFixed(2)}x</Text>
-                  )}
-                  {eta(p) && (
-                    <View>
-                      <Text className="text-xs">ETA {eta(p)}</Text>
-                    </View>
-                  )}
-                </View>
-                <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
-                  <Text className="text-xs capitalize">{p.status}</Text>
-                </View>
+                <Text className="text-xs">ETA {eta(process)}</Text>
               </View>
-              <TouchableOpacity onPress={() => cancelJobMutation.mutate(p.id)}>
-                <Ionicons name="close" size={24} color="red" />
-              </TouchableOpacity>
-            </View>
-          </TouchableOpacity>
-        ))}
+            )}
+          </View>
+          <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
+            <Text className="text-xs capitalize">{process.status}</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          disabled={cancelJobMutation.isPending}
+          onPress={() => cancelJobMutation.mutate(process.id)}
+        >
+          {cancelJobMutation.isPending ? (
+            <ActivityIndicator size="small" color="white" />
+          ) : (
+            <Ionicons name="close" size={24} color="red" />
+          )}
+        </TouchableOpacity>
       </View>
-    </View>
+    </TouchableOpacity>
   );
 };