wip

components/DownloadItem.tsx

@@ -112,6 +112,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
     );
 
     let url: string | undefined = undefined;
+    let fileExtension: string | undefined | null = "mp4";
 
     const mediaSource: MediaSourceInfo = response.data.MediaSources.find(
       (source: MediaSourceInfo) => source.Id === selectedMediaSource?.Id
@@ -146,12 +147,14 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
       }
     } else if (mediaSource.TranscodingUrl) {
       url = `${api.basePath}${mediaSource.TranscodingUrl}`;
+      fileExtension = mediaSource.TranscodingContainer;
     }
 
     if (!url) throw new Error("No url");
+    if (!fileExtension) throw new Error("No file extension");
 
     if (settings?.downloadMethod === "optimized") {
-      return await startBackgroundDownload(url, item);
+      return await startBackgroundDownload(url, item, fileExtension);
     } else {
       return await startRemuxing(url);
     }
@@ -192,7 +195,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
   const process = useMemo(() => {
     if (!processes) return null;
 
-    return processes.find((process) => process.item.Id === item.Id);
+    return processes.find((process) => process?.item?.Id === item.Id);
   }, [processes, item.Id]);
 
   return (

components/downloads/ActiveDownloads.tsx

@@ -1,7 +1,8 @@
 import { Text } from "@/components/common/Text";
-import { ProcessItem, useDownload } from "@/providers/DownloadProvider";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
+import { cancelJobById, 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";
@@ -18,7 +19,7 @@ interface Props extends ViewProps {}
 
 export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
   const router = useRouter();
-  const { removeProcess, processes } = useDownload();
+  const { removeProcess, processes, setProcesses } = useDownload();
   const [settings] = useSettings();
   const [api] = useAtom(apiAtom);
 
@@ -26,25 +27,22 @@ export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
     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: api?.accessToken,
-              },
-            }
-          );
+      if (settings?.downloadMethod === "optimized") {
+        try {
           const tasks = await checkForExistingDownloads();
-          for (const task of tasks) task.stop();
-        } else {
-          FFmpegKit.cancel();
+          for (const task of tasks) {
+            if (task.id === id) {
+              await task.stop();
+            }
+          }
+        } catch (e) {
+          throw e;
+        } finally {
+          removeProcess(id);
         }
-      } catch (e) {
-        throw e;
-      } finally {
-        removeProcess(id);
+      } else {
+        FFmpegKit.cancel();
+        setProcesses((prev) => prev.filter((p) => p.id !== id));
       }
     },
     onSuccess: () => {
@@ -52,12 +50,12 @@ export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
     },
     onError: (e) => {
       console.log(e);
-      toast.error("Failed to cancel download on the server");
+      toast.error("Could not cancel download");
     },
   });
 
   const eta = useCallback(
-    (p: ProcessItem) => {
+    (p: JobStatus) => {
       if (!p.speed || !p.progress) return null;
 
       const length = p?.item?.RunTimeTicks || 0;
@@ -67,7 +65,7 @@ export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
     [process]
   );
 
-  if (processes.length === 0)
+  if (processes?.length === 0)
     return (
       <View {...props} className="bg-neutral-900 p-4 rounded-2xl">
         <Text className="text-lg font-bold">Active download</Text>
@@ -79,7 +77,7 @@ export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
     <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) => (
+        {processes?.map((p) => (
           <TouchableOpacity
             key={p.id}
             onPress={() => router.push(`/(auth)/items/page?id=${p.item.Id}`)}
@@ -109,7 +107,7 @@ export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
                   )}
                 </View>
                 <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
-                  <Text className="text-xs capitalize">{p.state}</Text>
+                  <Text className="text-xs capitalize">{p.status}</Text>
                 </View>
               </View>
               <TouchableOpacity onPress={() => cancelJobMutation.mutate(p.id)}>

components/settings/SettingToggles.tsx

@@ -24,11 +24,13 @@ import { Button } from "../Button";
 import { MediaToggles } from "./MediaToggles";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { opacity } from "react-native-reanimated/lib/typescript/reanimated2/Colors";
+import { useDownload } from "@/providers/DownloadProvider";
 
 interface Props extends ViewProps {}
 
 export const SettingToggles: React.FC<Props> = ({ ...props }) => {
   const [settings, updateSettings] = useSettings();
+  const { setProcesses } = useDownload();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -495,7 +497,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
                   key="1"
                   onSelect={() => {
                     updateSettings({ downloadMethod: "remux" });
-                    queryClient.invalidateQueries({ queryKey: ["search"] });
+                    setProcesses([]);
                   }}
                 >
                   <DropdownMenu.ItemTitle>Default</DropdownMenu.ItemTitle>
@@ -504,6 +506,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
                   key="2"
                   onSelect={() => {
                     updateSettings({ downloadMethod: "optimized" });
+                    setProcesses([]);
                     queryClient.invalidateQueries({ queryKey: ["search"] });
                   }}
                 >