[Update] Main Page: Language Settings. LanguageSelector. It works functionally.

2024-09-18 23:46:46 +09:00
parent 0e623b73fd
commit e409e333e0
9 changed files with 204 additions and 90 deletions
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -31,6 +31,7 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 import { useUiLanguage } from "@logics_configs/useUiLanguage";

+import { useLanguageSettings } from "@logics/useLanguageSettings";
 import { useSelectableLanguageList } from "@logics/useSelectableLanguageList";

 const StartPythonFacadeComponent = () => {
@@ -50,6 +51,7 @@ const StartPythonFacadeComponent = () => {
    const { getSendMessageButtonType } = useSendMessageButtonType();
    const { getUiLanguage } = useUiLanguage();

+    const { getSelectedPresetTabNumber, getEnableMultiTranslation, getSelectedYourLanguages, getSelectedTargetLanguages } = useLanguageSettings();
    const { getSelectableLanguageList } = useSelectableLanguageList();


@@ -61,6 +63,10 @@ const StartPythonFacadeComponent = () => {

                getSoftwareVersion();

+                getSelectedPresetTabNumber();
+                getEnableMultiTranslation();
+                getSelectedYourLanguages();
+                getSelectedTargetLanguages();
                getSelectableLanguageList();

                getEnableAutoMicSelect();
--- a/src-ui/app/main_page/main_section/MainSection.jsx
+++ b/src-ui/app/main_page/main_section/MainSection.jsx
@@ -17,13 +17,23 @@ export const MainSection = () => {
    );
 };

+
+import { useLanguageSettings } from "@logics/useLanguageSettings";
 const HandleLanguageSelector = () => {
    const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+    const {
+        currentSelectedYourLanguages,
+        setSelectedYourLanguages,
+        currentSelectedTargetLanguages,
+        setSelectedTargetLanguages,
+    } = useLanguageSettings();

    if (currentIsOpenedLanguageSelector.your_language === true) {
-        return <LanguageSelector id="your_language"/>;
+        const onclickFunction_YourLanguage = (payload) => setSelectedYourLanguages(payload);
+        return <LanguageSelector id="your_language" onClickFunction={onclickFunction_YourLanguage}/>;
    } else if (currentIsOpenedLanguageSelector.target_language === true) {
-        return <LanguageSelector id="target_language"/>;
+        const onclickFunction_TargetLanguage = (payload) => setSelectedTargetLanguages(payload);
+        return <LanguageSelector id="target_language" onClickFunction={onclickFunction_TargetLanguage}/>;
    } else {
        return null;
    }
--- a/src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx
+++ b/src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx
@@ -4,14 +4,14 @@ import { useSelectableLanguageList } from "@logics/useSelectableLanguageList";
 import styles from "./LanguageSelector.module.scss";

 import { LanguageSelectorTopBar } from "./language_selector_top_bar/LanguageSelectorTopBar";
-export const LanguageSelector = ({ id }) => {
+export const LanguageSelector = ({ id, onClickFunction }) => {
    const { t } = useTranslation();
-    const { currentSelectableLanguageList, updateSelectableLanguageList } = useSelectableLanguageList();
+    const { currentSelectableLanguageList } = useSelectableLanguageList();


    const languageTitles = {
-        "your_language": t("selectable_language_window.title_your_language"),
-        "target_language": t("selectable_language_window.title_target_language")
+        your_language: t("selectable_language_window.title_your_language"),
+        target_language: t("selectable_language_window.title_target_language")
    };

    const language_selector_title = languageTitles[id] || "";
@@ -35,7 +35,7 @@ export const LanguageSelector = ({ id }) => {
            <div className={styles.language_list_scroll_wrapper}>
                <div className={styles.language_list}>
                    {Object.entries(groupedLanguages).map(([letter, languages]) => (
-                        <LanguageGroup key={letter} letter={letter} languages={languages} />
+                        <LanguageGroup key={letter} onClickFunction={onClickFunction} letter={letter} languages={languages} />
                    ))}
                </div>
            </div>
@@ -43,20 +43,28 @@ export const LanguageSelector = ({ id }) => {
    );
 };

-const LanguageGroup = ({ letter, languages }) => {
+const LanguageGroup = ({ onClickFunction, letter, languages }) => {
    return (
        <div className={styles.language_each_letter_box}>
            <p className={styles.language_latter}>{letter}</p>
            {languages.map((languageData, index) => (
-                <LanguageButton key={index} languageData={languageData} />
+                <LanguageButton key={index} onClickFunction={onClickFunction} languageData={languageData} />
            ))}
        </div>
    );
 };

-const LanguageButton = ({ languageData }) => {
+const LanguageButton = ({ onClickFunction, languageData }) => {
+
+    const adjustedOnClickFunction = () => {
+        onClickFunction({
+            language: languageData.language,
+            country: languageData.country
+        });
+    };
+
    return (
-        <div className={styles.language_button}>
+        <div className={styles.language_button} onClick={adjustedOnClickFunction}>
            <p className={styles.language_label}>{languageData.language} ({languageData.country})</p>
        </div>
    );
--- a/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
@@ -1,7 +1,5 @@
 import { useTranslation } from "react-i18next";
-
 import styles from "./LanguageSettings.module.scss";
-
 import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
 import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
 import { LanguageSwapButton } from "./language_swap_button/LanguageSwapButton";
@@ -9,11 +7,11 @@ import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/
 import { useStore_IsOpenedTranslatorSelector } from "@store";

 export const LanguageSettings = () => {
-    const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
+    const { updateIsOpenedTranslatorSelector } = useStore_IsOpenedTranslatorSelector();
    const closeTranslatorSelector = () => updateIsOpenedTranslatorSelector(false);

    return (
-        <div className={styles.container} onMouseLeave={closeTranslatorSelector} >
+        <div className={styles.container} onMouseLeave={closeTranslatorSelector}>
            <p className={styles.title}>Language Settings</p>
            <PresetTabSelector />
            <PresetContainer />
@@ -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: <MicSvg />,
        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: <HeadphonesSvg />,
        is_turned_on: currentTranscriptionReceiveStatus.data,
+        variable: target_language_data?.primary,
    };

    return (
        <div className={styles.preset_container}>
-            <LanguageSelectorOpenButton {...your_language_settings} />
+            <LanguageSelectorOpenButton {...yourLanguageSettings} />
            <LanguageSwapButton />
-            <LanguageSelectorOpenButton {...target_language_settings} />
+            <LanguageSelectorOpenButton {...targetLanguageSettings} />
            <TranslatorSelectorOpenButton />
        </div>
    );
-};
+};
--- 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 (
        <div className={styles.container}>
            <div className={styles.title_container}>
                {SvgComponent}
-                <p className={styles.title}>{props.title}</p>
+                <p className={styles.title}>{title}</p>
            </div>
-            <div className={styles.dropdown_menu_container} onClick={toggleLanguageSelector}>
-                <p className={styles.selected_language}>Japanese</p>
-                <p className={styles.selected_language}>(Japan)</p>
-                <ArrowLeftSvg className={class_names} />
+            <div className={styles.dropdown_menu_container} onClick={onClickFunction}>
+                <p className={styles.selected_language}>{languageText}</p>
+                <p className={styles.selected_language}>({countryText})</p>
+                <ArrowLeftSvg className={classNames} />
            </div>
        </div>
    );
--- 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 (
        <div className={styles.container}>
-            <Tab preset_number={1} />
-            <Tab preset_number={2} />
-            <Tab preset_number={3} />
+            <Tab preset_number={"1"} />
+            <Tab preset_number={"2"} />
+            <Tab preset_number={"3"} />
        </div>
    );
 };

 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 (