chore: use camelcase

apps/expo/src/app/videoPlayer.tsx

@@ -0,0 +1,181 @@
+import type {
+  ISO639_1,
+  ReactVideoSource,
+  TextTracks,
+} from "react-native-video";
+import React, { useEffect, useState } from "react";
+import { ActivityIndicator, View } from "react-native";
+import Video, { TextTracksType } from "react-native-video";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
+
+import {
+  findHighestQuality,
+  getVideoUrl,
+  transformSearchResultToScrapeMedia,
+} from "@movie-web/provider-utils";
+import { fetchMediaDetails } from "@movie-web/tmdb";
+
+import type { ItemData } from "~/components/item/item";
+import { usePlayer } from "../hooks/usePlayer";
+
+export default function VideoPlayerWrapper() {
+  const params = useLocalSearchParams();
+  const data = params.data
+    ? (JSON.parse(params.data as string) as ItemData)
+    : null;
+  return <VideoPlayer data={data} />;
+}
+
+interface VideoPlayerProps {
+  data: ItemData | null;
+}
+
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
+  const [videoSrc, setVideoSrc] = useState<ReactVideoSource>();
+  const [_textTracks, setTextTracks] = useState<TextTracks>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const router = useRouter();
+  const {
+    videoRef,
+    unlockOrientation,
+    presentFullscreenPlayer,
+    dismissFullscreenPlayer,
+  } = usePlayer();
+
+  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; // 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 getVideoUrl(scrapeMedia);
+        if (!stream) {
+          await ScreenOrientation.lockAsync(
+            ScreenOrientation.OrientationLock.PORTRAIT_UP,
+          );
+          return router.push("/(tabs)");
+        }
+        return stream;
+      };
+
+      setIsLoading(true);
+      const stream = await fetchVideo();
+
+      if (stream) {
+        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);
+      } else {
+        await ScreenOrientation.lockAsync(
+          ScreenOrientation.OrientationLock.PORTRAIT_UP,
+        );
+        return router.push("/(tabs)");
+      }
+    };
+
+    setIsLoading(true);
+    void presentFullscreenPlayer();
+    void initializePlayer();
+
+    return () => {
+      void dismissFullscreenPlayer();
+      void unlockOrientation();
+    };
+  }, [
+    data,
+    dismissFullscreenPlayer,
+    presentFullscreenPlayer,
+    router,
+    unlockOrientation,
+  ]);
+
+  const onVideoLoadStart = () => {
+    setIsLoading(true);
+  };
+
+  const onReadyForDisplay = () => {
+    setIsLoading(false);
+  };
+
+  return (
+    <View className="flex-1 items-center justify-center bg-black">
+      <Video
+        ref={videoRef}
+        source={videoSrc}
+        // textTracks={textTracks} // breaks playback
+        className="absolute inset-0"
+        fullscreen={true}
+        paused={false}
+        controls={true}
+        onLoadStart={onVideoLoadStart}
+        onReadyForDisplay={onReadyForDisplay}
+      />
+      {isLoading && <ActivityIndicator size="large" color="#0000ff" />}
+    </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) => ({
+    title: caption.language,
+    language: caption.language as ISO639_1,
+    type: captionTypeToTextTracksType[caption.type] || TextTracksType.VTT,
+    uri: caption.url,
+  }));
+}