wip

app/(auth)/(tabs)/(home)/downloads.tsx

@@ -160,7 +160,7 @@ const downloads: React.FC = () => {
                   </Text>
                   <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
                     <Text className="text-xs">
-                      {(process.progress * 100).toFixed(0)}%
+                      {process.progress.toFixed(0)}%
                     </Text>
                   </View>
                 </View>

hooks/useDownloadM3U8Files.ts

@@ -8,7 +8,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import * as FileSystem from "expo-file-system";
 import { FFmpegKit, ReturnCode } from "ffmpeg-kit-react-native";
 import { useAtom } from "jotai";
-import { useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner-native";
 
 export const useDownloadM3U8Files = (item: BaseItemDto) => {
@@ -16,6 +16,9 @@ export const useDownloadM3U8Files = (item: BaseItemDto) => {
   const queryClient = useQueryClient();
   const [api] = useAtom(apiAtom);
 
+  const [totalSegments, setTotalSegments] = useState<number>(0);
+  const [downloadedSegments, setDownloadedSegments] = useState<number[]>([]);
+
   if (!item.Id || !item.Name) {
     throw new Error("Item must have an Id and Name");
   }
@@ -56,6 +59,8 @@ export const useDownloadM3U8Files = (item: BaseItemDto) => {
           item.Id!
         );
 
+        setTotalSegments(segments.length);
+
         for (let i = 0; i < segments.length; i++) {
           const segment = segments[i];
           const segmentUrl = `${api.basePath}/videos/${item.Id}/${segment.path}`;
@@ -65,18 +70,8 @@ export const useDownloadM3U8Files = (item: BaseItemDto) => {
             id: `${item.Id}_segment_${i}`,
             url: segmentUrl,
             destination: destination,
-          }).done((e) => {
-            console.log("Download completed for segment", i);
-            setProgress((prev) => {
-              const newProgress = ((prev?.progress || 0) + 1) / segments.length;
-              if (prev === null) {
-                return null;
-              }
-              return {
-                ...prev,
-                progress: newProgress,
-              };
-            });
+          }).done(() => {
+            setDownloadedSegments((prev) => [...prev, i]);
           });
         }
 
@@ -93,9 +88,24 @@ export const useDownloadM3U8Files = (item: BaseItemDto) => {
         throw error;
       }
     },
-    [item, setProgress, queryClient, api]
+    [item, queryClient, api]
   );
 
+  useEffect(() => {
+    if (totalSegments === 0) return;
+
+    console.log("[0]", downloadedSegments.length, totalSegments);
+
+    const progress = (downloadedSegments.length / totalSegments) * 100;
+    setProgress((prev) => ({
+      ...prev!,
+      progress,
+    }));
+    if (progress > 99) {
+      setProgress(null);
+    }
+  }, [downloadedSegments, totalSegments]);
+
   return { startBackgroundDownload };
 };
 
@@ -210,5 +220,3 @@ export async function getAllDownloadedItems(): Promise<BaseItemDto[]> {
     return [];
   }
 }
-
-

hooks/useDownloadedFileOpener.ts

@@ -13,7 +13,7 @@ export const useFileOpener = () => {
 
   const openFile = useCallback(
     async (item: BaseItemDto) => {
-      const m3u8File = `${FileSystem.documentDirectory}${item.Id}/playlist.m3u8`;
+      const m3u8File = `${FileSystem.documentDirectory}${item.Id}/local.m3u8`;
       const outputFile = `${FileSystem.documentDirectory}${item.Id}/output.mp4`;
 
       console.log("Checking for output file:", outputFile);