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 { TouchableOpacity, View, ViewProps } from "react-native";
+import React, {useMemo} from "react";
+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 = (
-    value: number,
-    onDecrease: () => void,
-    onIncrease: () => void
-  ) => (
-    <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>
-  );
+  const disabled = useMemo(() => (
+      pluginSettings?.forwardSkipTime?.locked === true &&
+      pluginSettings?.rewindSkipTime?.locked === true
+    ),
+    [pluginSettings]
+  )
 
   return (
-    <View {...props}>
+    <DisabledSetting
+      disabled={disabled}
+      {...props}
+    >
       <ListGroup title="Media Controls">
-        <ListItem title="Forward Skip Length">
-          {renderSkipControl(
-            settings.forwardSkipTime,
-            () =>
-              updateSettings({
-                forwardSkipTime: Math.max(0, settings.forwardSkipTime - 5),
-              }),
-            () =>
-              updateSettings({
-                forwardSkipTime: Math.min(60, settings.forwardSkipTime + 5),
-              })
-          )}
+        <ListItem
+          title="Forward Skip Length"
+          disabled={pluginSettings?.forwardSkipTime?.locked}
+        >
+          <Stepper
+            value={settings.forwardSkipTime}
+            disabled={pluginSettings?.forwardSkipTime?.locked}
+            step={5}
+            appendValue="s"
+            min={0}
+            max={60}
+            onUpdate={(forwardSkipTime) => updateSettings({forwardSkipTime})}
+          />
         </ListItem>
 
-        <ListItem title="Rewind Length">
-          {renderSkipControl(
-            settings.rewindSkipTime,
-            () =>
-              updateSettings({
-                rewindSkipTime: Math.max(0, settings.rewindSkipTime - 5),
-              }),
-            () =>
-              updateSettings({
-                rewindSkipTime: Math.min(60, settings.rewindSkipTime + 5),
-              })
-          )}
+        <ListItem
+          title="Rewind Length"
+          disabled={pluginSettings?.rewindSkipTime?.locked}
+        >
+          <Stepper
+            value={settings.rewindSkipTime}
+            disabled={pluginSettings?.rewindSkipTime?.locked}
+            step={5}
+            appendValue="s"
+            min={0}
+            max={60}
+            onUpdate={(rewindSkipTime) => updateSettings({rewindSkipTime})}
+          />
         </ListItem>
       </ListGroup>
-    </View>
+    </DisabledSetting>
   );
 };