fix: change to use new bottom sheet

components/BitrateSelector.tsx

@@ -1,9 +1,9 @@
-import { Platform, TouchableOpacity, View } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, View } from "react-native";
+import SelectBottomSheet, {
+  type SelectOptionGroup,
+} from "./common/SelectBottomSheet";
 import { Text } from "./common/Text";
 
 export type Bitrate = {
@@ -61,6 +61,7 @@ export const BitrateSelector: React.FC<Props> = ({
   ...props
 }) => {
   const isTv = Platform.isTV;
+  const { t } = useTranslation();
 
   const sorted = useMemo(() => {
     if (inverted)
@@ -76,7 +77,32 @@ export const BitrateSelector: React.FC<Props> = ({
     );
   }, [inverted]);
 
-  const { t } = useTranslation();
+  const optionGroups = useMemo((): SelectOptionGroup[] => {
+    return [
+      {
+        id: "bitrates",
+        title: "Quality",
+        options: sorted.map((bitrate) => ({
+          id: bitrate.key,
+          label: bitrate.key,
+          value: bitrate.value,
+          selected: selected?.value === bitrate.value,
+          onSelect: () => onChange(bitrate),
+        })),
+      },
+    ];
+  }, [sorted, selected, onChange]);
+
+  const customTrigger = (
+    <View className='flex flex-col' {...props}>
+      <Text className='opacity-50 mb-1 text-xs'>{t("item_card.quality")}</Text>
+      <View className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+        <Text style={{}} className='' numberOfLines={1}>
+          {BITRATES.find((b) => b.value === selected?.value)?.key}
+        </Text>
+      </View>
+    </View>
+  );
 
   if (isTv) return null;
 
@@ -88,41 +114,12 @@ export const BitrateSelector: React.FC<Props> = ({
         maxWidth: 200,
       }}
     >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <View className='flex flex-col' {...props}>
-            <Text className='opacity-50 mb-1 text-xs'>
-              {t("item_card.quality")}
-            </Text>
-            <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-              <Text style={{}} className='' numberOfLines={1}>
-                {BITRATES.find((b) => b.value === selected?.value)?.key}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={false}
-          side='bottom'
-          align='center'
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={0}
-          sideOffset={0}
-        >
-          <DropdownMenu.Label>Bitrates</DropdownMenu.Label>
-          {sorted.map((b) => (
-            <DropdownMenu.Item
-              key={b.key}
-              onSelect={() => {
-                onChange(b);
-              }}
-            >
-              <DropdownMenu.ItemTitle>{b.key}</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+      <SelectBottomSheet
+        title='Quality'
+        subtitle='Select video quality'
+        groups={optionGroups}
+        customTrigger={customTrigger}
+      />
     </View>
   );
 };

components/common/SelectBottomSheet.tsx

@@ -0,0 +1,190 @@
+import { Ionicons } from "@expo/vector-icons";
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetScrollView,
+} from "@gorhom/bottom-sheet";
+import React, { useCallback, useImperativeHandle, useRef } from "react";
+import { Platform, TouchableOpacity, View } from "react-native";
+import { Text } from "./Text";
+
+export interface SelectOption {
+  id: string;
+  label: string;
+  value?: string | number;
+  selected?: boolean;
+  onSelect?: () => void;
+}
+
+export interface SelectOptionGroup {
+  id: string;
+  title: string;
+  options: SelectOption[];
+}
+
+export interface SelectBottomSheetRef {
+  present: () => void;
+  dismiss: () => void;
+}
+
+interface SelectBottomSheetProps {
+  title?: string;
+  subtitle?: string;
+  groups: SelectOptionGroup[];
+  triggerIcon?: keyof typeof Ionicons.glyphMap;
+  triggerSize?: number;
+  triggerColor?: string;
+  customTrigger?: React.ReactNode;
+}
+
+const SelectBottomSheet = React.forwardRef<
+  SelectBottomSheetRef,
+  SelectBottomSheetProps
+>(
+  (
+    {
+      title,
+      subtitle,
+      groups,
+      triggerIcon = "ellipsis-horizontal",
+      triggerSize = 24,
+      triggerColor = "white",
+      customTrigger,
+    },
+    ref,
+  ) => {
+    const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+
+    const present = useCallback(() => {
+      bottomSheetModalRef.current?.present();
+    }, []);
+
+    const dismiss = useCallback(() => {
+      bottomSheetModalRef.current?.dismiss();
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        present,
+        dismiss,
+      }),
+      [present, dismiss],
+    );
+
+    const renderBackdrop = useCallback(
+      (props: BottomSheetBackdropProps) => (
+        <BottomSheetBackdrop
+          {...props}
+          disappearsOnIndex={-1}
+          appearsOnIndex={0}
+        />
+      ),
+      [],
+    );
+
+    const handleOptionSelect = useCallback(
+      (option: SelectOption) => {
+        option.onSelect?.();
+        dismiss();
+      },
+      [dismiss],
+    );
+
+    if (Platform.isTV) {
+      // On TV, fall back to a different UI pattern or return null
+      return null;
+    }
+
+    return (
+      <>
+        {customTrigger ? (
+          <TouchableOpacity onPress={present}>{customTrigger}</TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+            onPress={present}
+          >
+            <Ionicons
+              name={triggerIcon}
+              size={triggerSize}
+              color={triggerColor}
+            />
+          </TouchableOpacity>
+        )}
+
+        <BottomSheetModal
+          ref={bottomSheetModalRef}
+          enableDynamicSizing
+          handleIndicatorStyle={{
+            backgroundColor: "white",
+          }}
+          backgroundStyle={{
+            backgroundColor: "#171717",
+          }}
+          backdropComponent={renderBackdrop}
+        >
+          <BottomSheetScrollView>
+            <View className='px-4 pt-2 pb-8'>
+              {title && (
+                <View className='mb-6'>
+                  <Text className='font-bold text-2xl text-neutral-100'>
+                    {title}
+                  </Text>
+                  {subtitle && (
+                    <Text className='text-neutral-400 mt-1'>{subtitle}</Text>
+                  )}
+                </View>
+              )}
+
+              <View className='space-y-6'>
+                {groups.map((group) => (
+                  <View key={group.id} className='space-y-3'>
+                    <Text className='font-semibold text-lg text-neutral-200'>
+                      {group.title}
+                    </Text>
+                    <View className='space-y-2'>
+                      {group.options.map((option) => (
+                        <TouchableOpacity
+                          key={option.id}
+                          className={`flex flex-row items-center justify-between p-3 rounded-lg border ${
+                            option.selected
+                              ? "border-purple-500 bg-purple-500/10"
+                              : "border-neutral-700 bg-neutral-800/50"
+                          }`}
+                          onPress={() => handleOptionSelect(option)}
+                        >
+                          <Text
+                            className={`font-medium ${
+                              option.selected
+                                ? "text-purple-400"
+                                : "text-neutral-100"
+                            }`}
+                          >
+                            {option.label}
+                          </Text>
+                          {option.selected && (
+                            <Ionicons
+                              name='checkmark'
+                              size={20}
+                              color='#a855f7'
+                            />
+                          )}
+                        </TouchableOpacity>
+                      ))}
+                    </View>
+                  </View>
+                ))}
+              </View>
+            </View>
+          </BottomSheetScrollView>
+        </BottomSheetModal>
+      </>
+    );
+  },
+);
+
+SelectBottomSheet.displayName = "SelectBottomSheet";
+
+export default SelectBottomSheet;

components/video-player/controls/ScaleFactorSelector.tsx

@@ -1,10 +1,11 @@
 import { Ionicons } from "@expo/vector-icons";
-import React from "react";
-import { Platform, TouchableOpacity } from "react-native";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import SelectBottomSheet, {
+  type SelectOptionGroup,
+} from "@/components/common/SelectBottomSheet";
 import { useHaptic } from "@/hooks/useHaptic";
 
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 export type ScaleFactor =
   | 1.0
   | 1.1
@@ -95,41 +96,43 @@ export const ScaleFactorSelector: React.FC<ScaleFactorSelectorProps> = ({
 }) => {
   const lightHapticFeedback = useHaptic("light");
 
-  // Hide on TV platforms since zeego doesn't support TV
-  if (Platform.isTV || !DropdownMenu) return null;
-
   const handleScaleSelect = (scale: ScaleFactor) => {
     onScaleChange(scale);
     lightHapticFeedback();
   };
 
+  const optionGroups = useMemo((): SelectOptionGroup[] => {
+    return [
+      {
+        id: "scale-factor",
+        title: "Scale Factor",
+        options: SCALE_FACTOR_OPTIONS.map((option) => ({
+          id: option.id.toString(),
+          label: option.label,
+          value: option.id,
+          selected: currentScale === option.id,
+          onSelect: () => handleScaleSelect(option.id),
+        })),
+      },
+    ];
+  }, [currentScale, handleScaleSelect]);
+
+  if (disabled) {
+    return (
+      <View className='aspect-square flex flex-col rounded-xl items-center justify-center p-2 opacity-50'>
+        <Ionicons name='search-outline' size={24} color='white' />
+      </View>
+    );
+  }
+
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <TouchableOpacity
-          disabled={disabled}
-          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-          style={{ opacity: disabled ? 0.5 : 1 }}
-        >
-          <Ionicons name='search-outline' size={24} color='white' />
-        </TouchableOpacity>
-      </DropdownMenu.Trigger>
-
-      <DropdownMenu.Content>
-        <DropdownMenu.Label>Scale Factor</DropdownMenu.Label>
-        <DropdownMenu.Separator />
-
-        {SCALE_FACTOR_OPTIONS.map((option) => (
-          <DropdownMenu.CheckboxItem
-            key={option.id}
-            value={currentScale === option.id ? "on" : "off"}
-            onValueChange={() => handleScaleSelect(option.id)}
-          >
-            <DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
-            <DropdownMenu.ItemIndicator />
-          </DropdownMenu.CheckboxItem>
-        ))}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+    <SelectBottomSheet
+      title='Scale Factor'
+      subtitle='Adjust video zoom level'
+      groups={optionGroups}
+      triggerIcon='search-outline'
+      triggerSize={24}
+      triggerColor='white'
+    />
   );
 };

components/video-player/controls/VideoScalingModeSelector.tsx

@@ -1,10 +1,11 @@
 import { Ionicons } from "@expo/vector-icons";
-import React from "react";
-import { Platform, TouchableOpacity } from "react-native";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import SelectBottomSheet, {
+  type SelectOptionGroup,
+} from "@/components/common/SelectBottomSheet";
 import { useHaptic } from "@/hooks/useHaptic";
 
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 export type AspectRatio = "default" | "16:9" | "4:3" | "1:1" | "21:9";
 
 interface AspectRatioSelectorProps {
@@ -54,44 +55,43 @@ export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
 }) => {
   const lightHapticFeedback = useHaptic("light");
 
-  // Hide on TV platforms since zeego doesn't support TV
-  if (Platform.isTV || !DropdownMenu) return null;
-
   const handleRatioSelect = (ratio: AspectRatio) => {
     onRatioChange(ratio);
     lightHapticFeedback();
   };
 
+  const optionGroups = useMemo((): SelectOptionGroup[] => {
+    return [
+      {
+        id: "aspect-ratio",
+        title: "Aspect Ratio",
+        options: ASPECT_RATIO_OPTIONS.map((option) => ({
+          id: option.id,
+          label: option.label,
+          value: option.id,
+          selected: currentRatio === option.id,
+          onSelect: () => handleRatioSelect(option.id),
+        })),
+      },
+    ];
+  }, [currentRatio, handleRatioSelect]);
+
+  if (disabled) {
+    return (
+      <View className='aspect-square flex flex-col rounded-xl items-center justify-center p-2 opacity-50'>
+        <Ionicons name='crop-outline' size={24} color='white' />
+      </View>
+    );
+  }
+
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <TouchableOpacity
-          disabled={disabled}
-          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-          style={{ opacity: disabled ? 0.5 : 1 }}
-        >
-          <Ionicons name='crop-outline' size={24} color='white' />
-        </TouchableOpacity>
-      </DropdownMenu.Trigger>
-
-      <DropdownMenu.Content>
-        <DropdownMenu.Label>Aspect Ratio</DropdownMenu.Label>
-        <DropdownMenu.Separator />
-
-        {ASPECT_RATIO_OPTIONS.map((option) => (
-          <DropdownMenu.CheckboxItem
-            key={option.id}
-            value={currentRatio === option.id ? "on" : "off"}
-            onValueChange={() => handleRatioSelect(option.id)}
-          >
-            <DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
-            <DropdownMenu.ItemSubtitle>
-              {option.description}
-            </DropdownMenu.ItemSubtitle>
-            <DropdownMenu.ItemIndicator />
-          </DropdownMenu.CheckboxItem>
-        ))}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+    <SelectBottomSheet
+      title='Aspect Ratio'
+      subtitle='Choose video aspect ratio format'
+      groups={optionGroups}
+      triggerIcon='crop-outline'
+      triggerSize={24}
+      triggerColor='white'
+    />
   );
 };

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'
+    />
   );
 };