wip: remove zeego + expo ui

components/series/SeasonDropdown.tsx

@@ -1,11 +1,9 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useMemo } from "react";
-import { Platform, TouchableOpacity, View } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import { t } from "i18next";
+import { useEffect, useMemo, useState } from "react";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "../common/Text";
+import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
 
 type Props = {
   item: BaseItemDto;
@@ -33,6 +31,7 @@ export const SeasonDropdown: React.FC<Props> = ({
   onSelect,
 }) => {
   const isTv = Platform.isTV;
+  const [open, setOpen] = useState(false);
 
   const keys = useMemo<SeasonKeys>(
     () =>
@@ -55,6 +54,43 @@ export const SeasonDropdown: React.FC<Props> = ({
     [state, item, keys],
   );
 
+  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) =>
+    Number(a[keys.index]) - Number(b[keys.index]);
+
+  const optionGroups: OptionGroup[] = useMemo(
+    () => [
+      {
+        id: "seasons",
+        title: t("item_card.seasons"),
+        options:
+          seasons?.sort(sortByIndex).map((season: any) => {
+            const title =
+              season[keys.title] ||
+              season.Name ||
+              `Season ${season.IndexNumber}`;
+            return {
+              id: `${season.Id || season.IndexNumber}`,
+              type: "radio" as const,
+              groupId: "seasons",
+              label: title,
+              selected: Number(season[keys.index]) === Number(seasonIndex),
+            };
+          }) || [],
+      },
+    ],
+    [seasons, keys, seasonIndex],
+  );
+
+  const handleSeasonSelect = (optionId: string) => {
+    const selectedSeason = seasons?.find(
+      (season: any) => `${season.Id || season.IndexNumber}` === optionId,
+    );
+    if (selectedSeason) {
+      onSelect(selectedSeason);
+    }
+    setOpen(false);
+  };
+
   useEffect(() => {
     if (isTv) return;
     if (seasons && seasons.length > 0 && seasonIndex === undefined) {
@@ -96,45 +132,36 @@ export const SeasonDropdown: React.FC<Props> = ({
     keys,
   ]);
 
-  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) =>
-    Number(a[keys.index]) - Number(b[keys.index]);
+  const trigger = (
+    <View className='flex flex-row'>
+      <TouchableOpacity
+        className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'
+        onPress={() => setOpen(true)}
+      >
+        <Text>
+          {t("item_card.season")} {seasonIndex}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
 
   if (isTv) return null;
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <View className='flex flex-row'>
-          <TouchableOpacity className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
-            <Text>
-              {t("item_card.season")} {seasonIndex}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content
-        loop={true}
-        side='bottom'
-        align='start'
-        alignOffset={0}
-        avoidCollisions={true}
-        collisionPadding={8}
-        sideOffset={8}
-      >
-        <DropdownMenu.Label>{t("item_card.seasons")}</DropdownMenu.Label>
-        {seasons?.sort(sortByIndex).map((season: any) => {
-          const title =
-            season[keys.title] || season.Name || `Season ${season.IndexNumber}`;
-          return (
-            <DropdownMenu.Item
-              key={season.Id || season.IndexNumber}
-              onSelect={() => onSelect(season)}
-            >
-              <DropdownMenu.ItemTitle>{title}</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          );
-        })}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+    <PlatformOptionsMenu
+      groups={optionGroups}
+      trigger={trigger}
+      title={t("item_card.seasons")}
+      open={open}
+      onOpenChange={setOpen}
+      onOptionSelect={handleSeasonSelect}
+      expoUIConfig={{
+        hostStyle: { flex: 1 },
+      }}
+      bottomSheetConfig={{
+        enableDynamicSizing: true,
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };