[Update] Config Page: Device Tab. To sync Threshold value between slider and entry component.

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx

@@ -1,14 +1,78 @@
+import { useState } from "react";
+
 import styles from "./ThresholdComponent.module.scss";
 import { SliderAndMeter } from "./slider_and_meter/SliderAndMeter";
 import { ThresholdEntry } from "./threshold_entry/ThresholdEntry";
 import { VolumeCheckButton } from "./volume_check_button/VolumeCheckButton";
+import { useConfig } from "@logics/useConfig";
 
 export const ThresholdComponent = (props) => {
     return (
         <div className={styles.container}>
-            <VolumeCheckButton {...props}/>
+            <VolumeCheckButton {...props} />
-            <SliderAndMeter {...props}/>
+            {props.id === "mic_threshold"
-            <ThresholdEntry {...props}/>
+                ? <MicComponent {...props} />
+                : <SpeakerComponent {...props} />
+            }
         </div>
     );
 };
+
+const MicComponent = (props) => {
+    const { currentMicThreshold, setMicThreshold } = useConfig();
+    const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
+
+    const setUiThresholdFunction = (payload_ui_threshold) => {
+        setUiThreshold(payload_ui_threshold);
+    };
+    const setThresholdFunction = (payload_threshold) => {
+        setMicThreshold(payload_threshold);
+    };
+
+    return (
+        <>
+            <SliderAndMeter
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+            <ThresholdEntry
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+        </>
+    );
+};
+
+const SpeakerComponent = (props) => {
+
+    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
+    const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
+
+    const setUiThresholdFunction = (payload_ui_threshold) => {
+        setUiThreshold(payload_ui_threshold);
+    };
+    const setThresholdFunction = (payload_threshold) => {
+        setSpeakerThreshold(payload_threshold);
+    };
+
+    return (
+        <>
+            <SliderAndMeter
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+            <ThresholdEntry
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+        </>
+    );
+};

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx

@@ -6,15 +6,14 @@ import {
 } from "@store";
 
 import { useVolume } from "@logics/useVolume";
-import { useConfig } from "@logics/useConfig";
 
 export const SliderAndMeter = (props) => {
     return (
         <div className={styles.container}>
             <div className={styles.meter_container}>
                 {props.id === "mic_threshold"
-                    ? <ThresholdVolumeMeter_Mic min={props.min} max={props.max}/>
+                    ? <ThresholdVolumeMeter_Mic {...props}/>
-                    : <ThresholdVolumeMeter_Speaker min={props.min} max={props.max}/>
+                    : <ThresholdVolumeMeter_Speaker {...props}/>
                 }
             </div>
             <DevSection {...props}/>
@@ -23,28 +22,22 @@ export const SliderAndMeter = (props) => {
 };
 
 
-const ThresholdVolumeMeter_Mic = ({min, max}) => {
+const ThresholdVolumeMeter_Mic = (props) => {
     const { currentMicVolume } = useMicVolume();
-    const { currentMicThreshold, setMicThreshold } = useConfig();
-    const [threshold, setThreshold] = useState(currentMicThreshold);
 
-    const currentVolumeVariable = Math.min(currentMicVolume.data, max);
+    const currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
-    const volume_width_percentage = (currentVolumeVariable / max) * 100;
+    const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
-
-    const onMOuseUpFunction = () => {
-        setMicThreshold(threshold);
-    };
 
     return (
         <>
-            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold}/>
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold}/>
             <input
                 type="range"
-                min={min}
+                min={props.min}
-                max={max}
+                max={props.max}
-                value={threshold}
+                value={props.ui_threshold}
-                onChange={(e) => setThreshold(e.target.value)}
+                onChange={(e) => props.setUiThresholdFunction(e.target.value)}
-                onMouseUp={() => onMOuseUpFunction()}
+                onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
                 className={styles.threshold_slider}
             />
         </>
@@ -52,28 +45,22 @@ const ThresholdVolumeMeter_Mic = ({min, max}) => {
 };
 
 
-const ThresholdVolumeMeter_Speaker = ({ min, max }) => {
+const ThresholdVolumeMeter_Speaker = (props) => {
     const { currentSpeakerVolume } = useSpeakerVolume();
-    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
-    const [threshold, setThreshold] = useState(currentSpeakerThreshold);
 
-    const currentVolumeVariable = Math.min(currentSpeakerVolume.data, max);
+    const currentVolumeVariable = Math.min(currentSpeakerVolume.data, props.max);
-    const volume_width_percentage = (currentVolumeVariable / max) * 100;
+    const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
-
-    const onMouseUpFunction = () => {
-        setSpeakerThreshold(threshold);
-    };
 
     return (
         <>
-            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold} />
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold} />
             <input
                 type="range"
-                min={min}
+                min={props.min}
-                max={max}
+                max={props.max}
-                value={threshold}
+                value={props.ui_threshold}
-                onChange={(e) => setThreshold(e.target.value)}
+                onChange={(e) => props.setUiThresholdFunction(e.target.value)}
-                onMouseUp={() => onMouseUpFunction()}
+                onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
                 className={styles.threshold_slider}
             />
         </>

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx

@@ -1,46 +1,42 @@
-import { useState, useEffect } from "react";
 import styles from "./ThresholdEntry.module.scss";
-import { useConfig } from "@logics/useConfig";
 
 export const ThresholdEntry = (props) => {
     return (
         <div className={styles.container}>
             <div className={styles.entry_wrapper}>
                 {props.id === "mic_threshold"
-                    ? <ThresholdEntry_Mic />
+                    ? <ThresholdEntry_Mic {...props}/>
-                    : <ThresholdEntry_Speaker />
+                    : <ThresholdEntry_Speaker {...props}/>
                 }
             </div>
         </div>
     );
 };
 
-const ThresholdEntry_Mic = () => {
+const ThresholdEntry_Mic = (props) => {
-    const { currentMicThreshold, setMicThreshold } = useConfig();
     const onChangeFunction = (e) => {
-        setMicThreshold(e.currentTarget.value);
+        props.setThresholdFunction(e.currentTarget.value);
     };
 
     return (
         <input
             className={styles.entry_input_area}
             onChange={onChangeFunction}
-            value={currentMicThreshold}
+            value={props.ui_threshold}
         />
     );
 };
 
-const ThresholdEntry_Speaker = () => {
+const ThresholdEntry_Speaker = (props) => {
-    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
     const onChangeFunction = (e) => {
-        setSpeakerThreshold(e.currentTarget.value);
+        props.setThresholdFunction(e.currentTarget.value);
     };
 
     return (
         <input
             className={styles.entry_input_area}
             onChange={onChangeFunction}
-            value={currentSpeakerThreshold}
+            value={props.ui_threshold}
         />
     );
 };