feat: [StreamyfinPlugin] Media Toggles settings

components/inputs/Stepper.tsx

@@ -1,8 +1,10 @@
 import {TouchableOpacity, View} from "react-native";
 import {Text} from "@/components/common/Text";
+import DisabledSetting from "@/components/settings/DisabledSetting";
 
 interface StepperProps {
   value: number,
+  disabled?: boolean,
   step: number,
   min: number,
   max: number,
@@ -12,6 +14,7 @@ interface StepperProps {
 
 export const Stepper: React.FC<StepperProps> = ({
   value,
+  disabled,
   step,
   min,
   max,
@@ -19,7 +22,11 @@ export const Stepper: React.FC<StepperProps> = ({
   appendValue
 }) => {
   return (
-    <View className="flex flex-row items-center">
+    <DisabledSetting
+      disabled={disabled === true}
+      showText={false}
+      className="flex flex-row items-center"
+    >
       <TouchableOpacity
         onPress={() => onUpdate(Math.max(min, value - step))}
         className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
@@ -39,6 +46,6 @@ export const Stepper: React.FC<StepperProps> = ({
       >
         <Text>+</Text>
       </TouchableOpacity>
-    </View>
+    </DisabledSetting>
   )
 }

components/settings/MediaToggles.tsx

@@ -1,72 +1,61 @@
-import React from "react";
+import React, {useMemo} from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import { ViewProps } from "react-native";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
-import { Text } from "../common/Text";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import {Stepper} from "@/components/inputs/Stepper";
 
 interface Props extends ViewProps {}
 
 export const MediaToggles: React.FC<Props> = ({ ...props }) => {
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();
 
   if (!settings) return null;
 
-  const renderSkipControl = (
+  const disabled = useMemo(() => (
-    value: number,
+      pluginSettings?.forwardSkipTime?.locked === true &&
-    onDecrease: () => void,
+      pluginSettings?.rewindSkipTime?.locked === true
-    onIncrease: () => void
+    ),
-  ) => (
+    [pluginSettings]
-    <View className="flex flex-row items-center">
+  )
-      <TouchableOpacity
-        onPress={onDecrease}
-        className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
-      >
-        <Text>-</Text>
-      </TouchableOpacity>
-      <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
-        {value}s
-      </Text>
-      <TouchableOpacity
-        className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
-        onPress={onIncrease}
-      >
-        <Text>+</Text>
-      </TouchableOpacity>
-    </View>
-  );
 
   return (
-    <View {...props}>
+    <DisabledSetting
+      disabled={disabled}
+      {...props}
+    >
       <ListGroup title="Media Controls">
-        <ListItem title="Forward Skip Length">
+        <ListItem
-          {renderSkipControl(
+          title="Forward Skip Length"
-            settings.forwardSkipTime,
+          disabled={pluginSettings?.forwardSkipTime?.locked}
-            () =>
+        >
-              updateSettings({
+          <Stepper
-                forwardSkipTime: Math.max(0, settings.forwardSkipTime - 5),
+            value={settings.forwardSkipTime}
-              }),
+            disabled={pluginSettings?.forwardSkipTime?.locked}
-            () =>
+            step={5}
-              updateSettings({
+            appendValue="s"
-                forwardSkipTime: Math.min(60, settings.forwardSkipTime + 5),
+            min={0}
-              })
+            max={60}
-          )}
+            onUpdate={(forwardSkipTime) => updateSettings({forwardSkipTime})}
+          />
         </ListItem>
 
-        <ListItem title="Rewind Length">
+        <ListItem
-          {renderSkipControl(
+          title="Rewind Length"
-            settings.rewindSkipTime,
+          disabled={pluginSettings?.rewindSkipTime?.locked}
-            () =>
+        >
-              updateSettings({
+          <Stepper
-                rewindSkipTime: Math.max(0, settings.rewindSkipTime - 5),
+            value={settings.rewindSkipTime}
-              }),
+            disabled={pluginSettings?.rewindSkipTime?.locked}
-            () =>
+            step={5}
-              updateSettings({
+            appendValue="s"
-                rewindSkipTime: Math.min(60, settings.rewindSkipTime + 5),
+            min={0}
-              })
+            max={60}
-          )}
+            onUpdate={(rewindSkipTime) => updateSettings({rewindSkipTime})}
+          />
         </ListItem>
       </ListGroup>
-    </View>
+    </DisabledSetting>
   );
 };

utils/atoms/settings.ts

@@ -223,11 +223,16 @@ export const useSettings = () => {
   )
 
   // We do not want to save over users pre-existing settings in case admin ever removes/unlocks a setting.
+  // If admin sets locked to false but provides a value,
+  //  use user settings first and fallback on admin setting if required.
   const settings: Settings = useMemo(() => {
     const overrideSettings = Object.entries(pluginSettings || {})
-      .reduce((acc, [key, value]) => {
+      .reduce((acc, [key, setting]) => {
-        if (value) {
+        if (setting) {
-          acc = Object.assign(acc, {[key]: value.value})
+          const {value, locked} = setting
+          acc = Object.assign(acc, {
+            [key]: locked ? value : _settings?.[key as keyof Settings] ?? value
+          })
         }
         return acc
       }, {} as Settings)