feat: play downloads

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

@@ -1,18 +1,37 @@
+import type { Asset } from "expo-media-library";
 import React from "react";
 import { ScrollView } from "react-native-gesture-handler";
+import { useRouter } from "expo-router";
 
 import { DownloadItem } from "~/components/DownloadItem";
 import ScreenLayout from "~/components/layout/ScreenLayout";
 import { useDownloadManager } from "~/hooks/DownloadManagerContext";
+import { usePlayerStore } from "~/stores/player/store";
 
 const DownloadsScreen: React.FC = () => {
   const { downloads, removeDownload } = useDownloadManager();
+  const resetVideo = usePlayerStore((state) => state.resetVideo);
+  const router = useRouter();
+
+  const handlePress = (asset?: Asset) => {
+    if (!asset) return;
+    resetVideo();
+    router.push({
+      pathname: "/videoPlayer",
+      params: { data: JSON.stringify(asset) },
+    });
+  };
 
   return (
     <ScreenLayout title="Downloads">
       <ScrollView>
         {downloads.map((item) => (
-          <DownloadItem key={item.id} {...item} onLongPress={removeDownload} />
+          <DownloadItem
+            key={item.id}
+            {...item}
+            onPress={() => handlePress(item.asset)}
+            onLongPress={removeDownload}
+          />
         ))}
       </ScrollView>
     </ScreenLayout>

apps/expo/src/app/_layout.tsx

@@ -61,11 +61,9 @@ export default function RootLayout() {
   }
 
   return (
-    <DownloadManagerProvider>
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <RootLayoutNav />
-      </GestureHandlerRootView>
-    </DownloadManagerProvider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <RootLayoutNav />
+    </GestureHandlerRootView>
   );
 }
 
@@ -108,11 +106,13 @@ function RootLayoutNav() {
     <QueryClientProvider client={queryClient}>
       <TamaguiProvider config={tamaguiConfig} defaultTheme="main">
         <ToastProvider>
-          <ThemeProvider value={DarkTheme}>
-            <Theme name={themeStore}>
-              <ScreenStacks />
-            </Theme>
-          </ThemeProvider>
+          <DownloadManagerProvider>
+            <ThemeProvider value={DarkTheme}>
+              <Theme name={themeStore}>
+                <ScreenStacks />
+              </Theme>
+            </ThemeProvider>
+          </DownloadManagerProvider>
           <ToastViewport />
         </ToastProvider>
       </TamaguiProvider>

apps/expo/src/app/videoPlayer.tsx

@@ -9,6 +9,7 @@ import { usePlayerStore } from "~/stores/player/store";
 
 export default function VideoPlayerWrapper() {
   const playerStatus = usePlayerStore((state) => state.interface.playerStatus);
+  const asset = usePlayerStore((state) => state.asset);
   const { presentFullscreenPlayer } = usePlayer();
 
   const router = useRouter();
@@ -21,8 +22,15 @@ export default function VideoPlayerWrapper() {
 
   void presentFullscreenPlayer();
 
-  if (playerStatus === PlayerStatus.SCRAPING)
-    return <ScraperProcess data={data} />;
+  if (asset) {
+    return <VideoPlayer />;
+  }
 
-  if (playerStatus === PlayerStatus.READY) return <VideoPlayer />;
+  if (playerStatus === PlayerStatus.SCRAPING) {
+    return <ScraperProcess data={data} />;
+  }
+
+  if (playerStatus === PlayerStatus.READY) {
+    return <VideoPlayer />;
+  }
 }