feat: download history

apps/expo/src/components/item/item.tsx

@@ -5,7 +5,7 @@ import ContextMenu from "react-native-context-menu-view";
 import { useRouter } from "expo-router";
 import { Image, Text, View } from "tamagui";
 
-// import { useDownloadManager } from "~/hooks/DownloadManagerContext";
+import { useDownloadManager } from "~/hooks/DownloadManagerContext";
 import { usePlayerStore } from "~/stores/player/store";
 
 export interface ItemData {
@@ -19,7 +19,7 @@ export interface ItemData {
 export default function Item({ data }: { data: ItemData }) {
   const resetVideo = usePlayerStore((state) => state.resetVideo);
   const router = useRouter();
-  //   const { startDownload } = useDownloadManager();
+  const { startDownload } = useDownloadManager();
 
   const { title, type, year, posterUrl } = data;
 
@@ -41,10 +41,10 @@ export default function Item({ data }: { data: ItemData }) {
     e: NativeSyntheticEvent<ContextMenuOnPressNativeEvent>,
   ) => {
     console.log(e.nativeEvent.name);
-    // startDownload(
-    //   "https://samplelib.com/lib/preview/mp4/sample-5s.mp4",
-    //   "mp4",
-    // ).catch(console.error);
+    startDownload(
+      "https://samplelib.com/lib/preview/mp4/sample-5s.mp4",
+      "mp4",
+    ).catch(console.error);
   };
 
   return (

apps/expo/src/hooks/DownloadManagerContext.tsx

@@ -1,9 +1,11 @@
 import type { ReactNode } from "react";
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 import * as FileSystem from "expo-file-system";
 import * as MediaLibrary from "expo-media-library";
 
-interface DownloadItem {
+import { loadDownloadHistory, saveDownloadHistory } from "~/settings";
+
+export interface DownloadItem {
   id: string;
   filename: string;
   progress: number;
@@ -39,6 +41,21 @@ export const DownloadManagerProvider: React.FC<{ children: ReactNode }> = ({
 }) => {
   const [downloads, setDownloads] = useState<DownloadItem[]>([]);
 
+  useEffect(() => {
+    const initializeDownloads = async () => {
+      const storedDownloads = await loadDownloadHistory();
+      if (storedDownloads) {
+        setDownloads(storedDownloads);
+      }
+    };
+
+    void initializeDownloads();
+  }, []);
+
+  useEffect(() => {
+    void saveDownloadHistory(downloads.slice(0, 10));
+  }, [downloads]);
+
   const startDownload = async (url: string, type: "mp4" | "hls") => {
     const newDownload: DownloadItem = {
       id: `download-${Date.now()}-${Math.random().toString(16).slice(2)}`,

apps/expo/src/settings/index.ts

@@ -1,5 +1,6 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
+import type { DownloadItem } from "~/hooks/DownloadManagerContext";
 import type { ThemeStoreOption } from "~/stores/theme";
 
 interface ThemeSettings {
@@ -31,3 +32,26 @@ export const saveTheme = async (newTheme: ThemeStoreOption) => {
   settings.themes.theme = newTheme;
   await saveSettings(settings);
 };
+
+interface DownloadHistory {
+  downloads: DownloadItem[];
+}
+
+const downloadHistoryKey = "downloadHistory";
+
+export const saveDownloadHistory = async (downloads: DownloadItem[]) => {
+  const json = await AsyncStorage.getItem(downloadHistoryKey);
+  const settings = json
+    ? (JSON.parse(json) as DownloadHistory)
+    : { downloads: [] };
+  settings.downloads = downloads;
+  await AsyncStorage.setItem(downloadHistoryKey, JSON.stringify(settings));
+};
+
+export const loadDownloadHistory = async (): Promise<DownloadItem[]> => {
+  const json = await AsyncStorage.getItem(downloadHistoryKey);
+  const settings = json
+    ? (JSON.parse(json) as DownloadHistory)
+    : { downloads: [] };
+  return settings.downloads;
+};