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

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

@@ -1,12 +1,5 @@
 import { Image, TouchableOpacity, View } from "react-native";
 import { useRouter } from "expo-router";
-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";
 
@@ -20,41 +13,12 @@ export interface ItemData {
 
 export default function Item({ data }: { data: ItemData }) {
   const router = useRouter();
-  const { id, title, type, year, posterUrl } = data;
+  const { title, type, year, posterUrl } = data;
-
-  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)");
-    }
 
+  const handlePress = () => {
     router.push({
       pathname: "/video-player",
-      params: { videoUrl },
+      params: { data: JSON.stringify(data) },
     });
   };
 

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 {
+import {
-  videoUrl: string;
+  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 : "";
+  const data = params.data
-  return <VideoPlayer videoUrl={videoUrl} />;
+    ? (JSON.parse(params.data as string) as ItemData)
-}
+    : null;
-interface VideoPlayerProps {
+  return <VideoPlayer data={data} />;
-  videoUrl: string;
 }
 
-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,
+  },
+});