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>
   );
 };

providers/DownloadProvider.tsx

@@ -1,10 +1,19 @@
 import { useSettings } from "@/utils/atoms/settings";
+import { getOrSetDeviceId } from "@/utils/device";
+import { writeToLog } from "@/utils/log";
+import {
+  cancelAllJobs,
+  cancelJobById,
+  getAllJobsByDeviceId,
+  JobStatus,
+} from "@/utils/optimize-server";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   checkForExistingDownloads,
   completeHandler,
   directories,
   download,
+  setConfig,
 } from "@kesha-antonov/react-native-background-downloader";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import {
@@ -14,8 +23,10 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import axios from "axios";
+import * as BackgroundFetch from "expo-background-fetch";
 import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
+import * as TaskManager from "expo-task-manager";
 import { useAtom } from "jotai";
 import React, {
   createContext,
@@ -28,16 +39,6 @@ import React, {
 } from "react";
 import { toast } from "sonner-native";
 import { apiAtom } from "./JellyfinProvider";
-import * as BackgroundFetch from "expo-background-fetch";
-import * as TaskManager from "expo-task-manager";
-import { writeToLog } from "@/utils/log";
-import { getOrSetDeviceId } from "@/utils/device";
-import {
-  cancelAllJobs,
-  cancelJobById,
-  getAllJobsByDeviceId,
-  JobStatus,
-} from "@/utils/optimize-server";
 
 export const BACKGROUND_FETCH_TASK = "background-fetch";
 
@@ -108,12 +109,21 @@ function useDownloadProvider() {
         url,
       });
 
-      setProcesses(jobs);
+      // Local downloading processes that are still valid
+      const downloadingProcesses = processes
+        .filter((p) => p.status === "downloading")
+        .filter((p) => jobs.some((j) => j.id === p.id));
+
+      const updatedProcesses = jobs.filter(
+        (j) => !downloadingProcesses.some((p) => p.id === j.id)
+      );
+
+      setProcesses([...updatedProcesses, ...downloadingProcesses]);
 
       return jobs;
     },
     staleTime: 0,
-    refetchInterval: 1000 * 3, // 5 minutes
+    refetchInterval: 1000,
     enabled: settings?.downloadMethod === "optimized",
   });
 
@@ -123,11 +133,10 @@ function useDownloadProvider() {
       for (let i = 0; i < processes.length; i++) {
         const job = processes[i];
 
-        // Check if the download is already in progress
-        const tasks = await checkForExistingDownloads();
-        if (tasks.find((task) => task.id === job.id)) continue;
-
         if (job.status === "completed") {
+          // Check if the download is already in progress
+          const tasks = await checkForExistingDownloads();
+          if (tasks.find((task) => task.id === job.id)) continue;
           await startDownload(job);
           continue;
         }
@@ -199,32 +208,58 @@ function useDownloadProvider() {
     async (process: JobStatus) => {
       if (!process?.item.Id || !authHeader) throw new Error("No item id");
 
+      setConfig({
+        isLogsEnabled: true,
+        progressInterval: 500,
+        headers: {
+          Authorization: authHeader,
+        },
+      });
+
       download({
         id: process.id,
         url: settings?.optimizedVersionsServerUrl + "download/" + process.id,
         destination: `${directories.documents}/${process.item.Id}.mp4`,
-        headers: {
-          Authorization: authHeader,
-        },
       })
         .begin(() => {
           toast.info(`Download started for ${process.item.Name}`);
+          setProcesses((prev) =>
+            prev.map((p) =>
+              p.id === process.id
+                ? {
+                    ...p,
+                    speed: undefined,
+                    status: "downloading",
+                    progress: 0,
+                  }
+                : p
+            )
+          );
         })
         .progress((data) => {
           const percent = (data.bytesDownloaded / data.bytesTotal) * 100;
-          console.log("Progress ~", percent);
+          console.log("Download progress:", percent);
+          setProcesses((prev) =>
+            prev.map((p) =>
+              p.id === process.id
+                ? {
+                    ...p,
+                    speed: undefined,
+                    status: "downloading",
+                    progress: percent,
+                  }
+                : p
+            )
+          );
         })
         .done(async () => {
-          removeProcess(process.id);
           await saveDownloadedItemInfo(process.item);
-          await queryClient.invalidateQueries({
-            queryKey: ["downloadedItems"],
-          });
-          await refetch();
+          removeProcess(process.id);
           completeHandler(process.id);
           toast.success(`Download completed for ${process.item.Name}`);
         })
-        .error((error) => {
+        .error(async (error) => {
+          completeHandler(process.id);
           toast.error(`Download failed for ${process.item.Name}: ${error}`);
           writeToLog("ERROR", `Download failed for ${process.item.Name}`, {
             error,

utils/optimize-server.ts

@@ -10,7 +10,13 @@ interface IJobInput {
 
 export interface JobStatus {
   id: string;
-  status: "queued" | "running" | "completed" | "failed" | "cancelled";
+  status:
+    | "queued"
+    | "optimizing"
+    | "completed"
+    | "failed"
+    | "cancelled"
+    | "downloading";
   progress: number;
   outputPath: string;
   inputUrl: string;