Language Settings
@@ -21,81 +19,70 @@ export const LanguageSettings = () => {
);
};
-
import MicSvg from "@images/mic.svg?react";
import HeadphonesSvg from "@images/headphones.svg?react";
import { useStore_IsOpenedLanguageSelector } from "@store";
import { useMainFunction } from "@logics/useMainFunction";
+import { useLanguageSettings } from "@logics/useLanguageSettings";
+
+// 言語セレクターをトグルする処理を関数化
+const toggleSelector = (selector, currentStatus, updateSelector) => {
+ if (currentStatus) {
+ updateSelector({ your_language: false, target_language: false });
+ } else {
+ updateSelector({
+ your_language: selector === "your_language",
+ target_language: selector === "target_language",
+ });
+ }
+};
+
+// 選択された言語データの取得を関数化
+const getSelectedLanguageData = (presetTabData, languageData) => {
+ return (presetTabData !== undefined && languageData !== undefined)
+ ? languageData[Number(presetTabData)]
+ : undefined;
+};
const PresetContainer = () => {
const { t } = useTranslation();
const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+ const { currentTranscriptionSendStatus, currentTranscriptionReceiveStatus } = useMainFunction();
const {
- currentTranscriptionSendStatus,
- currentTranscriptionReceiveStatus,
- } = useMainFunction();
+ currentSelectedPresetTabNumber,
+ currentSelectedYourLanguages,
+ currentSelectedTargetLanguages,
+ } = useLanguageSettings();
+
+ const your_language_data = getSelectedLanguageData(currentSelectedPresetTabNumber.data, currentSelectedYourLanguages.data);
+ const target_language_data = getSelectedLanguageData(currentSelectedPresetTabNumber.data, currentSelectedTargetLanguages.data);
- const closeLanguageSelector = () => {
- updateIsOpenedLanguageSelector({
- your_language: false,
- target_language: false,
- });
- };
-
- const toggleYourLanguageSelector = () => {
- if (currentIsOpenedLanguageSelector.your_language === true) {
- closeLanguageSelector();
- } else {
- updateIsOpenedLanguageSelector({
- your_language: true,
- target_language: false,
- });
- }
- };
-
- const toggleTargetLanguageSelector = () => {
- if (currentIsOpenedLanguageSelector.target_language === true) {
- closeLanguageSelector();
- } else {
- updateIsOpenedLanguageSelector({
- your_language: false,
- target_language: true,
- });
- }
- };
-
- const handleLanguageSelectorClick = (selector) => {
- if (selector === "your_language") {
- toggleYourLanguageSelector();
- } else if (selector === "target_language") {
- toggleTargetLanguageSelector();
- }
- };
-
- const your_language_settings = {
+ const yourLanguageSettings = {
title: t("main_page.your_language"),
is_opened: currentIsOpenedLanguageSelector.your_language,
- onClickFunction: () => handleLanguageSelectorClick("your_language"),
+ onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.your_language, updateIsOpenedLanguageSelector),
TurnedOnSvgComponent:
,
is_turned_on: currentTranscriptionSendStatus.data,
+ variable: your_language_data?.primary,
};
- const target_language_settings = {
+ const targetLanguageSettings = {
title: t("main_page.target_language"),
is_opened: currentIsOpenedLanguageSelector.target_language,
- onClickFunction: () => handleLanguageSelectorClick("target_language"),
+ onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.target_language, updateIsOpenedLanguageSelector),
TurnedOnSvgComponent:
,
is_turned_on: currentTranscriptionReceiveStatus.data,
+ variable: target_language_data?.primary,
};
return (
-
+
-
+
);
-};
\ No newline at end of file
+};
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx
index 9c269101..7d080914 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx
@@ -2,32 +2,31 @@ import clsx from "clsx";
import styles from "./LanguageSelectorOpenButton.module.scss";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
import { useSvg } from "@utils/useSvg";
-export const LanguageSelectorOpenButton = (props) => {
- const toggleLanguageSelector = () => {
- props.onClickFunction();
- };
-
- const class_names = clsx(styles["arrow_left_svg"], {
- [styles["reverse"]]: props.is_opened
+export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened, TurnedOnSvgComponent, is_turned_on, variable }) => {
+ const classNames = clsx(styles.arrow_left_svg, {
+ [styles.reverse]: is_opened,
});
- const SvgComponent = useSvg(props.TurnedOnSvgComponent,
- {className: clsx(styles["category_svg"], {
- [styles["is_turned_on"]]: props.is_turned_on
- })}
- );
+ const SvgComponent = useSvg(TurnedOnSvgComponent, {
+ className: clsx(styles.category_svg, {
+ [styles.is_turned_on]: is_turned_on,
+ }),
+ });
+
+ const languageText = variable?.language ?? "Loading...";
+ const countryText = variable?.country ?? "Loading...";
return (
{SvgComponent}
-
{props.title}
+
{title}
-
-
Japanese
-
(Japan)
-
+
+
{languageText}
+
({countryText})
+
);
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx
index 9442ea60..e5e8f694 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx
@@ -3,25 +3,25 @@ import styles from "./PresetTabSelector.module.scss";
export const PresetTabSelector = () => {
return (
-
-
-
+
+
+
);
};
import clsx from "clsx";
-import { useStore_SelectedPresetTabNumber } from "@store";
+import { useLanguageSettings } from "@logics/useLanguageSettings";
const Tab = (props) => {
- const { updateSelectedPresetTabNumber, currentSelectedPresetTabNumber } = useStore_SelectedPresetTabNumber();
+ const { currentSelectedPresetTabNumber, setSelectedPresetTabNumber } = useLanguageSettings();
const onclickFunction = () => {
- updateSelectedPresetTabNumber(props.preset_number);
+ setSelectedPresetTabNumber(props.preset_number);
};
- const class_names = clsx(styles["tab_container"], {
- [styles["is_selected"]]: (currentSelectedPresetTabNumber === props.preset_number) ? true : false
+ const class_names = clsx(styles.tab_container, {
+ [styles.is_selected]: (currentSelectedPresetTabNumber.data === props.preset_number) ? true : false
});
return (
diff --git a/src-ui/logics/useLanguageSettings.js b/src-ui/logics/useLanguageSettings.js
new file mode 100644
index 00000000..b2bc8a64
--- /dev/null
+++ b/src-ui/logics/useLanguageSettings.js
@@ -0,0 +1,84 @@
+import { useStore_SelectedPresetTabNumber, useStore_EnableMultiTranslation, useStore_SelectedYourLanguages, useStore_SelectedTargetLanguages } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useLanguageSettings = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentEnableMultiTranslation, updateEnableMultiTranslation } = useStore_EnableMultiTranslation();
+ const { currentSelectedYourLanguages, updateSelectedYourLanguages } = useStore_SelectedYourLanguages();
+ const { currentSelectedTargetLanguages, updateSelectedTargetLanguages } = useStore_SelectedTargetLanguages();
+ const { currentSelectedPresetTabNumber, updateSelectedPresetTabNumber } = useStore_SelectedPresetTabNumber();
+
+ const getEnableMultiTranslation = () => {
+ updateEnableMultiTranslation(() => new Promise(() => {}));
+ asyncStdoutToPython("/config/enable_multi_translation");
+ };
+
+ const getSelectedPresetTabNumber = () => {
+ updateSelectedPresetTabNumber(() => new Promise(() => {}));
+ asyncStdoutToPython("/config/selected_tab_no");
+ };
+
+ const setSelectedPresetTabNumber = (preset_number) => {
+ updateSelectedPresetTabNumber(() => new Promise(() => {}));
+
+ asyncStdoutToPython("/controller/callback_selected_language_preset_tab", preset_number);
+ };
+
+
+ const getSelectedYourLanguages = () => {
+ updateSelectedYourLanguages(() => new Promise(() => {}));
+ asyncStdoutToPython("/config/selected_tab_your_languages");
+ };
+
+ const setSelectedYourLanguages = (selected_language_data) => {
+ // updateSelectedYourLanguages(() => new Promise(() => {}));
+ const send_obj = {
+ ...currentSelectedYourLanguages.data,
+ [currentSelectedPresetTabNumber.data]: {
+ primary: {
+ language: selected_language_data.language,
+ country: selected_language_data.country,
+ }
+ }
+ };
+ asyncStdoutToPython("/controller/set_your_language_and_country", send_obj);
+ };
+
+
+ const getSelectedTargetLanguages = () => {
+ updateSelectedTargetLanguages(() => new Promise(() => {}));
+ asyncStdoutToPython("/config/selected_tab_target_languages");
+ };
+
+ const setSelectedTargetLanguages = (selected_language_data) => {
+ // updateSelectedTargetLanguages(() => new Promise(() => {}));
+ let send_obj = currentSelectedTargetLanguages.data;
+
+ send_obj[currentSelectedPresetTabNumber.data].primary.language = selected_language_data.language,
+ send_obj[currentSelectedPresetTabNumber.data].primary.country = selected_language_data.country,
+
+ asyncStdoutToPython("/controller/set_target_language_and_country", send_obj);
+ };
+
+ return {
+ currentSelectedPresetTabNumber,
+ getSelectedPresetTabNumber,
+ updateSelectedPresetTabNumber,
+ setSelectedPresetTabNumber,
+
+ currentEnableMultiTranslation,
+ getEnableMultiTranslation,
+ updateEnableMultiTranslation,
+ // setEnableMultiTranslation,
+
+ currentSelectedYourLanguages,
+ getSelectedYourLanguages,
+ updateSelectedYourLanguages,
+ setSelectedYourLanguages,
+
+ currentSelectedTargetLanguages,
+ getSelectedTargetLanguages,
+ updateSelectedTargetLanguages,
+ setSelectedTargetLanguages,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 875b77a4..fee89a4a 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -2,6 +2,7 @@ import { arrayToObject } from "@utils/arrayToObject";
import { useMainFunction } from "./useMainFunction";
import { useMessage } from "./useMessage";
import { useSelectableLanguageList } from "./useSelectableLanguageList";
+import { useLanguageSettings } from "./useLanguageSettings";
import { useVolume } from "./useVolume";
import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
@@ -28,6 +29,12 @@ export const useReceiveRoutes = () => {
updateTranscriptionReceiveStatus,
} = useMainFunction();
+ const {
+ updateSelectedPresetTabNumber,
+ updateEnableMultiTranslation,
+ updateSelectedYourLanguages,
+ updateSelectedTargetLanguages
+ } = useLanguageSettings();
const { updateSelectableLanguageList } = useSelectableLanguageList();
const {
@@ -72,12 +79,22 @@ export const useReceiveRoutes = () => {
"/controller/callback_enable_transcription_receive": updateTranscriptionReceiveStatus,
"/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
+ "/config/selected_tab_no": updateSelectedPresetTabNumber,
+ "/controller/callback_selected_language_preset_tab": updateSelectedPresetTabNumber,
+ "/config/enable_multi_translation": updateEnableMultiTranslation,
+ "/config/selected_tab_your_languages": updateSelectedYourLanguages,
+ "/controller/set_your_language_and_country": updateSelectedYourLanguages,
+ "/config/selected_tab_target_languages": updateSelectedTargetLanguages,
+ "/controller/set_your_language_and_country": updateSelectedTargetLanguages,
+
"/controller/list_language_and_country": updateSelectableLanguageList,
"/config/version": updateSoftwareVersion,
+ "/config/enable_mic_automatic_selection": updateEnableAutoMicSelect,
"/controller/callback_enable_mic_automatic_selection": updateEnableAutoMicSelect,
"/controller/callback_disable_mic_automatic_selection": updateEnableAutoMicSelect,
+ "/config/enable_speaker_automatic_selection": updateEnableAutoSpeakerSelect,
"/controller/callback_enable_speaker_automatic_selection": updateEnableAutoSpeakerSelect,
"/controller/callback_disable_speaker_automatic_selection": updateEnableAutoSpeakerSelect,
diff --git a/src-ui/store.js b/src-ui/store.js
index 907ef58b..0d62c1ab 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -103,14 +103,19 @@ export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_Foreground
export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs");
export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode");
+
export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook(
{ your_language: false, target_language: false },
"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_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAsyncAtomWithHook("", "SelectedPresetTabNumber");
+export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAsyncAtomWithHook(false, "EnableMultiTranslation");
+export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAsyncAtomWithHook({}, "SelectedYourLanguages");
+export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAsyncAtomWithHook({}, "SelectedTargetLanguages");
+
+
export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");