From c7e10a13b5c357561b38a062974f8fe3123397a9 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sun, 29 Sep 2024 13:28:36 +0200
Subject: [PATCH] fix: download progress not showing

---
 components/downloads/ActiveDownloads.tsx | 29 +++++++++++++++++-------
 providers/DownloadProvider.tsx           | 20 ++++++++++------
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/components/downloads/ActiveDownloads.tsx b/components/downloads/ActiveDownloads.tsx
index 25f9fcf4..e28a122b 100644
--- a/components/downloads/ActiveDownloads.tsx
+++ b/components/downloads/ActiveDownloads.tsx
@@ -3,13 +3,14 @@ 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 { useCallback, useEffect, useMemo, useState } from "react";
+import { ProcessItem, 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";
+import { formatTimeString } from "@/utils/time";
 
 interface Props extends ViewProps {}
 
@@ -52,6 +53,17 @@ export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
     },
   });
 
+  const eta = useCallback(
+    (p: ProcessItem) => {
+      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">
@@ -82,13 +94,14 @@ export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
               <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-4">
-                  <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">{p.progress.toFixed(0)}%</Text>
                   {p.speed && (
-                    <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
-                      <Text className="text-xs">{p.speed.toFixed(2)}%</Text>
+                    <Text className="text-xs">{p.speed?.toFixed(2)}x</Text>
+                  )}
+                  {eta(p) && (
+                    <View>
+                      <Text className="text-xs">ETA {eta(p)}</Text>
                     </View>
                   )}
                 </View>
diff --git a/providers/DownloadProvider.tsx b/providers/DownloadProvider.tsx
index f556e140..755c9faa 100644
--- a/providers/DownloadProvider.tsx
+++ b/providers/DownloadProvider.tsx
@@ -55,11 +55,7 @@ function useDownloadProvider() {
     return `Bearer ${settings?.optimizedVersionsAuthHeader}`;
   }, [settings]);
 
-  const {
-    data: downloadedFiles,
-    isLoading,
-    refetch,
-  } = useQuery({
+  const { data: downloadedFiles, refetch } = useQuery({
     queryKey: ["downloadedItems"],
     queryFn: getAllDownloadedItems,
     staleTime: 0,
@@ -182,14 +178,23 @@ function useDownloadProvider() {
                 newState = "optimizing";
               } else if (job.status === "completed") {
                 startDownload(process);
-                return null;
+                return {
+                  ...process,
+                  progress: 100,
+                  speed: 0,
+                };
               } else if (job.status === "failed") {
                 newState = "error";
               } else if (job.status === "cancelled") {
                 newState = "canceled";
               }
 
-              return { ...process, state: newState, progress: job.progress };
+              return {
+                ...process,
+                state: newState,
+                progress: job.progress,
+                speed: job.speed,
+              };
             } catch (error) {
               if (axios.isAxiosError(error) && !error.response) {
                 // Network error occurred (server might be down)
@@ -438,6 +443,7 @@ const checkJobStatus = async (
 ): Promise<{
   progress: number;
   status: "queued" | "running" | "completed" | "failed" | "cancelled";
+  speed?: string;
 }> => {
   const statusResponse = await axios.get(`${baseUrl}job-status/${id}`, {
     headers: {