feat: load video from providers

apps/expo/src/app/components/item/item.tsx

@@ -1,5 +1,12 @@
+import { Image, TouchableOpacity, View } from "react-native";
 import { useRouter } from "expo-router";
-import { Image, View, TouchableOpacity } from "react-native";
+import * as ScreenOrientation from "expo-screen-orientation";
+
+import {
+  getVideoUrl,
+  transformSearchResultToScrapeMedia,
+} from "@movie-web/provider-utils";
+import { fetchMediaDetails } from "@movie-web/tmdb";
 
 import { Text } from "~/components/ui/Text";
 
@@ -13,38 +20,67 @@ export interface ItemData {
 
 export default function Item({ data }: { data: ItemData }) {
   const router = useRouter();
-  const { title, type, year, posterUrl } = data;
+  const { id, title, type, year, posterUrl } = data;
 
-  const handlePress = () => {
-	router.push('/video-player');
-	// router.push({
-	// 	pathname: '/video-player',
-	// 	params: { videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4' }
-	//   });
+  const handlePress = async () => {
+    router.push("/video-player");
+
+    const media = await fetchMediaDetails(id, type);
+    if (!media) return;
+
+    const { result } = media;
+    let season: number | undefined;
+    let episode: number | undefined;
+
+    if (type === "tv") {
+      // season = <chosen by user> ?? undefined;
+      // episode = <chosen by user> ?? undefined;
+    }
+
+    const scrapeMedia = transformSearchResultToScrapeMedia(
+      type,
+      result,
+      season,
+      episode,
+    );
+
+    const videoUrl = await getVideoUrl(scrapeMedia);
+    if (!videoUrl) {
+      await ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.PORTRAIT_UP,
+      );
+      return router.push("/(tabs)");
+    }
+    console.log(videoUrl);
+
+    router.push({
+      pathname: "/video-player",
+      params: { videoUrl },
+    });
   };
 
   return (
-    <TouchableOpacity onPress={handlePress} style={{ width: '100%' }}>
+    <TouchableOpacity onPress={handlePress} style={{ width: "100%" }}>
       {
-	<View className="w-full">
-      <View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
-        <Image
-          source={{
-            uri: posterUrl,
-          }}
-          className="h-full w-full"
-        />
-      </View>
-      <Text className="font-bold">{title}</Text>
-      <View className="flex-row items-center gap-3">
-        <Text className="text-xs text-gray-600">
-          {type === "tv" ? "Show" : "Movie"}
-        </Text>
-        <View className="h-1 w-1 rounded-3xl bg-gray-600" />
-        <Text className="text-sm text-gray-600">{year}</Text>
-      </View>
-    </View>
-	}
+        <View className="w-full">
+          <View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
+            <Image
+              source={{
+                uri: posterUrl,
+              }}
+              className="h-full w-full"
+            />
+          </View>
+          <Text className="font-bold">{title}</Text>
+          <View className="flex-row items-center gap-3">
+            <Text className="text-xs text-gray-600">
+              {type === "tv" ? "Show" : "Movie"}
+            </Text>
+            <View className="h-1 w-1 rounded-3xl bg-gray-600" />
+            <Text className="text-sm text-gray-600">{year}</Text>
+          </View>
+        </View>
+      }
     </TouchableOpacity>
   );
 }

apps/expo/src/app/video-player.tsx

@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
-import { StyleSheet, ActivityIndicator } from 'react-native';
-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 type { VideoRef } from "react-native-video";
+import React, { Component } from "react";
+import { ActivityIndicator, StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import Video from "react-native-video";
 import { useLocalSearchParams } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
 
 interface VideoPlayerState {
   videoUrl: string;
@@ -14,53 +14,57 @@ interface VideoPlayerState {
 }
 
 interface VideoPlayerProps {
-	videoUrl: string;
+  videoUrl: string;
 }
 
 export default function VideoPlayerWrapper() {
-	const params = useLocalSearchParams();
-	const videoUrl = typeof params.videoUrl === 'string' ? params.videoUrl : '';
-	return <VideoPlayer videoUrl={videoUrl} />;
-  }
+  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>;
+class VideoPlayer extends Component<VideoPlayerProps, VideoPlayerState> {
+  private videoPlayer: React.RefObject<VideoRef>;
 
-   constructor(props: VideoPlayerProps) {
+  constructor(props: VideoPlayerProps) {
     super(props);
     this.state = {
-      videoUrl: props.videoUrl || '',
+      videoUrl: props.videoUrl || "",
       fullscreen: true,
       isLoading: true,
-      paused: false
+      paused: false,
     };
     this.videoPlayer = React.createRef();
   }
 
   componentDidMount() {
-	const lockOrientation = async () => {
-	  await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
-	};
-  
-	const { videoUrl } = this.props;
-	
-	this.setState({ videoUrl }, () => {
-	  if (this.videoPlayer.current) {
-		this.videoPlayer.current.presentFullscreenPlayer();
-		void lockOrientation();
-	  }
-	});
+    const lockOrientation = async () => {
+      await ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.LANDSCAPE,
+      );
+    };
+
+    const { videoUrl } = this.props;
+
+    this.setState({ videoUrl }, () => {
+      if (this.videoPlayer.current) {
+        this.videoPlayer.current.presentFullscreenPlayer();
+        void lockOrientation();
+      }
+    });
   }
 
   componentWillUnmount() {
-	const unlockOrientation = async () => {
-	  await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
-	}
+    const unlockOrientation = async () => {
+      await ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.PORTRAIT_UP,
+      );
+    };
 
-	if (this.videoPlayer.current) {
-	  this.videoPlayer.current.dismissFullscreenPlayer();
-	}
-	void unlockOrientation();
+    if (this.videoPlayer.current) {
+      this.videoPlayer.current.dismissFullscreenPlayer();
+    }
+    void unlockOrientation();
   }
 
   onVideoLoadStart = () => {
@@ -71,9 +75,9 @@ export default function VideoPlayerWrapper() {
     this.setState({ isLoading: false });
   };
 
-//   onVideoError = () => {  // probably useful later
-//     console.log("Video playback error");
-//   };
+  //   onVideoError = () => {  // probably useful later
+  //     console.log("Video playback error");
+  //   };
 
   render() {
     return (
@@ -84,7 +88,7 @@ export default function VideoPlayerWrapper() {
           style={styles.fullScreen}
           fullscreen={this.state.fullscreen}
           paused={this.state.paused}
-		  controls={true}
+          controls={true}
           onLoadStart={this.onVideoLoadStart}
           onReadyForDisplay={this.onReadyForDisplay}
           // onError={this.onVideoError}
@@ -98,18 +102,18 @@ export default function VideoPlayerWrapper() {
 }
 
 const styles = StyleSheet.create({
+  // taken from example, probably needs to be nativewind stuff instead
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'black',
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "black",
   },
   fullScreen: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     bottom: 0,
     right: 0,
   },
-    
 });