From 78f1bcbe01486bab95142cc1068f2c315ec4e30f Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Thu, 21 Aug 2025 11:35:14 +0200
Subject: [PATCH] fix: change to use new bottom sheet

---
 components/BitrateSelector.tsx                |  79 ++++----
 .../controls/ScaleFactorSelector.tsx          |  71 ++++----
 .../controls/VideoScalingModeSelector.tsx     |  74 ++++----
 .../controls/dropdown/DropdownView.tsx        | 170 ++++++++----------
 4 files changed, 183 insertions(+), 211 deletions(-)

diff --git a/components/BitrateSelector.tsx b/components/BitrateSelector.tsx
index d52a6bf6..e73722d1 100644
--- a/components/BitrateSelector.tsx
+++ b/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>
   );
 };
diff --git a/components/video-player/controls/ScaleFactorSelector.tsx b/components/video-player/controls/ScaleFactorSelector.tsx
index c251a59a..ff1e35e5 100644
--- a/components/video-player/controls/ScaleFactorSelector.tsx
+++ b/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'
+    />
   );
 };
diff --git a/components/video-player/controls/VideoScalingModeSelector.tsx b/components/video-player/controls/VideoScalingModeSelector.tsx
index 82874abf..e43f880f 100644
--- a/components/video-player/controls/VideoScalingModeSelector.tsx
+++ b/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'
+    />
   );
 };
diff --git a/components/video-player/controls/dropdown/DropdownView.tsx b/components/video-player/controls/dropdown/DropdownView.tsx
index ac7501c7..3c37718f 100644
--- a/components/video-player/controls/dropdown/DropdownView.tsx
+++ b/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'
+    />
   );
 };