[Update] Config Page: Device Tab. Threshold section. Add check volume button and remove dev component.

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

@@ -3,11 +3,10 @@ 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 { useVolume } from "@logics/useVolume";
 export const ThresholdComponent = (props) => {
     return (
         <div className={styles.container}>
-            <VolumeCheckButton {...props} />
             {props.id === "mic_threshold"
                 ? <MicComponent {...props} />
                 : <SpeakerComponent {...props} />
@@ -15,11 +14,13 @@ export const ThresholdComponent = (props) => {
         </div>
     );
 };
-
+import MicSvg from "@images/mic.svg?react";
 import { useMicThreshold } from "@logics_configs/useMicThreshold";
 const MicComponent = (props) => {
     const { currentMicThreshold, setMicThreshold } = useMicThreshold();
     const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
+    const {volumeCheckStart_Mic, volumeCheckStop_Mic, currentMicThresholdCheckStatus } = useVolume();
+
 
     useEffect(() => {
         setUiThreshold(currentMicThreshold);
@@ -34,6 +35,13 @@ const MicComponent = (props) => {
 
     return (
         <>
+            <VolumeCheckButton
+                {...props}
+                SvgComponent={MicSvg}
+                startFunction={volumeCheckStart_Mic}
+                stopFunction={volumeCheckStop_Mic}
+                isChecking={currentMicThresholdCheckStatus}
+            />
             <SliderAndMeter
                 {...props}
                 ui_threshold={ui_threshold}
@@ -49,11 +57,12 @@ const MicComponent = (props) => {
         </>
     );
 };
-
+import HeadphonesSvg from "@images/headphones.svg?react";
 import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
 const SpeakerComponent = (props) => {
     const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold();
     const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
+    const {volumeCheckStart_Speaker, volumeCheckStop_Speaker, currentSpeakerThresholdCheckStatus } = useVolume();
 
     useEffect(() => {
         setUiThreshold(currentSpeakerThreshold);
@@ -68,6 +77,13 @@ const SpeakerComponent = (props) => {
 
     return (
         <>
+            <VolumeCheckButton
+                {...props}
+                SvgComponent={HeadphonesSvg}
+                startFunction={volumeCheckStart_Speaker}
+                stopFunction={volumeCheckStop_Speaker}
+                isChecking={currentSpeakerThresholdCheckStatus}
+            />
             <SliderAndMeter
                 {...props}
                 ui_threshold={ui_threshold}

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

@@ -3,5 +3,5 @@
     width: 100%;
     justify-content: space-between;
     align-items: center;
-    gap: 3rem;
+    gap: 2rem;
 }

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

@@ -5,8 +5,6 @@ import {
     useStore_SpeakerVolume,
 } from "@store";
 
-import { useVolume } from "@logics/useVolume";
-
 export const SliderAndMeter = (props) => {
     return (
         <div className={styles.container}>
@@ -16,7 +14,6 @@ export const SliderAndMeter = (props) => {
                     : <ThresholdVolumeMeter_Speaker {...props}/>
                 }
             </div>
-            <DevSection {...props}/>
         </div>
     );
 };
@@ -80,44 +77,4 @@ const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => {
             }}
         />
     );
-};
-
-
-const DevSection = (props) => {
-    const {
-        volumeCheckStart_Mic,
-        volumeCheckStop_Mic,
-        volumeCheckStart_Speaker,
-        volumeCheckStop_Speaker,
-    } = useVolume();
-
-    const volumeCheckStart = () => {
-        if (props.id === "mic_threshold") {
-            volumeCheckStart_Mic();
-        } else if (props.id === "speaker_threshold") {
-            volumeCheckStart_Speaker();
-        }
-    };
-
-    const volumeCheckStop = () => {
-        if (props.id === "mic_threshold") {
-            volumeCheckStop_Mic();
-        } else if (props.id === "speaker_threshold") {
-            volumeCheckStop_Speaker();
-        }
-    };
-
-    return (
-        <div className={styles.dev_info_box}>
-            <p>dev</p>
-            <button className={styles.volume_check_button} onClick={() => volumeCheckStart()}>Start</button>
-            <button className={styles.volume_check_button} onClick={() => volumeCheckStop()}>Stop</button>
-            <div className={styles.volume_info}>
-                {/* <span>Current Volume: {(currentVolumeVariable)}</span> */}
-            </div>
-            <div className={styles.threshold_info}>
-                {/* <span>Threshold: {props.threshold}</span> */}
-            </div>
-        </div>
-    );
 };

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

@@ -52,33 +52,4 @@
     &:focus {
         outline: none;
     }
-}
-
-
-
-
-//  for dev
-.dev_info_box {
-    position: absolute;
-    top: -4rem;
-    display: flex;
-    gap: 2rem
-}
-
-
-
-.volume_info, .threshold_info {
-    font-size: 1.2rem;
-}
-
-
-
-.volume_check_button {
-    font-size: 1.4rem;
-    background-color: var(--dark_800_color);
-    padding: 1rem;
-    cursor: pointer;
-    &:hover {
-        background-color: var(--dark_775_color);
-    }
 }

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

@@ -2,7 +2,7 @@
 }
 
 .entry_wrapper {
-    width: 10rem;
+    width: 6rem;
     height: 100%;
     padding: 0.6rem;
     background-color: var(--dark_875_color);

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

@@ -1,31 +1,27 @@
 import React from "react";
 import styles from "./VolumeCheckButton.module.scss";
-import MicSvg from "@images/mic.svg?react";
-import HeadphonesSvg from "@images/headphones.svg?react";
 import clsx from "clsx";
-// import { useVolume } from "@logics/useVolume";
 
 export const VolumeCheckButton = React.memo((props) => {
-    const SvgComponent = props.id === "mic_threshold" ? MicSvg : HeadphonesSvg;
-
-
     const getClassNames = (baseClass) => clsx(baseClass, {
-        // [styles.is_active]: (currentState.data === true),
+        [styles.is_active]: (props.isChecking?.data === true),
-        // [styles.is_loading]: (currentState.state === "loading"),
+        [styles.is_loading]: (props.isChecking.state === "loading"),
-        // [styles.is_hovered]: is_hovered,
-        // [styles.is_mouse_down]: is_mouse_down,
     });
-    // const {
+
-    //     volumeCheckStart_Mic,
+    const toggleFunction = () => {
-    //     volumeCheckStop_Mic,
+        if (props.isChecking?.data === true) {
-    // } = useVolume();
+            props.stopFunction();
+        } else if (props.isChecking?.data === false) {
+            props.startFunction();
+        }
+    };
 
 
     return (
-        // <div className={styles.container} onClick={() => volumeCheckStop_Mic()}>
         <div className={styles.container}>
-            <div className={getClassNames(styles.button_button)}>
+            <div className={getClassNames(styles.button)} onClick={toggleFunction}>
-                <SvgComponent className={getClassNames(styles.button_svg)} />
+                <props.SvgComponent className={styles.button_svg} />
+                <p className={styles.button_text}>Check Volume</p>
             </div>
         </div>
     );

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss

@@ -1,14 +1,45 @@
-.button_button {
+.button {
     width: 100%;
     background-color: var(--dark_800_color);
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 1rem;
+    padding: 0.8rem 1rem;
-    border-radius: 50%;
+    border-radius: 0.4rem;
+    gap: 0.4rem;
+    cursor: pointer;
+    &.is_active {
+        background-color: var(--primary_500_color);
+        &:hover {
+            background-color: var(--primary_450_color);
+        }
+        &:active {
+            background-color: var(--primary_550_color);
+        }
+    }
+    &.is_loading {
+        background-color: var(--dark_850_color);
+        pointer-events: none;
+        .button_svg, .button_text {
+            color: var(--dark_500_color);
+        }
+    }
+
+
+    &:hover {
+        background-color: var(--dark_775_color);
+    }
+    &:active {
+        background-color: var(--dark_850_color);
+    }
 }
 
 .button_svg {
-    width: 2.6rem;
+    width: 1.4rem;
     color: var(--dark_350_color);
+}
+
+.button_text {
+    font-size: 1.2rem;
+    color: var(--dark_basic_text_color);
 }

src-ui/logics/useReceiveRoutes.js

@@ -42,7 +42,12 @@ export const useReceiveRoutes = () => {
     const { updateSendMessageButtonType } = useSendMessageButtonType();
 
 
-    const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
+    const {
+        updateVolumeVariable_Mic,
+        updateVolumeVariable_Speaker,
+        updateMicThresholdCheckStatus,
+        updateSpeakerThresholdCheckStatus,
+    } = useVolume();
 
     const routes = {
         "/controller/callback_enable_translation": updateTranslationStatus,
@@ -72,6 +77,10 @@ export const useReceiveRoutes = () => {
 
         "/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
         "/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
+        "/controller/callback_enable_check_mic_threshold": () => updateMicThresholdCheckStatus(true),
+        "/controller/callback_disable_check_mic_threshold": () => updateMicThresholdCheckStatus(false),
+        "/controller/callback_enable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(true),
+        "/controller/callback_disable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(false),
 
         "/config/enable_auto_clear_message_box": updateEnableAutoClearMessageBox,
         "/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,

src-ui/logics/useVolume.js

@@ -1,6 +1,8 @@
 import {
     useStore_MicVolume,
     useStore_SpeakerVolume,
+    useStore_MicThresholdCheckStatus,
+    useStore_SpeakerThresholdCheckStatus,
 } from "@store";
 
 import { useStdoutToPython } from "@logics/useStdoutToPython";
@@ -9,19 +11,38 @@ export const useVolume = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateMicVolume } = useStore_MicVolume();
     const { updateSpeakerVolume } = useStore_SpeakerVolume();
+    const { currentMicThresholdCheckStatus, updateMicThresholdCheckStatus } = useStore_MicThresholdCheckStatus();
+    const { currentSpeakerThresholdCheckStatus, updateSpeakerThresholdCheckStatus } = useStore_SpeakerThresholdCheckStatus();
 
+    const asyncPending = () => new Promise(() => {});
     return {
-        volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
+        volumeCheckStart_Mic: () => {
-        volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
+            updateMicThresholdCheckStatus(asyncPending);
+            asyncStdoutToPython("/controller/callback_enable_check_mic_threshold");
+        },
+        volumeCheckStop_Mic: () => {
+            updateMicThresholdCheckStatus(asyncPending);
+            asyncStdoutToPython("/controller/callback_disable_check_mic_threshold");
+        },
         updateVolumeVariable_Mic: (payload) => {
             updateMicVolume(payload);
         },
+        currentMicThresholdCheckStatus: currentMicThresholdCheckStatus,
+        updateMicThresholdCheckStatus: (payload) => updateMicThresholdCheckStatus(payload),
 
-        volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"),
+        volumeCheckStart_Speaker: () => {
-        volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"),
+            updateSpeakerThresholdCheckStatus(asyncPending);
+            asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold");
+        },
+        volumeCheckStop_Speaker: () => {
+            updateSpeakerThresholdCheckStatus(asyncPending);
+            asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold");
+        },
         updateVolumeVariable_Speaker: (payload) => {
             updateSpeakerVolume(payload);
         },
+        currentSpeakerThresholdCheckStatus: currentSpeakerThresholdCheckStatus,
+        updateSpeakerThresholdCheckStatus: (payload) => updateSpeakerThresholdCheckStatus(payload),
 
     };
 };

src-ui/store.js

@@ -127,6 +127,9 @@ export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_Selec
 export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAsyncAtomWithHook(0, "MicVolume");
 export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
 
+export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAsyncAtomWithHook(false, "MicThresholdCheckStatus");
+export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAsyncAtomWithHook(false, "SpeakerThresholdCheckStatus");
+
 export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold");
 export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");