wip

components/settings/AppLanguageSelector.tsx

@@ -1,12 +1,12 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
+import { Platform, View, type ViewProps } from "react-native";
 import { APP_LANGUAGES } from "@/i18n";
 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 { PlatformDropdown } from "../PlatformDropdown";
 
 interface Props extends ViewProps {}
 
@@ -14,55 +14,32 @@ 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 optionGroups = useMemo(() => {
     const options = [
       {
-        id: "system",
         type: "radio" as const,
-        groupId: "languages",
         label: t("home.settings.languages.system"),
+        value: "system",
         selected: !settings?.preferedLanguage,
+        onPress: () => updateSettings({ preferedLanguage: undefined }),
       },
       ...APP_LANGUAGES.map((lang) => ({
-        id: lang.value,
         type: "radio" as const,
-        groupId: "languages",
         label: lang.label,
+        value: lang.value,
         selected: lang.value === settings?.preferedLanguage,
+        onPress: () => updateSettings({ preferedLanguage: lang.value }),
       })),
     ];
 
     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>
-  );
+  }, [settings?.preferedLanguage, t, updateSettings]);
 
   if (isTv) return null;
   if (!settings) return null;
@@ -71,20 +48,18 @@ export const AppLanguageSelector: React.FC<Props> = () => {
     <View>
       <ListGroup title={t("home.settings.languages.title")}>
         <ListItem title={t("home.settings.languages.app_language")}>
-          <PlatformOptionsMenu
+          <PlatformDropdown
             groups={optionGroups}
-            trigger={trigger}
+            trigger={
+              <View 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>
+              </View>
+            }
             title={t("home.settings.languages.title")}
-            open={open}
-            onOpenChange={setOpen}
-            onOptionSelect={handleOptionSelect}
-            expoUIConfig={{
-              hostStyle: { flex: 1 },
-            }}
-            bottomSheetConfig={{
-              enableDynamicSizing: true,
-              enablePanDownToClose: true,
-            }}
           />
         </ListItem>
       </ListGroup>

components/settings/AudioToggles.tsx

@@ -1,20 +1,19 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
+import { Platform, 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 { PlatformDropdown } from "../PlatformDropdown";
 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,69 +21,39 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
   const cultures = media.cultures;
   const { t } = useTranslation();
 
-  const optionGroups: OptionGroup[] = useMemo(() => {
+  const optionGroups = useMemo(() => {
     const options = [
       {
-        id: "none",
         type: "radio" as const,
-        groupId: "audio-languages",
         label: t("home.settings.audio.none"),
+        value: "none",
         selected: !settings?.defaultAudioLanguage,
+        onPress: () => updateSettings({ defaultAudioLanguage: null }),
       },
       ...(cultures?.map((culture) => ({
-        id:
-          culture.ThreeLetterISOLanguageName ||
-          culture.DisplayName ||
-          "unknown",
         type: "radio" as const,
-        groupId: "audio-languages",
         label:
           culture.DisplayName ||
           culture.ThreeLetterISOLanguageName ||
           "Unknown",
+        value:
+          culture.ThreeLetterISOLanguageName ||
+          culture.DisplayName ||
+          "unknown",
         selected:
           culture.ThreeLetterISOLanguageName ===
           settings?.defaultAudioLanguage?.ThreeLetterISOLanguageName,
+        onPress: () => updateSettings({ defaultAudioLanguage: culture }),
       })) || []),
     ];
 
     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>
-  );
+  }, [cultures, settings?.defaultAudioLanguage, t, updateSettings]);
 
   if (isTv) return null;
   if (!settings) return null;
@@ -112,20 +81,22 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
           />
         </ListItem>
         <ListItem title={t("home.settings.audio.audio_language")}>
-          <PlatformOptionsMenu
+          <PlatformDropdown
             groups={optionGroups}
-            trigger={trigger}
+            trigger={
+              <View 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'
+                />
+              </View>
+            }
             title={t("home.settings.audio.language")}
-            open={open}
-            onOpenChange={setOpen}
-            onOptionSelect={handleOptionSelect}
-            expoUIConfig={{
-              hostStyle: { flex: 1 },
-            }}
-            bottomSheetConfig={{
-              enableDynamicSizing: true,
-              enablePanDownToClose: true,
-            }}
           />
         </ListItem>
       </ListGroup>