From 667bf4ab13e1d714404b8ced995bae9ea00349fc Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Mon, 5 Feb 2024 10:33:44 +0100
Subject: [PATCH] feat: pass video url to player

---
 apps/expo/src/app/components/item/item.tsx |  5 +++-
 apps/expo/src/app/video-player.tsx         | 33 +++++++++++++++-------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/apps/expo/src/app/components/item/item.tsx b/apps/expo/src/app/components/item/item.tsx
index e7125a3..a13ea8f 100644
--- a/apps/expo/src/app/components/item/item.tsx
+++ b/apps/expo/src/app/components/item/item.tsx
@@ -16,8 +16,11 @@ export default function Item({ data }: { data: ItemData }) {
   const { title, type, year, posterUrl } = data;
 
   const handlePress = () => {
-    console.log('Item pressed. Opening VideoPlayer...');
 	router.push('/video-player');
+	// router.push({
+	// 	pathname: '/video-player',
+	// 	params: { videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4' }
+	//   });
   };
 
   return (
diff --git a/apps/expo/src/app/video-player.tsx b/apps/expo/src/app/video-player.tsx
index d6343d6..afca0a4 100644
--- a/apps/expo/src/app/video-player.tsx
+++ b/apps/expo/src/app/video-player.tsx
@@ -4,6 +4,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import type { VideoRef } from 'react-native-video';
 import Video from 'react-native-video';
 import * as ScreenOrientation from 'expo-screen-orientation';
+import { useLocalSearchParams } from "expo-router";
 
 interface VideoPlayerState {
   videoUrl: string;
@@ -12,13 +13,23 @@ interface VideoPlayerState {
   paused: boolean;
 }
 
-class VideoPlayer extends Component<object, VideoPlayerState> {
-  private videoPlayer: React.RefObject<VideoRef>;
+interface VideoPlayerProps {
+	videoUrl: string;
+}
 
-  constructor(props: object) {
+export default function VideoPlayerWrapper() {
+	const params = useLocalSearchParams();
+	const videoUrl = typeof params.videoUrl === 'string' ? params.videoUrl : '';
+	return <VideoPlayer videoUrl={videoUrl} />;
+  }
+
+  class VideoPlayer extends Component<VideoPlayerProps, VideoPlayerState> {
+	private videoPlayer: React.RefObject<VideoRef>;
+
+   constructor(props: VideoPlayerProps) {
     super(props);
     this.state = {
-      videoUrl: '',
+      videoUrl: props.videoUrl || '',
       fullscreen: true,
       isLoading: true,
       paused: false
@@ -31,10 +42,14 @@ class VideoPlayer extends Component<object, VideoPlayerState> {
 	  await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
 	};
   
-	if (this.videoPlayer.current) {
-	  this.videoPlayer.current.presentFullscreenPlayer();
-	  void lockOrientation();
-	}
+	const { videoUrl } = this.props;
+	
+	this.setState({ videoUrl }, () => {
+	  if (this.videoPlayer.current) {
+		this.videoPlayer.current.presentFullscreenPlayer();
+		void lockOrientation();
+	  }
+	});
   }
 
   componentWillUnmount() {
@@ -98,5 +113,3 @@ const styles = StyleSheet.create({
   },
     
 });
-
-export default VideoPlayer;
\ No newline at end of file