From 2c460bc8e5fa0bfa312f918e3e9356070cf9d6c3 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 16 Oct 2024 21:09:14 +0900 Subject: [PATCH] [Update] Config Page: Add Others Tab. Auto Clear Message Input Box, Send Message Button Type. --- src-ui/app/App.jsx | 6 +- .../setting_box/SettingBox.jsx | 6 +- .../setting_box/others/Others.jsx | 72 +++++++++++-------- .../message_input_box/MessageInputBox.jsx | 6 +- src-ui/logics/configs/index.js | 5 +- .../others/useEnableAutoClearMessageBox.js | 28 -------- .../useEnableAutoClearMessageInputBox.js | 28 ++++++++ .../others/useSendMessageButtonType.js | 24 +++++++ src-ui/logics/useReceiveRoutes.js | 10 +-- src-ui/store.js | 2 +- 10 files changed, 113 insertions(+), 74 deletions(-) delete mode 100644 src-ui/logics/configs/others/useEnableAutoClearMessageBox.js create mode 100644 src-ui/logics/configs/others/useEnableAutoClearMessageInputBox.js create mode 100644 src-ui/logics/configs/others/useSendMessageButtonType.js diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 95eab896..f421bb4c 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -41,7 +41,7 @@ import { useSelectedSpeakerDevice, useMicThreshold, useSpeakerThreshold, - useEnableAutoClearMessageBox, + useEnableAutoClearMessageInputBox, useSendMessageButtonType, useUiLanguage, useUiScaling, @@ -88,7 +88,7 @@ const StartPythonFacadeComponent = () => { const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice(); const { getMicThreshold, getEnableAutomaticMicThreshold } = useMicThreshold(); const { getSpeakerThreshold, getEnableAutomaticSpeakerThreshold } = useSpeakerThreshold(); - const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); + const { getEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox(); const { getSendMessageButtonType } = useSendMessageButtonType(); const { getUiLanguage } = useUiLanguage(); const { getUiScaling } = useUiScaling(); @@ -168,7 +168,7 @@ const StartPythonFacadeComponent = () => { getSpeakerPhraseTimeout(); getSpeakerMaxWords(); - getEnableAutoClearMessageBox(); + getEnableAutoClearMessageInputBox(); getSendMessageButtonType(); }).catch((err) => { console.error(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 29a52268..a38aa994 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 @@ -3,7 +3,7 @@ import { useStore_SelectedConfigTabId } from "@store"; import { Device } from "./device/Device"; import { Appearance } from "./appearance/Appearance"; import { Transcription } from "./transcription/Transcription"; -// import { Others } from "./others/Others"; +import { Others } from "./others/Others"; // import { AboutVrct } from "./about_vrct/AboutVrct"; export const SettingBox = () => { @@ -11,12 +11,12 @@ export const SettingBox = () => { switch (currentSelectedConfigTabId.data) { case "device": return ; - // case "others": - // return ; case "appearance": return ; case "transcription": return ; + case "others": + return ; // case "about_vrct": // return ; diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx index 3f4c3d0f..01eb050c 100644 --- a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx @@ -1,36 +1,52 @@ import { useTranslation } from "react-i18next"; -import { useSettingBox } from "../_components/useSettingBox"; -import { useConfig } from "@logics/useConfig"; + +import { + useEnableAutoClearMessageInputBox, + useSendMessageButtonType, +} from "@logics_configs"; + +import { + CheckboxContainer, + RadioButtonContainer, +} from "../_templates/Templates"; + export const Others = () => { - const { t } = useTranslation(); - const { - CheckboxContainer, - RadioButtonContainer, - } = useSettingBox(); - - const { currentEnableAutoClearMessageBox, toggleEnableAutoClearMessageBox } = useConfig(); - const { currentSendMessageButtonType, setSendMessageButtonType } = useConfig(); - - return ( <> - - - + + ); +}; + +const AutoClearMessageInputBoxContainer = () => { + const { t } = useTranslation(); + const { currentEnableAutoClearMessageInputBox, toggleEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox(); + + return ( + + ); +}; + +const SendMessageButtonTypeContainer = () => { + const { t } = useTranslation(); + const { currentSendMessageButtonType, setSendMessageButtonType } = useSendMessageButtonType(); + + 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 9e008f0d..6329f3d1 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 @@ -6,21 +6,21 @@ import { store } from "@store"; import { scrollToBottom } from "@utils/scrollToBottom"; import { useSendMessageButtonType, - useEnableAutoClearMessageBox, + useEnableAutoClearMessageInputBox, } from "@logics_configs"; export const MessageInputBox = () => { const [inputValue, setInputValue] = useState(""); const { sendMessage } = useMessage(); - const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); + const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox(); const { currentSendMessageButtonType } = useSendMessageButtonType(); const onSubmitFunction = (e) => { e.preventDefault(); sendMessage(inputValue); - if (currentEnableAutoClearMessageBox.data) setInputValue(""); + if (currentEnableAutoClearMessageInputBox.data) setInputValue(""); setTimeout(() => { scrollToBottom(store.log_box_ref); diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js index e54eac6f..158f6052 100644 --- a/src-ui/logics/configs/index.js +++ b/src-ui/logics/configs/index.js @@ -10,14 +10,13 @@ export { useSpeakerDeviceList } from "./device/useSpeakerDeviceList"; export { useSpeakerThreshold } from "./device/useSpeakerThreshold"; export { useMessageLogUiScaling } from "./appearance/useMessageLogUiScaling"; -// export { useRestoreWindowGeometry } from "./appearance/useRestoreWindowGeometry"; export { useSelectedFontFamily } from "./appearance/useSelectedFontFamily"; -export { useSendMessageButtonType } from "./appearance/useSendMessageButtonType"; export { useTransparency } from "./appearance/useTransparency"; export { useUiLanguage } from "./appearance/useUiLanguage"; export { useUiScaling } from "./appearance/useUiScaling"; -export { useEnableAutoClearMessageBox } from "./others/useEnableAutoClearMessageBox"; +export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox"; +export { useSendMessageButtonType } from "./others/useSendMessageButtonType"; export { useMicRecordTimeout } from "./transcription/useMicRecordTimeout"; export { useMicPhraseTimeout } from "./transcription/useMicPhraseTimeout"; diff --git a/src-ui/logics/configs/others/useEnableAutoClearMessageBox.js b/src-ui/logics/configs/others/useEnableAutoClearMessageBox.js deleted file mode 100644 index 3b6de175..00000000 --- a/src-ui/logics/configs/others/useEnableAutoClearMessageBox.js +++ /dev/null @@ -1,28 +0,0 @@ -import { useStore_EnableAutoClearMessageBox } from "@store"; -import { useStdoutToPython } from "@logics/useStdoutToPython"; - -export const useEnableAutoClearMessageBox = () => { - const { asyncStdoutToPython } = useStdoutToPython(); - const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox, pendingEnableAutoClearMessageBox } = useStore_EnableAutoClearMessageBox(); - - const getEnableAutoClearMessageBox = () => { - pendingEnableAutoClearMessageBox(); - asyncStdoutToPython("/get/data/auto_clear_message_box"); - }; - - const toggleEnableAutoClearMessageBox = () => { - pendingEnableAutoClearMessageBox(); - if (currentEnableAutoClearMessageBox.data) { - asyncStdoutToPython("/set/disable/auto_clear_message_box"); - } else { - asyncStdoutToPython("/set/enable/auto_clear_message_box"); - } - }; - - return { - currentEnableAutoClearMessageBox, - getEnableAutoClearMessageBox, - toggleEnableAutoClearMessageBox, - updateEnableAutoClearMessageBox, - }; -}; \ No newline at end of file diff --git a/src-ui/logics/configs/others/useEnableAutoClearMessageInputBox.js b/src-ui/logics/configs/others/useEnableAutoClearMessageInputBox.js new file mode 100644 index 00000000..d04c6094 --- /dev/null +++ b/src-ui/logics/configs/others/useEnableAutoClearMessageInputBox.js @@ -0,0 +1,28 @@ +import { useStore_EnableAutoClearMessageInputBox } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useEnableAutoClearMessageInputBox = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentEnableAutoClearMessageInputBox, updateEnableAutoClearMessageInputBox, pendingEnableAutoClearMessageInputBox } = useStore_EnableAutoClearMessageInputBox(); + + const getEnableAutoClearMessageInputBox = () => { + pendingEnableAutoClearMessageInputBox(); + asyncStdoutToPython("/get/data/auto_clear_message_box"); + }; + + const toggleEnableAutoClearMessageInputBox = () => { + pendingEnableAutoClearMessageInputBox(); + if (currentEnableAutoClearMessageInputBox.data) { + asyncStdoutToPython("/set/disable/auto_clear_message_box"); + } else { + asyncStdoutToPython("/set/enable/auto_clear_message_box"); + } + }; + + return { + currentEnableAutoClearMessageInputBox, + getEnableAutoClearMessageInputBox, + toggleEnableAutoClearMessageInputBox, + updateEnableAutoClearMessageInputBox, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/others/useSendMessageButtonType.js b/src-ui/logics/configs/others/useSendMessageButtonType.js new file mode 100644 index 00000000..a6a22add --- /dev/null +++ b/src-ui/logics/configs/others/useSendMessageButtonType.js @@ -0,0 +1,24 @@ +import { useStore_SendMessageButtonType } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useSendMessageButtonType = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentSendMessageButtonType, updateSendMessageButtonType, pendingSendMessageButtonType } = useStore_SendMessageButtonType(); + + const getSendMessageButtonType = () => { + pendingSendMessageButtonType(); + asyncStdoutToPython("/get/data/send_message_button_type"); + }; + + const setSendMessageButtonType = (send_message_button_type) => { + pendingSendMessageButtonType(); + asyncStdoutToPython("/set/data/send_message_button_type", send_message_button_type); + }; + + return { + currentSendMessageButtonType, + getSendMessageButtonType, + setSendMessageButtonType, + updateSendMessageButtonType, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 3befdd44..7d69ca19 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -27,7 +27,7 @@ import { useSelectedSpeakerDevice, useMicThreshold, useSpeakerThreshold, - useEnableAutoClearMessageBox, + useEnableAutoClearMessageInputBox, useSendMessageButtonType, useSelectedFontFamily, useUiLanguage, @@ -76,7 +76,7 @@ export const useReceiveRoutes = () => { const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice(); const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold(); const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold(); - const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); + const { updateEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox(); const { updateSendMessageButtonType } = useSendMessageButtonType(); const { updateUiLanguage } = useUiLanguage(); const { updateUiScaling } = useUiScaling(); @@ -292,9 +292,9 @@ export const useReceiveRoutes = () => { "/set/data/speaker_max_phrases": updateSpeakerMaxWords, // Others Tab - "/get/data/auto_clear_message_box": updateEnableAutoClearMessageBox, - "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageBox, - "/set/disable/auto_clear_message_box": updateEnableAutoClearMessageBox, + "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox, + "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox, + "/set/disable/auto_clear_message_box": updateEnableAutoClearMessageInputBox, "/get/data/send_message_button_type": updateSendMessageButtonType, "/set/data/send_message_button_type": updateSendMessageButtonType, diff --git a/src-ui/store.js b/src-ui/store.js index 9923d86b..9cbf6987 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -189,7 +189,7 @@ export const { atomInstance: Atom_SpeakerPhraseTimeout, useHook: useStore_Speake export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxWords } = createAtomWithHook(0, "SpeakerMaxWords"); // Others -export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook(true, "EnableAutoClearMessageBox"); +export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox"); export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType");