wip

components/downloads/ActiveDownload.tsx

@@ -0,0 +1,83 @@
+import { TouchableOpacity, View, ViewProps } from "react-native";
+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 { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { toast } from "sonner-native";
+import { useSettings } from "@/utils/atoms/settings";
+
+interface Props extends ViewProps {}
+
+export const ActiveDownload: React.FC<Props> = ({ ...props }) => {
+  const router = useRouter();
+  const { clearProcess, process } = useDownload();
+  const [settings] = useSettings();
+
+  const cancelJobMutation = useMutation({
+    mutationFn: async (id: string) => {
+      if (!process) return;
+
+      await axios.delete(settings?.optimizedVersionsServerUrl + id);
+      const tasks = await checkForExistingDownloads();
+      for (const task of tasks) task.stop();
+      clearProcess();
+    },
+    onSuccess: () => {
+      toast.success("Download cancelled");
+    },
+    onError: () => {
+      toast.error("Failed to cancel download");
+    },
+  });
+
+  if (!process)
+    return (
+      <View {...props}>
+        <Text className="text-2xl font-bold mb-2">Active download</Text>
+        <Text className="opacity-50">No active downloads</Text>
+      </View>
+    );
+
+  return (
+    <View {...props}>
+      <Text className="text-2xl font-bold mb-2">Active download</Text>
+      <TouchableOpacity
+        onPress={() => router.push(`/(auth)/items/page?id=${process.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: process.progress
+              ? `${Math.max(5, process.progress)}%`
+              : "5%",
+          }}
+        ></View>
+        <View className="p-4 flex flex-row items-center justify-between w-full">
+          <View>
+            <Text className="font-semibold">{process.item.Name}</Text>
+            <Text className="text-xs opacity-50">{process.item.Id}</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>
+            </View>
+            <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
+              <Text className="text-xs capitalize">{process.state}</Text>
+            </View>
+          </View>
+          <TouchableOpacity
+            onPress={() => cancelJobMutation.mutate(process.id)}
+          >
+            <Ionicons name="close" size={24} color="red" />
+          </TouchableOpacity>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};

components/downloads/EpisodeCard.tsx

@@ -5,8 +5,8 @@ import { TouchableOpacity } from "react-native";
 import * as ContextMenu from "zeego/context-menu";
 
 import { useFileOpener } from "@/hooks/useDownloadedFileOpener";
-import { useFiles } from "@/hooks/useFiles";
 import { Text } from "../common/Text";
+import { useDownload } from "@/providers/DownloadProvider";
 
 interface EpisodeCardProps {
   item: BaseItemDto;
@@ -18,7 +18,7 @@ interface EpisodeCardProps {
  * @returns {React.ReactElement} The rendered EpisodeCard component.
  */
 export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
-  const { deleteFile } = useFiles();
+  const { deleteFile } = useDownload();
   const { openFile } = useFileOpener();
 
   const handleOpenFile = useCallback(() => {

components/downloads/MovieCard.tsx

@@ -4,11 +4,11 @@ import React, { useCallback } from "react";
 import { TouchableOpacity, View } from "react-native";
 import * as ContextMenu from "zeego/context-menu";
 
-import { useFiles } from "@/hooks/useFiles";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { Text } from "../common/Text";
 
 import { useFileOpener } from "@/hooks/useDownloadedFileOpener";
+import { useDownload } from "@/providers/DownloadProvider";
 
 interface MovieCardProps {
   item: BaseItemDto;
@@ -20,7 +20,7 @@ interface MovieCardProps {
  * @returns {React.ReactElement} The rendered MovieCard component.
  */
 export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
-  const { deleteFile } = useFiles();
+  const { deleteFile } = useDownload();
   const { openFile } = useFileOpener();
 
   const handleOpenFile = useCallback(() => {