feat: move source fetching logic into player and remove double player nonsense

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

@@ -1,29 +1,81 @@
 import type { VideoRef } from "react-native-video";
 import React, { useEffect, useRef, useState } from "react";
-import { ActivityIndicator } from "react-native";
+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 { useLocalSearchParams, useRouter } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 
-interface VideoPlayerProps {
-  videoUrl: string;
-}
+import {
+  getVideoUrl,
+  transformSearchResultToScrapeMedia,
+} from "@movie-web/provider-utils";
+import { fetchMediaDetails } from "@movie-web/tmdb";
+
+import type { ItemData } from "./components/item/item";
 
 export default function VideoPlayerWrapper() {
   const params = useLocalSearchParams();
-  const videoUrl = typeof params.videoUrl === "string" ? params.videoUrl : "";
-  return <VideoPlayer videoUrl={videoUrl} />;
-}
-interface VideoPlayerProps {
-  videoUrl: string;
+  const data = params.data
+    ? (JSON.parse(params.data as string) as ItemData)
+    : null;
+  return <VideoPlayer data={data} />;
 }
 
-const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => {
+interface VideoPlayerProps {
+  data: ItemData | null;
+}
+
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
+  const [videoUrl, setVideoUrl] = useState("");
   const [isLoading, setIsLoading] = useState(true);
   const videoPlayer = useRef<VideoRef>(null);
+  const router = useRouter();
 
   useEffect(() => {
+    const initializePlayer = async () => {
+      const fetchVideo = async () => {
+        if (!data) return null;
+        const { id, type } = data;
+        const media = await fetchMediaDetails(id, type);
+        if (!media) return null;
+
+        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)");
+        }
+        return videoUrl;
+      };
+
+      setIsLoading(true);
+      const url = await fetchVideo();
+      if (url) {
+        setVideoUrl(url);
+        setIsLoading(false);
+      } else {
+        router.push("/(tabs)");
+      }
+    };
+
     const lockOrientation = async () => {
       await ScreenOrientation.lockAsync(
         ScreenOrientation.OrientationLock.LANDSCAPE,
@@ -52,11 +104,12 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => {
 
     setIsLoading(true);
     void presentFullscreenPlayer();
+    void initializePlayer();
 
     return () => {
       void dismissFullscreenPlayer();
     };
-  }, [videoUrl]);
+  }, [data, router]);
 
   const onVideoLoadStart = () => {
     setIsLoading(true);
@@ -67,11 +120,11 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => {
   };
 
   return (
-    <SafeAreaView className="flex-1 items-center justify-center bg-black">
+    <SafeAreaView style={styles.container}>
       <Video
         ref={videoPlayer}
         source={{ uri: videoUrl }}
-        className="absolute bottom-0 left-0 right-0 top-0"
+        style={styles.fullScreen}
         fullscreen={true}
         paused={false}
         controls={true}
@@ -82,3 +135,19 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => {
     </SafeAreaView>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "black",
+  },
+  fullScreen: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+  },
+});