wip: remove zeego + expo ui

components/settings/AppLanguageSelector.tsx

@@ -1,5 +1,4 @@
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { APP_LANGUAGES } from "@/i18n";
@@ -7,6 +6,7 @@ import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
+import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
 
 interface Props extends ViewProps {}
 
@@ -14,6 +14,55 @@ export const AppLanguageSelector: React.FC<Props> = () => {
   const isTv = Platform.isTV;
   const { settings, updateSettings } = useSettings();
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const optionGroups: OptionGroup[] = useMemo(() => {
+    const options = [
+      {
+        id: "system",
+        type: "radio" as const,
+        groupId: "languages",
+        label: t("home.settings.languages.system"),
+        selected: !settings?.preferedLanguage,
+      },
+      ...APP_LANGUAGES.map((lang) => ({
+        id: lang.value,
+        type: "radio" as const,
+        groupId: "languages",
+        label: lang.label,
+        selected: lang.value === settings?.preferedLanguage,
+      })),
+    ];
+
+    return [
+      {
+        id: "languages",
+        title: t("home.settings.languages.title"),
+        options,
+      },
+    ];
+  }, [settings?.preferedLanguage, t]);
+
+  const handleOptionSelect = (optionId: string) => {
+    if (optionId === "system") {
+      updateSettings({ preferedLanguage: undefined });
+    } else {
+      updateSettings({ preferedLanguage: optionId });
+    }
+    setOpen(false);
+  };
+
+  const trigger = (
+    <TouchableOpacity
+      className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'
+      onPress={() => setOpen(true)}
+    >
+      <Text>
+        {APP_LANGUAGES.find((l) => l.value === settings?.preferedLanguage)
+          ?.label || t("home.settings.languages.system")}
+      </Text>
+    </TouchableOpacity>
+  );
 
   if (isTv) return null;
   if (!settings) return null;
@@ -22,54 +71,21 @@ export const AppLanguageSelector: React.FC<Props> = () => {
     <View>
       <ListGroup title={t("home.settings.languages.title")}>
         <ListItem title={t("home.settings.languages.app_language")}>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TouchableOpacity className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
-                <Text>
-                  {APP_LANGUAGES.find(
-                    (l) => l.value === settings?.preferedLanguage,
-                  )?.label || t("home.settings.languages.system")}
-                </Text>
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side='bottom'
-              align='start'
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>
-                {t("home.settings.languages.title")}
-              </DropdownMenu.Label>
-              <DropdownMenu.Item
-                key={"unknown"}
-                onSelect={() => {
-                  updateSettings({
-                    preferedLanguage: undefined,
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {t("home.settings.languages.system")}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              {APP_LANGUAGES?.map((l) => (
-                <DropdownMenu.Item
-                  key={l?.value ?? "unknown"}
-                  onSelect={() => {
-                    updateSettings({
-                      preferedLanguage: l.value,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
+          <PlatformOptionsMenu
+            groups={optionGroups}
+            trigger={trigger}
+            title={t("home.settings.languages.title")}
+            open={open}
+            onOpenChange={setOpen}
+            onOptionSelect={handleOptionSelect}
+            expoUIConfig={{
+              hostStyle: { flex: 1 },
+            }}
+            bottomSheetConfig={{
+              enableDynamicSizing: true,
+              enablePanDownToClose: true,
+            }}
+          />
         </ListItem>
       </ListGroup>
     </View>

components/settings/AudioToggles.tsx

@@ -1,20 +1,20 @@
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import { Ionicons } from "@expo/vector-icons";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
+import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
 import { useMedia } from "./MediaContext";
 
 interface Props extends ViewProps {}
 
 export const AudioToggles: React.FC<Props> = ({ ...props }) => {
   const isTv = Platform.isTV;
+  const [open, setOpen] = useState(false);
 
   const media = useMedia();
   const { pluginSettings } = useSettings();
@@ -22,6 +22,70 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
   const cultures = media.cultures;
   const { t } = useTranslation();
 
+  const optionGroups: OptionGroup[] = useMemo(() => {
+    const options = [
+      {
+        id: "none",
+        type: "radio" as const,
+        groupId: "audio-languages",
+        label: t("home.settings.audio.none"),
+        selected: !settings?.defaultAudioLanguage,
+      },
+      ...(cultures?.map((culture) => ({
+        id:
+          culture.ThreeLetterISOLanguageName ||
+          culture.DisplayName ||
+          "unknown",
+        type: "radio" as const,
+        groupId: "audio-languages",
+        label:
+          culture.DisplayName ||
+          culture.ThreeLetterISOLanguageName ||
+          "Unknown",
+        selected:
+          culture.ThreeLetterISOLanguageName ===
+          settings?.defaultAudioLanguage?.ThreeLetterISOLanguageName,
+      })) || []),
+    ];
+
+    return [
+      {
+        id: "audio-languages",
+        title: t("home.settings.audio.language"),
+        options,
+      },
+    ];
+  }, [cultures, settings?.defaultAudioLanguage, t]);
+
+  const handleOptionSelect = (optionId: string) => {
+    if (optionId === "none") {
+      updateSettings({ defaultAudioLanguage: null });
+    } else {
+      const selectedCulture = cultures?.find(
+        (culture) =>
+          (culture.ThreeLetterISOLanguageName || culture.DisplayName) ===
+          optionId,
+      );
+      if (selectedCulture) {
+        updateSettings({ defaultAudioLanguage: selectedCulture });
+      }
+    }
+    setOpen(false);
+  };
+
+  const trigger = (
+    <TouchableOpacity
+      className='flex flex-row items-center justify-between py-3 pl-3'
+      onPress={() => setOpen(true)}
+    >
+      <Text className='mr-1 text-[#8E8D91]'>
+        {settings?.defaultAudioLanguage?.DisplayName ||
+          t("home.settings.audio.none")}
+      </Text>
+      <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
+    </TouchableOpacity>
+  );
+
   if (isTv) return null;
   if (!settings) return null;
 
@@ -48,60 +112,21 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
           />
         </ListItem>
         <ListItem title={t("home.settings.audio.audio_language")}>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3 '>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {settings?.defaultAudioLanguage?.DisplayName ||
-                    t("home.settings.audio.none")}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side='bottom'
-              align='start'
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>
-                {t("home.settings.audio.language")}
-              </DropdownMenu.Label>
-              <DropdownMenu.Item
-                key={"none-audio"}
-                onSelect={() => {
-                  updateSettings({
-                    defaultAudioLanguage: null,
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {t("home.settings.audio.none")}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              {cultures?.map((l) => (
-                <DropdownMenu.Item
-                  key={l?.ThreeLetterISOLanguageName ?? "unknown"}
-                  onSelect={() => {
-                    updateSettings({
-                      defaultAudioLanguage: l,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {l.DisplayName}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
+          <PlatformOptionsMenu
+            groups={optionGroups}
+            trigger={trigger}
+            title={t("home.settings.audio.language")}
+            open={open}
+            onOpenChange={setOpen}
+            onOptionSelect={handleOptionSelect}
+            expoUIConfig={{
+              hostStyle: { flex: 1 },
+            }}
+            bottomSheetConfig={{
+              enableDynamicSizing: true,
+              enablePanDownToClose: true,
+            }}
+          />
         </ListItem>
       </ListGroup>
     </View>

components/settings/SubtitleToggles.tsx

@@ -1,10 +1,7 @@
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
-
-const _DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import { Ionicons } from "@expo/vector-icons";
 import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
 import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import Dropdown from "@/components/common/Dropdown";
 import { Stepper } from "@/components/inputs/Stepper";