From ef5eb2fb400f3c5c0e7b7e9f7c9eb65dd8d824c3 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sat, 7 Sep 2024 21:32:44 +0900
Subject: [PATCH] [Update/Perf] Config Page: Device Tab. Add
 threshold_component(dev). Improve re-render, unnecessary, problem.

---
 src-ui/app/App.jsx                            | 29 ++++++------
 src-ui/app/App.module.scss                    | 29 +-----------
 src-ui/app/config_page/ConfigPage.jsx         | 23 +++++-----
 src-ui/app/config_page/ConfigPage.module.scss |  9 ++++
 .../slider_and_meter/SliderAndMeter.jsx       | 39 +++++++++++-----
 .../volume_check_button/VolumeCheckButton.jsx | 15 ++++++-
 .../setting_box/device/Device.jsx             | 33 +++++++++++---
 src-ui/app/main_page/MainPage.jsx             | 44 ++++++-------------
 src-ui/app/main_page/MainPage.module.scss     | 19 ++++++++
 src-ui/logics/useReceiveRoutes.js             |  6 ++-
 src-ui/logics/useStdoutToPython.js            |  2 +-
 src-ui/logics/useVolume.js                    | 22 ++++++++++
 src-ui/store.js                               |  3 ++
 13 files changed, 165 insertions(+), 108 deletions(-)
 create mode 100644 src-ui/logics/useVolume.js

diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 337d701f..03e80cad 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -1,4 +1,3 @@
-import { useIsOpenedConfigPage } from "@store";
 import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useRef } from "react";
 import { useStartPython } from "@logics/useStartPython";
@@ -6,14 +5,23 @@ import { useConfig } from "@logics/useConfig";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
 import styles from "./App.module.scss";
-import clsx from "clsx";
 
 export const App = () => {
+    return (
+        <div className={styles.container}>
+            <StartPythonFacadeComponent />
+            <ConfigPage />
+            <MainPage />
+        </div>
+    );
+};
+
+
+const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
 
-    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
     const {
         getSoftwareVersion,
         // getMicHostList,
@@ -23,6 +31,7 @@ export const App = () => {
         getSelectedSpeakerDevice,
     } = useConfig();
 
+
     useEffect(() => {
         main_page.setDecorations(true);
         if (!hasRunRef.current) {
@@ -40,17 +49,5 @@ export const App = () => {
         return () => hasRunRef.current = true;
     }, []);
 
-    return (
-        <div className={styles.container}>
-            <div className={clsx(styles.page, styles.config_page)}>
-                <ConfigPage />
-            </div>
-            <div className={clsx(styles.page, styles.main_page, {
-                [styles.show_config]: currentIsOpenedConfigPage,
-                [styles.show_main]: !currentIsOpenedConfigPage
-            })}>
-                <MainPage />
-            </div>
-        </div>
-    );
+    return null;
 };
\ No newline at end of file
diff --git a/src-ui/app/App.module.scss b/src-ui/app/App.module.scss
index 2e7e0e8b..94e71ee1 100644
--- a/src-ui/app/App.module.scss
+++ b/src-ui/app/App.module.scss
@@ -3,31 +3,4 @@
     width: 100%;
     height: 100vh;
     overflow: hidden;
-}
-
-.page {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    overflow: hidden;
-
-}
-
-.main_page {
-    // z-index: 1;
-    transition: transform 0.5s ease;
-}
-
-.config_page {
-    // z-index: 0;
-}
-
-.show_config.main_page {
-    transform: translateY(-100%);
-}
-
-.show_main.main_page {
-    transform: translateY(0);
-}
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/ConfigPage.jsx b/src-ui/app/config_page/ConfigPage.jsx
index fec94264..2756e520 100644
--- a/src-ui/app/config_page/ConfigPage.jsx
+++ b/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>
     );
 };
\ No newline at end of file
diff --git a/src-ui/app/config_page/ConfigPage.module.scss b/src-ui/app/config_page/ConfigPage.module.scss
index 81038037..16922d38 100644
--- a/src-ui/app/config_page/ConfigPage.module.scss
+++ b/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%;
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx
index e6e750a1..50a2d61b 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx
+++ b/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>
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx
index 309ac2e6..4ed584ed 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx
+++ b/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>
     );
-};
\ No newline at end of file
+});
+
+
+VolumeCheckButton.displayName = "VolumeCheckButton";
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
index 6059dbd4..731e288d 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/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"
+            />
         </>
     );
 };
\ No newline at end of file
diff --git a/src-ui/app/main_page/MainPage.jsx b/src-ui/app/main_page/MainPage.jsx
index e73788f2..66ee6bba 100644
--- a/src-ui/app/main_page/MainPage.jsx
+++ b/src-ui/app/main_page/MainPage.jsx
@@ -1,39 +1,21 @@
+import clsx from "clsx";
 import styles from "./MainPage.module.scss";
 import { SidebarSection } from "./sidebar_section/SidebarSection";
 import { MainSection } from "./main_section/MainSection";
+import { useIsOpenedConfigPage } from "@store";
 
 export const MainPage = () => {
+    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
+
     return (
-        <div className={styles.container}>
-            <SidebarSection />
-            <MainSection />
-            {/* <MainPageCover /> */}
+        <div className={clsx(styles.page, styles.main_page, {
+            [styles.show_config]: currentIsOpenedConfigPage,
+            [styles.show_main]: !currentIsOpenedConfigPage
+        })}>
+            <div className={styles.container}>
+                <SidebarSection />
+                <MainSection />
+            </div>
         </div>
     );
-};
-
-
-// import { useTranslation } from "react-i18next";
-// import { useIsOpenedConfigPage } from "@store";
-// import { useWindow } from "@logics/useWindow";
-
-// export const MainPageCover = () => {
-//     const { t } = useTranslation();
-//     const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
-//     const { closeConfigPage } = useWindow();
-//     if ( currentIsOpenedConfigPage === false) return null;
-
-//     const closeSettingsWindow = () => closeConfigPage();
-
-//     return (
-//         <div className={styles.main_page_cover}>
-//             <p className={styles.cover_message}>{t("main_page.cover_message")}</p>
-//             <button
-//             className={styles.close_settings_window_button}
-//             onClick={closeSettingsWindow}
-//             >
-//                 {t("main_page.close_settings_window")}
-//             </button>
-//         </div>
-//     );
-// };
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/MainPage.module.scss b/src-ui/app/main_page/MainPage.module.scss
index 20dbe41c..5ebadd16 100644
--- a/src-ui/app/main_page/MainPage.module.scss
+++ b/src-ui/app/main_page/MainPage.module.scss
@@ -1,3 +1,22 @@
+.page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    transition: transform 0.5s ease;
+}
+
+.show_config.main_page {
+    transform: translateY(-100%);
+}
+
+.show_main.main_page {
+    transform: translateY(0);
+}
+
+
 .container {
     width: 100%;
     height: 100%;
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index d3fee4b6..068838b4 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -1,6 +1,7 @@
 import { useMainFunction } from "./useMainFunction";
 import { useConfig } from "./useConfig";
 import { useMessage } from "./useMessage";
+import { useVolume } from "./useVolume";
 
 export const useReceiveRoutes = () => {
     const {
@@ -25,9 +26,10 @@ export const useReceiveRoutes = () => {
 
         updateSpeakerDeviceList,
         updateSelectedSpeakerDevice,
-
     } = useConfig();
 
+    const { updateVolumeVariable_Mic } = useVolume();
+
     const routes = {
         "/controller/callback_enable_translation": updateTranslationStatus,
         "/controller/callback_disable_translation": updateTranslationStatus,
@@ -51,6 +53,8 @@ export const useReceiveRoutes = () => {
         "/config/choice_speaker_device": updateSelectedSpeakerDevice,
         "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
 
+        "/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
+
 
         "/controller/callback_messagebox_send": updateSentMessageLog,
         "/action/transcription_send_mic_message": addSentMessageLog,
diff --git a/src-ui/logics/useStdoutToPython.js b/src-ui/logics/useStdoutToPython.js
index 03dc39a7..3c852726 100644
--- a/src-ui/logics/useStdoutToPython.js
+++ b/src-ui/logics/useStdoutToPython.js
@@ -1,5 +1,5 @@
 import { store } from "@store";
-import { encode } from 'js-base64'
+import { encode } from "js-base64";
 
 export const useStdoutToPython = () => {
     const asyncStdoutToPython = async (path, value) => {
diff --git a/src-ui/logics/useVolume.js b/src-ui/logics/useVolume.js
new file mode 100644
index 00000000..eb8d5846
--- /dev/null
+++ b/src-ui/logics/useVolume.js
@@ -0,0 +1,22 @@
+import {
+    useMicVolume,
+} from "@store";
+
+import { useStdoutToPython } from "./useStdoutToPython";
+
+
+export const useVolume = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateMicVolume } = useMicVolume();
+
+    // const asyncPending = () => new Promise(() => {});
+    return {
+        volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
+        volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
+        updateVolumeVariable_Mic: (payload) => {
+            updateMicVolume(payload.data);
+        }
+
+
+    };
+};
\ No newline at end of file
diff --git a/src-ui/store.js b/src-ui/store.js
index 553d2e75..0bafb5d0 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -124,6 +124,9 @@ export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevi
 export const { atomInstance: Atom_SpeakerDeviceList, useHook: useSpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
 export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
 
+export const { atomInstance: Atom_MicVolume, useHook: useMicVolume } = createAsyncAtomWithHook(0, "MicVolume");
+export const { atomInstance: Atom_SpeakerVolume, useHook: useSpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
+
 export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
     before: "",
     after: "",