feat: fetch and store season data

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

@@ -19,6 +19,7 @@ import {
   extractTracksFromHLS,
   findHighestQuality,
 } from "@movie-web/provider-utils";
+import { fetchSeasonDetails } from "@movie-web/tmdb";
 
 import type { ItemData } from "~/components/item/item";
 import type { HeaderData } from "~/components/player/Header";
@@ -78,6 +79,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
   const setIsIdle = usePlayerStore((state) => state.setIsIdle);
   const _setSourceId = usePlayerStore((state) => state.setSourceId);
   const setData = usePlayerStore((state) => state.setData);
+  const setSeasonData = usePlayerStore((state) => state.setSeasonData);
   const presentFullscreenPlayer = usePlayerStore(
     (state) => state.presentFullscreenPlayer,
   );
@@ -165,6 +167,16 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
 
       const { item, stream, media } = data;
 
+      if (media.type === "show") {
+        const seasonData = await fetchSeasonDetails(
+          media.tmdbId,
+          media.season.number,
+        );
+        if (seasonData) {
+          setSeasonData(seasonData);
+        }
+      }
+
       setStream(stream);
 
       setHeaderData({
@@ -219,6 +231,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
     presentFullscreenPlayer,
     router,
     setData,
+    setSeasonData,
     setStream,
   ]);
 

apps/expo/src/components/player/SeasonEpisodeSelector.tsx

@@ -12,10 +12,11 @@ import { Text } from "../ui/Text";
 
 export const SeasonEpisodeSelector = () => {
   const data = usePlayerStore((state) => state.interface.data);
+  const seasonData = usePlayerStore((state) => state.interface.seasonData);
   const { isTrue, on, off } = useBoolean();
   const _router = useRouter();
 
-  return data?.type === "movie" ? null : (
+  return data?.type === "movie" || !seasonData ? null : (
     <View className="max-w-36 flex-1">
       <Button
         title="Episode"
@@ -36,21 +37,21 @@ export const SeasonEpisodeSelector = () => {
         supportedOrientations={["portrait", "landscape"]}
       >
         <ScrollView className="flex-1 bg-gray-900">
-          <Text className="text-center font-bold">Select source</Text>
-          {/* {getBuiltinSources().map((source) => (
+          <Text className="text-center font-bold">Select episode</Text>
+          {seasonData.episodes.map((episode) => (
             <Button
-              key={source.id}
-              title={source.name}
+              key={episode.id}
+              title={episode.name}
               onPress={() => {
                 off();
-                router.push({
-                  pathname: "/videoPlayer/loading",
-                  params: { sourceID: source.id, data: JSON.stringify(data) },
-                });
+                // router.push({
+                //   pathname: "/videoPlayer/loading",
+                //   params: { sourceID: source.id, data: JSON.stringify(data) },
+                // });
               }}
               className="max-w-16"
             />
-          ))} */}
+          ))}
         </ScrollView>
       </Modal>
     </View>

apps/expo/src/stores/player/slices/interface.ts

@@ -1,6 +1,7 @@
 import * as ScreenOrientation from "expo-screen-orientation";
 
 import type { Stream } from "@movie-web/provider-utils";
+import type { SeasonDetails } from "@movie-web/tmdb";
 
 import type { MakeSlice } from "./types";
 import type { ItemData } from "~/components/item/item";
@@ -12,12 +13,14 @@ export interface InterfaceSlice {
     stream: Stream | null;
     sourceId: string | null;
     data: ItemData | null;
+    seasonData: SeasonDetails | null;
     selectedCaption: Stream["captions"][0] | null;
   };
   setIsIdle(state: boolean): void;
   setStream(stream: Stream): void;
   setSourceId(sourceId: string): void;
   setData(data: ItemData): void;
+  setSeasonData(data: SeasonDetails): void;
   lockOrientation: () => Promise<void>;
   unlockOrientation: () => Promise<void>;
   presentFullscreenPlayer: () => Promise<void>;
@@ -31,6 +34,7 @@ export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
     stream: null,
     sourceId: null,
     data: null,
+    seasonData: null,
     selectedCaption: null,
   },
   setIsIdle: (state) => {
@@ -63,6 +67,11 @@ export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
       s.interface.data = data;
     });
   },
+  setSeasonData: (data: SeasonDetails) => {
+    set((s) => {
+      s.interface.seasonData = data;
+    });
+  },
   lockOrientation: async () => {
     await ScreenOrientation.lockAsync(
       ScreenOrientation.OrientationLock.LANDSCAPE,