refactor: better settings (#1178)

components/settings/AppLanguageSelector.tsx

@@ -1,3 +1,4 @@
+import Ionicons from "@expo/vector-icons/Ionicons";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
@@ -50,12 +51,17 @@ export const AppLanguageSelector: React.FC<Props> = () => {
           <PlatformDropdown
             groups={optionGroups}
             trigger={
-              <View className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
-                <Text>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-2'>
                   {APP_LANGUAGES.find(
                     (l) => l.value === settings?.preferedLanguage,
                   )?.label || t("home.settings.languages.system")}
                 </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
               </View>
             }
             title={t("home.settings.languages.title")}

components/settings/AppearanceSettings.tsx

@@ -0,0 +1,63 @@
+import { useRouter } from "expo-router";
+import type React from "react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Linking, Switch } from "react-native";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { useSettings } from "@/utils/atoms/settings";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+export const AppearanceSettings: React.FC = () => {
+  const router = useRouter();
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  const { t } = useTranslation();
+
+  const disabled = useMemo(
+    () =>
+      pluginSettings?.showCustomMenuLinks?.locked === true &&
+      pluginSettings?.hiddenLibraries?.locked === true,
+    [pluginSettings],
+  );
+
+  if (!settings) return null;
+
+  return (
+    <DisabledSetting disabled={disabled}>
+      <ListGroup title={t("home.settings.appearance.title")} className=''>
+        <ListItem
+          title={t("home.settings.other.show_custom_menu_links")}
+          disabled={pluginSettings?.showCustomMenuLinks?.locked}
+          onPress={() =>
+            Linking.openURL(
+              "https://jellyfin.org/docs/general/clients/web-config/#custom-menu-links",
+            )
+          }
+        >
+          <Switch
+            value={settings.showCustomMenuLinks}
+            disabled={pluginSettings?.showCustomMenuLinks?.locked}
+            onValueChange={(value) =>
+              updateSettings({ showCustomMenuLinks: value })
+            }
+          />
+        </ListItem>
+        <ListItem title={t("home.settings.other.show_large_home_carousel")}>
+          <Switch
+            value={settings.showLargeHomeCarousel}
+            onValueChange={(value) =>
+              updateSettings({ showLargeHomeCarousel: value })
+            }
+          />
+        </ListItem>
+        <ListItem
+          onPress={() =>
+            router.push("/settings/appearance/hide-libraries/page")
+          }
+          title={t("home.settings.other.hide_libraries")}
+          showArrow
+        />
+      </ListGroup>
+    </DisabledSetting>
+  );
+};

components/settings/AudioToggles.tsx

@@ -83,7 +83,7 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={optionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {settings?.defaultAudioLanguage?.DisplayName ||
                     t("home.settings.audio.none")}

components/settings/OtherSettings.tsx

@@ -109,7 +109,7 @@ export const OtherSettings: React.FC = () => {
           <PlatformDropdown
             groups={orientationOptions}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(
                     orientationTranslations[
@@ -152,7 +152,7 @@ export const OtherSettings: React.FC = () => {
               keyExtractor={String}
               titleExtractor={(item) => t(`home.settings.other.video_players.${VideoPlayer[item]}`)}
               title={
-                <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
+                <TouchableOpacity className="flex flex-row items-center justify-between py-1.5 pl-3">
                   <Text className="mr-1 text-[#8E8D91]">
                     {t(`home.settings.other.video_players.${VideoPlayer[settings.defaultPlayer]}`)}
                   </Text>
@@ -208,7 +208,7 @@ export const OtherSettings: React.FC = () => {
           <PlatformDropdown
             groups={bitrateOptions}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {settings.defaultBitrate?.key}
                 </Text>
@@ -238,7 +238,7 @@ export const OtherSettings: React.FC = () => {
           <PlatformDropdown
             groups={autoPlayEpisodeOptions}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <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>

components/settings/PlaybackControlsSettings.tsx

@@ -0,0 +1,211 @@
+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 DisabledSetting from "@/components/settings/DisabledSetting";
+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();
+  const { t } = useTranslation();
+
+  const disabled = useMemo(
+    () =>
+      pluginSettings?.defaultVideoOrientation?.locked === true &&
+      pluginSettings?.safeAreaInControlsEnabled?.locked === true &&
+      pluginSettings?.disableHapticFeedback?.locked === true,
+    [pluginSettings],
+  );
+
+  const orientations = [
+    ScreenOrientation.OrientationLock.DEFAULT,
+    ScreenOrientation.OrientationLock.PORTRAIT_UP,
+    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
+    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
+  ];
+
+  const orientationTranslations = useMemo(
+    () => ({
+      [ScreenOrientation.OrientationLock.DEFAULT]:
+        "home.settings.other.orientations.DEFAULT",
+      [ScreenOrientation.OrientationLock.PORTRAIT_UP]:
+        "home.settings.other.orientations.PORTRAIT_UP",
+      [ScreenOrientation.OrientationLock.LANDSCAPE_LEFT]:
+        "home.settings.other.orientations.LANDSCAPE_LEFT",
+      [ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT]:
+        "home.settings.other.orientations.LANDSCAPE_RIGHT",
+    }),
+    [],
+  );
+
+  const orientationOptions = useMemo(
+    () => [
+      {
+        options: orientations.map((orientation) => ({
+          type: "radio" as const,
+          label: t(ScreenOrientationEnum[orientation]),
+          value: String(orientation),
+          selected: orientation === settings?.defaultVideoOrientation,
+          onPress: () =>
+            updateSettings({ defaultVideoOrientation: orientation }),
+        })),
+      },
+    ],
+    [orientations, settings?.defaultVideoOrientation, t, updateSettings],
+  );
+
+  const bitrateOptions = useMemo(
+    () => [
+      {
+        options: BITRATES.map((bitrate) => ({
+          type: "radio" as const,
+          label: bitrate.key,
+          value: bitrate.key,
+          selected: bitrate.key === settings?.defaultBitrate?.key,
+          onPress: () => updateSettings({ defaultBitrate: bitrate }),
+        })),
+      },
+    ],
+    [settings?.defaultBitrate?.key, updateSettings],
+  );
+
+  const autoPlayEpisodeOptions = useMemo(
+    () => [
+      {
+        options: AUTOPLAY_EPISODES_COUNT(t).map((item) => ({
+          type: "radio" as const,
+          label: item.key,
+          value: item.key,
+          selected: item.key === settings?.maxAutoPlayEpisodeCount?.key,
+          onPress: () => updateSettings({ maxAutoPlayEpisodeCount: item }),
+        })),
+      },
+    ],
+    [settings?.maxAutoPlayEpisodeCount?.key, t, updateSettings],
+  );
+
+  if (!settings) return null;
+
+  return (
+    <DisabledSetting disabled={disabled}>
+      <ListGroup title={t("home.settings.other.other_title")} className=''>
+        <ListItem
+          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>
+
+        <ListItem
+          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>
+
+        <ListItem
+          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>
+
+        <ListItem
+          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>
+
+        <ListItem title={t("home.settings.other.max_auto_play_episode_count")}>
+          <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>
+      </ListGroup>
+    </DisabledSetting>
+  );
+};
+
+const AUTOPLAY_EPISODES_COUNT = (
+  t: TFunction<"translation", undefined>,
+): {
+  key: string;
+  value: number;
+}[] => [
+  { key: t("home.settings.other.disabled"), value: -1 },
+  { key: "1", value: 1 },
+  { key: "2", value: 2 },
+  { key: "3", value: 3 },
+  { key: "4", value: 4 },
+  { key: "5", value: 5 },
+  { key: "6", value: 6 },
+  { key: "7", value: 7 },
+];

components/settings/PluginSettings.tsx

@@ -1,6 +1,5 @@
 import { useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -13,23 +12,22 @@ export const PluginSettings = () => {
   const { t } = useTranslation();
 
   if (!settings) return null;
+
   return (
-    <View className='mt-4'>
-      <ListGroup
-        title={t("home.settings.plugins.plugins_title")}
-        className='mb-4'
-      >
-        <ListItem
-          onPress={() => router.push("/settings/jellyseerr/page")}
-          title={"Jellyseerr"}
-          showArrow
-        />
-        <ListItem
-          onPress={() => router.push("/settings/marlin-search/page")}
-          title='Marlin Search'
-          showArrow
-        />
-      </ListGroup>
-    </View>
+    <ListGroup
+      title={t("home.settings.plugins.plugins_title")}
+      className='mb-4'
+    >
+      <ListItem
+        onPress={() => router.push("/settings/plugins/jellyseerr/page")}
+        title={"Jellyseerr"}
+        showArrow
+      />
+      <ListItem
+        onPress={() => router.push("/settings/plugins/marlin-search/page")}
+        title='Marlin Search'
+        showArrow
+      />
+    </ListGroup>
   );
 };

components/settings/SubtitleToggles.tsx

@@ -187,7 +187,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={subtitleLanguageOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {settings?.defaultSubtitleLanguage?.DisplayName ||
                     t("home.settings.subtitles.none")}
@@ -210,7 +210,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={subtitleModeOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(subtitleModeKeys[settings?.subtitleMode]) ||
                     t("home.settings.subtitles.loading")}
@@ -256,7 +256,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={textColorOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(
                     `home.settings.subtitles.colors.${settings?.vlcTextColor || "White"}`,
@@ -276,7 +276,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={backgroundColorOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(
                     `home.settings.subtitles.colors.${settings?.vlcBackgroundColor || "Black"}`,
@@ -296,7 +296,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={outlineColorOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(
                     `home.settings.subtitles.colors.${settings?.vlcOutlineColor || "Black"}`,
@@ -316,7 +316,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={outlineThicknessOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(
                     `home.settings.subtitles.thickness.${settings?.vlcOutlineThickness || "Normal"}`,
@@ -336,7 +336,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={backgroundOpacityOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>{`${Math.round(((settings?.vlcBackgroundOpacity ?? 128) / 255) * 100)}%`}</Text>
                 <Ionicons
                   name='chevron-expand-sharp'
@@ -352,7 +352,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={outlineOpacityOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>{`${Math.round(((settings?.vlcOutlineOpacity ?? 255) / 255) * 100)}%`}</Text>
                 <Ionicons
                   name='chevron-expand-sharp'