From ac6b898a460d6c3c77c65eedff39cd4eb8055c70 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Tue, 10 Sep 2024 17:21:03 +0900 Subject: [PATCH] [Perf/bugfix] Separate custom hooks and prevent re-render issues. Config Page: Device Tab. threshold component. fix problem that the input component focused out when input something each time. Set threshold data when started python. --- src-ui/app/App.jsx | 35 +-- .../setting_box/SettingBox.jsx | 8 +- .../ThresholdComponent.jsx | 19 +- .../setting_box/components/useSettingBox.jsx | 66 +++--- .../setting_box/device/Device.jsx | 220 +++++++++--------- .../message_input_box/MessageInputBox.jsx | 4 +- .../configs/useEnableAutoClearMessageBox.js | 28 +++ src-ui/logics/configs/useMicDeviceList.js | 14 ++ src-ui/logics/configs/useMicHostList.js | 14 ++ src-ui/logics/configs/useMicThreshold.js | 17 ++ src-ui/logics/configs/useSelectedMicDevice.js | 19 ++ src-ui/logics/configs/useSelectedMicHost.js | 19 ++ .../configs/useSelectedSpeakerDevice.js | 19 ++ .../configs/useSendMessageButtonType.js | 24 ++ src-ui/logics/configs/useSoftwareVersion.js | 14 ++ src-ui/logics/configs/useSpeakerDeviceList.js | 14 ++ src-ui/logics/configs/useSpeakerThreshold.js | 17 ++ src-ui/logics/useConfig.js | 169 -------------- src-ui/logics/useMainFunction.js | 91 ++++---- src-ui/logics/useMessage.js | 74 +++--- src-ui/logics/useReceiveRoutes.js | 60 +++-- src-ui/logics/useVolume.js | 11 +- vite.config.js | 1 + 23 files changed, 514 insertions(+), 443 deletions(-) create mode 100644 src-ui/logics/configs/useEnableAutoClearMessageBox.js create mode 100644 src-ui/logics/configs/useMicDeviceList.js create mode 100644 src-ui/logics/configs/useMicHostList.js create mode 100644 src-ui/logics/configs/useMicThreshold.js create mode 100644 src-ui/logics/configs/useSelectedMicDevice.js create mode 100644 src-ui/logics/configs/useSelectedMicHost.js create mode 100644 src-ui/logics/configs/useSelectedSpeakerDevice.js create mode 100644 src-ui/logics/configs/useSendMessageButtonType.js create mode 100644 src-ui/logics/configs/useSoftwareVersion.js create mode 100644 src-ui/logics/configs/useSpeakerDeviceList.js create mode 100644 src-ui/logics/configs/useSpeakerThreshold.js delete mode 100644 src-ui/logics/useConfig.js diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 03ae751f..8cd46ab6 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -1,7 +1,7 @@ import { getCurrent } from "@tauri-apps/api/window"; import { useEffect, useRef } from "react"; import { useStartPython } from "@logics/useStartPython"; -import { useConfig } from "@logics/useConfig"; +// import { useConfig } from "@logics/useConfig"; import { MainPage } from "./main_page/MainPage"; import { ConfigPage } from "./config_page/ConfigPage"; import styles from "./App.module.scss"; @@ -17,22 +17,28 @@ export const App = () => { }; +import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion"; +import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost"; +import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice"; +import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice"; +import { useMicThreshold } from "@logics_configs/useMicThreshold"; +import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold"; +import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox"; +import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType"; + const StartPythonFacadeComponent = () => { const { asyncStartPython } = useStartPython(); const hasRunRef = useRef(false); const main_page = getCurrent(); - const { - getSoftwareVersion, - // getMicHostList, - getSelectedMicHost, - // getMicDeviceList, - getSelectedMicDevice, - getSelectedSpeakerDevice, - - getEnableAutoClearMessageBox, - getSendMessageButtonType, - } = useConfig(); + const { getSoftwareVersion } = useSoftwareVersion(); + const { getSelectedMicHost } = useSelectedMicHost(); + const { getSelectedMicDevice } = useSelectedMicDevice(); + const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice(); + const { getMicThreshold } = useMicThreshold(); + const { getSpeakerThreshold } = useSpeakerThreshold(); + const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); + const { getSendMessageButtonType } = useSendMessageButtonType(); useEffect(() => { @@ -40,12 +46,13 @@ const StartPythonFacadeComponent = () => { if (!hasRunRef.current) { asyncStartPython().then((result) => { getSoftwareVersion(); - // getMicHostList(); getSelectedMicHost(); - // getMicDeviceList(); getSelectedMicDevice(); getSelectedSpeakerDevice(); + getMicThreshold(); + getSpeakerThreshold(); + getEnableAutoClearMessageBox(); getSendMessageButtonType(); }).catch((err) => { diff --git a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx index 90669da1..2969622e 100644 --- a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx @@ -2,16 +2,16 @@ import { useSelectedConfigTabId } from "@store"; import { Device } from "./device/Device"; import { Appearance } from "./appearance/Appearance"; -import { Others } from "./others/Others"; -import { AboutVrct } from "./about_vrct/AboutVrct"; +// import { Others } from "./others/Others"; +// import { AboutVrct } from "./about_vrct/AboutVrct"; export const SettingBox = () => { const { currentSelectedConfigTabId } = useSelectedConfigTabId(); switch (currentSelectedConfigTabId) { case "device": return ; - case "others": - return ; + // case "others": + // return ; // case "appearance": // return ; // case "about_vrct": 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 0ce81361..1670b73f 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 @@ -1,10 +1,8 @@ -import { useState } from "react"; - +import { useEffect, useState } from "react"; 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 { useConfig } from "@logics/useConfig"; export const ThresholdComponent = (props) => { return ( @@ -18,10 +16,15 @@ export const ThresholdComponent = (props) => { ); }; +import { useMicThreshold } from "@logics_configs/useMicThreshold"; const MicComponent = (props) => { - const { currentMicThreshold, setMicThreshold } = useConfig(); + const { currentMicThreshold, setMicThreshold } = useMicThreshold(); const [ui_threshold, setUiThreshold] = useState(currentMicThreshold); + useEffect(() => { + setUiThreshold(currentMicThreshold); + }, [currentMicThreshold]); + const setUiThresholdFunction = (payload_ui_threshold) => { setUiThreshold(payload_ui_threshold); }; @@ -47,11 +50,15 @@ const MicComponent = (props) => { ); }; +import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold"; const SpeakerComponent = (props) => { - - const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig(); + const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold(); const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold); + useEffect(() => { + setUiThreshold(currentSpeakerThreshold); + }, [currentSpeakerThreshold]); + const setUiThresholdFunction = (payload_ui_threshold) => { setUiThreshold(payload_ui_threshold); }; 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 6fd300da..5c1dc118 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 @@ -15,22 +15,48 @@ import { MessageFormat } from "./message_format/MessageFormat"; import { ActionButton } from "./action_button/ActionButton"; import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter"; -export const useSettingBox = () => { + +const useOnMouseLeaveDropdownMenu = () => { const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu(); - const DropdownMenuContainer = (props) => { - const onMouseLeaveFunction = () => { - updateIsOpenedDropdownMenu(""); - }; - - return ( -
- - -
- ); + const onMouseLeaveFunction = () => { + updateIsOpenedDropdownMenu(""); }; + return { onMouseLeaveFunction }; +}; + +export const DropdownMenuContainer = (props) => { + const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu(); + + return ( +
+ + +
+ ); +}; + + +export const ThresholdContainer = (props) => { + return ( +
+
+ + +
+
+ +
+
+ ); +}; + + +export const useSettingBox = () => { + console.log("useSettingBox______________"); + + const SliderContainer = (props) => { return (
@@ -76,20 +102,6 @@ export const useSettingBox = () => { ); }; - const ThresholdContainer = (props) => { - return ( -
-
- - -
-
- -
-
- ); - }; - const DeeplAuthKeyContainer = (props) => { return (
@@ -144,12 +156,10 @@ export const useSettingBox = () => { }; return { - DropdownMenuContainer, SliderContainer, CheckboxContainer, SwitchboxContainer, EntryContainer, - ThresholdContainer, RadioButtonContainer, DeeplAuthKeyContainer, MessageFormatContainer, 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 731e288d..0354f438 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,119 +1,119 @@ import { useTranslation } from "react-i18next"; -import { useSettingBox } from "../components/useSettingBox"; import { - useMicHostList, - useSelectedMicHost, - useSelectedMicDevice, - useMicDeviceList, - useSelectedSpeakerDevice, - useSpeakerDeviceList, -} from "@store"; - -import { useConfig } from "@logics/useConfig"; - + DropdownMenuContainer, + ThresholdContainer, +} from "../components/useSettingBox"; export const Device = () => { - const { t } = useTranslation(); - const { - DropdownMenuContainer, - ThresholdContainer, - } = useSettingBox(); - - - const { currentMicHostList } = useMicHostList(); - const { currentSelectedMicHost } = useSelectedMicHost(); - - const { currentMicDeviceList } = useMicDeviceList(); - const { currentSelectedMicDevice } = useSelectedMicDevice(); - - const { currentSpeakerDeviceList } = useSpeakerDeviceList(); - const { currentSelectedSpeakerDevice } = useSelectedSpeakerDevice(); - - const { - setSelectedMicHost, - setSelectedMicDevice, - getMicHostList, - getMicDeviceList, - setSelectedSpeakerDevice, - getSpeakerDeviceList, - } = useConfig(); - - const selectFunction = (selected_data) => { - switch (selected_data.dropdown_id) { - case "mic_host": - setSelectedMicHost(selected_data.selected_id); - break; - - case "mic_device": - setSelectedMicDevice(selected_data.selected_id); - break; - - case "speaker_device": - setSelectedSpeakerDevice(selected_data.selected_id); - break; - - default: - break; - } - }; - - // const volumeCheckStartFunction_Mic = () => { - // volumeCheckStart_Mic(); - // }; - // const volumeCheckStopFunction_Mic = () => { - // volumeCheckStop_Mic(); - // }; - return ( <> - - - - - - - - - - + + + + + ); +}; + +import { useMicHostList } from "@logics_configs/useMicHostList"; +import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost"; +const DropdownMenuContainer_MicHost = () => { + const { t } = useTranslation(); + const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost(); + const { currentMicHostList, getMicHostList } = useMicHostList(); + + const selectFunction = (selected_data) => { + setSelectedMicHost(selected_data.selected_id); + }; + + return ( + + ); +}; + +import { useMicDeviceList } from "@logics_configs/useMicDeviceList"; +import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice"; +const DropdownMenuContainer_MicDevice = () => { + const { t } = useTranslation(); + const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice(); + const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList(); + + const selectFunction = (selected_data) => { + setSelectedMicDevice(selected_data.selected_id); + }; + + + return ( + + ); +}; + +import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList"; +import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice"; +const DropdownMenuContainer_SpeakerDevice = () => { + const { t } = useTranslation(); + const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice(); + const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList(); + + const selectFunction = (selected_data) => { + setSelectedSpeakerDevice(selected_data.selected_id); + }; + + + return ( + + ); +}; + +const ThresholdContainer_Mic = () => { + const { t } = useTranslation(); + + return ( + + ); +}; + +const ThresholdContainer_Speaker = () => { + const { t } = useTranslation(); + + return ( + + ); }; \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx index dfffc2cb..4c987dab 100644 --- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx +++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx @@ -4,14 +4,14 @@ import SendMessageSvg from "@images/send_message.svg?react"; import { useMessage } from "@logics/useMessage"; import { store, useEnableAutoClearMessageBox } from "@store"; import { scrollToBottom } from "@logics/scrollToBottom"; -import { useConfig } from "@logics/useConfig"; +import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType"; export const MessageInputBox = () => { const [inputValue, setInputValue] = useState(""); const { sendMessage } = useMessage(); const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); - const { currentSendMessageButtonType } = useConfig(); + const { currentSendMessageButtonType } = useSendMessageButtonType(); const onSubmitFunction = (e) => { e.preventDefault(); diff --git a/src-ui/logics/configs/useEnableAutoClearMessageBox.js b/src-ui/logics/configs/useEnableAutoClearMessageBox.js new file mode 100644 index 00000000..bd115357 --- /dev/null +++ b/src-ui/logics/configs/useEnableAutoClearMessageBox.js @@ -0,0 +1,28 @@ +import { useEnableAutoClearMessageBox as useStoreEnableAutoClearMessageBox } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useEnableAutoClearMessageBox = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStoreEnableAutoClearMessageBox(); + + const getEnableAutoClearMessageBox = () => { + updateEnableAutoClearMessageBox(() => new Promise(() => {})); + asyncStdoutToPython("/config/enable_auto_clear_message_box"); + }; + + const toggleEnableAutoClearMessageBox = () => { + updateEnableAutoClearMessageBox(() => new Promise(() => {})); + if (currentEnableAutoClearMessageBox.data) { + asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox"); + } else { + asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox"); + } + }; + + return { + getEnableAutoClearMessageBox, + toggleEnableAutoClearMessageBox, + currentEnableAutoClearMessageBox, + updateEnableAutoClearMessageBox + }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/useMicDeviceList.js b/src-ui/logics/configs/useMicDeviceList.js new file mode 100644 index 00000000..201bcd19 --- /dev/null +++ b/src-ui/logics/configs/useMicDeviceList.js @@ -0,0 +1,14 @@ +import { useMicDeviceList as useStoreMicDeviceList } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useMicDeviceList = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentMicDeviceList, updateMicDeviceList } = useStoreMicDeviceList(); + + const getMicDeviceList = () => { + updateMicDeviceList(() => new Promise(() => {})); + asyncStdoutToPython("/controller/list_mic_device"); + }; + + return { currentMicDeviceList, getMicDeviceList, updateMicDeviceList }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/useMicHostList.js b/src-ui/logics/configs/useMicHostList.js new file mode 100644 index 00000000..08a33be2 --- /dev/null +++ b/src-ui/logics/configs/useMicHostList.js @@ -0,0 +1,14 @@ +import { useMicHostList as useStoreMicHostList } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useMicHostList = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentMicHostList, updateMicHostList } = useStoreMicHostList(); + + const getMicHostList = () => { + updateMicHostList(() => new Promise(() => {})); + asyncStdoutToPython("/controller/list_mic_host"); + }; + + return { currentMicHostList, getMicHostList, updateMicHostList }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/useMicThreshold.js b/src-ui/logics/configs/useMicThreshold.js new file mode 100644 index 00000000..bdcc4b36 --- /dev/null +++ b/src-ui/logics/configs/useMicThreshold.js @@ -0,0 +1,17 @@ +import { useMicThreshold as useStoreMicThreshold } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useMicThreshold = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { updateMicThreshold, currentMicThreshold } = useStoreMicThreshold(); + + const getMicThreshold = () => { + asyncStdoutToPython("/config/input_mic_energy_threshold"); + }; + + const setMicThreshold = (mic_threshold) => { + asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold); + }; + + return { getMicThreshold, setMicThreshold, currentMicThreshold, updateMicThreshold }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/useSelectedMicDevice.js b/src-ui/logics/configs/useSelectedMicDevice.js new file mode 100644 index 00000000..4e4eeb06 --- /dev/null +++ b/src-ui/logics/configs/useSelectedMicDevice.js @@ -0,0 +1,19 @@ +import { useSelectedMicDevice as useStoreSelectedMicDevice } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useSelectedMicDevice = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentSelectedMicDevice, updateSelectedMicDevice } = useStoreSelectedMicDevice(); + + const getSelectedMicDevice = () => { + updateSelectedMicDevice(() => new Promise(() => {})); + asyncStdoutToPython("/config/choice_mic_device"); + }; + + const setSelectedMicDevice = (selected_mic_device) => { + updateSelectedMicDevice(() => new Promise(() => {})); + asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device); + }; + + return { currentSelectedMicDevice, getSelectedMicDevice, updateSelectedMicDevice, setSelectedMicDevice }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/useSelectedMicHost.js b/src-ui/logics/configs/useSelectedMicHost.js new file mode 100644 index 00000000..108a4ef3 --- /dev/null +++ b/src-ui/logics/configs/useSelectedMicHost.js @@ -0,0 +1,19 @@ +import { useSelectedMicHost as useStoreSelectedMicHost } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useSelectedMicHost = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentSelectedMicHost, updateSelectedMicHost } = useStoreSelectedMicHost(); + + const getSelectedMicHost = () => { + updateSelectedMicHost(() => new Promise(() => {})); + asyncStdoutToPython("/config/choice_mic_host"); + }; + + const setSelectedMicHost = (selected_mic_host) => { + updateSelectedMicHost(() => new Promise(() => {})); + asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host); + }; + + return { currentSelectedMicHost, getSelectedMicHost, updateSelectedMicHost, setSelectedMicHost }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/useSelectedSpeakerDevice.js b/src-ui/logics/configs/useSelectedSpeakerDevice.js new file mode 100644 index 00000000..2437e55d --- /dev/null +++ b/src-ui/logics/configs/useSelectedSpeakerDevice.js @@ -0,0 +1,19 @@ +import { useSelectedSpeakerDevice as useStoreSelectedSpeakerDevice } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useSelectedSpeakerDevice = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStoreSelectedSpeakerDevice(); + + const getSelectedSpeakerDevice = () => { + updateSelectedSpeakerDevice(() => new Promise(() => {})); + asyncStdoutToPython("/config/choice_speaker_device"); + }; + + const setSelectedSpeakerDevice = (selected_speaker_device) => { + updateSelectedSpeakerDevice(() => new Promise(() => {})); + asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device); + }; + + return { currentSelectedSpeakerDevice, getSelectedSpeakerDevice, updateSelectedSpeakerDevice, setSelectedSpeakerDevice }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/useSendMessageButtonType.js b/src-ui/logics/configs/useSendMessageButtonType.js new file mode 100644 index 00000000..479469fc --- /dev/null +++ b/src-ui/logics/configs/useSendMessageButtonType.js @@ -0,0 +1,24 @@ +import { useSendMessageButtonType as useStoreSendMessageButtonType } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useSendMessageButtonType = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentSendMessageButtonType, updateSendMessageButtonType } = useStoreSendMessageButtonType(); + + const getSendMessageButtonType = () => { + updateSendMessageButtonType(() => new Promise(() => {})); + asyncStdoutToPython("/config/send_message_button_type"); + }; + + const setSendMessageButtonType = (selected_type) => { + updateSendMessageButtonType(() => new Promise(() => {})); + asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type); + }; + + return { + getSendMessageButtonType, + setSendMessageButtonType, + currentSendMessageButtonType, + updateSendMessageButtonType + }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/useSoftwareVersion.js b/src-ui/logics/configs/useSoftwareVersion.js new file mode 100644 index 00000000..f215084e --- /dev/null +++ b/src-ui/logics/configs/useSoftwareVersion.js @@ -0,0 +1,14 @@ +import { useSoftwareVersion as useStoreSoftwareVersion } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useSoftwareVersion = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentSoftwareVersion, updateSoftwareVersion } = useStoreSoftwareVersion(); + + const getSoftwareVersion = () => { + updateSoftwareVersion(() => new Promise(() => {})); + asyncStdoutToPython("/config/version"); + }; + + return { currentSoftwareVersion, getSoftwareVersion, updateSoftwareVersion }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/useSpeakerDeviceList.js b/src-ui/logics/configs/useSpeakerDeviceList.js new file mode 100644 index 00000000..1027d8d7 --- /dev/null +++ b/src-ui/logics/configs/useSpeakerDeviceList.js @@ -0,0 +1,14 @@ +import { useSpeakerDeviceList as useStoreSpeakerDeviceList } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useSpeakerDeviceList = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStoreSpeakerDeviceList(); + + const getSpeakerDeviceList = () => { + updateSpeakerDeviceList(() => new Promise(() => {})); + asyncStdoutToPython("/controller/list_speaker_device"); + }; + + return { currentSpeakerDeviceList, getSpeakerDeviceList, updateSpeakerDeviceList }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/useSpeakerThreshold.js b/src-ui/logics/configs/useSpeakerThreshold.js new file mode 100644 index 00000000..87d239da --- /dev/null +++ b/src-ui/logics/configs/useSpeakerThreshold.js @@ -0,0 +1,17 @@ +import { useSpeakerThreshold as useStoreSpeakerThreshold } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useSpeakerThreshold = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { updateSpeakerThreshold, currentSpeakerThreshold } = useStoreSpeakerThreshold(); + + const getSpeakerThreshold = () => { + asyncStdoutToPython("/config/input_speaker_energy_threshold"); + }; + + const setSpeakerThreshold = (speaker_threshold) => { + asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold); + }; + + return { getSpeakerThreshold, setSpeakerThreshold, currentSpeakerThreshold, updateSpeakerThreshold }; +}; \ No newline at end of file diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js deleted file mode 100644 index 51f2a7a5..00000000 --- a/src-ui/logics/useConfig.js +++ /dev/null @@ -1,169 +0,0 @@ -import { - useSoftwareVersion, - useMicHostList, - useSelectedMicHost, - useMicDeviceList, - useSelectedMicDevice, - useSpeakerDeviceList, - useSelectedSpeakerDevice, - - useEnableAutoClearMessageBox, - useSendMessageButtonType, - useMicThreshold, - useSpeakerThreshold, -} from "@store"; - -import { useStdoutToPython } from "./useStdoutToPython"; - -import { arrayToObject } from "@utils/arrayToObject"; - -export const useConfig = () => { - const { asyncStdoutToPython } = useStdoutToPython(); - - const { updateSoftwareVersion } = useSoftwareVersion(); - const { updateMicHostList } = useMicHostList(); - const { updateSelectedMicHost } = useSelectedMicHost(); - const { updateMicDeviceList } = useMicDeviceList(); - const { updateSelectedMicDevice } = useSelectedMicDevice(); - const { updateSpeakerDeviceList } = useSpeakerDeviceList(); - const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice(); - const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); - const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType(); - const { currentMicThreshold, updateMicThreshold } = useMicThreshold(); - const { currentSpeakerThreshold, updateSpeakerThreshold } = useSpeakerThreshold(); - - - const asyncPending = () => new Promise(() => {}); - return { - getSoftwareVersion: () => { - updateSoftwareVersion(asyncPending); - asyncStdoutToPython("/config/version"); - }, - updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data), - - // Device - getMicHostList: () => { - updateMicHostList(asyncPending); - asyncStdoutToPython("/controller/list_mic_host"); - }, - updateMicHostList: (payload) => { - updateMicHostList(arrayToObject(payload.data)); - }, - getSelectedMicHost: () => { - updateSelectedMicHost(asyncPending); - asyncStdoutToPython("/config/choice_mic_host"); - }, - updateSelectedMicHost: (payload) => { - updateSelectedMicHost(payload.data); - }, - setSelectedMicHost: (selected_mic_host) => { - updateSelectedMicHost(asyncPending); - asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host); - }, - - getMicDeviceList: () => { - updateMicDeviceList(asyncPending); - asyncStdoutToPython("/controller/list_mic_device"); - }, - updateMicDeviceList: (payload) => { - updateMicDeviceList(arrayToObject(payload.data)); - }, - getSelectedMicDevice: () => { - updateSelectedMicDevice(asyncPending); - asyncStdoutToPython("/config/choice_mic_device"); - }, - updateSelectedMicDevice: (payload) => { - updateSelectedMicDevice(payload.data); - }, - setSelectedMicDevice: (selected_mic_device) => { - updateSelectedMicDevice(asyncPending); - asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device); - }, - - getSpeakerDeviceList: () => { - updateSpeakerDeviceList(asyncPending); - asyncStdoutToPython("/controller/list_speaker_device"); - }, - updateSpeakerDeviceList: (payload) => { - updateSpeakerDeviceList(arrayToObject(payload.data)); - }, - getSelectedSpeakerDevice: () => { - updateSelectedSpeakerDevice(asyncPending); - asyncStdoutToPython("/config/choice_speaker_device"); - }, - updateSelectedSpeakerDevice: (payload) => { - updateSelectedSpeakerDevice(payload.data); - }, - setSelectedSpeakerDevice: (selected_speaker_device) => { - updateSelectedSpeakerDevice(asyncPending); - asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device); - }, - - updateMicHostAndDevice: (payload) => { - updateSelectedMicHost(payload.data.host); - updateSelectedMicDevice(payload.data.device); - }, - - getMicThreshold: () => { - // updateMicThreshold(asyncPending); - asyncStdoutToPython("/config/input_mic_energy_threshold"); - }, - setMicThreshold: (mic_threshold) => { - // updateMicThreshold(asyncPending); - asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold); - }, - currentMicThreshold: currentMicThreshold, - updateMicThreshold: (payload) => { - updateMicThreshold(payload.data); - }, - - getSpeakerThreshold: () => { - // updateSpeakerThreshold(asyncPending); - asyncStdoutToPython("/config/input_speaker_energy_threshold"); - }, - setSpeakerThreshold: (speaker_threshold) => { - // updateSpeakerThreshold(asyncPending); - asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold); - }, - currentSpeakerThreshold: currentSpeakerThreshold, - updateSpeakerThreshold: (payload) => { - updateSpeakerThreshold(payload.data); - }, - - - - // Others - getEnableAutoClearMessageBox: () => { - updateEnableAutoClearMessageBox(asyncPending); - asyncStdoutToPython("/config/enable_auto_clear_message_box"); - }, - toggleEnableAutoClearMessageBox: () => { - updateEnableAutoClearMessageBox(asyncPending); - if (currentEnableAutoClearMessageBox.data) { - asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox"); - } else { - asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox"); - } - }, - currentEnableAutoClearMessageBox: currentEnableAutoClearMessageBox, - updateEnableAutoClearMessageBox: (payload) => { - updateEnableAutoClearMessageBox(payload.data); - }, - - getSendMessageButtonType: () => { - updateSendMessageButtonType(asyncPending); - asyncStdoutToPython("/config/send_message_button_type"); - }, - setSendMessageButtonType: (selected_type) => { - updateSendMessageButtonType(asyncPending); - asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type); - }, - currentSendMessageButtonType: currentSendMessageButtonType, - updateSendMessageButtonType: (payload) => { - updateSendMessageButtonType(payload.data); - }, - - - - }; -}; \ No newline at end of file diff --git a/src-ui/logics/useMainFunction.js b/src-ui/logics/useMainFunction.js index c91d6785..f6ffa55a 100644 --- a/src-ui/logics/useMainFunction.js +++ b/src-ui/logics/useMainFunction.js @@ -7,7 +7,7 @@ import { useForegroundStatus, } from "@store"; -import { useStdoutToPython } from "./useStdoutToPython"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; export const useMainFunction = () => { const { @@ -33,53 +33,56 @@ export const useMainFunction = () => { const { asyncStdoutToPython } = useStdoutToPython(); const asyncPending = () => new Promise(() => {}); + const toggleTranslation = () => { + asyncUpdateTranslationStatus(asyncPending); + if (currentTranslationStatus.data) { + asyncStdoutToPython("/controller/callback_disable_translation"); + } else { + asyncStdoutToPython("/controller/callback_enable_translation"); + } + }; + + const toggleTranscriptionSend = () => { + asyncUpdateTranscriptionSendStatus(asyncPending); + if (currentTranscriptionSendStatus.data) { + asyncStdoutToPython("/controller/callback_disable_transcription_send"); + } else { + asyncStdoutToPython("/controller/callback_enable_transcription_send"); + } + }; + + const toggleTranscriptionReceive = () => { + asyncUpdateTranscriptionReceiveStatus(asyncPending); + if (currentTranscriptionReceiveStatus.data) { + asyncStdoutToPython("/controller/callback_disable_transcription_receive"); + } else { + asyncStdoutToPython("/controller/callback_enable_transcription_receive"); + } + }; + + const toggleForeground = () => { + const main_page = getCurrent(); + const is_foreground_enabled = !currentForegroundStatus.data; + main_page.setAlwaysOnTop(is_foreground_enabled); + updateForegroundStatus(is_foreground_enabled); + }; + return { - toggleTranslation: () => { - asyncUpdateTranslationStatus(asyncPending); - if (currentTranslationStatus.data) { - asyncStdoutToPython("/controller/callback_disable_translation"); - } else { - asyncStdoutToPython("/controller/callback_enable_translation"); - } - }, - currentTranslationStatus: currentTranslationStatus, - updateTranslationStatus: (payload) => { - updateTranslationStatus(payload.data); - }, + currentTranslationStatus, + toggleTranslation, + updateTranslationStatus, - toggleTranscriptionSend: () => { - asyncUpdateTranscriptionSendStatus(asyncPending); - if (currentTranscriptionSendStatus.data) { - asyncStdoutToPython("/controller/callback_disable_transcription_send"); - } else { - asyncStdoutToPython("/controller/callback_enable_transcription_send"); - } - }, - currentTranscriptionSendStatus: currentTranscriptionSendStatus, - updateTranscriptionSendStatus: (payload) => { - updateTranscriptionSendStatus(payload.data); - }, + currentTranscriptionSendStatus, + toggleTranscriptionSend, + updateTranscriptionSendStatus, - toggleTranscriptionReceive: () => { - asyncUpdateTranscriptionReceiveStatus(asyncPending); - if (currentTranscriptionReceiveStatus.data) { - asyncStdoutToPython("/controller/callback_disable_transcription_receive"); - } else { - asyncStdoutToPython("/controller/callback_enable_transcription_receive"); - } - }, - currentTranscriptionReceiveStatus: currentTranscriptionReceiveStatus, - updateTranscriptionReceiveStatus: (payload) => { - updateTranscriptionReceiveStatus(payload.data); - }, + currentTranscriptionReceiveStatus, + toggleTranscriptionReceive, + updateTranscriptionReceiveStatus, - toggleForeground: () => { - const main_page = getCurrent(); - const is_foreground_enabled = !currentForegroundStatus.data; - main_page.setAlwaysOnTop(is_foreground_enabled); - updateForegroundStatus(is_foreground_enabled); + currentForegroundStatus, + toggleForeground, + updateForegroundStatus, - }, - currentForegroundStatus: currentForegroundStatus, }; }; \ No newline at end of file diff --git a/src-ui/logics/useMessage.js b/src-ui/logics/useMessage.js index 089a72b4..1ff5c448 100644 --- a/src-ui/logics/useMessage.js +++ b/src-ui/logics/useMessage.js @@ -2,48 +2,50 @@ import { useMessageLogsStatus, } from "@store"; -import { useStdoutToPython } from "./useStdoutToPython"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; export const useMessage = () => { const { currentMessageLogsStatus, addMessageLogsStatus, updateMessageLogsStatus } = useMessageLogsStatus(); const { asyncStdoutToPython } = useStdoutToPython(); + const sendMessage = (message) => { + const uuid = crypto.randomUUID(); + const send_message_object = { + id: uuid, + message: message, + }; + asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object); + + addMessageLogsStatus({ + id: uuid, + category: "sent", + status: "pending", + created_at: generateTimeData(), + messages: { + original: message, + translated: [], + }, + }); + }; + + const updateSentMessageLogById = (payload) => { + updateMessageLogsStatus(updateItemById(data.id, payload.translation)); + }; + const addSentMessageLog = (payload) => { + const message_object = generateMessageObject(payload, "sent"); + addMessageLogsStatus(message_object); + }; + const addReceivedMessageLog = (payload) => { + const message_object = generateMessageObject(payload, "received"); + addMessageLogsStatus(message_object); + }; + return { - sendMessage: (message) => { - const uuid = crypto.randomUUID(); - const send_message_object = { - id: uuid, - message: message, - }; - asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object); - - addMessageLogsStatus({ - id: uuid, - category: "sent", - status: "pending", - created_at: generateTimeData(), - messages: { - original: message, - translated: [], - }, - }); - }, - currentMessageLogsStatus: currentMessageLogsStatus, - - updateSentMessageLog: (payload) => { - const data = payload.data; - updateMessageLogsStatus(updateItemById(data.id, data.translation)); - }, - addSentMessageLog: (payload) => { - const data = payload.data; - const message_object = generateMessageObject(data, "sent"); - addMessageLogsStatus(message_object); - }, - addReceivedMessageLog: (payload) => { - const data = payload.data; - const message_object = generateMessageObject(data, "received"); - addMessageLogsStatus(message_object); - }, + currentMessageLogsStatus, + sendMessage, + updateSentMessageLogById, + addSentMessageLog, + addReceivedMessageLog, }; }; diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 76ecfd21..e57cd785 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -1,8 +1,21 @@ +import { arrayToObject } from "@utils/arrayToObject"; import { useMainFunction } from "./useMainFunction"; -import { useConfig } from "./useConfig"; import { useMessage } from "./useMessage"; import { useVolume } from "./useVolume"; +import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion"; +import { useMicHostList } from "@logics_configs/useMicHostList"; +import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost"; +import { useMicDeviceList } from "@logics_configs/useMicDeviceList"; +import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice"; +import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList"; +import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice"; +import { useMicThreshold } from "@logics_configs/useMicThreshold"; +import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold"; +import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox"; +import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType"; + + export const useReceiveRoutes = () => { const { updateTranslationStatus, @@ -11,27 +24,23 @@ export const useReceiveRoutes = () => { } = useMainFunction(); const { - updateSentMessageLog, + updateSentMessageLogById, addSentMessageLog, addReceivedMessageLog, } = useMessage(); - const { - updateSoftwareVersion, - updateMicHostList, - updateSelectedMicHost, - updateMicDeviceList, - updateSelectedMicDevice, - updateMicHostAndDevice, + const { updateSoftwareVersion } = useSoftwareVersion(); + const { updateMicHostList } = useMicHostList(); + const { updateSelectedMicHost } = useSelectedMicHost(); + const { updateMicDeviceList } = useMicDeviceList(); + const { updateSelectedMicDevice } = useSelectedMicDevice(); + const { updateSpeakerDeviceList } = useSpeakerDeviceList(); + const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice(); + const { updateMicThreshold } = useMicThreshold(); + const { updateSpeakerThreshold } = useSpeakerThreshold(); + const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); + const { updateSendMessageButtonType } = useSendMessageButtonType(); - updateSpeakerDeviceList, - updateSelectedSpeakerDevice, - - updateEnableAutoClearMessageBox, - updateSendMessageButtonType, - updateMicThreshold, - updateSpeakerThreshold, - } = useConfig(); const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume(); @@ -46,15 +55,18 @@ export const useReceiveRoutes = () => { "/config/version": updateSoftwareVersion, - "/controller/list_mic_host": updateMicHostList, + "/controller/list_mic_host": (payload) => updateMicHostList(arrayToObject(payload)), "/config/choice_mic_host": updateSelectedMicHost, - "/controller/callback_set_mic_host": updateMicHostAndDevice, + "/controller/callback_set_mic_host": (payload) => { + updateSelectedMicHost(payload.host); + updateSelectedMicDevice(payload.device); + }, - "/controller/list_mic_device": updateMicDeviceList, + "/controller/list_mic_device": (payload) => updateMicDeviceList(arrayToObject(payload)), "/config/choice_mic_device": updateSelectedMicDevice, "/controller/callback_set_mic_device": updateSelectedMicDevice, - "/controller/list_speaker_device": updateSpeakerDeviceList, + "/controller/list_speaker_device": (payload) => updateSpeakerDeviceList(arrayToObject(payload)), "/config/choice_speaker_device": updateSelectedSpeakerDevice, "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice, @@ -68,11 +80,13 @@ export const useReceiveRoutes = () => { "/config/send_message_button_type": updateSendMessageButtonType, "/controller/callback_set_send_message_button_type": updateSendMessageButtonType, + "/config/input_mic_energy_threshold": updateMicThreshold, "/controller/callback_set_mic_energy_threshold": updateMicThreshold, + "/config/input_speaker_energy_threshold": updateSpeakerThreshold, "/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold, - "/controller/callback_messagebox_send": updateSentMessageLog, + "/controller/callback_messagebox_send": updateSentMessageLogById, "/action/transcription_send_mic_message": addSentMessageLog, "/action/transcription_receive_speaker_message": addReceivedMessageLog }; @@ -81,7 +95,7 @@ export const useReceiveRoutes = () => { switch (parsed_data.status) { case 200: const route = routes[parsed_data.endpoint]; - (route) ? route({ data: parsed_data.result }) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`); + (route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`); break; case 348: diff --git a/src-ui/logics/useVolume.js b/src-ui/logics/useVolume.js index 674a02e1..cde153bc 100644 --- a/src-ui/logics/useVolume.js +++ b/src-ui/logics/useVolume.js @@ -3,28 +3,25 @@ import { useSpeakerVolume, } from "@store"; -import { useStdoutToPython } from "./useStdoutToPython"; - +import { useStdoutToPython } from "@logics/useStdoutToPython"; export const useVolume = () => { const { asyncStdoutToPython } = useStdoutToPython(); const { updateMicVolume } = useMicVolume(); const { updateSpeakerVolume } = useSpeakerVolume(); - // 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); + updateMicVolume(payload); }, volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"), volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"), updateVolumeVariable_Speaker: (payload) => { - updateSpeakerVolume(payload.data); - } - + updateSpeakerVolume(payload); + }, }; }; \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 0aa096e4..35329ef6 100644 --- a/vite.config.js +++ b/vite.config.js @@ -40,6 +40,7 @@ export default defineConfig(async () => ({ "@images": path.resolve(__dirname, "src-ui/assets"), "@utils": path.resolve(__dirname, "src-ui/utils"), "@logics": path.resolve(__dirname, "src-ui/logics"), + "@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"), }, },