feat: source selection & ugly source selector

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

@@ -38,6 +38,7 @@ export default function VideoPlayerWrapper() {
 }
 
 export interface VideoPlayerData {
+  sourceId?: string;
   item: ItemData;
   stream: Stream;
   media: ScrapeMedia;
@@ -75,6 +76,8 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
   const setVideoRef = usePlayerStore((state) => state.setVideoRef);
   const setStatus = usePlayerStore((state) => state.setStatus);
   const setIsIdle = usePlayerStore((state) => state.setIsIdle);
+  const _setSourceId = usePlayerStore((state) => state.setSourceId);
+  const setData = usePlayerStore((state) => state.setData);
   const presentFullscreenPlayer = usePlayerStore(
     (state) => state.presentFullscreenPlayer,
   );
@@ -157,7 +160,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
       if (Platform.OS === "android") {
         await NavigationBar.setVisibilityAsync("hidden");
       }
-
+      setData(data.item);
       setIsLoading(true);
 
       const { item, stream, media } = data;
@@ -215,6 +218,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
     dismissFullscreenPlayer,
     presentFullscreenPlayer,
     router,
+    setData,
     setStream,
   ]);
 

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

@@ -21,13 +21,20 @@ interface Event {
 
 export default function LoadingScreenWrapper() {
   const params = useLocalSearchParams();
+  const sourceId = params.sourceID?.[0];
   const data = params.data
     ? (JSON.parse(params.data as string) as ItemData)
     : null;
-  return <LoadingScreen data={data} />;
+  return <LoadingScreen sourceId={sourceId} data={data} />;
 }
 
-function LoadingScreen({ data }: { data: ItemData | null }) {
+function LoadingScreen({
+  sourceId,
+  data,
+}: {
+  sourceId: string | undefined;
+  data: ItemData | null;
+}) {
   const router = useRouter();
   const [eventLog, setEventLog] = useState<Event[]>([]);
 
@@ -65,6 +72,7 @@ function LoadingScreen({ data }: { data: ItemData | null }) {
       );
 
       const stream = await getVideoStream({
+        sourceId,
         media: scrapeMedia,
         onEvent: handleEvent,
       }).catch(() => null);
@@ -92,7 +100,7 @@ function LoadingScreen({ data }: { data: ItemData | null }) {
     };
 
     void initialize();
-  }, [data, router]);
+  }, [data, router, sourceId]);
 
   return (
     <ScreenLayout

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

@@ -6,6 +6,7 @@ import { Text } from "../ui/Text";
 import { CaptionsSelector } from "./CaptionsSelector";
 import { Controls } from "./Controls";
 import { ProgressBar } from "./ProgressBar";
+import { SourceSelector } from "./SourceSelector";
 import { mapMillisecondsToTime } from "./utils";
 
 export const BottomControls = () => {
@@ -53,6 +54,7 @@ export const BottomControls = () => {
               <ProgressBar />
             </View>
             <View className="flex w-full flex-row items-center justify-between">
+              <SourceSelector />
               <CaptionsSelector />
             </View>
           </View>

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

@@ -0,0 +1,59 @@
+import { ScrollView, View } from "react-native";
+import Modal from "react-native-modal";
+import { useRouter } from "expo-router";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+import { getBuiltinSources } from "@movie-web/provider-utils";
+import colors from "@movie-web/tailwind-config/colors";
+
+import { useBoolean } from "~/hooks/useBoolean";
+import { usePlayerStore } from "~/stores/player/store";
+import { Button } from "../ui/Button";
+import { Text } from "../ui/Text";
+
+export const SourceSelector = () => {
+  const data = usePlayerStore((state) => state.interface.data);
+  const { isTrue, on, off } = useBoolean();
+  const router = useRouter();
+
+  return (
+    <View className="max-w-36 flex-1">
+      <Button
+        title="Source"
+        variant="outline"
+        onPress={on}
+        iconLeft={
+          <MaterialCommunityIcons
+            name="video"
+            size={24}
+            color={colors.primary[300]}
+          />
+        }
+      />
+
+      <Modal
+        isVisible={isTrue}
+        onBackdropPress={off}
+        supportedOrientations={["portrait", "landscape"]}
+      >
+        <ScrollView className="flex-1 bg-gray-900">
+          <Text className="text-center font-bold">Select source</Text>
+          {getBuiltinSources().map((source) => (
+            <Button
+              key={source.id}
+              title={source.name}
+              onPress={() => {
+                off();
+                router.replace({
+                  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

@@ -3,16 +3,21 @@ import * as ScreenOrientation from "expo-screen-orientation";
 import type { Stream } from "@movie-web/provider-utils";
 
 import type { MakeSlice } from "./types";
+import type { ItemData } from "~/components/item/item";
 
 export interface InterfaceSlice {
   interface: {
     isIdle: boolean;
     idleTimeout: NodeJS.Timeout | null;
     stream: Stream | null;
+    sourceId: string | null;
+    data: ItemData | null;
     selectedCaption: Stream["captions"][0] | null;
   };
   setIsIdle(state: boolean): void;
   setStream(stream: Stream): void;
+  setSourceId(sourceId: string): void;
+  setData(data: ItemData): void;
   lockOrientation: () => Promise<void>;
   unlockOrientation: () => Promise<void>;
   presentFullscreenPlayer: () => Promise<void>;
@@ -24,6 +29,8 @@ export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
     isIdle: true,
     idleTimeout: null,
     stream: null,
+    sourceId: null,
+    data: null,
     selectedCaption: null,
   },
   setIsIdle: (state) => {
@@ -46,6 +53,16 @@ export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
       s.interface.stream = stream;
     });
   },
+  setSourceId: (sourceId: string) => {
+    set((s) => {
+      s.interface.sourceId = sourceId;
+    });
+  },
+  setData: (data: ItemData) => {
+    set((s) => {
+      s.interface.data = data;
+    });
+  },
   lockOrientation: async () => {
     await ScreenOrientation.lockAsync(
       ScreenOrientation.OrientationLock.LANDSCAPE,