refactor: move video player routes onto their own dir

apps/expo/src/app/videoPlayer/index.tsx

@@ -0,0 +1,182 @@
+import type { AVPlaybackSource } from "expo-av";
+import React, { useEffect, useState } from "react";
+import { ActivityIndicator, Platform, StyleSheet, View } from "react-native";
+import { ResizeMode, Video } from "expo-av";
+import * as NavigationBar from "expo-navigation-bar";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import * as StatusBar from "expo-status-bar";
+
+import type { ScrapeMedia, Stream } from "@movie-web/provider-utils";
+import { findHighestQuality } from "@movie-web/provider-utils";
+
+import type { ItemData } from "~/components/item/item";
+import type { HeaderData } from "~/components/player/Header";
+import { Header } from "~/components/player/Header";
+import { MiddleControls } from "~/components/player/MiddleControls";
+import { usePlayerStore } from "~/stores/player/store";
+
+export default function VideoPlayerWrapper() {
+  const params = useLocalSearchParams();
+  const data = params.data
+    ? (JSON.parse(params.data as string) as VideoPlayerData)
+    : null;
+  return <VideoPlayer data={data} />;
+}
+
+export interface VideoPlayerData {
+  item: ItemData;
+  stream: Stream;
+  media: ScrapeMedia;
+}
+
+interface VideoPlayerProps {
+  data: VideoPlayerData | null;
+}
+
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
+  const [videoSrc, setVideoSrc] = useState<AVPlaybackSource>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [headerData, setHeaderData] = useState<HeaderData>();
+  const router = useRouter();
+  const setVideoRef = usePlayerStore((state) => state.setVideoRef);
+  const setStatus = usePlayerStore((state) => state.setStatus);
+  const setIsIdle = usePlayerStore((state) => state.setIsIdle);
+  const presentFullscreenPlayer = usePlayerStore(
+    (state) => state.presentFullscreenPlayer,
+  );
+  const dismissFullscreenPlayer = usePlayerStore(
+    (state) => state.dismissFullscreenPlayer,
+  );
+
+  useEffect(() => {
+    const initializePlayer = async () => {
+      StatusBar.setStatusBarHidden(true);
+
+      if (Platform.OS === "android") {
+        await NavigationBar.setVisibilityAsync("hidden");
+      }
+      setIsLoading(true);
+
+      if (!data) {
+        await dismissFullscreenPlayer();
+        return router.push("/(tabs)");
+      }
+
+      const { item, stream, media } = data;
+
+      setHeaderData({
+        title: item.title,
+        year: item.year,
+        season: media.type === "show" ? media.season.number : undefined,
+        episode: media.type === "show" ? media.episode.number : undefined,
+      });
+
+      let highestQuality;
+      let url;
+
+      switch (stream.type) {
+        case "file":
+          highestQuality = findHighestQuality(stream);
+          url = highestQuality ? stream.qualities[highestQuality]?.url : null;
+          return url ?? null;
+        case "hls":
+          url = stream.playlist;
+      }
+
+      // setTextTracks(
+      //   stream.captions && stream.captions.length > 0
+      //     ? convertCaptionsToTextTracks(stream.captions)
+      //     : [],
+      // );
+
+      setVideoSrc({
+        uri: url,
+        headers: {
+          ...stream.preferredHeaders,
+          ...stream.headers,
+        },
+      });
+
+      setIsLoading(false);
+    };
+
+    setIsLoading(true);
+    void presentFullscreenPlayer();
+    void initializePlayer();
+
+    return () => {
+      void dismissFullscreenPlayer();
+      StatusBar.setStatusBarHidden(false);
+      if (Platform.OS === "android") {
+        void NavigationBar.setVisibilityAsync("visible");
+      }
+    };
+  }, [data, dismissFullscreenPlayer, presentFullscreenPlayer, router]);
+
+  const onVideoLoadStart = () => {
+    setIsLoading(true);
+  };
+
+  const onReadyForDisplay = () => {
+    setIsLoading(false);
+  };
+
+  return (
+    <View className="flex-1 items-center justify-center bg-black">
+      <Video
+        ref={setVideoRef}
+        source={videoSrc}
+        shouldPlay
+        resizeMode={ResizeMode.CONTAIN}
+        onLoadStart={onVideoLoadStart}
+        onReadyForDisplay={onReadyForDisplay}
+        onPlaybackStatusUpdate={setStatus}
+        style={styles.video}
+        onTouchStart={() => setIsIdle(false)}
+      />
+      {isLoading && <ActivityIndicator size="large" color="#0000ff" />}
+      {!isLoading && data && <Header data={headerData!} />}
+      {!isLoading && <MiddleControls />}
+    </View>
+  );
+};
+
+// interface Caption {
+//   type: "srt" | "vtt";
+//   id: string;
+//   url: string;
+//   hasCorsRestrictions: boolean;
+//   language: string;
+// }
+
+// const captionTypeToTextTracksType = {
+//   srt: TextTracksType.SUBRIP,
+//   vtt: TextTracksType.VTT,
+// };
+
+// function convertCaptionsToTextTracks(captions: Caption[]): TextTracks {
+//   return captions
+//     .map((caption) => {
+//       if (Platform.OS === "ios" && caption.type !== "vtt") {
+//         return null;
+//       }
+
+//       return {
+//         title: caption.language,
+//         language: caption.language as ISO639_1,
+//         type: captionTypeToTextTracksType[caption.type],
+//         uri: caption.url,
+//       };
+//     })
+//     .filter(Boolean) as TextTracks;
+// }
+
+const styles = StyleSheet.create({
+  video: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});

