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

Improve re-render, unnecessary, problem.
2024-09-07 21:32:44 +09:00
parent 480d0f3f11
commit ef5eb2fb40
13 changed files with 165 additions and 108 deletions
--- 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;
 };
--- 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);
-}
+}
--- 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>
    );
 };
--- 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%;
--- 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>
--- 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>
    );
-};
+});
+
+
+VolumeCheckButton.displayName = "VolumeCheckButton";
--- 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"
+            />
        </>
    );
 };
--- 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>
-//     );
-// };
+};
--- 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%;
--- 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,
--- 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) => {
--- a/src-ui/logics/useVolume.js
+++ 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);
+        }
+
+
+    };
+};
--- 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: "",