From b12908f01f6d33c79273461367995472f8c2af50 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Thu, 12 Sep 2024 15:43:16 +0900 Subject: [PATCH] [Update] Config Page: Device Tab. Add dynamic energy threshold functionally and sync slider and entry component. --- src-ui/app/App.jsx | 6 +- .../components/switchbox/Switchbox.jsx | 25 +++--- .../switchbox/Switchbox.module.scss | 7 ++ .../ThresholdComponent.jsx | 46 +++++++++-- .../slider_and_meter/SliderAndMeter.jsx | 49 +++++++----- .../threshold_entry/ThresholdEntry.jsx | 13 ++- .../ThresholdEntry.module.scss | 5 ++ .../setting_box/components/useSettingBox.jsx | 26 +++--- .../components/useSettingBox.module.scss | 34 ++++---- .../setting_box/device/Device.jsx | 80 +++++++++++++++---- .../setting_box/device/Device.module.scss | 25 ++++++ src-ui/logics/configs/useMicThreshold.js | 22 ++++- src-ui/logics/configs/useSpeakerThreshold.js | 22 ++++- src-ui/logics/useReceiveRoutes.js | 12 ++- src-ui/store.js | 2 + src-ui/utils/mixins.scss | 3 + 16 files changed, 282 insertions(+), 95 deletions(-) diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 8cd46ab6..c085683f 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -35,8 +35,8 @@ const StartPythonFacadeComponent = () => { const { getSelectedMicHost } = useSelectedMicHost(); const { getSelectedMicDevice } = useSelectedMicDevice(); const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice(); - const { getMicThreshold } = useMicThreshold(); - const { getSpeakerThreshold } = useSpeakerThreshold(); + const { getMicThreshold, getEnableAutomaticMicThreshold } = useMicThreshold(); + const { getSpeakerThreshold, getEnableAutomaticSpeakerThreshold } = useSpeakerThreshold(); const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); const { getSendMessageButtonType } = useSendMessageButtonType(); @@ -52,6 +52,8 @@ const StartPythonFacadeComponent = () => { getMicThreshold(); getSpeakerThreshold(); + getEnableAutomaticMicThreshold(); + getEnableAutomaticSpeakerThreshold(); getEnableAutoClearMessageBox(); getSendMessageButtonType(); diff --git a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx index f8b16f1e..f9fc0977 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx @@ -3,14 +3,14 @@ import { useState } from "react"; import styles from "./Switchbox.module.scss"; export const Switchbox = (props) => { - - const [is_turned_on, setIsTurnedOn] = useState(false); const [is_hovered, setIsHovered] = useState(false); const [is_mouse_down, setIsMouseDown] = useState(false); - const getClassNames = (baseClass) => clsx(baseClass, { - [styles.is_active]: (is_turned_on === true), - // [styles.is_loading]: (currentState.state === "loading"), + const is_loading = (props.variable.state === "loading"); + + const getClassNames = (base_class) => clsx(base_class, { + [styles.is_active]: (props.variable.data === true), + [styles.is_loading]: is_loading, [styles.is_hovered]: is_hovered, [styles.is_mouse_down]: is_mouse_down, }); @@ -21,21 +21,22 @@ export const Switchbox = (props) => { const onMouseUp = () => setIsMouseDown(false); const toggleFunction = () => { - setIsTurnedOn(!is_turned_on); + props.toggleFunction(); }; return (
-
+ {is_loading && }
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss index 1f7f7c83..2c69fe8f 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss @@ -15,6 +15,9 @@ cursor: pointer; padding: 2rem; height: 100%; + &.is_loading { + pointer-events: none; + } } .toggle_control { @@ -22,4 +25,8 @@ display: flex; justify-content: center; align-items: center; +} + +.loader { + @include loader(2rem, 0.2rem, right, -4rem); } \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx index f10c114e..5c5d07e2 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx @@ -17,14 +17,26 @@ export const ThresholdComponent = (props) => { import MicSvg from "@images/mic.svg?react"; import { useMicThreshold } from "@logics_configs/useMicThreshold"; const MicComponent = (props) => { - const { currentMicThreshold, setMicThreshold } = useMicThreshold(); + const { + currentMicThreshold, + setMicThreshold, + currentEnableAutomaticMicThreshold, + } = useMicThreshold(); const [ui_threshold, setUiThreshold] = useState(currentMicThreshold); - const {volumeCheckStart_Mic, volumeCheckStop_Mic, currentMicThresholdCheckStatus } = useVolume(); + const { + volumeCheckStart_Mic, + volumeCheckStop_Mic, + currentMicThresholdCheckStatus, + } = useVolume(); useEffect(() => { - setUiThreshold(currentMicThreshold); - }, [currentMicThreshold]); + if (currentEnableAutomaticMicThreshold.data === true) { + setUiThreshold("Auto"); + } else { + setUiThreshold(currentMicThreshold); + } + }, [currentMicThreshold, currentEnableAutomaticMicThreshold]); const setUiThresholdFunction = (payload_ui_threshold) => { setUiThreshold(payload_ui_threshold); @@ -33,6 +45,8 @@ const MicComponent = (props) => { setMicThreshold(payload_threshold); }; + const is_disable = currentEnableAutomaticMicThreshold.data === true ? true : false; + return ( <> { ui_threshold={ui_threshold} setUiThresholdFunction={setUiThresholdFunction} setThresholdFunction={setThresholdFunction} + is_disable={is_disable} /> ); @@ -60,13 +75,25 @@ const MicComponent = (props) => { import HeadphonesSvg from "@images/headphones.svg?react"; import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold"; const SpeakerComponent = (props) => { - const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold(); + const { + currentSpeakerThreshold, + setSpeakerThreshold, + currentEnableAutomaticSpeakerThreshold, + } = useSpeakerThreshold(); const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold); - const {volumeCheckStart_Speaker, volumeCheckStop_Speaker, currentSpeakerThresholdCheckStatus } = useVolume(); + const { + volumeCheckStart_Speaker, + volumeCheckStop_Speaker, + currentSpeakerThresholdCheckStatus, + } = useVolume(); useEffect(() => { - setUiThreshold(currentSpeakerThreshold); - }, [currentSpeakerThreshold]); + if (currentEnableAutomaticSpeakerThreshold.data === true) { + setUiThreshold("Auto"); + } else { + setUiThreshold(currentSpeakerThreshold); + } + }, [currentSpeakerThreshold, currentEnableAutomaticSpeakerThreshold]); const setUiThresholdFunction = (payload_ui_threshold) => { setUiThreshold(payload_ui_threshold); @@ -75,6 +102,8 @@ const SpeakerComponent = (props) => { setSpeakerThreshold(payload_threshold); }; + const is_disable = currentEnableAutomaticSpeakerThreshold.data === true ? true : false; + return ( <> { ui_threshold={ui_threshold} setUiThresholdFunction={setUiThresholdFunction} setThresholdFunction={setThresholdFunction} + is_disable={is_disable} /> ); 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 bb3e2dcf..6fbe0c1b 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,4 +1,3 @@ -import { useState } from "react"; import styles from "./SliderAndMeter.module.scss"; import { useStore_MicVolume, @@ -18,48 +17,56 @@ export const SliderAndMeter = (props) => { ); }; - +import { useMicThreshold } from "@logics_configs/useMicThreshold"; const ThresholdVolumeMeter_Mic = (props) => { const { currentMicVolume } = useStore_MicVolume(); + const { currentEnableAutomaticMicThreshold } = useMicThreshold(); + const currentVolumeVariable = Math.min(currentMicVolume.data, props.max); const volume_width_percentage = (currentVolumeVariable / props.max) * 100; return ( <> - props.setUiThresholdFunction(e.target.value)} - onMouseUp={(e) => props.setThresholdFunction(e.target.value)} - className={styles.threshold_slider} - /> + {currentEnableAutomaticMicThreshold.data === false && + props.setUiThresholdFunction(e.target.value)} + onMouseUp={(e) => props.setThresholdFunction(e.target.value)} + className={styles.threshold_slider} + /> + } ); }; - +import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold"; const ThresholdVolumeMeter_Speaker = (props) => { const { currentSpeakerVolume } = useStore_SpeakerVolume(); + const { currentEnableAutomaticSpeakerThreshold } = useSpeakerThreshold(); + const currentVolumeVariable = Math.min(currentSpeakerVolume.data, props.max); const volume_width_percentage = (currentVolumeVariable / props.max) * 100; return ( <> - props.setUiThresholdFunction(e.target.value)} - onMouseUp={(e) => props.setThresholdFunction(e.target.value)} - className={styles.threshold_slider} - /> + {currentEnableAutomaticSpeakerThreshold.data === false && + props.setUiThresholdFunction(e.target.value)} + onMouseUp={(e) => props.setThresholdFunction(e.target.value)} + className={styles.threshold_slider} + /> + } ); }; diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx index 9b5b5e62..cb7b010c 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx @@ -1,3 +1,4 @@ +import clsx from "clsx"; import styles from "./ThresholdEntry.module.scss"; export const ThresholdEntry = (props) => { @@ -22,9 +23,13 @@ const ThresholdEntry_Mic = (props) => { } }; + const class_names = clsx(styles.entry_input_area, { + [styles.is_disable]: props.is_disable + }); + return ( @@ -40,9 +45,13 @@ const ThresholdEntry_Speaker = (props) => { } }; + const class_names = clsx(styles.entry_input_area, { + [styles.is_disable]: props.is_disable + }); + return ( diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss index 2f6a2522..d2378d03 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss @@ -15,4 +15,9 @@ height: 100%; font-size: 1.4rem; resize: none; + color: var(--dark_basic_text_color); + &.is_disable { + color: var(--dark_500_color); + pointer-events: none; + } } \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx index ad536482..5d6f0982 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx @@ -38,19 +38,19 @@ export const DropdownMenuContainer = (props) => { }; -export const ThresholdContainer = (props) => { - return ( -
-
- - -
-
- -
-
- ); -}; +// export const ThresholdContainer = (props) => { +// return ( +//
+//
+// +// +//
+//
+// +//
+//
+// ); +// }; export const useSettingBox = () => { diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss index 95e7f89d..8eb56996 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss @@ -17,25 +17,25 @@ width: 100%; } -.threshold_container { - display: flex; - width: 100%; - flex-direction: column; - justify-content: space-between; - align-items: center; - gap: 2rem; -} +// .threshold_container { +// display: flex; +// width: 100%; +// flex-direction: column; +// justify-content: space-between; +// align-items: center; +// gap: 2rem; +// } -.threshold_switch_section { - display: flex; - width: 100%; - justify-content: space-between; - align-items: center; -} +// .threshold_switch_section { +// display: flex; +// width: 100%; +// justify-content: space-between; +// align-items: center; +// } -.threshold_section { - width: 100%; -} +// .threshold_section { +// width: 100%; +// } .deepl_auth_key_label_section { max-width: 34rem; 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 83942a2c..6bfee05f 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 @@ -1,7 +1,6 @@ import { useTranslation } from "react-i18next"; import styles from "./Device.module.scss"; import { - ThresholdContainer, useOnMouseLeaveDropdownMenu, } from "../components/useSettingBox"; export const Device = () => { @@ -18,16 +17,19 @@ import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost"; import { useMicDeviceList } from "@logics_configs/useMicDeviceList"; import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice"; +import { useMicThreshold } from "@logics_configs/useMicThreshold"; import { LabelComponent } from "../components/label_component/LabelComponent"; import { DropdownMenu } from "../components/dropdown_menu/DropdownMenu"; +import { ThresholdComponent } from "../components/threshold_component/ThresholdComponent"; +import { Switchbox } from "../components/switchbox/Switchbox"; const Mic_Container = () => { const { t } = useTranslation(); const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost(); const { currentMicHostList, getMicHostList } = useMicHostList(); const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu(); - + const { currentEnableAutomaticMicThreshold, toggleEnableAutomaticMicThreshold } = useMicThreshold(); const selectFunction_host = (selected_data) => { setSelectedMicHost(selected_data.selected_id); @@ -40,6 +42,20 @@ const Mic_Container = () => { setSelectedMicDevice(selected_data.selected_id); }; + const getLabels = () => { + if (currentEnableAutomaticMicThreshold.data === true) { + return { + label: t("config_page.mic_dynamic_energy_threshold.label_for_automatic"), + desc: t("config_page.mic_dynamic_energy_threshold.desc_for_automatic"), + }; + } else { + return { + label: t("config_page.mic_dynamic_energy_threshold.label_for_manual"), + desc: t("config_page.mic_dynamic_energy_threshold.desc_for_manual"), + }; + } + + }; return (
@@ -73,13 +89,20 @@ const Mic_Container = () => {
- +
+ + +
+
+ +
); @@ -87,16 +110,34 @@ const Mic_Container = () => { import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList"; import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice"; +import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold"; + const Speaker_Container = () => { const { t } = useTranslation(); const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice(); const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList(); const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu(); + const { currentEnableAutomaticSpeakerThreshold, toggleEnableAutomaticSpeakerThreshold } = useSpeakerThreshold(); const selectFunction = (selected_data) => { setSelectedSpeakerDevice(selected_data.selected_id); }; + const getLabels = () => { + if (currentEnableAutomaticSpeakerThreshold.data === true) { + return { + label: t("config_page.speaker_dynamic_energy_threshold.label_for_automatic"), + desc: t("config_page.speaker_dynamic_energy_threshold.desc_for_automatic"), + }; + } else { + return { + label: t("config_page.speaker_dynamic_energy_threshold.label_for_manual"), + desc: t("config_page.speaker_dynamic_energy_threshold.desc_for_manual"), + }; + } + + }; + return (
@@ -116,13 +157,20 @@ const Speaker_Container = () => {
- +
+ + +
+
+ +
); diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss index 92155b7b..1e2f9117 100644 --- a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss @@ -22,6 +22,31 @@ padding: 2rem; } + + +.threshold_container { + display: flex; + width: 100%; + flex-direction: column; + justify-content: space-between; + align-items: center; + gap: 2rem; +} + +.threshold_switch_section { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; +} + +.threshold_section { + width: 100%; +} + + + + .device_label { font-size: 1.8rem; color: var(--dark_basic_text_color); diff --git a/src-ui/logics/configs/useMicThreshold.js b/src-ui/logics/configs/useMicThreshold.js index 14b2a91c..0a850f88 100644 --- a/src-ui/logics/configs/useMicThreshold.js +++ b/src-ui/logics/configs/useMicThreshold.js @@ -1,9 +1,10 @@ -import { useStore_MicThreshold } from "@store"; +import { useStore_MicThreshold, useStore_EnableAutomaticMicThreshold } from "@store"; import { useStdoutToPython } from "@logics/useStdoutToPython"; export const useMicThreshold = () => { const { asyncStdoutToPython } = useStdoutToPython(); const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold(); + const { updateEnableAutomaticMicThreshold, currentEnableAutomaticMicThreshold } = useStore_EnableAutomaticMicThreshold(); const getMicThreshold = () => { asyncStdoutToPython("/config/input_mic_energy_threshold"); @@ -13,10 +14,29 @@ export const useMicThreshold = () => { asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold); }; + const getEnableAutomaticMicThreshold = () => { + updateEnableAutomaticMicThreshold(() => new Promise(() => {})); + asyncStdoutToPython("/config/input_mic_dynamic_energy_threshold"); + }; + + const toggleEnableAutomaticMicThreshold = () => { + updateEnableAutomaticMicThreshold(() => new Promise(() => {})); + if (currentEnableAutomaticMicThreshold.data) { + asyncStdoutToPython("/controller/callback_disable_mic_dynamic_energy_threshold"); + } else { + asyncStdoutToPython("/controller/callback_enable_mic_dynamic_energy_threshold"); + } + }; + return { currentMicThreshold, getMicThreshold, setMicThreshold, updateMicThreshold, + + currentEnableAutomaticMicThreshold, + getEnableAutomaticMicThreshold, + toggleEnableAutomaticMicThreshold, + updateEnableAutomaticMicThreshold, }; }; \ No newline at end of file diff --git a/src-ui/logics/configs/useSpeakerThreshold.js b/src-ui/logics/configs/useSpeakerThreshold.js index f30c4382..74c2307b 100644 --- a/src-ui/logics/configs/useSpeakerThreshold.js +++ b/src-ui/logics/configs/useSpeakerThreshold.js @@ -1,9 +1,10 @@ -import { useStore_SpeakerThreshold } from "@store"; +import { useStore_SpeakerThreshold, useStore_EnableAutomaticSpeakerThreshold } from "@store"; import { useStdoutToPython } from "@logics/useStdoutToPython"; export const useSpeakerThreshold = () => { const { asyncStdoutToPython } = useStdoutToPython(); const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold(); + const { updateEnableAutomaticSpeakerThreshold, currentEnableAutomaticSpeakerThreshold } = useStore_EnableAutomaticSpeakerThreshold(); const getSpeakerThreshold = () => { asyncStdoutToPython("/config/input_speaker_energy_threshold"); @@ -13,10 +14,29 @@ export const useSpeakerThreshold = () => { asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold); }; + const getEnableAutomaticSpeakerThreshold = () => { + updateEnableAutomaticSpeakerThreshold(() => new Promise(() => {})); + asyncStdoutToPython("/config/input_speaker_dynamic_energy_threshold"); + }; + + const toggleEnableAutomaticSpeakerThreshold = () => { + updateEnableAutomaticSpeakerThreshold(() => new Promise(() => {})); + if (currentEnableAutomaticSpeakerThreshold.data) { + asyncStdoutToPython("/controller/callback_disable_speaker_dynamic_energy_threshold"); + } else { + asyncStdoutToPython("/controller/callback_enable_speaker_dynamic_energy_threshold"); + } + }; + return { currentSpeakerThreshold, getSpeakerThreshold, setSpeakerThreshold, updateSpeakerThreshold, + + currentEnableAutomaticSpeakerThreshold, + getEnableAutomaticSpeakerThreshold, + toggleEnableAutomaticSpeakerThreshold, + updateEnableAutomaticSpeakerThreshold, }; }; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index badd556b..fe05b0b1 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -36,8 +36,10 @@ export const useReceiveRoutes = () => { const { updateSelectedMicDevice } = useSelectedMicDevice(); const { updateSpeakerDeviceList } = useSpeakerDeviceList(); const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice(); - const { updateMicThreshold } = useMicThreshold(); - const { updateSpeakerThreshold } = useSpeakerThreshold(); + + const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold(); + const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold(); + const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); const { updateSendMessageButtonType } = useSendMessageButtonType(); @@ -94,6 +96,12 @@ export const useReceiveRoutes = () => { "/config/input_speaker_energy_threshold": updateSpeakerThreshold, "/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold, + "/config/input_mic_dynamic_energy_threshold": updateEnableAutomaticMicThreshold, + "/controller/callback_enable_mic_dynamic_energy_threshold": updateEnableAutomaticMicThreshold, + "/controller/callback_disable_mic_dynamic_energy_threshold": updateEnableAutomaticMicThreshold, + "/config/input_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold, + "/controller/callback_enable_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold, + "/controller/callback_disable_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold, "/controller/callback_messagebox_send": updateSentMessageLogById, "/action/transcription_send_mic_message": addSentMessageLog, diff --git a/src-ui/store.js b/src-ui/store.js index 9a161d83..9fc296c1 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -133,6 +133,8 @@ export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold"); export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold"); +export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticMicThreshold"); +export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticSpeakerThreshold"); export const { atomInstance: Atom_SendMessageFormat, useHook: useStore_SendMessageFormat } = createAtomWithHook({ before: "", diff --git a/src-ui/utils/mixins.scss b/src-ui/utils/mixins.scss index c1776870..72420f7f 100644 --- a/src-ui/utils/mixins.scss +++ b/src-ui/utils/mixins.scss @@ -76,6 +76,9 @@ $toggle_control_size: $toggle_height - calc($toggle_gutter * 2); background: $toggle_control_color; transition: left $toggle_control_speed $toggle_control_ease; } + &.is_loading:after{ + background-color: var(--dark_600_color); + } &.is_hovered { background-color: var(--dark_725_color); }