From 0566b5ba548196acba7aec86ca2c1c372b3405b6 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Tue, 26 Mar 2024 16:06:13 +0100
Subject: [PATCH] fix: local asset playback

---
 apps/expo/src/app/(tabs)/downloads.tsx        |  5 ++---
 .../src/components/player/ControlsOverlay.tsx | 10 +++++++--
 apps/expo/src/components/player/Header.tsx    | 22 ++++++++++---------
 .../src/components/player/VideoPlayer.tsx     |  9 ++++++--
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/apps/expo/src/app/(tabs)/downloads.tsx b/apps/expo/src/app/(tabs)/downloads.tsx
index b90d34e..6de2ce5 100644
--- a/apps/expo/src/app/(tabs)/downloads.tsx
+++ b/apps/expo/src/app/(tabs)/downloads.tsx
@@ -1,6 +1,5 @@
 import type { Asset } from "expo-media-library";
 import React from "react";
-import { Platform } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import { useRouter } from "expo-router";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
@@ -35,7 +34,7 @@ const DownloadsScreen: React.FC = () => {
         backgroundColor="$sheetItemBackground"
         icon={
           <MaterialCommunityIcons
-            name={Platform.select({ ios: "apple", android: "android" })}
+            name="download"
             size={24}
             color={theme.buttonSecondaryText.val}
           />
@@ -50,7 +49,7 @@ const DownloadsScreen: React.FC = () => {
           }
         }}
       >
-        test local playback (expo-av)
+        test download (mp4)
       </MWButton>
       <ScrollView>
         {downloads.map((item) => (
diff --git a/apps/expo/src/components/player/ControlsOverlay.tsx b/apps/expo/src/components/player/ControlsOverlay.tsx
index 981f47b..f2514c2 100644
--- a/apps/expo/src/components/player/ControlsOverlay.tsx
+++ b/apps/expo/src/components/player/ControlsOverlay.tsx
@@ -4,7 +4,13 @@ import { BottomControls } from "./BottomControls";
 import { Header } from "./Header";
 import { MiddleControls } from "./MiddleControls";
 
-export const ControlsOverlay = ({ isLoading }: { isLoading: boolean }) => {
+export const ControlsOverlay = ({
+  isLoading,
+  isLocalAsset,
+}: {
+  isLoading: boolean;
+  isLocalAsset: boolean;
+}) => {
   return (
     <View
       width="100%"
@@ -14,7 +20,7 @@ export const ControlsOverlay = ({ isLoading }: { isLoading: boolean }) => {
     >
       <Header />
       {!isLoading && <MiddleControls />}
-      <BottomControls />
+      {!isLocalAsset && <BottomControls />}
     </View>
   );
 };
diff --git a/apps/expo/src/components/player/Header.tsx b/apps/expo/src/components/player/Header.tsx
index bcc8746..fd8353b 100644
--- a/apps/expo/src/components/player/Header.tsx
+++ b/apps/expo/src/components/player/Header.tsx
@@ -13,7 +13,7 @@ export const Header = () => {
   const isIdle = usePlayerStore((state) => state.interface.isIdle);
   const meta = usePlayerStore((state) => state.meta);
 
-  if (!isIdle && meta) {
+  if (!isIdle) {
     return (
       <View
         zIndex={50}
@@ -28,15 +28,17 @@ export const Header = () => {
             <BackButton />
           </Controls>
         </View>
-        <Text fontWeight="bold">
-          {meta.title} ({meta.releaseYear}){" "}
-          {meta.season !== undefined && meta.episode !== undefined
-            ? mapSeasonAndEpisodeNumberToText(
-                meta.season.number,
-                meta.episode.number,
-              )
-            : ""}
-        </Text>
+        {meta && (
+          <Text fontWeight="bold">
+            {meta.title} ({meta.releaseYear}){" "}
+            {meta.season !== undefined && meta.episode !== undefined
+              ? mapSeasonAndEpisodeNumberToText(
+                  meta.season.number,
+                  meta.episode.number,
+                )
+              : ""}
+          </Text>
+        )}
         <View
           height="$3.5"
           width="$11"
diff --git a/apps/expo/src/components/player/VideoPlayer.tsx b/apps/expo/src/components/player/VideoPlayer.tsx
index 1b38259..3db8f00 100644
--- a/apps/expo/src/components/player/VideoPlayer.tsx
+++ b/apps/expo/src/components/player/VideoPlayer.tsx
@@ -11,6 +11,7 @@ import Animated, {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ResizeMode, Video } from "expo-av";
 import * as Haptics from "expo-haptics";
+import * as MediaLibrary from "expo-media-library";
 import * as NavigationBar from "expo-navigation-bar";
 import { useRouter } from "expo-router";
 import * as StatusBar from "expo-status-bar";
@@ -142,7 +143,11 @@ export const VideoPlayer = () => {
   useEffect(() => {
     const initializePlayer = async () => {
       if (asset) {
-        setVideoSrc(asset);
+        const assetInfo = await MediaLibrary.getAssetInfoAsync(asset);
+        if (!assetInfo.localUri) return;
+        setVideoSrc({
+          uri: assetInfo.localUri,
+        });
         setIsLoading(false);
         return;
       }
@@ -283,7 +288,7 @@ export const VideoPlayer = () => {
               position="absolute"
             />
           )}
-          <ControlsOverlay isLoading={isLoading} />
+          <ControlsOverlay isLoading={isLoading} isLocalAsset={!!asset} />
         </View>
         {showVolumeOverlay && <GestureOverlay value={volume} type="volume" />}
         {showBrightnessOverlay && (