refactor(settings): rebuild Playback & Controls interior with typed rows + translate Chromecast

components/settings/ChromecastSettings.tsx

@@ -1,21 +1,22 @@
-import { Switch, View } from "react-native";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { SettingsSwitchRow } from "@/components/settings/index/SettingsSwitchRow";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 export const ChromecastSettings: React.FC = ({ ...props }) => {
   const { settings, updateSettings } = useSettings();
+  const { t } = useTranslation();
   return (
     <View {...props}>
-      <ListGroup title={"Chromecast"}>
-        <ListItem title={"Enable H265 for Chromecast"}>
-          <Switch
-            value={settings.enableH265ForChromecast}
-            onValueChange={(enableH265ForChromecast) =>
-              updateSettings({ enableH265ForChromecast })
-            }
-          />
-        </ListItem>
+      <ListGroup title={t("home.settings.chromecast.title")}>
+        <SettingsSwitchRow
+          title={t("home.settings.chromecast.enable_h265")}
+          value={settings.enableH265ForChromecast}
+          onValueChange={(enableH265ForChromecast) =>
+            updateSettings({ enableH265ForChromecast })
+          }
+        />
       </ListGroup>
     </View>
   );

components/settings/GestureControls.tsx

@@ -2,11 +2,10 @@ import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { ViewProps } from "react-native";
-import { Switch } from "react-native";
 import DisabledSetting from "@/components/settings/DisabledSetting";
+import { SettingsSwitchRow } from "@/components/settings/index/SettingsSwitchRow";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 interface Props extends ViewProps {}
 
@@ -32,85 +31,65 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
       <ListGroup
         title={t("home.settings.gesture_controls.gesture_controls_title")}
       >
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.gesture_controls.horizontal_swipe_skip")}
           subtitle={t(
             "home.settings.gesture_controls.horizontal_swipe_skip_description",
           )}
           disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
-        >
-          <Switch
-            value={settings.enableHorizontalSwipeSkip}
-            disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
-            onValueChange={(enableHorizontalSwipeSkip) =>
-              updateSettings({ enableHorizontalSwipeSkip })
-            }
-          />
-        </ListItem>
+          value={settings.enableHorizontalSwipeSkip}
+          onValueChange={(enableHorizontalSwipeSkip) =>
+            updateSettings({ enableHorizontalSwipeSkip })
+          }
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.gesture_controls.left_side_brightness")}
           subtitle={t(
             "home.settings.gesture_controls.left_side_brightness_description",
           )}
           disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
-        >
-          <Switch
-            value={settings.enableLeftSideBrightnessSwipe}
-            disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
-            onValueChange={(enableLeftSideBrightnessSwipe) =>
-              updateSettings({ enableLeftSideBrightnessSwipe })
-            }
-          />
-        </ListItem>
+          value={settings.enableLeftSideBrightnessSwipe}
+          onValueChange={(enableLeftSideBrightnessSwipe) =>
+            updateSettings({ enableLeftSideBrightnessSwipe })
+          }
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.gesture_controls.right_side_volume")}
           subtitle={t(
             "home.settings.gesture_controls.right_side_volume_description",
           )}
           disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
-        >
-          <Switch
-            value={settings.enableRightSideVolumeSwipe}
-            disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
-            onValueChange={(enableRightSideVolumeSwipe) =>
-              updateSettings({ enableRightSideVolumeSwipe })
-            }
-          />
-        </ListItem>
+          value={settings.enableRightSideVolumeSwipe}
+          onValueChange={(enableRightSideVolumeSwipe) =>
+            updateSettings({ enableRightSideVolumeSwipe })
+          }
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.gesture_controls.hide_volume_slider")}
           subtitle={t(
             "home.settings.gesture_controls.hide_volume_slider_description",
           )}
           disabled={pluginSettings?.hideVolumeSlider?.locked}
-        >
-          <Switch
-            value={settings.hideVolumeSlider}
-            disabled={pluginSettings?.hideVolumeSlider?.locked}
-            onValueChange={(hideVolumeSlider) =>
-              updateSettings({ hideVolumeSlider })
-            }
-          />
-        </ListItem>
+          value={settings.hideVolumeSlider}
+          onValueChange={(hideVolumeSlider) =>
+            updateSettings({ hideVolumeSlider })
+          }
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.gesture_controls.hide_brightness_slider")}
           subtitle={t(
             "home.settings.gesture_controls.hide_brightness_slider_description",
           )}
           disabled={pluginSettings?.hideBrightnessSlider?.locked}
-        >
-          <Switch
-            value={settings.hideBrightnessSlider}
-            disabled={pluginSettings?.hideBrightnessSlider?.locked}
-            onValueChange={(hideBrightnessSlider) =>
-              updateSettings({ hideBrightnessSlider })
-            }
-          />
-        </ListItem>
+          value={settings.hideBrightnessSlider}
+          onValueChange={(hideBrightnessSlider) =>
+            updateSettings({ hideBrightnessSlider })
+          }
+        />
       </ListGroup>
     </DisabledSetting>
   );

