feat: mp4 downloads

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

@@ -1,26 +1,12 @@
+import React from "react";
 import { ScrollView } from "react-native-gesture-handler";
 
-import type { DownloadItemProps } from "~/components/DownloadItem";
 import { DownloadItem } from "~/components/DownloadItem";
 import ScreenLayout from "~/components/layout/ScreenLayout";
+import { useDownloadManager } from "~/hooks/DownloadManagerContext";
 
-export default function DownloadsScreen() {
-  const downloads: DownloadItemProps[] = [
-    {
-      filename: "episode.mp4",
-      progress: 0.3,
-      speed: 1.2,
-      fileSize: 500 * 1024 * 1024,
-      downloaded: 150 * 1024 * 1024,
-    },
-    {
-      filename: "episode.m3u8",
-      progress: 0.7,
-      speed: 0.8,
-      fileSize: 200 * 1024 * 1024,
-      downloaded: 140 * 1024 * 1024,
-    },
-  ];
+const DownloadsScreen: React.FC = () => {
+  const { downloads } = useDownloadManager();
 
   return (
     <ScreenLayout title="Downloads">
@@ -31,4 +17,6 @@ export default function DownloadsScreen() {
       </ScrollView>
     </ScreenLayout>
   );
-}
+};
+
+export default DownloadsScreen;

apps/expo/src/app/_layout.tsx

@@ -9,6 +9,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { TamaguiProvider, Theme, useTheme } from "tamagui";
 import tamaguiConfig from "tamagui.config";
 
+import { DownloadManagerProvider } from "~/hooks/DownloadManagerContext";
 import { useThemeStore } from "~/stores/theme";
 // @ts-expect-error - Without named import it causes an infinite loop
 import _styles from "../../tamagui-web.css";
@@ -59,9 +60,11 @@ export default function RootLayout() {
   }
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <RootLayoutNav />
-    </GestureHandlerRootView>
+    <DownloadManagerProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <RootLayoutNav />
+      </GestureHandlerRootView>
+    </DownloadManagerProvider>
   );
 }