From f74ebc1942815ca44d3640703bd3bb66023a8943 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Fri, 13 Sep 2024 16:23:23 +0900 Subject: [PATCH 1/6] [Update] Config Page: Add Appearance Tab. Add UI Language section.(Functionally, too) --- locales/config.js | 2 +- src-ui/app/App.jsx | 16 ++++ .../setting_box/SettingBox.jsx | 4 +- .../setting_box/appearance/Appearance.jsx | 77 ++++++++++++++----- .../appearance/Appearance.module.scss | 61 +++++++++++++++ src-ui/logics/configs/useUiLanguage.js | 24 ++++++ src-ui/logics/useReceiveRoutes.js | 9 ++- src-ui/store.js | 12 ++- 8 files changed, 182 insertions(+), 23 deletions(-) create mode 100644 src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss create mode 100644 src-ui/logics/configs/useUiLanguage.js diff --git a/locales/config.js b/locales/config.js index aca15b8a..0c422a21 100644 --- a/locales/config.js +++ b/locales/config.js @@ -11,7 +11,7 @@ const resources = { en: { translation: translation_en }, ja: { translation: translation_ja }, ko: { translation: translation_ko }, - zh_Hant: { translation: translation_zh_Hant }, + "zh-Hant": { translation: translation_zh_Hant }, }; i18n diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index c085683f..971a6cb4 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -10,6 +10,7 @@ export const App = () => { return (
+
@@ -25,6 +26,7 @@ import { useMicThreshold } from "@logics_configs/useMicThreshold"; import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold"; import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox"; import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType"; +import { useUiLanguage } from "@logics_configs/useUiLanguage"; const StartPythonFacadeComponent = () => { const { asyncStartPython } = useStartPython(); @@ -39,12 +41,15 @@ const StartPythonFacadeComponent = () => { const { getSpeakerThreshold, getEnableAutomaticSpeakerThreshold } = useSpeakerThreshold(); const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); const { getSendMessageButtonType } = useSendMessageButtonType(); + const { getUiLanguage } = useUiLanguage(); useEffect(() => { main_page.setDecorations(true); if (!hasRunRef.current) { asyncStartPython().then((result) => { + getUiLanguage(); + getSoftwareVersion(); getSelectedMicHost(); getSelectedMicDevice(); @@ -64,5 +69,16 @@ const StartPythonFacadeComponent = () => { return () => hasRunRef.current = true; }, []); + return null; +}; + +import { useTranslation } from "react-i18next"; +const UiLanguageController = () => { + const { currentUiLanguage } = useUiLanguage(); + const { i18n } = useTranslation(); + + useEffect(() => { + i18n.changeLanguage(currentUiLanguage.data); + }, [currentUiLanguage]); return null; }; \ No newline at end of file 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 4e9dbb04..f293edcb 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 @@ -12,8 +12,8 @@ export const SettingBox = () => { return ; // case "others": // return ; - // case "appearance": - // return ; + case "appearance": + return ; // case "about_vrct": // return ; 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 33f96c08..913c8d04 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 @@ -1,24 +1,24 @@ +import clsx from "clsx"; import { useTranslation } from "react-i18next"; -import FolderOpenSvg from "@images/folder_open.svg?react"; - +import styles from "./Appearance.module.scss"; import { useSettingBox } from "../components/useSettingBox"; import { useStore_SelectedMicDevice, useStore_MicDeviceList } from "@store"; export const Appearance = () => { const { t } = useTranslation(); - const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice(); - const { currentMicDeviceList } = useStore_MicDeviceList(); + // const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice(); + // const { currentMicDeviceList } = useStore_MicDeviceList(); const { DropdownMenuContainer, - SliderContainer, - CheckboxContainer, - SwitchboxContainer, - EntryContainer, - ThresholdContainer, - RadioButtonContainer, - DeeplAuthKeyContainer, - MessageFormatContainer, - WordFilterContainer, - ActionButtonContainer, + // SliderContainer, + // CheckboxContainer, + // SwitchboxContainer, + // EntryContainer, + // ThresholdContainer, + // RadioButtonContainer, + // DeeplAuthKeyContainer, + // MessageFormatContainer, + // WordFilterContainer, + // ActionButtonContainer, } = useSettingBox(); const selectFunction = (selected_data) => { @@ -34,8 +34,13 @@ export const Appearance = () => { return ( <> - - + + + + + {/* @@ -61,8 +66,44 @@ export const Appearance = () => { - {}}/> + {}}/> */} ); -}; \ No newline at end of file +}; + +import { LabelComponent } from "../components/label_component/LabelComponent"; +import { useUiLanguage } from "@logics_configs/useUiLanguage"; + +const UiLanguageContainer = () => { + const { t } = useTranslation(); + const { currentUiLanguage, setUiLanguage } = useUiLanguage(); + + const SELECTABLE_UI_LANGUAGES_DICT = { + en: "English", + ja: "日本語", + ko: "한국어", + "zh-Hant": "繁體中文", + }; + + return ( +
+ +
+ {currentUiLanguage.state === "loading" && } + {Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => ( + + ))} +
+
+ ); +}; diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss new file mode 100644 index 00000000..f2d8ab50 --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss @@ -0,0 +1,61 @@ +@import "@scss_mixins"; + +.ui_language_container { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + padding: 2rem; + border-radius: 0.6rem; +} + +.ui_language_selector_container { + display: flex; + gap: 1rem; + position: relative; +} + + + +.radio_button_wrapper { + display: flex; + align-items: center; + cursor: pointer; + gap: 0.6rem; + padding: 0.6rem 1rem; + border-radius: 0.4rem; + position: relative; + &:hover { + background-color: var(--dark_850_color); + } + &:active { + background-color: var(--dark_925_color); + } + &.is_selected { + pointer-events: none; + } +} + +input[type="radio"] { + appearance: none; + margin: 0; + width: 1.6rem; + height: 1.6rem; + border: 0.2rem solid var(--dark_600_color); + border-radius: 50%; + transition: border-color .1s ease, border-width .1s ease; + cursor: inherit; + &:checked { + border-color: var(--primary_400_color); + border-width: 0.4rem; + } +} + +.radio_button_label { + font-size: 1.4rem; + font-weight: 400; +} + +.loader { + @include loader(2rem, 0.2rem, right, -3rem); +} \ No newline at end of file diff --git a/src-ui/logics/configs/useUiLanguage.js b/src-ui/logics/configs/useUiLanguage.js new file mode 100644 index 00000000..31e134e5 --- /dev/null +++ b/src-ui/logics/configs/useUiLanguage.js @@ -0,0 +1,24 @@ +import { useStore_UiLanguage } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useUiLanguage = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentUiLanguage, updateUiLanguage } = useStore_UiLanguage(); + + const getUiLanguage = () => { + updateUiLanguage(() => new Promise(() => {})); + asyncStdoutToPython("/config/ui_language"); + }; + + const setUiLanguage = (selected_ui_language) => { + updateUiLanguage(() => new Promise(() => {})); + asyncStdoutToPython("/controller/callback_set_ui_language", selected_ui_language); + }; + + return { + currentUiLanguage, + getUiLanguage, + updateUiLanguage, + setUiLanguage, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index fe05b0b1..ce8c7665 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -15,6 +15,8 @@ import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold"; import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox"; import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType"; +import { useUiLanguage } from "@logics_configs/useUiLanguage"; + export const useReceiveRoutes = () => { const { @@ -43,6 +45,8 @@ export const useReceiveRoutes = () => { const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); const { updateSendMessageButtonType } = useSendMessageButtonType(); + const { updateUiLanguage } = useUiLanguage(); + const { updateVolumeVariable_Mic, @@ -101,7 +105,10 @@ export const useReceiveRoutes = () => { "/controller/callback_disable_mic_dynamic_energy_threshold": updateEnableAutomaticMicThreshold, "/config/input_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold, "/controller/callback_enable_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold, - "/controller/callback_disable_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold, + + "/config/ui_language": updateUiLanguage, + "/controller/callback_set_ui_language": updateUiLanguage, + "/controller/callback_messagebox_send": updateSentMessageLogById, "/action/transcription_send_mic_message": addSentMessageLog, diff --git a/src-ui/store.js b/src-ui/store.js index 9fc296c1..ba2127a0 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -96,7 +96,6 @@ const createAsyncAtomWithHook = (initialValue, base_ame) => { export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion"); -export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage"); export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAsyncAtomWithHook(false, "TranslationStatus"); export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAsyncAtomWithHook(false, "TranscriptionSendStatus"); export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAsyncAtomWithHook(false, "TranscriptionReceiveStatus"); @@ -136,6 +135,17 @@ export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThr export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticMicThreshold"); export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticSpeakerThreshold"); + +// Appearance +export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAsyncAtomWithHook("en", "UiLanguage"); + + + + + + + + export const { atomInstance: Atom_SendMessageFormat, useHook: useStore_SendMessageFormat } = createAtomWithHook({ before: "", after: "", From 8198263b0227b79ef536fd38c5b07ff5c66508b1 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Fri, 13 Sep 2024 22:56:20 +0900 Subject: [PATCH 2/6] [Update] Disable mic/speaker volume check when config page is closed. --- src-ui/app/App.jsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 971a6cb4..135aa281 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -11,6 +11,7 @@ export const App = () => {
+
@@ -81,4 +82,24 @@ const UiLanguageController = () => { i18n.changeLanguage(currentUiLanguage.data); }, [currentUiLanguage]); return null; +}; + +import { useVolume } from "@logics/useVolume"; +import { useStore_IsOpenedConfigPage } from "@store"; +const ConfigPageCloseTrigger = () => { + const { currentIsOpenedConfigPage } = useStore_IsOpenedConfigPage(); + const { + currentMicThresholdCheckStatus, + volumeCheckStop_Mic, + currentSpeakerThresholdCheckStatus, + volumeCheckStop_Speaker, + } = useVolume(); + + useEffect(() => { + if (currentIsOpenedConfigPage === false) { + if (currentMicThresholdCheckStatus.data === true) volumeCheckStop_Mic(); + if (currentSpeakerThresholdCheckStatus.data === true) volumeCheckStop_Speaker(); + } + }, [currentIsOpenedConfigPage]); + return null; }; \ No newline at end of file From b6b67e9bd1fc974c8d743479d4f94c13814d6b8b Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Fri, 13 Sep 2024 23:41:41 +0900 Subject: [PATCH 3/6] [Update] Config Page: Set volume, that check mic/speaker volume, to 0 when config page is closed. --- src-ui/logics/useVolume.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src-ui/logics/useVolume.js b/src-ui/logics/useVolume.js index a1991159..6ae7587c 100644 --- a/src-ui/logics/useVolume.js +++ b/src-ui/logics/useVolume.js @@ -28,9 +28,13 @@ export const useVolume = () => { updateMicVolume(payload); }, currentMicThresholdCheckStatus: currentMicThresholdCheckStatus, - updateMicThresholdCheckStatus: (payload) => updateMicThresholdCheckStatus(payload), + updateMicThresholdCheckStatus: (payload) => { + updateMicThresholdCheckStatus(payload); + if (payload === false) updateMicVolume("0"); + }, volumeCheckStart_Speaker: () => { + updateSpeakerVolume("0"); updateSpeakerThresholdCheckStatus(asyncPending); asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"); }, @@ -42,7 +46,10 @@ export const useVolume = () => { updateSpeakerVolume(payload); }, currentSpeakerThresholdCheckStatus: currentSpeakerThresholdCheckStatus, - updateSpeakerThresholdCheckStatus: (payload) => updateSpeakerThresholdCheckStatus(payload), + updateSpeakerThresholdCheckStatus: (payload) => { + updateSpeakerThresholdCheckStatus(payload); + if (payload === false) updateSpeakerVolume("0"); + } }; }; \ No newline at end of file From 1424abe44ef3a84879f207276b2c28bfde7e855c Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Sun, 15 Sep 2024 07:45:44 +0900 Subject: [PATCH 4/6] [Update] Main Page: LanguageSelector. Fetch language list data from Python when starting up software. --- data.js | 2 -- src-ui/app/App.jsx | 7 +++++++ .../language_selector/LanguageSelector.jsx | 6 ++++-- src-ui/logics/useReceiveRoutes.js | 4 ++++ src-ui/logics/useSelectableLanguageList.js | 17 +++++++++++++++++ src-ui/store.js | 2 ++ 6 files changed, 34 insertions(+), 4 deletions(-) create mode 100644 src-ui/logics/useSelectableLanguageList.js diff --git a/data.js b/data.js index 7c4792de..800931a6 100644 --- a/data.js +++ b/data.js @@ -1,5 +1,3 @@ -export const language_list = [{'language': 'Afrikaans', 'country': 'South Africa'}, {'language': 'Albanian', 'country': 'Albania'}, {'language': 'Amharic', 'country': 'Ethiopia'}, {'language': 'Arabic', 'country': 'Algeria'}, {'language': 'Arabic', 'country': 'Bahrain'}, {'language': 'Arabic', 'country': 'Egypt'}, {'language': 'Arabic', 'country': 'Israel'}, {'language': 'Arabic', 'country': 'Iraq'}, {'language': 'Arabic', 'country': 'Jordan'}, {'language': 'Arabic', 'country': 'Kuwait'}, {'language': 'Arabic', 'country': 'Lebanon'}, {'language': 'Arabic', 'country': 'Mauritania'}, {'language': 'Arabic', 'country': 'Morocco'}, {'language': 'Arabic', 'country': 'Oman'}, {'language': 'Arabic', 'country': 'Qatar'}, {'language': 'Arabic', 'country': 'Saudi Arabia'}, {'language': 'Arabic', 'country': 'Palestine'}, {'language': 'Arabic', 'country': 'Syria'}, {'language': 'Arabic', 'country': 'Tunisia'}, {'language': 'Arabic', 'country': 'United Arab Emirates'}, {'language': 'Arabic', 'country': 'Yemen'}, {'language': 'Armenian', 'country': 'Armenia'}, {'language': 'Azerbaijani', 'country': 'Azerbaijan'}, {'language': 'Basque', 'country': 'Spain'}, {'language': 'Bengali', 'country': 'Bangladesh'}, {'language': 'Bengali', 'country': 'India'}, {'language': 'Bosnian', 'country': 'Bosnia and Herzegovina'}, {'language': 'Bulgarian', 'country': 'Bulgaria'}, {'language': 'Catalan', 'country': 'Spain'}, {'language': 'Chinese Simplified', 'country': 'China'}, {'language': 'Chinese Simplified', 'country': 'Hong Kong'}, {'language': 'Chinese Traditional', 'country': 'Taiwan'}, {'language': 'Chinese Traditional', 'country': 'Hong Kong'}, {'language': 'Croatian', 'country': 'Croatia'}, {'language': 'Czech', 'country': 'Czech Republic'}, {'language': 'Danish', 'country': 'Denmark'}, {'language': 'Dutch', 'country': 'Belgium'}, {'language': 'Dutch', 'country': 'Netherlands'}, {'language': 'English', 'country': 'Australia'}, {'language': 'English', 'country': 'Canada'}, {'language': 'English', 'country': 'Ghana'}, {'language': 'English', 'country': 'Hong Kong'}, {'language': 'English', 'country': 'India'}, {'language': 'English', 'country': 'Ireland'}, {'language': 'English', 'country': 'Kenya'}, {'language': 'English', 'country': 'New Zealand'}, {'language': 'English', 'country': 'Nigeria'}, {'language': 'English', 'country': 'Philippines'}, {'language': 'English', 'country': 'Singapore'}, {'language': 'English', 'country': 'South Africa'}, {'language': 'English', 'country': 'Tanzania'}, {'language': 'English', 'country': 'United Kingdom'}, {'language': 'English', 'country': 'United States'}, {'language': 'Estonian', 'country': 'Estonia'}, {'language': 'Filipino', 'country': 'Philippines'}, {'language': 'Finnish', 'country': 'Finland'}, {'language': 'French', 'country': 'Belgium'}, {'language': 'French', 'country': 'Canada'}, {'language': 'French', 'country': 'France'}, {'language': 'French', 'country': 'Switzerland'}, {'language': 'Galician', 'country': 'Spain'}, {'language': 'Georgian', 'country': 'Georgia'}, {'language': 'German', 'country': 'Austria'}, {'language': 'German', 'country': 'Germany'}, {'language': 'German', 'country': 'Switzerland'}, {'language': 'Greek', 'country': 'Greece'}, {'language': 'Gujarati', 'country': 'India'}, {'language': 'Hebrew', 'country': 'Israel'}, {'language': 'Hindi', 'country': 'India'}, {'language': 'Hungarian', 'country': 'Hungary'}, {'language': 'Icelandic', 'country': 'Iceland'}, {'language': 'Indonesian', 'country': 'Indonesia'}, {'language': 'Italian', 'country': 'Italy'}, {'language': 'Italian', 'country': 'Switzerland'}, {'language': 'Japanese', 'country': 'Japan'}, {'language': 'Kannada', 'country': 'India'}, {'language': 'Kazakh', 'country': 'Kazakhstan'}, {'language': 'Khmer', 'country': 'Cambodia'}, {'language': 'Korean', 'country': 'South Korea'}, {'language': 'Lao', 'country': 'Laos'}, {'language': 'Latvian', 'country': 'Latvia'}, {'language': 'Lithuanian', 'country': 'Lithuania'}, {'language': 'Macedonian', 'country': 'North Macedonia'}, {'language': 'Malay', 'country': 'Malaysia'}, {'language': 'Malayalam', 'country': 'India'}, {'language': 'Mongolian', 'country': 'Mongolia'}, {'language': 'Nepali', 'country': 'Nepal'}, {'language': 'Norwegian', 'country': 'Norway'}, {'language': 'Persian', 'country': 'Iran'}, {'language': 'Polish', 'country': 'Poland'}, {'language': 'Portuguese', 'country': 'Brazil'}, {'language': 'Portuguese', 'country': 'Portugal'}, {'language': 'Romanian', 'country': 'Romania'}, {'language': 'Russian', 'country': 'Russia'}, {'language': 'Serbian', 'country': 'Serbia'}, {'language': 'Sinhala', 'country': 'Sri Lanka'}, {'language': 'Slovak', 'country': 'Slovakia'}, {'language': 'Slovenian', 'country': 'Slovenia'}, {'language': 'Spanish', 'country': 'Argentina'}, {'language': 'Spanish', 'country': 'Bolivia'}, {'language': 'Spanish', 'country': 'Chile'}, {'language': 'Spanish', 'country': 'Colombia'}, {'language': 'Spanish', 'country': 'Costa Rica'}, {'language': 'Spanish', 'country': 'Dominican Republic'}, {'language': 'Spanish', 'country': 'Ecuador'}, {'language': 'Spanish', 'country': 'El Salvador'}, {'language': 'Spanish', 'country': 'Guatemala'}, {'language': 'Spanish', 'country': 'Honduras'}, {'language': 'Spanish', 'country': 'Mexico'}, {'language': 'Spanish', 'country': 'Nicaragua'}, {'language': 'Spanish', 'country': 'Panama'}, {'language': 'Spanish', 'country': 'Paraguay'}, {'language': 'Spanish', 'country': 'Peru'}, {'language': 'Spanish', 'country': 'Puerto Rico'}, {'language': 'Spanish', 'country': 'Spain'}, {'language': 'Spanish', 'country': 'United States'}, {'language': 'Spanish', 'country': 'Uruguay'}, {'language': 'Spanish', 'country': 'Venezuela'}, {'language': 'Sundanese', 'country': 'Indonesia'}, {'language': 'Swahili', 'country': 'Kenya'}, {'language': 'Swahili', 'country': 'Tanzania'}, {'language': 'Swedish', 'country': 'Sweden'}, {'language': 'Tamil', 'country': 'India'}, {'language': 'Tamil', 'country': 'malaysia'}, {'language': 'Tamil', 'country': 'Singapore'}, {'language': 'Tamil', 'country': 'Sri Lanka'}, {'language': 'Telugu', 'country': 'India'}, {'language': 'Thai', 'country': 'Thailand'}, {'language': 'Turkish', 'country': 'Turkey'}, {'language': 'Ukrainian', 'country': 'Ukraine'}, {'language': 'Urdu', 'country': 'India'}, {'language': 'Urdu', 'country': 'Pakistan'}, {'language': 'Uzbek', 'country': 'Uzbekistan'}, {'language': 'Vietnamese', 'country': 'Vietnam'}]; - export const translator_list = [ { translator_key: "DeepL", translator_name: "DeepL", is_available: true }, { translator_key: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false }, diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 135aa281..16247f71 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -29,6 +29,8 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType"; import { useUiLanguage } from "@logics_configs/useUiLanguage"; +import { useSelectableLanguageList } from "@logics/useSelectableLanguageList"; + const StartPythonFacadeComponent = () => { const { asyncStartPython } = useStartPython(); const hasRunRef = useRef(false); @@ -44,6 +46,8 @@ const StartPythonFacadeComponent = () => { const { getSendMessageButtonType } = useSendMessageButtonType(); const { getUiLanguage } = useUiLanguage(); + const { getSelectableLanguageList } = useSelectableLanguageList(); + useEffect(() => { main_page.setDecorations(true); @@ -52,6 +56,9 @@ const StartPythonFacadeComponent = () => { getUiLanguage(); getSoftwareVersion(); + + getSelectableLanguageList(); + getSelectedMicHost(); getSelectedMicDevice(); getSelectedSpeakerDevice(); diff --git a/src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx b/src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx index a23faee3..3c636428 100644 --- a/src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx +++ b/src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx @@ -1,11 +1,13 @@ import { useTranslation } from "react-i18next"; -import { language_list } from "@data"; +import { useSelectableLanguageList } from "@logics/useSelectableLanguageList"; import styles from "./LanguageSelector.module.scss"; import { LanguageSelectorTopBar } from "./language_selector_top_bar/LanguageSelectorTopBar"; export const LanguageSelector = ({ id }) => { const { t } = useTranslation(); + const { currentSelectableLanguageList, updateSelectableLanguageList } = useSelectableLanguageList(); + const languageTitles = { "your_language": t("selectable_language_window.title_your_language"), @@ -25,7 +27,7 @@ export const LanguageSelector = ({ id }) => { }, {}); }; - const groupedLanguages = groupLanguagesByFirstLetter(language_list); + const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList); return (
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index ce8c7665..cde18f2e 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -1,6 +1,7 @@ import { arrayToObject } from "@utils/arrayToObject"; import { useMainFunction } from "./useMainFunction"; import { useMessage } from "./useMessage"; +import { useSelectableLanguageList } from "./useSelectableLanguageList"; import { useVolume } from "./useVolume"; import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion"; @@ -25,6 +26,8 @@ export const useReceiveRoutes = () => { updateTranscriptionReceiveStatus, } = useMainFunction(); + const { updateSelectableLanguageList } = useSelectableLanguageList(); + const { updateSentMessageLogById, addSentMessageLog, @@ -63,6 +66,7 @@ export const useReceiveRoutes = () => { "/controller/callback_enable_transcription_receive": updateTranscriptionReceiveStatus, "/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus, + "/controller/list_language_and_country": updateSelectableLanguageList, "/config/version": updateSoftwareVersion, diff --git a/src-ui/logics/useSelectableLanguageList.js b/src-ui/logics/useSelectableLanguageList.js new file mode 100644 index 00000000..1e31a2d2 --- /dev/null +++ b/src-ui/logics/useSelectableLanguageList.js @@ -0,0 +1,17 @@ +import { useStore_SelectableLanguageList } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useSelectableLanguageList = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentSelectableLanguageList, updateSelectableLanguageList } = useStore_SelectableLanguageList(); + + const getSelectableLanguageList = () => { + asyncStdoutToPython("/controller/list_language_and_country"); + }; + + return { + currentSelectableLanguageList, + getSelectableLanguageList, + updateSelectableLanguageList, + }; +}; \ No newline at end of file diff --git a/src-ui/store.js b/src-ui/store.js index ba2127a0..b65e0395 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -108,6 +108,8 @@ export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_Is "IsOpenedLanguageSelector" ); +export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList"); + export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook(1, "SelectedPresetTabNumber"); export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage"); export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId"); From b56b182357761429e4744de254a45937cfcce07d Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Sun, 15 Sep 2024 08:06:15 +0900 Subject: [PATCH 5/6] [Update] Add some color on console.log for preventing mix up with code 348. and show result data when received invalid endpoint that when receive route is not ready to implement yet. --- src-ui/logics/useReceiveRoutes.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index cde18f2e..acc543ba 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -123,11 +123,11 @@ export const useReceiveRoutes = () => { switch (parsed_data.status) { case 200: const route = routes[parsed_data.endpoint]; - (route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`); + (route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}\nresult: ${JSON.stringify(parsed_data.result)}`); break; case 348: - console.log("from backend:", parsed_data); + console.log(`from backend: %c ${JSON.stringify(parsed_data)}`, style_348); break; default: @@ -137,4 +137,8 @@ export const useReceiveRoutes = () => { }; return { receiveRoutes }; -}; \ No newline at end of file +}; + +const style_348 = [ + "color: gray", +].join(";"); \ No newline at end of file From b7b1aa2d2fedd7fd61ed5aa618413f2016709774 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Sun, 15 Sep 2024 08:32:47 +0900 Subject: [PATCH 6/6] [Chore] Receive routes: Volume Check: Adjust the receive data format from python and put the data to update store function directly. --- src-ui/logics/useReceiveRoutes.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index acc543ba..6485513d 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -87,10 +87,10 @@ export const useReceiveRoutes = () => { "/action/check_mic_threshold_energy": updateVolumeVariable_Mic, "/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker, - "/controller/callback_enable_check_mic_threshold": () => updateMicThresholdCheckStatus(true), - "/controller/callback_disable_check_mic_threshold": () => updateMicThresholdCheckStatus(false), - "/controller/callback_enable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(true), - "/controller/callback_disable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(false), + "/controller/callback_enable_check_mic_threshold": updateMicThresholdCheckStatus, + "/controller/callback_disable_check_mic_threshold": updateMicThresholdCheckStatus, + "/controller/callback_enable_check_speaker_threshold": updateSpeakerThresholdCheckStatus, + "/controller/callback_disable_check_speaker_threshold": updateSpeakerThresholdCheckStatus, "/config/enable_auto_clear_message_box": updateEnableAutoClearMessageBox, "/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,