components/settings/MediaToggles.tsx

@@ -2,11 +2,10 @@ import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { ViewProps } from "react-native";
-import { Stepper } from "@/components/inputs/Stepper";
 import DisabledSetting from "@/components/settings/DisabledSetting";
+import { SettingsStepperRow } from "@/components/settings/index/SettingsStepperRow";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 interface Props extends ViewProps {}
 
@@ -27,35 +26,27 @@ export const MediaToggles: React.FC<Props> = ({ ...props }) => {
   return (
     <DisabledSetting disabled={disabled} {...props}>
       <ListGroup title={t("home.settings.media_controls.media_controls_title")}>
-        <ListItem
+        <SettingsStepperRow
           title={t("home.settings.media_controls.forward_skip_length")}
           disabled={pluginSettings?.forwardSkipTime?.locked}
-        >
-          <Stepper
-            value={settings.forwardSkipTime}
-            disabled={pluginSettings?.forwardSkipTime?.locked}
-            step={5}
-            appendValue={t("home.settings.media_controls.seconds_unit")}
-            min={0}
-            max={60}
-            onUpdate={(forwardSkipTime) => updateSettings({ forwardSkipTime })}
-          />
-        </ListItem>
+          value={settings.forwardSkipTime}
+          step={5}
+          appendValue={t("home.settings.media_controls.seconds_unit")}
+          min={0}
+          max={60}
+          onUpdate={(forwardSkipTime) => updateSettings({ forwardSkipTime })}
+        />
 
-        <ListItem
+        <SettingsStepperRow
           title={t("home.settings.media_controls.rewind_length")}
           disabled={pluginSettings?.rewindSkipTime?.locked}
-        >
-          <Stepper
-            value={settings.rewindSkipTime}
-            disabled={pluginSettings?.rewindSkipTime?.locked}
-            step={5}
-            appendValue={t("home.settings.media_controls.seconds_unit")}
-            min={0}
-            max={60}
-            onUpdate={(rewindSkipTime) => updateSettings({ rewindSkipTime })}
-          />
-        </ListItem>
+          value={settings.rewindSkipTime}
+          step={5}
+          appendValue={t("home.settings.media_controls.seconds_unit")}
+          min={0}
+          max={60}
+          onUpdate={(rewindSkipTime) => updateSettings({ rewindSkipTime })}
+        />
       </ListGroup>
     </DisabledSetting>
   );

components/settings/MpvBufferSettings.tsx

@@ -1,14 +1,10 @@
-import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import { Stepper } from "@/components/inputs/Stepper";
-import { PlatformDropdown } from "@/components/PlatformDropdown";
+import { SettingsSelectRow } from "@/components/settings/index/SettingsSelectRow";
+import { SettingsStepperRow } from "@/components/settings/index/SettingsStepperRow";
 import { type MpvCacheMode, useSettings } from "@/utils/atoms/settings";
-import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 const CACHE_MODE_OPTIONS: { key: string; value: MpvCacheMode }[] = [
   { key: "home.settings.buffer.cache_auto", value: "auto" },
@@ -46,55 +42,42 @@ export const MpvBufferSettings: React.FC = () => {
 
   return (
     <ListGroup title={t("home.settings.buffer.title")} className='mb-4'>
-      <ListItem title={t("home.settings.buffer.cache_mode")}>
-        <PlatformDropdown
-          groups={cacheModeOptions}
-          trigger={
-            <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-              <Text className='mr-1 text-[#8E8D91]'>
-                {currentCacheModeLabel}
-              </Text>
-              <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
-            </View>
-          }
-          title={t("home.settings.buffer.cache_mode")}
-        />
-      </ListItem>
+      <SettingsSelectRow
+        title={t("home.settings.buffer.cache_mode")}
+        valueLabel={currentCacheModeLabel}
+        groups={cacheModeOptions}
+        dropdownTitle={t("home.settings.buffer.cache_mode")}
+      />
 
-      <ListItem title={t("home.settings.buffer.buffer_duration")}>
-        <Stepper
-          value={settings.mpvCacheSeconds ?? 10}
-          step={5}
-          min={5}
-          max={120}
-          onUpdate={(value) => updateSettings({ mpvCacheSeconds: value })}
-          appendValue='s'
-        />
-      </ListItem>
+      <SettingsStepperRow
+        title={t("home.settings.buffer.buffer_duration")}
+        value={settings.mpvCacheSeconds ?? 10}
+        step={5}
+        min={5}
+        max={120}
+        onUpdate={(value) => updateSettings({ mpvCacheSeconds: value })}
+        appendValue='s'
+      />
 
-      <ListItem title={t("home.settings.buffer.max_cache_size")}>
-        <Stepper
-          value={settings.mpvDemuxerMaxBytes ?? 150}
-          step={25}
-          min={50}
-          max={500}
-          onUpdate={(value) => updateSettings({ mpvDemuxerMaxBytes: value })}
-          appendValue=' MB'
-        />
-      </ListItem>
+      <SettingsStepperRow
+        title={t("home.settings.buffer.max_cache_size")}
+        value={settings.mpvDemuxerMaxBytes ?? 150}
+        step={25}
+        min={50}
+        max={500}
+        onUpdate={(value) => updateSettings({ mpvDemuxerMaxBytes: value })}
+        appendValue=' MB'
+      />
 
-      <ListItem title={t("home.settings.buffer.max_backward_cache")}>
-        <Stepper
-          value={settings.mpvDemuxerMaxBackBytes ?? 50}
-          step={25}
-          min={25}
-          max={200}
-          onUpdate={(value) =>
-            updateSettings({ mpvDemuxerMaxBackBytes: value })
-          }
-          appendValue=' MB'
-        />
-      </ListItem>
+      <SettingsStepperRow
+        title={t("home.settings.buffer.max_backward_cache")}
+        value={settings.mpvDemuxerMaxBackBytes ?? 50}
+        step={25}
+        min={25}
+        max={200}
+        onUpdate={(value) => updateSettings({ mpvDemuxerMaxBackBytes: value })}
+        appendValue=' MB'
+      />
     </ListGroup>
   );
 };

components/settings/MpvVoSettings.tsx

@@ -1,13 +1,10 @@
-import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
-import { PlatformDropdown } from "@/components/PlatformDropdown";
+import { Platform } from "react-native";
+import { SettingsSelectRow } from "@/components/settings/index/SettingsSelectRow";
 import { type MpvVoDriver, useSettings } from "@/utils/atoms/settings";
-import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 const VO_DRIVER_OPTIONS: { key: string; value: MpvVoDriver }[] = [
   { key: "home.settings.vo_driver.gpu_next", value: "gpu-next" },
@@ -47,20 +44,12 @@ export const MpvVoSettings: React.FC = () => {
 
   return (
     <ListGroup title={t("home.settings.vo_driver.title")} className='mb-4'>
-      <ListItem title={t("home.settings.vo_driver.vo_mode")}>
-        <PlatformDropdown
-          groups={voDriverOptions}
-          trigger={
-            <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-              <Text className='mr-1 text-[#8E8D91]'>
-                {currentVoDriverLabel}
-              </Text>
-              <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
-            </View>
-          }
-          title={t("home.settings.vo_driver.vo_mode")}
-        />
-      </ListItem>
+      <SettingsSelectRow
+        title={t("home.settings.vo_driver.vo_mode")}
+        valueLabel={currentVoDriverLabel}
+        groups={voDriverOptions}
+        dropdownTitle={t("home.settings.vo_driver.vo_mode")}
+      />
     </ListGroup>
   );
 };

components/settings/PlaybackControlsSettings.tsx

@@ -1,18 +1,15 @@
-import { Ionicons } from "@expo/vector-icons";
 import { TFunction } from "i18next";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Switch, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
-import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
 import DisabledSetting from "@/components/settings/DisabledSetting";
+import { SettingsSelectRow } from "@/components/settings/index/SettingsSelectRow";
+import { SettingsSwitchRow } from "@/components/settings/index/SettingsSwitchRow";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
-import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 
 export const PlaybackControlsSettings: React.FC = () => {
   const { settings, updateSettings, pluginSettings } = useSettings();
@@ -116,141 +113,77 @@ export const PlaybackControlsSettings: React.FC = () => {
   return (
     <DisabledSetting disabled={disabled}>
       <ListGroup title={t("home.settings.other.other_title")} className=''>
-        <ListItem
+        <SettingsSelectRow
           title={t("home.settings.other.video_orientation")}
           disabled={pluginSettings?.defaultVideoOrientation?.locked}
-        >
-          <PlatformDropdown
-            groups={orientationOptions}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {t(
-                    orientationTranslations[
-                      settings.defaultVideoOrientation as keyof typeof orientationTranslations
-                    ],
-                  ) || "Unknown Orientation"}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.orientation")}
-          />
-        </ListItem>
+          valueLabel={
+            t(
+              orientationTranslations[
+                settings.defaultVideoOrientation as keyof typeof orientationTranslations
+              ],
+            ) || "Unknown Orientation"
+          }
+          groups={orientationOptions}
+          dropdownTitle={t("home.settings.other.orientation")}
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.other.safe_area_in_controls")}
           disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
-        >
-          <Switch
-            value={settings.safeAreaInControlsEnabled}
-            disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
-            onValueChange={(value) =>
-              updateSettings({ safeAreaInControlsEnabled: value })
-            }
-          />
-        </ListItem>
+          value={settings.safeAreaInControlsEnabled}
+          onValueChange={(value) =>
+            updateSettings({ safeAreaInControlsEnabled: value })
+          }
+        />
 
-        <ListItem
+        <SettingsSelectRow
           title={t("home.settings.other.default_quality")}
           disabled={pluginSettings?.defaultBitrate?.locked}
-        >
-          <PlatformDropdown
-            groups={bitrateOptions}
-            trigger={
-              <View className='flex flex-row items-center justify-between pl-3 py-1.5 '>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {settings.defaultBitrate?.key}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.default_quality")}
-          />
-        </ListItem>
+          valueLabel={settings.defaultBitrate?.key}
+          groups={bitrateOptions}
+          dropdownTitle={t("home.settings.other.default_quality")}
+        />
 
-        <ListItem
+        <SettingsSelectRow
           title={t("home.settings.other.default_playback_speed")}
           disabled={pluginSettings?.defaultPlaybackSpeed?.locked}
-        >
-          <PlatformDropdown
-            groups={playbackSpeedOptions}
-            trigger={
-              <View className='flex flex-row items-center justify-between pl-3 py-1.5'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {PLAYBACK_SPEEDS.find(
-                    (s) => s.value === settings.defaultPlaybackSpeed,
-                  )?.label ?? "1x"}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.default_playback_speed")}
-          />
-        </ListItem>
+          valueLabel={
+            PLAYBACK_SPEEDS.find(
+              (s) => s.value === settings.defaultPlaybackSpeed,
+            )?.label ?? "1x"
+          }
+          groups={playbackSpeedOptions}
+          dropdownTitle={t("home.settings.other.default_playback_speed")}
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.other.disable_haptic_feedback")}
           disabled={pluginSettings?.disableHapticFeedback?.locked}
-        >
-          <Switch
-            value={settings.disableHapticFeedback}
-            disabled={pluginSettings?.disableHapticFeedback?.locked}
-            onValueChange={(disableHapticFeedback) =>
-              updateSettings({ disableHapticFeedback })
-            }
-          />
-        </ListItem>
+          value={settings.disableHapticFeedback}
+          onValueChange={(disableHapticFeedback) =>
+            updateSettings({ disableHapticFeedback })
+          }
+        />
 
-        <ListItem
+        <SettingsSwitchRow
           title={t("home.settings.other.auto_play_next_episode")}
           disabled={pluginSettings?.autoPlayNextEpisode?.locked}
-        >
-          <Switch
-            value={settings.autoPlayNextEpisode}
-            disabled={pluginSettings?.autoPlayNextEpisode?.locked}
-            onValueChange={(autoPlayNextEpisode) =>
-              updateSettings({ autoPlayNextEpisode })
-            }
-          />
-        </ListItem>
+          value={settings.autoPlayNextEpisode}
+          onValueChange={(autoPlayNextEpisode) =>
+            updateSettings({ autoPlayNextEpisode })
+          }
+        />
 
-        <ListItem
+        <SettingsSelectRow
           title={t("home.settings.other.max_auto_play_episode_count")}
           disabled={
             !settings.autoPlayNextEpisode ||
             pluginSettings?.maxAutoPlayEpisodeCount?.locked
           }
-        >
-          <PlatformDropdown
-            groups={autoPlayEpisodeOptions}
-            trigger={
-              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {t(settings?.maxAutoPlayEpisodeCount.key)}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </View>
-            }
-            title={t("home.settings.other.max_auto_play_episode_count")}
-          />
-        </ListItem>
+          valueLabel={t(settings?.maxAutoPlayEpisodeCount.key)}
+          groups={autoPlayEpisodeOptions}
+          dropdownTitle={t("home.settings.other.max_auto_play_episode_count")}
+        />
       </ListGroup>
     </DisabledSetting>
   );