feat: non functional episode/season selector

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 { SeasonEpisodeSelector } from "./SeasonEpisodeSelector";
 import { SourceSelector } from "./SourceSelector";
 import { mapMillisecondsToTime } from "./utils";
 
@@ -53,9 +54,10 @@ export const BottomControls = () => {
             <View>
               <ProgressBar />
             </View>
-            <View className="flex w-full flex-row items-center justify-between">
-              <SourceSelector />
+            <View className="flex w-full flex-row items-center justify-start">
+              <SeasonEpisodeSelector />
               <CaptionsSelector />
+              <SourceSelector />
             </View>
           </View>
         </View>

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

@@ -0,0 +1,58 @@
+import { ScrollView, View } from "react-native";
+import Modal from "react-native-modal";
+import { useRouter } from "expo-router";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+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 SeasonEpisodeSelector = () => {
+  const data = usePlayerStore((state) => state.interface.data);
+  const { isTrue, on, off } = useBoolean();
+  const _router = useRouter();
+
+  return data?.type === "movie" ? null : (
+    <View className="max-w-36 flex-1">
+      <Button
+        title="Episode"
+        variant="outline"
+        onPress={on}
+        iconLeft={
+          <MaterialCommunityIcons
+            name="audio-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.push({
+                  pathname: "/videoPlayer/loading",
+                  params: { sourceID: source.id, data: JSON.stringify(data) },
+                });
+              }}
+              className="max-w-16"
+            />
+          ))} */}
+        </ScrollView>
+      </Modal>
+    </View>
+  );
+};