feat: remove download history items on long press

apps/expo/src/app/(tabs)/downloads.tsx

@@ -6,13 +6,13 @@ import ScreenLayout from "~/components/layout/ScreenLayout";
 import { useDownloadManager } from "~/hooks/DownloadManagerContext";
 
 const DownloadsScreen: React.FC = () => {
-  const { downloads } = useDownloadManager();
+  const { downloads, removeDownload } = useDownloadManager();
 
   return (
     <ScreenLayout title="Downloads">
       <ScrollView>
         {downloads.map((item) => (
-          <DownloadItem key={item.id} {...item} />
+          <DownloadItem key={item.id} {...item} onLongPress={removeDownload} />
         ))}
       </ScrollView>
     </ScreenLayout>

apps/expo/src/components/DownloadItem.tsx

@@ -1,13 +1,16 @@
 import React from "react";
+import { TouchableOpacity } from "react-native-gesture-handler";
 import { Progress, Text, View } from "tamagui";
 
 export interface DownloadItemProps {
+  id: string;
   filename: string;
   progress: number;
   speed: number;
   fileSize: number;
   downloaded: number;
   isFinished: boolean;
+  onLongPress: (id: string) => void;
 }
 
 const formatBytes = (bytes: number, decimals = 2) => {
@@ -20,18 +23,21 @@ const formatBytes = (bytes: number, decimals = 2) => {
 };
 
 export const DownloadItem: React.FC<DownloadItemProps> = ({
+  id,
   filename,
   progress,
   speed,
   fileSize,
   downloaded,
   isFinished,
+  onLongPress,
 }) => {
   const percentage = progress * 100;
   const formattedFileSize = formatBytes(fileSize);
   const formattedDownloaded = formatBytes(downloaded);
 
   return (
+    <TouchableOpacity onLongPress={() => onLongPress(id)} activeOpacity={0.7}>
       <View marginBottom={16} borderRadius={8} borderColor="white" padding={16}>
         <Text marginBottom={4} fontSize={16}>
           {filename}
@@ -66,5 +72,6 @@ export const DownloadItem: React.FC<DownloadItemProps> = ({
           )}
         </View>
       </View>
+    </TouchableOpacity>
   );
 };

apps/expo/src/hooks/DownloadManagerContext.tsx

@@ -20,6 +20,7 @@ export interface DownloadItem {
 interface DownloadManagerContextType {
   downloads: DownloadItem[];
   startDownload: (url: string, type: "mp4" | "hls") => Promise<void>;
+  removeDownload: (id: string) => void;
 }
 
 const DownloadManagerContext = createContext<
@@ -168,8 +169,16 @@ export const DownloadManagerProvider: React.FC<{ children: ReactNode }> = ({
     }
   };
 
+  const removeDownload = (id: string) => {
+    const updatedDownloads = downloads.filter((download) => download.id !== id);
+    setDownloads(updatedDownloads);
+    void saveDownloadHistory(updatedDownloads);
+  };
+
   return (
-    <DownloadManagerContext.Provider value={{ downloads, startDownload }}>
+    <DownloadManagerContext.Provider
+      value={{ downloads, startDownload, removeDownload }}
+    >
       {children}
     </DownloadManagerContext.Provider>
   );