apps/expo/src/app/videoPlayer/loading.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react";
+import { Text } from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
+
+import {
+  getVideoStream,
+  transformSearchResultToScrapeMedia,
+} from "@movie-web/provider-utils";
+import { fetchMediaDetails } from "@movie-web/tmdb";
+
+import type { VideoPlayerData } from ".";
+import type { ItemData } from "~/components/item/item";
+import ScreenLayout from "~/components/layout/ScreenLayout";
+
+export default function LoadingScreenWrapper() {
+  const params = useLocalSearchParams();
+  const data = params.data
+    ? (JSON.parse(params.data as string) as ItemData)
+    : null;
+  return <LoadingScreen data={data} />;
+}
+
+function LoadingScreen({ data }: { data: ItemData | null }) {
+  const router = useRouter();
+  const [eventLog, setEventLog] = useState<string[]>([]);
+
+  const handleEvent = (event: unknown) => {
+    const formattedEvent = formatEvent(event);
+    setEventLog((prevLog) => [...prevLog, formattedEvent]);
+  };
+
+  useEffect(() => {
+    const fetchVideo = async () => {
+      if (!data) return null;
+      const { id, type } = data;
+      const media = await fetchMediaDetails(id, type).catch(() => null);
+      if (!media) return null;
+
+      const { result } = media;
+      let season: number | undefined; // defaults to 1 when undefined
+      let episode: number | undefined;
+
+      if (type === "tv") {
+        // season = <chosen by user / continue watching> ?? undefined;
+        // episode = <chosen by user / continue watching> ?? undefined;
+      }
+
+      const scrapeMedia = transformSearchResultToScrapeMedia(
+        type,
+        result,
+        season,
+        episode,
+      );
+
+      const stream = await getVideoStream({
+        media: scrapeMedia,
+        onEvent: handleEvent,
+      }).catch(() => null);
+      if (!stream) return null;
+
+      return { stream, scrapeMedia };
+    };
+
+    const initialize = async () => {
+      const video = await fetchVideo();
+      if (!video || !data) {
+        return router.push({ pathname: "/(tabs)" });
+      }
+
+      const videoPlayerData: VideoPlayerData = {
+        item: data,
+        stream: video.stream,
+        media: video.scrapeMedia,
+      };
+
+      router.replace({
+        pathname: "/videoPlayer",
+        params: { data: JSON.stringify(videoPlayerData) },
+      });
+    };
+
+    void initialize();
+  }, [data, router]);
+
+  return (
+    <ScreenLayout
+      title="Checking sources"
+      subtitle="Fetching sources for the requested content."
+    >
+      {eventLog.map((event, index) => (
+        <Text key={index} style={{ color: "white", marginVertical: 5 }}>
+          {event}
+        </Text>
+      ))}
+    </ScreenLayout>
+  );
+}
+
+function formatEvent(event: unknown): string {
+  if (typeof event === "string") {
+    return `Start: ID - ${event}`;
+  } else if (typeof event === "object" && event !== null) {
+    const evt = event as Record<string, unknown>;
+    if ("percentage" in evt) {
+      return `Update: ${String(evt.percentage)}% - Status: ${String(evt.status)}`;
+    } else if ("sourceIds" in evt) {
+      return `Initialization: Source IDs - ${String(evt.sourceIds)}`;
+    } else if ("sourceId" in evt) {
+      return `Discovered Embeds: Source ID - ${String(evt.sourceId)}`;
+    }
+  }
+  return JSON.stringify(event);
+}