feat: [StreamyfinPlugin] Other settings

app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx

@@ -8,9 +8,10 @@ import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { Switch, View } from "react-native";
+import DisabledSetting from "@/components/settings/DisabledSetting";
 
 export default function page() {
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);
 
@@ -35,7 +36,10 @@ export default function page() {
     );
 
   return (
-    <View className="px-4">
+    <DisabledSetting
+      disabled={pluginSettings?.hiddenLibraries?.locked === true}
+      className="px-4"
+    >
       <ListGroup>
         {data?.map((view) => (
           <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
@@ -56,6 +60,6 @@ export default function page() {
         Select the libraries you want to hide from the Library tab and home page
         sections.
       </Text>
-    </View>
+    </DisabledSetting>
   );
 }

components/settings/OtherSettings.tsx

@@ -9,19 +9,18 @@ import * as BackgroundFetch from "expo-background-fetch";
 import { useRouter } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as TaskManager from "expo-task-manager";
-import React, { useEffect } from "react";
-import { Linking, Switch, TouchableOpacity, ViewProps } from "react-native";
+import React, {useEffect, useMemo} from "react";
+import { Linking, Switch, TouchableOpacity } from "react-native";
 import { toast } from "sonner-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
-
-interface Props extends ViewProps {}
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import Dropdown from "@/components/common/Dropdown";
 
 export const OtherSettings: React.FC = () => {
   const router = useRouter();
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();
 
   /********************
    * Background task
@@ -53,146 +52,114 @@ export const OtherSettings: React.FC = () => {
   /**********************
    *********************/
 
+  const disabled = useMemo(() => (
+    pluginSettings?.autoRotate?.locked === true &&
+    pluginSettings?.defaultVideoOrientation?.locked === true &&
+    pluginSettings?.safeAreaInControlsEnabled?.locked === true &&
+    pluginSettings?.showCustomMenuLinks?.locked === true &&
+    pluginSettings?.hiddenLibraries?.locked === true &&
+    pluginSettings?.disableHapticFeedback?.locked === true
+  ), [pluginSettings]);
+
+  const orientations = [
+    ScreenOrientation.OrientationLock.DEFAULT,
+    ScreenOrientation.OrientationLock.PORTRAIT_UP,
+    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
+    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
+  ]
+
   if (!settings) return null;
 
   return (
-    <ListGroup title="Other" className="">
-      <ListItem title="Auto rotate">
-        <Switch
-          value={settings.autoRotate}
-          onValueChange={(value) => updateSettings({ autoRotate: value })}
-        />
-      </ListItem>
+    <DisabledSetting
+      disabled={disabled}
+    >
+      <ListGroup title="Other" className="">
+        <ListItem
+          title="Auto rotate"
+          disabled={pluginSettings?.autoRotate?.locked}
+        >
+          <Switch
+            value={settings.autoRotate}
+            disabled={pluginSettings?.autoRotate?.locked}
+            onValueChange={(value) => updateSettings({autoRotate: value})}
+          />
+        </ListItem>
 
-      <ListItem title="Video orientation" disabled={settings.autoRotate}>
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
-            <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
-              <Text className="mr-1 text-[#8E8D91]">
-                {ScreenOrientationEnum[settings.defaultVideoOrientation]}
-              </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>Orientation</DropdownMenu.Label>
-            <DropdownMenu.Item
-              key="1"
-              onSelect={() => {
-                updateSettings({
-                  defaultVideoOrientation:
-                    ScreenOrientation.OrientationLock.DEFAULT,
-                });
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {
-                  ScreenOrientationEnum[
-                    ScreenOrientation.OrientationLock.DEFAULT
-                  ]
-                }
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              key="2"
-              onSelect={() => {
-                updateSettings({
-                  defaultVideoOrientation:
-                    ScreenOrientation.OrientationLock.PORTRAIT_UP,
-                });
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {
-                  ScreenOrientationEnum[
-                    ScreenOrientation.OrientationLock.PORTRAIT_UP
-                  ]
-                }
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              key="3"
-              onSelect={() => {
-                updateSettings({
-                  defaultVideoOrientation:
-                    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
-                });
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {
-                  ScreenOrientationEnum[
-                    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
-                  ]
-                }
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              key="4"
-              onSelect={() => {
-                updateSettings({
-                  defaultVideoOrientation:
-                    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
-                });
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {
-                  ScreenOrientationEnum[
-                    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
-                  ]
-                }
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      </ListItem>
+        <ListItem
+          title="Video orientation"
+          disabled={pluginSettings?.defaultVideoOrientation?.locked || settings.autoRotate}
+        >
+          <Dropdown
+            data={orientations}
+            disabled={pluginSettings?.defaultVideoOrientation?.locked || settings.autoRotate}
+            keyExtractor={String}
+            titleExtractor={(item) =>
+              ScreenOrientationEnum[item]
+            }
+            title={
+              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
+                <Text className="mr-1 text-[#8E8D91]">
+                  {ScreenOrientationEnum[settings.defaultVideoOrientation]}
+                </Text>
+                <Ionicons name="chevron-expand-sharp" size={18} color="#5A5960"/>
+              </TouchableOpacity>
+            }
+            label="Orientation"
+            onSelected={(defaultVideoOrientation) =>
+              updateSettings({defaultVideoOrientation})
+            }
+          />
+        </ListItem>
 
-      <ListItem title="Safe area in controls">
-        <Switch
-          value={settings.safeAreaInControlsEnabled}
-          onValueChange={(value) =>
-            updateSettings({ safeAreaInControlsEnabled: value })
-          }
-        />
-      </ListItem>
+        <ListItem
+          title="Safe area in controls"
+          disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
+        >
+          <Switch
+            value={settings.safeAreaInControlsEnabled}
+            disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
+            onValueChange={(value) =>
+              updateSettings({safeAreaInControlsEnabled: value})
+            }
+          />
+        </ListItem>
 
-      <ListItem
-        title="Show Custom Menu Links"
-        onPress={() =>
-          Linking.openURL(
-            "https://jellyfin.org/docs/general/clients/web-config/#custom-menu-links"
-          )
-        }
-      >
-        <Switch
-          value={settings.showCustomMenuLinks}
-          onValueChange={(value) =>
-            updateSettings({ showCustomMenuLinks: value })
+        <ListItem
+          title="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
+          onPress={() => router.push("/settings/hide-libraries/page")}
+          title="Hide Libraries"
+          showArrow
         />
-      </ListItem>
-      <ListItem
-        onPress={() => router.push("/settings/hide-libraries/page")}
-        title="Hide Libraries"
-        showArrow
-      />
-      <ListItem title="Disable Haptic Feedback">
-        <Switch
-          value={settings.disableHapticFeedback}
-          onValueChange={(value) =>
-            updateSettings({ disableHapticFeedback: value })
-          }
-        />
-      </ListItem>
-    </ListGroup>
+        <ListItem
+          title="Disable Haptic Feedback"
+          disabled={pluginSettings?.disableHapticFeedback?.locked}
+        >
+          <Switch
+            value={settings.disableHapticFeedback}
+            disabled={pluginSettings?.disableHapticFeedback?.locked}
+            onValueChange={(disableHapticFeedback) =>
+              updateSettings({disableHapticFeedback})
+            }
+          />
+        </ListItem>
+      </ListGroup>
+    </DisabledSetting>
   );
 };