diff --git a/apps/expo/src/app/components/item/item.tsx b/apps/expo/src/app/components/item/item.tsx index 37cbd16..9529601 100644 --- a/apps/expo/src/app/components/item/item.tsx +++ b/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 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 = ?? undefined; - // episode = ?? 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 { title, type, year, posterUrl } = data; + const handlePress = () => { router.push({ pathname: "/video-player", - params: { videoUrl }, + params: { data: JSON.stringify(data) }, }); }; diff --git a/apps/expo/src/app/video-player.tsx b/apps/expo/src/app/video-player.tsx index 32fc2d7..3a9bf9f 100644 --- a/apps/expo/src/app/video-player.tsx +++ b/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 ; -} -interface VideoPlayerProps { - videoUrl: string; + const data = params.data + ? (JSON.parse(params.data as string) as ItemData) + : null; + return ; } -const VideoPlayer: React.FC = ({ videoUrl }) => { +interface VideoPlayerProps { + data: ItemData | null; +} + +const VideoPlayer: React.FC = ({ data }) => { + const [videoUrl, setVideoUrl] = useState(""); const [isLoading, setIsLoading] = useState(true); const videoPlayer = useRef(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 = ?? undefined; + // episode = ?? 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 = ({ 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 = ({ videoUrl }) => { }; return ( - + ); }; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "black", + }, + fullScreen: { + position: "absolute", + top: 0, + left: 0, + bottom: 0, + right: 0, + }, +});