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 1/6] [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"); From 2cb4a41e643d75caf22c3bc0aeda3eee8655f90f Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 16 Oct 2024 21:23:04 +0900 Subject: [PATCH 2/6] [Update] Config Page: Move section Send Message Button Type where others tab to appearance tab. --- .../setting_box/appearance/Appearance.jsx | 21 +++++++++++++++++++ .../setting_box/others/Others.jsx | 21 ------------------- src-ui/logics/configs/index.js | 2 +- src-ui/logics/useReceiveRoutes.js | 8 +++---- src-ui/store.js | 3 +-- 5 files changed, 27 insertions(+), 28 deletions(-) diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx index 0bcab768..c838bc81 100644 --- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx @@ -7,6 +7,7 @@ import { useUiLanguage, useUiScaling, useMessageLogUiScaling, + useSendMessageButtonType, useSelectedFontFamily, useTransparency, } from "@logics_configs"; @@ -18,6 +19,7 @@ import { import { SliderContainer, DropdownMenuContainer, + RadioButtonContainer, } from "../_templates/Templates"; export const Appearance = () => { @@ -26,6 +28,7 @@ export const Appearance = () => { + @@ -157,6 +160,24 @@ const MessageLogUiScalingContainer = () => { ); }; +const SendMessageButtonTypeContainer = () => { + const { t } = useTranslation(); + const { currentSendMessageButtonType, setSendMessageButtonType } = useSendMessageButtonType(); + + return ( + + ); +}; + const FontFamilyContainer = () => { const { t } = useTranslation(); const { currentSelectedFontFamily, setSelectedFontFamily } = useSelectedFontFamily(); 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 01eb050c..b8de0d9c 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 @@ -2,12 +2,10 @@ import { useTranslation } from "react-i18next"; import { useEnableAutoClearMessageInputBox, - useSendMessageButtonType, } from "@logics_configs"; import { CheckboxContainer, - RadioButtonContainer, } from "../_templates/Templates"; @@ -15,7 +13,6 @@ export const Others = () => { return ( <> - ); }; @@ -31,22 +28,4 @@ const AutoClearMessageInputBoxContainer = () => { toggleFunction={toggleEnableAutoClearMessageInputBox} /> ); -}; - -const SendMessageButtonTypeContainer = () => { - const { t } = useTranslation(); - const { currentSendMessageButtonType, setSendMessageButtonType } = useSendMessageButtonType(); - - return ( - - ); }; \ No newline at end of file diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js index 158f6052..6d30baec 100644 --- a/src-ui/logics/configs/index.js +++ b/src-ui/logics/configs/index.js @@ -12,11 +12,11 @@ export { useSpeakerThreshold } from "./device/useSpeakerThreshold"; export { useMessageLogUiScaling } from "./appearance/useMessageLogUiScaling"; export { useSelectedFontFamily } from "./appearance/useSelectedFontFamily"; export { useTransparency } from "./appearance/useTransparency"; +export { useSendMessageButtonType } from "./others/useSendMessageButtonType"; export { useUiLanguage } from "./appearance/useUiLanguage"; export { useUiScaling } from "./appearance/useUiScaling"; 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/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 7d69ca19..1bad2043 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -28,11 +28,11 @@ import { useMicThreshold, useSpeakerThreshold, useEnableAutoClearMessageInputBox, - useSendMessageButtonType, useSelectedFontFamily, useUiLanguage, useUiScaling, useMessageLogUiScaling, + useSendMessageButtonType, useTransparency, useMicRecordTimeout, useMicPhraseTimeout, @@ -237,6 +237,9 @@ export const useReceiveRoutes = () => { "/get/data/textbox_ui_scaling": updateMessageLogUiScaling, "/set/data/textbox_ui_scaling": updateMessageLogUiScaling, + "/get/data/send_message_button_type": updateSendMessageButtonType, + "/set/data/send_message_button_type": updateSendMessageButtonType, + "/get/data/font_family": updateSelectedFontFamily, "/set/data/font_family": updateSelectedFontFamily, @@ -295,9 +298,6 @@ export const useReceiveRoutes = () => { "/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, }; const error_routes = { diff --git a/src-ui/store.js b/src-ui/store.js index 9cbf6987..c5b8114f 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -171,6 +171,7 @@ export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useS export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage"); export const { atomInstance: Atom_UiScaling, useHook: useStore_UiScaling } = createAtomWithHook(100, "UiScaling"); export const { atomInstance: Atom_MessageLogUiScaling, useHook: useStore_MessageLogUiScaling } = createAtomWithHook(100, "MessageLogUiScaling"); +export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType"); export const { atomInstance: Atom_SelectedFontFamily, useHook: useStore_SelectedFontFamily } = createAtomWithHook("Yu Gothic UI", "SelectedFontFamily"); export const { atomInstance: Atom_SelectableFontFamilyList, useHook: useStore_SelectableFontFamilyList } = createAtomWithHook({}, "SelectableFontFamilyList"); export const { atomInstance: Atom_Transparency, useHook: useStore_Transparency } = createAtomWithHook(100, "Transparency"); @@ -190,8 +191,6 @@ export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxW // Others export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox"); -export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType"); - export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector"); From e201cee24a8b220f11b2335d7c85c12bb45bba45 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 16 Oct 2024 22:44:26 +0900 Subject: [PATCH 3/6] [Update] Config Page: Others Tab. EnableSendOnlyTranslatedMessages, EnableAutoExportMessageLogs, EnableVrcMicMuteSync, EnableSendMessageToVrc --- src-ui/app/App.jsx | 15 +++++ .../setting_box/others/Others.jsx | 59 +++++++++++++++++++ src-ui/logics/configs/index.js | 4 ++ .../others/useEnableAutoExportMessageLogs.js | 28 +++++++++ .../others/useEnableSendMessageToVrc.js | 28 +++++++++ .../useEnableSendOnlyTranslatedMessages.js | 28 +++++++++ .../configs/others/useEnableVrcMicMuteSync.js | 28 +++++++++ src-ui/logics/useReceiveRoutes.js | 30 +++++++++- src-ui/store.js | 4 ++ 9 files changed, 222 insertions(+), 2 deletions(-) create mode 100644 src-ui/logics/configs/others/useEnableAutoExportMessageLogs.js create mode 100644 src-ui/logics/configs/others/useEnableSendMessageToVrc.js create mode 100644 src-ui/logics/configs/others/useEnableSendOnlyTranslatedMessages.js create mode 100644 src-ui/logics/configs/others/useEnableVrcMicMuteSync.js diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index f421bb4c..af1b4cf2 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -42,6 +42,10 @@ import { useMicThreshold, useSpeakerThreshold, useEnableAutoClearMessageInputBox, + useEnableSendOnlyTranslatedMessages, + useEnableAutoExportMessageLogs, + useEnableVrcMicMuteSync, + useEnableSendMessageToVrc, useSendMessageButtonType, useUiLanguage, useUiScaling, @@ -88,7 +92,13 @@ const StartPythonFacadeComponent = () => { const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice(); const { getMicThreshold, getEnableAutomaticMicThreshold } = useMicThreshold(); const { getSpeakerThreshold, getEnableAutomaticSpeakerThreshold } = useSpeakerThreshold(); + const { getEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox(); + const { getEnableSendOnlyTranslatedMessages } = useEnableSendOnlyTranslatedMessages(); + const { getEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs(); + const { getEnableVrcMicMuteSync } = useEnableVrcMicMuteSync(); + const { getEnableSendMessageToVrc } = useEnableSendMessageToVrc(); + const { getSendMessageButtonType } = useSendMessageButtonType(); const { getUiLanguage } = useUiLanguage(); const { getUiScaling } = useUiScaling(); @@ -170,6 +180,11 @@ const StartPythonFacadeComponent = () => { getEnableAutoClearMessageInputBox(); getSendMessageButtonType(); + + getEnableSendOnlyTranslatedMessages(); + getEnableAutoExportMessageLogs(); + getEnableVrcMicMuteSync(); + getEnableSendMessageToVrc(); }).catch((err) => { console.error(err); }); 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 b8de0d9c..71add0da 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 @@ -2,6 +2,10 @@ import { useTranslation } from "react-i18next"; import { useEnableAutoClearMessageInputBox, + useEnableSendOnlyTranslatedMessages, + useEnableAutoExportMessageLogs, + useEnableVrcMicMuteSync, + useEnableSendMessageToVrc, } from "@logics_configs"; import { @@ -13,6 +17,10 @@ export const Others = () => { return ( <> + + + + ); }; @@ -28,4 +36,55 @@ const AutoClearMessageInputBoxContainer = () => { toggleFunction={toggleEnableAutoClearMessageInputBox} /> ); +}; +const SendOnlyTranslatedMessagesContainer = () => { + const { t } = useTranslation(); + const { currentEnableSendOnlyTranslatedMessages, toggleEnableSendOnlyTranslatedMessages } = useEnableSendOnlyTranslatedMessages(); + + return ( + + ); +}; +const AutoExportMessageLogsContainer = () => { + const { t } = useTranslation(); + const { currentEnableAutoExportMessageLogs, toggleEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs(); + + return ( + + ); +}; +const VrcMicMuteSyncContainer = () => { + const { t } = useTranslation(); + const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useEnableVrcMicMuteSync(); + + return ( + + ); +}; +const SendMessageToVrcContainer = () => { + const { t } = useTranslation(); + const { currentEnableSendMessageToVrc, toggleEnableSendMessageToVrc } = useEnableSendMessageToVrc(); + + return ( + + ); }; \ No newline at end of file diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js index 6d30baec..f9555445 100644 --- a/src-ui/logics/configs/index.js +++ b/src-ui/logics/configs/index.js @@ -17,6 +17,10 @@ export { useUiLanguage } from "./appearance/useUiLanguage"; export { useUiScaling } from "./appearance/useUiScaling"; export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox"; +export { useEnableAutoExportMessageLogs } from "./others/useEnableAutoExportMessageLogs"; +export { useEnableSendMessageToVrc } from "./others/useEnableSendMessageToVrc"; +export { useEnableSendOnlyTranslatedMessages } from "./others/useEnableSendOnlyTranslatedMessages"; +export { useEnableVrcMicMuteSync } from "./others/useEnableVrcMicMuteSync"; export { useMicRecordTimeout } from "./transcription/useMicRecordTimeout"; export { useMicPhraseTimeout } from "./transcription/useMicPhraseTimeout"; diff --git a/src-ui/logics/configs/others/useEnableAutoExportMessageLogs.js b/src-ui/logics/configs/others/useEnableAutoExportMessageLogs.js new file mode 100644 index 00000000..8249a83a --- /dev/null +++ b/src-ui/logics/configs/others/useEnableAutoExportMessageLogs.js @@ -0,0 +1,28 @@ +import { useStore_EnableAutoExportMessageLogs } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useEnableAutoExportMessageLogs = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentEnableAutoExportMessageLogs, updateEnableAutoExportMessageLogs, pendingEnableAutoExportMessageLogs } = useStore_EnableAutoExportMessageLogs(); + + const getEnableAutoExportMessageLogs = () => { + pendingEnableAutoExportMessageLogs(); + asyncStdoutToPython("/get/data/logger_feature"); + }; + + const toggleEnableAutoExportMessageLogs = () => { + pendingEnableAutoExportMessageLogs(); + if (currentEnableAutoExportMessageLogs.data) { + asyncStdoutToPython("/set/disable/logger_feature"); + } else { + asyncStdoutToPython("/set/enable/logger_feature"); + } + }; + + return { + currentEnableAutoExportMessageLogs, + getEnableAutoExportMessageLogs, + toggleEnableAutoExportMessageLogs, + updateEnableAutoExportMessageLogs, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/others/useEnableSendMessageToVrc.js b/src-ui/logics/configs/others/useEnableSendMessageToVrc.js new file mode 100644 index 00000000..10ef4b0c --- /dev/null +++ b/src-ui/logics/configs/others/useEnableSendMessageToVrc.js @@ -0,0 +1,28 @@ +import { useStore_EnableSendMessageToVrc } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useEnableSendMessageToVrc = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentEnableSendMessageToVrc, updateEnableSendMessageToVrc, pendingEnableSendMessageToVrc } = useStore_EnableSendMessageToVrc(); + + const getEnableSendMessageToVrc = () => { + pendingEnableSendMessageToVrc(); + asyncStdoutToPython("/get/data/send_message_to_vrc"); + }; + + const toggleEnableSendMessageToVrc = () => { + pendingEnableSendMessageToVrc(); + if (currentEnableSendMessageToVrc.data) { + asyncStdoutToPython("/set/disable/send_message_to_vrc"); + } else { + asyncStdoutToPython("/set/enable/send_message_to_vrc"); + } + }; + + return { + currentEnableSendMessageToVrc, + getEnableSendMessageToVrc, + toggleEnableSendMessageToVrc, + updateEnableSendMessageToVrc, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/others/useEnableSendOnlyTranslatedMessages.js b/src-ui/logics/configs/others/useEnableSendOnlyTranslatedMessages.js new file mode 100644 index 00000000..7e9abefb --- /dev/null +++ b/src-ui/logics/configs/others/useEnableSendOnlyTranslatedMessages.js @@ -0,0 +1,28 @@ +import { useStore_EnableSendOnlyTranslatedMessages } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useEnableSendOnlyTranslatedMessages = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentEnableSendOnlyTranslatedMessages, updateEnableSendOnlyTranslatedMessages, pendingEnableSendOnlyTranslatedMessages } = useStore_EnableSendOnlyTranslatedMessages(); + + const getEnableSendOnlyTranslatedMessages = () => { + pendingEnableSendOnlyTranslatedMessages(); + asyncStdoutToPython("/get/data/send_only_translated_messages"); + }; + + const toggleEnableSendOnlyTranslatedMessages = () => { + pendingEnableSendOnlyTranslatedMessages(); + if (currentEnableSendOnlyTranslatedMessages.data) { + asyncStdoutToPython("/set/disable/send_only_translated_messages"); + } else { + asyncStdoutToPython("/set/enable/send_only_translated_messages"); + } + }; + + return { + currentEnableSendOnlyTranslatedMessages, + getEnableSendOnlyTranslatedMessages, + toggleEnableSendOnlyTranslatedMessages, + updateEnableSendOnlyTranslatedMessages, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/others/useEnableVrcMicMuteSync.js b/src-ui/logics/configs/others/useEnableVrcMicMuteSync.js new file mode 100644 index 00000000..16a853ab --- /dev/null +++ b/src-ui/logics/configs/others/useEnableVrcMicMuteSync.js @@ -0,0 +1,28 @@ +import { useStore_EnableVrcMicMuteSync } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useEnableVrcMicMuteSync = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentEnableVrcMicMuteSync, updateEnableVrcMicMuteSync, pendingEnableVrcMicMuteSync } = useStore_EnableVrcMicMuteSync(); + + const getEnableVrcMicMuteSync = () => { + pendingEnableVrcMicMuteSync(); + asyncStdoutToPython("/get/data/vrc_mic_mute_sync"); + }; + + const toggleEnableVrcMicMuteSync = () => { + pendingEnableVrcMicMuteSync(); + if (currentEnableVrcMicMuteSync.data) { + asyncStdoutToPython("/set/disable/vrc_mic_mute_sync"); + } else { + asyncStdoutToPython("/set/enable/vrc_mic_mute_sync"); + } + }; + + return { + currentEnableVrcMicMuteSync, + getEnableVrcMicMuteSync, + toggleEnableVrcMicMuteSync, + updateEnableVrcMicMuteSync, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 1bad2043..a5a27499 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -28,6 +28,10 @@ import { useMicThreshold, useSpeakerThreshold, useEnableAutoClearMessageInputBox, + useEnableSendOnlyTranslatedMessages, + useEnableAutoExportMessageLogs, + useEnableVrcMicMuteSync, + useEnableSendMessageToVrc, useSelectedFontFamily, useUiLanguage, useUiScaling, @@ -76,7 +80,13 @@ export const useReceiveRoutes = () => { const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice(); const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold(); const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold(); - const { updateEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox(); + + const { updateEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox(); + const { updateEnableSendOnlyTranslatedMessages } = useEnableSendOnlyTranslatedMessages(); + const { updateEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs(); + const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync(); + const { updateEnableSendMessageToVrc } = useEnableSendMessageToVrc(); + const { updateSendMessageButtonType } = useSendMessageButtonType(); const { updateUiLanguage } = useUiLanguage(); const { updateUiScaling } = useUiScaling(); @@ -95,7 +105,7 @@ export const useReceiveRoutes = () => { const { updateMicRecordTimeout } = useMicRecordTimeout(); const { updateMicPhraseTimeout } = useMicPhraseTimeout(); const { updateMicMaxWords } = useMicMaxWords(); - const { currentMicWordFilterList, updateMicWordFilterList } = useMicWordFilterList(); + const { updateMicWordFilterList } = useMicWordFilterList(); const { updateSpeakerRecordTimeout } = useSpeakerRecordTimeout(); const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout(); @@ -298,6 +308,22 @@ export const useReceiveRoutes = () => { "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox, "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox, "/set/disable/auto_clear_message_box": updateEnableAutoClearMessageInputBox, + + "/get/data/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages, + "/set/enable/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages, + "/set/disable/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages, + + "/get/data/logger_feature": updateEnableAutoExportMessageLogs, + "/set/enable/logger_feature": updateEnableAutoExportMessageLogs, + "/set/disable/logger_feature": updateEnableAutoExportMessageLogs, + + "/get/data/vrc_mic_mute_sync": updateEnableVrcMicMuteSync, + "/set/enable/vrc_mic_mute_sync": updateEnableVrcMicMuteSync, + "/set/disable/vrc_mic_mute_sync": updateEnableVrcMicMuteSync, + + "/get/data/send_message_to_vrc": updateEnableSendMessageToVrc, + "/set/enable/send_message_to_vrc": updateEnableSendMessageToVrc, + "/set/disable/send_message_to_vrc": updateEnableSendMessageToVrc, }; const error_routes = { diff --git a/src-ui/store.js b/src-ui/store.js index c5b8114f..1ea68913 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -191,6 +191,10 @@ export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxW // Others export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox"); +export const { atomInstance: Atom_EnableSendOnlyTranslatedMessages, useHook: useStore_EnableSendOnlyTranslatedMessages } = createAtomWithHook(false, "EnableSendOnlyTranslatedMessages"); +export const { atomInstance: Atom_EnableAutoExportMessageLogs, useHook: useStore_EnableAutoExportMessageLogs } = createAtomWithHook(false, "EnableAutoExportMessageLogs"); +export const { atomInstance: Atom_EnableVrcMicMuteSync, useHook: useStore_EnableVrcMicMuteSync } = createAtomWithHook(false, "EnableVrcMicMuteSync"); +export const { atomInstance: Atom_EnableSendMessageToVrc, useHook: useStore_EnableSendMessageToVrc } = createAtomWithHook(true, "EnableSendMessageToVrc"); export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector"); From 3e88604fd782fbe1937a02d698698f0a9d478cdd Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 16 Oct 2024 23:03:59 +0900 Subject: [PATCH 4/6] [bugfix] Config Page: Appearance tab. Fix the deign where Ui language section that was not putted selected mark by adding name attribute to radio element. --- .../_components/radio_button/RadioButton.jsx | 6 ++++-- .../_components/radio_button/RadioButton.module.scss | 8 ++++---- .../setting_box/appearance/Appearance.jsx | 4 +++- .../setting_box/appearance/Appearance.module.scss | 10 +++++----- 4 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx index d37b97c2..1c83847c 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx @@ -9,16 +9,18 @@ export const RadioButton = (props) => { ? <> { props.checked_variable.state === "pending" && } props.selectFunction(option.radio_button_id)} checked /> : props.selectFunction(option.radio_button_id)} /> diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss index b8e82e23..04532aa3 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss @@ -23,12 +23,12 @@ } } -input[type="radio"] { +.radio_button_input { appearance: none; margin: 0; - width: 2.4rem; - height: 2.4rem; - border: 0.3rem solid var(--dark_600_color); + width: 2rem; + height: 2rem; + border: 0.2rem solid var(--dark_600_color); border-radius: 50%; transition: border-color .1s ease, border-width .1s ease; cursor: inherit; diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx index c838bc81..635253b9 100644 --- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx @@ -63,8 +63,9 @@ const UiLanguageContainer = () => { {Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (