wip: remove zeego + expo ui

components/BitrateSelector.tsx

@@ -1,10 +1,8 @@
-import { Platform, TouchableOpacity, View } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
+import { type OptionGroup, PlatformOptionsMenu } from "./PlatformOptionsMenu";
 
 export type Bitrate = {
   key: string;
@@ -61,6 +59,8 @@ export const BitrateSelector: React.FC<Props> = ({
   ...props
 }) => {
   const isTv = Platform.isTV;
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation();
 
   const sorted = useMemo(() => {
     if (inverted)
@@ -76,7 +76,44 @@ export const BitrateSelector: React.FC<Props> = ({
     );
   }, [inverted]);
 
-  const { t } = useTranslation();
+  const optionGroups: OptionGroup[] = useMemo(
+    () => [
+      {
+        id: "bitrates",
+        title: "Bitrates",
+        options: sorted.map((bitrate) => ({
+          id: bitrate.key,
+          type: "radio" as const,
+          groupId: "bitrates",
+          label: bitrate.key,
+          selected: bitrate.value === selected?.value,
+        })),
+      },
+    ],
+    [sorted, selected],
+  );
+
+  const handleOptionSelect = (optionId: string) => {
+    const selectedBitrate = sorted.find((b) => b.key === optionId);
+    if (selectedBitrate) {
+      onChange(selectedBitrate);
+    }
+    setOpen(false);
+  };
+
+  const 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'
+        onPress={() => setOpen(true)}
+      >
+        <Text numberOfLines={1}>
+          {BITRATES.find((b) => b.value === selected?.value)?.key}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
 
   if (isTv) return null;
 
@@ -88,41 +125,21 @@ 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>
+      <PlatformOptionsMenu
+        groups={optionGroups}
+        trigger={trigger}
+        title={t("item_card.quality")}
+        open={open}
+        onOpenChange={setOpen}
+        onOptionSelect={handleOptionSelect}
+        expoUIConfig={{
+          hostStyle: { flex: 1 },
+        }}
+        bottomSheetConfig={{
+          enableDynamicSizing: true,
+          enablePanDownToClose: true,
+        }}
+      />
     </View>
   );
 };