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] [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");