fix: change to use new bottom sheet

components/video-player/controls/dropdown/DropdownView.tsx

@@ -1,11 +1,9 @@
-import { Ionicons } from "@expo/vector-icons";
-import { useCallback } from "react";
-import { Platform, TouchableOpacity } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import { useLocalSearchParams, useRouter } from "expo-router";
+import { useCallback, useMemo } from "react";
 import { BITRATES } from "@/components/BitrateSelector";
+import SelectBottomSheet, {
+  type SelectOptionGroup,
+} from "@/components/common/SelectBottomSheet";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
 
@@ -48,100 +46,74 @@ const DropdownView = () => {
     [item, mediaSource, subtitleIndex, audioIndex, playbackPosition],
   );
 
+  const optionGroups = useMemo((): SelectOptionGroup[] => {
+    const groups: SelectOptionGroup[] = [];
+
+    // Quality group (only if not offline)
+    if (!isOffline && BITRATES) {
+      groups.push({
+        id: "quality",
+        title: "Quality",
+        options: BITRATES.map((bitrate) => ({
+          id: `quality-${bitrate.value}`,
+          label: bitrate.key,
+          value: bitrate.value,
+          selected: bitrateValue === (bitrate.value?.toString() ?? ""),
+          onSelect: () => changeBitrate(bitrate.value?.toString() ?? ""),
+        })),
+      });
+    }
+
+    // Subtitle group
+    if (subtitleTracks && subtitleTracks.length > 0) {
+      groups.push({
+        id: "subtitle",
+        title: "Subtitle",
+        options: subtitleTracks.map((sub) => ({
+          id: `subtitle-${sub.index}`,
+          label: sub.name,
+          value: sub.index,
+          selected: subtitleIndex === sub.index.toString(),
+          onSelect: () => sub.setTrack(),
+        })),
+      });
+    }
+
+    // Audio group
+    if (audioTracks && audioTracks.length > 0) {
+      groups.push({
+        id: "audio",
+        title: "Audio",
+        options: audioTracks.map((track) => ({
+          id: `audio-${track.index}`,
+          label: track.name,
+          value: track.index,
+          selected: audioIndex === track.index.toString(),
+          onSelect: () => track.setTrack(),
+        })),
+      });
+    }
+
+    return groups;
+  }, [
+    isOffline,
+    bitrateValue,
+    subtitleTracks,
+    subtitleIndex,
+    audioTracks,
+    audioIndex,
+    changeBitrate,
+  ]);
+
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <TouchableOpacity className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'>
-          <Ionicons name='ellipsis-horizontal' size={24} color={"white"} />
-        </TouchableOpacity>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content
-        loop={true}
-        side='bottom'
-        align='start'
-        alignOffset={0}
-        avoidCollisions={true}
-        collisionPadding={8}
-        sideOffset={8}
-      >
-        {!isOffline && (
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger key='qualitytrigger'>
-              Quality
-            </DropdownMenu.SubTrigger>
-            <DropdownMenu.SubContent
-              alignOffset={-10}
-              avoidCollisions={true}
-              collisionPadding={0}
-              loop={true}
-              sideOffset={10}
-            >
-              {BITRATES?.map((bitrate, idx: number) => (
-                <DropdownMenu.CheckboxItem
-                  key={`quality-item-${idx}`}
-                  value={bitrateValue === (bitrate.value?.toString() ?? "")}
-                  onValueChange={() =>
-                    changeBitrate(bitrate.value?.toString() ?? "")
-                  }
-                >
-                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
-                    {bitrate.key}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.CheckboxItem>
-              ))}
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
-        )}
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger key='subtitle-trigger'>
-            Subtitle
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent
-            alignOffset={-10}
-            avoidCollisions={true}
-            collisionPadding={0}
-            loop={true}
-            sideOffset={10}
-          >
-            {subtitleTracks?.map((sub, idx: number) => (
-              <DropdownMenu.CheckboxItem
-                key={`subtitle-item-${idx}`}
-                value={subtitleIndex === sub.index.toString()}
-                onValueChange={() => sub.setTrack()}
-              >
-                <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
-                  {sub.name}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.CheckboxItem>
-            ))}
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger key='audio-trigger'>
-            Audio
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent
-            alignOffset={-10}
-            avoidCollisions={true}
-            collisionPadding={0}
-            loop={true}
-            sideOffset={10}
-          >
-            {audioTracks?.map((track, idx: number) => (
-              <DropdownMenu.CheckboxItem
-                key={`audio-item-${idx}`}
-                value={audioIndex === track.index.toString()}
-                onValueChange={() => track.setTrack()}
-              >
-                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
-                  {track.name}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.CheckboxItem>
-            ))}
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+    <SelectBottomSheet
+      title='Player Options'
+      subtitle='Select quality, audio, and subtitle options'
+      groups={optionGroups}
+      triggerIcon='ellipsis-horizontal'
+      triggerSize={24}
+      triggerColor='white'
+    />
   );
 };