feat: play downloads

apps/expo/src/components/DownloadItem.tsx

@@ -1,3 +1,4 @@
+import type { Asset } from "expo-media-library";
 import React from "react";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import { Progress, Spinner, Text, View } from "tamagui";
@@ -12,6 +13,8 @@ export interface DownloadItemProps {
   isFinished: boolean;
   onLongPress: (id: string) => void;
   statusText?: string;
+  asset?: Asset;
+  onPress: (asset?: Asset) => void;
 }
 
 const formatBytes = (bytes: number, decimals = 2) => {
@@ -33,6 +36,8 @@ export const DownloadItem: React.FC<DownloadItemProps> = ({
   isFinished,
   onLongPress,
   statusText,
+  asset,
+  onPress,
 }) => {
   const percentage = progress * 100;
   const formattedFileSize = formatBytes(fileSize);
@@ -64,7 +69,11 @@ export const DownloadItem: React.FC<DownloadItemProps> = ({
   };
 
   return (
-    <TouchableOpacity onLongPress={() => onLongPress(id)} activeOpacity={0.7}>
+    <TouchableOpacity
+      onPress={() => onPress(asset)}
+      onLongPress={() => onLongPress(id)}
+      activeOpacity={0.7}
+    >
       <View marginBottom={16} borderRadius={8} borderColor="white" padding={16}>
         <Text marginBottom={4} fontSize={16}>
           {filename}

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/components/player/VideoPlayer.tsx

@@ -56,6 +56,7 @@ export const VideoPlayer = () => {
   const stream = usePlayerStore((state) => state.interface.currentStream);
   const selectedAudioTrack = useAudioTrackStore((state) => state.selectedTrack);
   const videoRef = usePlayerStore((state) => state.videoRef);
+  const asset = usePlayerStore((state) => state.asset);
   const setVideoRef = usePlayerStore((state) => state.setVideoRef);
   const setStatus = usePlayerStore((state) => state.setStatus);
   const setIsIdle = usePlayerStore((state) => state.setIsIdle);
@@ -167,6 +168,12 @@ export const VideoPlayer = () => {
 
   useEffect(() => {
     const initializePlayer = async () => {
+      if (asset) {
+        setVideoSrc(asset);
+        setIsLoading(false);
+        return;
+      }
+
       if (!stream) {
         await dismissFullscreenPlayer();
         return router.back();
@@ -214,6 +221,7 @@ export const VideoPlayer = () => {
       void synchronizePlayback();
     };
   }, [
+    asset,
     dismissFullscreenPlayer,
     hasStartedPlaying,
     router,