[Update/Perf] Config Page: Device Tab. Add threshold_component(dev).

Improve re-render, unnecessary, problem.

src-ui/app/config_page/ConfigPage.jsx

@@ -7,23 +7,24 @@ import { SettingSection } from "./setting_section/SettingSection.jsx";
 import { useSoftwareVersion  } from "@store";
 import { useTranslation } from "react-i18next";
 
-// import { useConfig } from "@logics/useConfig";
 export const ConfigPage = () => {
     const { currentSoftwareVersion } = useSoftwareVersion();
     const { t } = useTranslation();
 
     return (
-        <div className={styles.container}>
-            <Topbar />
-            <div className={styles.main_container}>
-                <SidebarSection />
-                <SettingSection />
+        <div className={styles.page}>
+            <div className={styles.container}>
+                <Topbar />
+                <div className={styles.main_container}>
+                    <SidebarSection />
+                    <SettingSection />
+                </div>
+                <p className={styles.software_version}>
+                    {
+                        t("config_page.version", {version: currentSoftwareVersion})
+                    }
+                </p>
             </div>
-            <p className={styles.software_version}>
-                {
-                    t("config_page.version", {version: currentSoftwareVersion})
-                }
-            </p>
         </div>
     );
 };

src-ui/app/config_page/ConfigPage.module.scss

@@ -1,3 +1,12 @@
+.page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+}
+
 .container {
     width: 100%;
     height: 100%;

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

@@ -1,18 +1,33 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import styles from "./SliderAndMeter.module.scss";
+import {
+    useMicVolume,
+} from "@store";
+
+import { useVolume } from "@logics/useVolume";
 
 export const SliderAndMeter = (props) => {
-    const [volume, setVolume] = useState(0);
     const [threshold, setThreshold] = useState(props.max / 2);
+    const { currentMicVolume, updateMicVolume } = useMicVolume();
 
     const updateVolume = () => {
-        setVolume(Math.random());
+        updateMicVolume(Math.random());
     };
 
-    // useEffect(() => {
-    //     const intervalId = setInterval(updateVolume, 200);
-    //     return () => clearInterval(intervalId);
-    // }, []);
+    const {
+        volumeCheckStart_Mic,
+        volumeCheckStop_Mic,
+    } = useVolume();
+
+    let currentVolumeVariable = null;
+    let volume_width_percentage = 0;
+
+    if (props.id === "mic_threshold") {
+        currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
+
+        volume_width_percentage = (currentVolumeVariable / props.max) * 100;
+    } else if (props.id === "speaker_threshold") {
+    }
 
     return (
         <div className={styles.container}>
@@ -20,8 +35,8 @@ export const SliderAndMeter = (props) => {
                 <div
                     className={styles.volume_meter}
                     style={{
-                        width: `${(volume * 100)}%`,
-                        backgroundColor: volume < (threshold / props.max) ? "var(--primary_750_color)" : "var(--primary_400_color)"
+                        width: `${volume_width_percentage}%`,
+                        backgroundColor: (currentVolumeVariable < threshold) ? "var(--primary_750_color)" : "var(--primary_400_color)"
                     }}
                 />
                 <input
@@ -35,9 +50,11 @@ export const SliderAndMeter = (props) => {
             </div>
             <div className={styles.dev_info_box}>
                 <p>dev</p>
-                <button onClick={updateVolume}>Update Volume</button>
+                <button onClick={() => volumeCheckStart_Mic()}>Start</button>
+                <button onClick={() => volumeCheckStop_Mic()}>Stop</button>
+                <button onClick={() => updateVolume()}>update volume</button>
                 <div className={styles.volume_info}>
-                    <span>Current Volume: {(volume * props.max).toFixed(2)}</span>
+                    <span>Current Volume: {(currentVolumeVariable)}</span>
                 </div>
                 <div className={styles.threshold_info}>
                     <span>Threshold: {threshold}</span>

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

@@ -1,24 +1,35 @@
+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 = (props) => {
+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_loading]: (currentState.state === "loading"),
         // [styles.is_hovered]: is_hovered,
         // [styles.is_mouse_down]: is_mouse_down,
     });
+    // const {
+    //     volumeCheckStart_Mic,
+    //     volumeCheckStop_Mic,
+    // } = useVolume();
 
 
     return (
+        // <div className={styles.container} onClick={() => volumeCheckStop_Mic()}>
         <div className={styles.container}>
             <div className={getClassNames(styles.button_button)}>
                 <SvgComponent className={getClassNames(styles.button_svg)} />
             </div>
         </div>
     );
-};
+});
+
+
+VolumeCheckButton.displayName = "VolumeCheckButton";

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -47,7 +47,7 @@ export const Device = () => {
                 setSelectedMicDevice(selected_data.selected_id);
                 break;
 
-                case "speaker_device":
+            case "speaker_device":
                 setSelectedSpeakerDevice(selected_data.selected_id);
                 break;
 
@@ -56,6 +56,13 @@ export const Device = () => {
         }
     };
 
+    // const volumeCheckStartFunction_Mic = () => {
+    //     volumeCheckStart_Mic();
+    // };
+    // const volumeCheckStopFunction_Mic = () => {
+    //     volumeCheckStop_Mic();
+    // };
+
 
     return (
         <>
@@ -79,6 +86,17 @@ export const Device = () => {
                 state={currentSelectedMicDevice.state}
             />
 
+            <ThresholdContainer
+                label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
+                desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
+                id="mic_threshold"
+                min="0"
+                max="2000"
+                // volumeCheckStartFunction={volumeCheckStartFunction_Mic}
+                // volumeCheckStopFunction={volumeCheckStopFunction_Mic}
+            />
+
+
             <DropdownMenuContainer
                 dropdown_id="speaker_device"
                 label={t("config_page.speaker_device.label")}
@@ -88,13 +106,14 @@ export const Device = () => {
                 openListFunction={getSpeakerDeviceList}
                 state={currentSelectedSpeakerDevice.state}
             />
-{/*
-            <ThresholdContainer label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")} desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")} id="mic_threshold"  min="0" max="3000"/>
 
-
-            <DropdownMenuContainer dropdown_id="speaker_device" label={t("config_page.speaker_device.label")}  selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} />
-
-            <ThresholdContainer label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")} desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")} id="speaker_threshold"  min="0" max="3000"/> */}
+            <ThresholdContainer
+                label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
+                desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
+                id="speaker_threshold"
+                min="0"
+                max="4000"
+            />
         </>
     );
 };